Cleanup + updated tooltips

src/js/controller/settings/ImportController.js

@@ -7,19 +7,19 @@
   };
 
   ns.ImportController.prototype.init = function () {
-    this.hiddenOpenPiskelInput = $('[name=open-piskel-input]');
-    this.openPiskelInputButton = $('.open-piskel-button');
-
-    this.hiddenFileInput = $('[name=file-upload-input]');
-    this.fileInputButton = $('.file-input-button');
-
     this.browseLocalButton = document.querySelector('.browse-local-button');
     this.browseLocalButton.addEventListener('click', this.onBrowseLocalClick_.bind(this));
 
+    this.hiddenFileInput = $('[name=file-upload-input]');
     this.hiddenFileInput.change(this.onFileUploadChange_.bind(this));
+
+    this.fileInputButton = $('.file-input-button');
     this.fileInputButton.click(this.onFileInputClick_.bind(this));
 
+    this.hiddenOpenPiskelInput = $('[name=open-piskel-input]');
     this.hiddenOpenPiskelInput.change(this.onOpenPiskelChange_.bind(this));
+
+    this.openPiskelInputButton = $('.open-piskel-button');
     this.openPiskelInputButton.click(this.onOpenPiskelClick_.bind(this));
 
     this.prevSessionContainer = $('.previous-session');
@@ -84,12 +84,6 @@
     }
   };
 
-  ns.ImportController.prototype.enableDisabledSections_ = function () {
-    this.fileInputButton.removeClass('button-primary');
-    this.fileInputButton.blur();
-    $('.import-options').show();
-  };
-
   ns.ImportController.prototype.isImage_ = function (file) {
     return file.type.indexOf('image') === 0;
   };

src/js/controller/settings/ResizeController.js

@@ -27,7 +27,6 @@
     var width = parseInt(this.resizeWidth.val(), 10);
     var height = parseInt(this.resizeHeight.val(), 10);
 
-
     var resizeContentEnabled = this.isResizeContentEnabled_();
     var resizedLayers = this.piskelController.getLayers().map(this.resizeLayer_.bind(this));
 

src/js/controller/settings/SaveController.js

@@ -9,16 +9,9 @@
    * @public
    */
   ns.SaveController.prototype.init = function () {
-    this.saveForm = $('form[name=save-form]');
-    this.nameInput =  $('#save-name');
-    this.descriptionInput = $('#save-description');
-    this.isPublicCheckbox = $('input[name=save-public-checkbox]');
-    this.saveOnlineButton = $('#save-online-button');
-    this.saveLocalButton = $('#save-browser-button');
-    this.saveFileButton = $('#save-file-button');
 
     // Only available in app-engine mode ...
-    this.piskelName = $('.piskel-name').get(0);
+    this.piskelName = document.querySelector('.piskel-name');
 
     this.saveOnlineStatus = $('#save-online-status');
 
@@ -26,16 +19,26 @@
     this.timestamp = new Date();
 
     var descriptor = this.piskelController.getPiskel().getDescriptor();
-    this.nameInput.val(descriptor.name);
+    this.descriptionInput = $('#save-description');
     this.descriptionInput.val(descriptor.description);
 
+    this.isPublicCheckbox = $('input[name=save-public-checkbox]');
     this.isPublicCheckbox.prop('checked', descriptor.isPublic);
 
+    this.saveFileButton = $('#save-file-button');
     this.saveFileButton.click(this.saveFile_.bind(this));
+
+    this.saveLocalButton = $('#save-browser-button');
     this.saveLocalButton.click(this.saveLocal_.bind(this));
+
+    this.saveOnlineButton = $('#save-online-button');
     this.saveOnlineButton.click(this.saveOnline_.bind(this));
+
+    this.saveForm = $('form[name=save-form]');
     this.saveForm.submit(this.onSaveFormSubmit_.bind(this));
 
+    this.nameInput =  $('#save-name');
+    this.nameInput.val(descriptor.name);
     this.nameInput.keyup(this.updateLocalStatusFilename_.bind(this));
 
     if (!pskl.app.isLoggedIn()) {

src/templates/settings.html

@@ -1,38 +1,36 @@
 <div class="vertical-centerer">
-
-
   <div
     data-setting="user"
     class="tool-icon gear-icon"
-    title="Preferences"
+    title="<span style='color:gold'>PREFERENCES</span></br>"
     rel="tooltip" data-placement="left">
   </div>
 
   <div
     data-setting="resize"
     class="tool-icon resize-icon"
-    title="Resize the drawing area"
+    title="<span style='color:gold'>RESIZE</span></br>Resize the drawing area"
     rel="tooltip" data-placement="left">
   </div>
 
   <div
     data-setting="save"
     class="tool-icon save-icon"
-    title="Save to your gallery, save locally<br/>or export as a file"
+    title="<span style='color:gold'>SAVE</span></br>Save to your gallery, save locally<br/>or export as a file"
     rel="tooltip" data-placement="left" >
   </div>
 
   <div
     data-setting="export"
     class="tool-icon export-icon"
-    title="Export as Image, as Spritesheet<br/>or as Animated GIF"
+    title="<span style='color:gold'>EXPORT</span></br>Export as Image, as Spritesheet<br/>or as Animated GIF"
     rel="tooltip" data-placement="left">
   </div>
 
   <div
     data-setting="import"
     class="tool-icon local-storage-icon"
-    title="Import an existing image,<br/>an animated GIF or a .piskel file"
+    title="<span style='color:gold'>IMPORT</span></br>Import an existing image,<br/>an animated GIF or a .piskel file"
     rel="tooltip" data-placement="left">
   </div>