Cleaning up settings and dialogs CSS

src/css/dialogs-import-image.css

@@ -2,6 +2,19 @@
 /* Import dialog                                                                                 */
 /************************************************************************************************/
 
+#dialog-container.import-image {
+  width: 550px;
+  height: 360px;
+  top : 50%;
+  left : 50%;
+  position : absolute;
+  margin-left: -250px;
+}
+
+.show #dialog-container.import-image {
+  margin-top: -150px;
+}
+
 .import-subsection {
   margin-left: 25px;
 }
@@ -57,14 +70,17 @@
   display: inline-block;
   overflow: hidden;
 
-  word-break : break-all;
+  width: 200px;
   vertical-align: middle;
+
+  word-break : break-all;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
   font-style: italic;
   font-weight: normal;
   text-shadow: none;
-  width: 200px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  color: gold;
 }
 
 [name=smooth-resize-checkbox] {
@@ -72,13 +88,13 @@
 }
 
 .dialog-import-body {
-  padding:10px 20px;
+  padding: 10px 20px;
   font-size:1.3em
 }
 
 .import-button {
   font-size: 1em;
-  height: auto;
-  padding: 5px 10px;
+  height: 28px;
+  padding: 0px 10px;
   margin-top: 15px;
 }

src/css/dialogs.css

@@ -65,19 +65,6 @@
   margin-top: -250px;
 }
 
-#dialog-container.import-image {
-  width: 550px;
-  height: 350px;
-  top : 50%;
-  left : 50%;
-  position : absolute;
-  margin-left: -250px;
-}
-
-.show #dialog-container.import-image {
-  margin-top: -150px;
-}
-
 .dialog-wrapper {
   height: 100%;
   position : relative;

src/css/forms.css

@@ -10,6 +10,8 @@
   border-radius : 2px;
   padding : 3px 10px;
   color : white;
+
+  height: 23px;
 }
 
 .textfield[disabled=disabled] {

src/css/reset.css

@@ -3,7 +3,7 @@ html, body {
   margin : 0;
   overflow: hidden;
   cursor : default;
-  font-family: arial;
+  font-family: Arial;
   font-size: 11px;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -19,6 +19,11 @@ ul, li {
   list-style-type: none;
 }
 
+/** Firefox overrides this with -moz-use-system-font */
+input,
+input[type="submit"] {
+  font-family: Arial;
+}
 
 /* Force apparition of scrollbars on leopard */
 ::-webkit-scrollbar {

src/css/settings-application.css

@@ -1,4 +1,3 @@
-.tiled-preview-checkbox {
-  vertical-align: -2px;
-  margin-left: 0;
-}
+/*******************************/
+/*  Application Setting panel  */
+/*******************************/

src/css/settings-resize.css

@@ -5,17 +5,6 @@
   width: 25%;
 }
 
-.resize-content-checkbox {
-  margin-left: 0;
-}
-
-.resize-ratio-checkbox,
-.resize-smooth-checkbox {
-  vertical-align: -2px;
-  margin-left: 0;
-}
-
-
 /*****************/
 /* ANCHOR WIDGET */
 /*****************/

src/css/style.css

@@ -50,3 +50,8 @@ body {
 .uppercase {
   text-transform: uppercase;
 }
+
+.checkbox-fix {
+  vertical-align: -2px;
+  margin-left: 0;
+}

src/js/controller/dialogs/ImportImageController.js

@@ -136,6 +136,7 @@
 
     var fileName = this.extractFileNameFromPath_(this.file_.name);
     this.fileNameContainer.html(fileName);
+    this.fileNameContainer.attr('title', fileName);
 
     this.resizeWidth.val(w);
     this.resizeHeight.val(h);

src/js/controller/settings/exportimage/PngExportController.js

@@ -10,10 +10,10 @@
   pskl.utils.inherit(ns.PngExportController, pskl.controller.settings.AbstractSettingController);
 
   ns.PngExportController.prototype.init = function () {
-    this.pngFilePrefixInput = document.getElementById('zip-prefix-name');
+    this.pngFilePrefixInput = document.querySelector('.zip-prefix-name');
     this.pngFilePrefixInput.value = 'sprite_';
 
-    this.splitByLayersCheckbox = document.getElementById('zip-split-by-layers');
+    this.splitByLayersCheckbox =  document.querySelector('.zip-split-layers-checkbox');
 
     var downloadButton = document.querySelector('.png-download-button');
     this.addEventListener(downloadButton, 'click', this.onPngDownloadButtonClick_);

src/templates/dialogs/import-image.html

@@ -25,7 +25,7 @@
       </div>
       <div class="import-section import-subsection">
         <span class="import-section-title">Smooth resize</span>
-        <input type="checkbox" checked="checked" name="smooth-resize-checkbox" value="1"/>
+        <input type="checkbox" class="checkbox-fix" checked="checked" name="smooth-resize-checkbox" value="1"/>
       </div>
       <div class="import-section">
         <label class="dialog-section-radio-label">

src/templates/settings/application.html

@@ -39,7 +39,7 @@
 
     <div class="settings-item">
       <label>
-        <input type="checkbox" value="1" class="tiled-preview-checkbox" name="tiled-preview-checkbox"/>
+        <input type="checkbox" value="1" class="tiled-preview-checkbox  checkbox-fix" name="tiled-preview-checkbox"/>
         Repeated preview
       </label>
     </div>

src/templates/settings/export.html

@@ -13,12 +13,12 @@
     <span class="settings-description">ZIP with one PNG file per frame.</span>
     <span class="settings-description" style="display:block">File names will start with the prefix below.</span>
     <div class="settings-item">
-      <label for="zip-prefix-name">Prefix:</label>
-      <input id="zip-prefix-name" type="text" class="textfield" placeholder="PNG file prefix ...">
+      <label>Prefix</label>
+      <input class="zip-prefix-name  textfield" type="text" placeholder="PNG file prefix ...">
     </div>
-	<div class="settings-item">
+  <div class="settings-item">
       <label>
-        <input id="zip-split-by-layers" type="checkbox" />
+        <input class="zip-split-layers-checkbox  checkbox-fix" type="checkbox" />
         Split by layers
       </label>
     </div>

src/templates/settings/resize.html

@@ -17,13 +17,13 @@
       </div>
       <div class="resize-section">
         <label>
-          <input type="checkbox" class="resize-ratio-checkbox" value="true" checked="true"/>
+          <input type="checkbox" class="resize-ratio-checkbox checkbox-fix" value="true" checked="true"/>
           <span>Maintain aspect ratio</span>
         </label>
       </div>
       <div class="resize-section">
         <label>
-          <input type="checkbox" class="resize-content-checkbox" value="true"/>
+          <input type="checkbox" class="resize-content-checkbox checkbox-fix" value="true"/>
           <span>Resize canvas content</span>
         </label>
       </div>