fix : import-picture-panel

- 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.

css/settings.css

@@ -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;
 }
 
@@ -164,4 +175,9 @@
   font-style: italic;
   font-weight: normal;
   text-shadow: none;
+}
+
+[name=smooth-resize-checkbox] {
+  margin : 0 8px;
+  vertical-align: middle;
 }

js/controller/settings/ImportController.js

@@ -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');

templates/settings/import.html

@@ -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>