Feature #470: update application settings layout

src/css/settings-application.css

@@ -3,42 +3,37 @@
 /*******************************/
 
 .background-picker-wrapper {
+  display: inline-block;
+  width: 130px;
   overflow: hidden;
-  padding: 5px 5px 2px 5px;
+  vertical-align: middle;
+  margin-left: 5px;
 }
 
 .background-picker {
   cursor: pointer;
   float: left;
-  height: 35px;
-  width: 35px;
+  height: 14px;
+  width: 14px;
   background-color: transparent;
-  margin-right: 15px;
+  margin-right: 5px;
   padding: 1px;
   position: relative;
+  border: #888 2px solid;
 }
 
-.background-picker:after {
-  content: " ";
-  position: absolute;
-  top: -2px;
-  right: -2px;
-  bottom: -2px;
-  left: -2px;
+.background-picker:hover {
+  border-color: #eee;
 }
 
-.background-picker:hover:after {
-  border: #eee 1px solid;
-}
-
-.background-picker.selected:after {
-  border: gold 1px solid;
+.background-picker.selected {
+  border-color: gold;
 }
 
 .layer-opacity-input {
   margin: 5px;
   vertical-align: middle;
-  width: 145px;
+  width: 100px;
 }
 
 .layer-opacity-text {
@@ -53,9 +48,10 @@
 }
 
 .grid-width-select {
-  margin: 5px;
+  margin: 5px 5px 0 5px;
 }
 
-.settings-section-application > .settings-item > label {
-  display: block;
-}
+.settings-section-application > .settings-title {
+  /* Override the default 10px margin bottom for this panel */
+  margin-bottom: 15px;
+}

src/templates/settings/application.html

@@ -4,6 +4,7 @@
       <div class="settings-title">
         General
       </div>
+
       <div class="settings-item">
         <label>Background</label>
         <div class="background-picker-wrapper">
@@ -23,7 +24,7 @@
       </div>
 
       <div class="settings-item">
-        <label for="grid-width">Grid</label>
+        <label for="grid-width">Pixel Grid</label>
         <select id="grid-width" class="grid-width-select">
           <option value="0">Disabled</option>
           <option value="1">1px</option>
@@ -34,31 +35,24 @@
       </div>
 
       <div class="settings-item">
-        <label for="tiled-preview">Layer Preview Opacity</label>
+        <label for="tiled-preview">Layer Opacity</label>
         <input type="range" class="layer-opacity-input" name="layer-opacity" min="0"  max="1" step="0.05"/>
         <span class="layer-opacity-text"></span>
       </div>
 
-    </div>
-
-    <div class="settings-section">
-      <div class="settings-title">
-        Preview
-      </div>
-
       <div class="settings-item">
         <label>
-          <input type="checkbox" value="1" class="tiled-preview-checkbox  checkbox-fix" name="tiled-preview-checkbox"/>
-          Repeated preview
+          Seamless drawing mode
+          <input type="checkbox" value="1" class="tiled-preview-checkbox" name="tiled-preview-checkbox"/>
         </label>
       </div>
 
       <div class="settings-item">
-        <label for="tiled-preview">Maximum FPS </label>
+        <label for="tiled-preview">Maximum FPS</label>
         <input type="text" class="textfield  textfield-small  max-fps-input" autocomplete="off" name="max-fps"/>
       </div>
 
-      <input type="submit" class="button button-primary" value="Save" />
+      <input type="submit" class="button button-primary" value="Apply settings" />
     </div>
   </form>
 </script>

src/templates/settings/export.html

@@ -1,7 +1,7 @@
 <script type="text/html" id="templates/settings/export.html">
   <div class="settings-section settings-section-export">
     <div class="settings-title">Export</div>
-    <div class="settings-item export-scale" title="Scale the exported PNG spritesheet"
+    <div class="settings-item export-scale" title="Scale the animation for export"
         rel="tooltip"
         data-placement="top">
       <label for="scale-input">Scale</label>