mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

fix : import-picture-panel

Browse Source 
- When imported 1 picture and then importing another one, the picture
  preview was not cleaned and was displaying the two images side by side.
  Fixed in ImportController.js
- Switched all double-quoted strings in ImportController to single-quoted
  strings. Should enforce this using jshint
- Aligned all inputs in the import picture panel
- Renamed 'Preview :' import section to 'Info :'. Mostly it's to make it
  shorter, but also I'd like to display additional information to the
  right of the preview in the future.
This commit is contained in:
jdescottes 2013-11-02 11:02:03 +01:00
parent 2ba451d42c
commit eb559eee0c
3 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/settings.css
View File

@ -129,6 +129,14 @@
margin: 15px 0;
}
.import-section-title {
display : inline-block;
}
.import-section-title-small {
width: 35px;
}
.import-section-disabled {
color : #888;
}
@ -139,17 +147,20 @@
width: 60px;
border : 1px dashed #999;
border-radius: 3px;
margin-left : 10px;
}
.import-resize-field {
width: 30px;
margin: 0px 8px;
margin-right: 8px;
text-align: right;
}
.import-resize-field:nth-of-type(2) {
margin-left: 5px;
}
.file-input-button {
margin: 0px 8px;
margin-right: 8px;
border-radius: 2px;
}
@ -165,3 +176,8 @@
font-weight: normal;
text-shadow: none;
}
[name=smooth-resize-checkbox] {
margin : 0 8px;
vertical-align: middle;
}

25
js/controller/settings/ImportController.js
View File

@ -9,18 +9,18 @@
};
ns.ImportController.prototype.init = function () {
this.importForm = $("[name=import-form]");
this.hiddenFileInput = $("[name=file-upload-input]");
this.fileInputButton = $(".file-input-button");
this.fileInputStatus = $(".file-input-status");
this.importForm = $('[name=import-form]');
this.hiddenFileInput = $('[name=file-upload-input]');
this.fileInputButton = $('.file-input-button');
this.fileInputStatus = $('.file-input-status');
this.fileInputStatus.html(DEFAULT_FILE_STATUS);
this.importPreview = $(".import-section-preview");
this.importPreview = $('.import-section-preview');
this.resizeWidth = $("[name=resize-width]");
this.resizeHeight = $("[name=resize-height]");
this.smoothResize = $("[name=smooth-resize-checkbox]");
this.submitButton = $("[name=import-submit]");
this.resizeWidth = $('[name=resize-width]');
this.resizeHeight = $('[name=resize-height]');
this.smoothResize = $('[name=smooth-resize-checkbox]');
this.submitButton = $('[name=import-submit]');
this.importForm.submit(this.onImportFormSubmit_.bind(this));
this.hiddenFileInput.change(this.onFileUploadChange_.bind(this));
@ -77,7 +77,7 @@
this.enableDisabledSections_();
} else {
this.reset_();
throw "File is not an image : " + file.type;
throw 'File is not an image : ' + file.type;
}
}
};
@ -119,7 +119,8 @@
this.resizeWidth.val(w);
this.resizeHeight.val(h);
this.importPreview.width("auto");
this.importPreview.width('auto');
this.importPreview.html('');
this.importPreview.append(this.createImagePreview_());
};
@ -144,7 +145,7 @@
ns.ImportController.prototype.importImageToPiskel_ = function () {
if (this.importedImage_) {
if (window.confirm("You are about to create a new Piskel, unsaved changes will be lost.")) {
if (window.confirm('You are about to create a new Piskel, unsaved changes will be lost.')) {
var w = this.resizeWidth.val(),
h = this.resizeHeight.val(),
smoothing = !!this.smoothResize.prop('checked');

6
templates/settings/import.html
View File

@ -5,7 +5,7 @@
<div class="settings-item">
<form action="" method="POST" name="import-form">
<div class="import-section">
<span class="import-section-title">File :</span>
<span class="import-section-title import-section-title-small">File :</span>
<button type="button" class="button button-primary file-input-button">Browse</button>
<span class="file-input-status"></span>
<input style="display:none"
@ -13,11 +13,11 @@
value="file" accept="image/*"/>
</div>
<div class="import-section import-section-disabled">
<span class="import-section-title" style="vertical-align:top">Preview :</span>
<span class="import-section-title import-section-title-small" style="vertical-align:top">Info :</span>
<div class="import-section-preview"></div>
</div>
<div class="import-section import-section-disabled">
<span class="import-section-title">Size :</span>
<span class="import-section-title import-section-title-small">Size :</span>
<input type="text" disabled="disabled" class="textfield import-resize-field" name="resize-width"/>x
<input type="text" disabled="disabled" class="textfield import-resize-field" name="resize-height"/>
</div>