Reordered and Restructured Painter/Bank tools. Removed old unused tool bar. Painter/Bank tool buttons now have tool tips

sass/core.scss

@@ -5,16 +5,26 @@ body{
   overflow: hidden;
 }
 
-.simple-padding{
-  padding-top: 4px;
+.simple-padding-left, .simple-padding-h, .simple-padding{
   padding-left: 8px;
+}
+
+.simple-padding-right, .simple-padding-h, .simple-padding{
   padding-right: 8px;
 }
 
+.simple-padding-top, .simple-padding-v, .simple-padding{
+  padding-top: 4px;
+}
+
 .text-align-right{
   text-align: right;
 }
 
+.text-align-center{
+  text-align: center;
+}
+
 .full-height{
   height: 100%;
 }

sass/pure-overrides.scss

@@ -24,3 +24,12 @@
   background-color: $menu-item-bg-hover;
   color: $menu-item-text;
 }
+
+.pure-form .pure-input-1-8{
+  width:12.5%;
+}
+
+.pure-form legend{
+  color: $color-mid;
+  font-weight: bold;
+}

views/ctrlpainter.html

@@ -1,26 +1,22 @@
-          <div class="pure-g pure-g-nw">
-            <div class="pure-u-1-3 simple-padding">
-              <label for="painter_scale">
-                Scale : 
-              </label>
-              <input id="painter_scale" class="input-u-1-6" type="number" min="0.5" max="1000" step="0.1" value ="1"/>
+<div class="pure-g pure-g-nw">
+  <div class="pure-u-1 simple-padding text-align-center">
+    <form class="pure-form">
+      <label for="painter_scale">
+        Scale : 
+      </label>
+      <input id="painter_scale" class="pure-input-1-8" type="number" min="0.5" max="1000" step="0.1" value ="1"/>
 
-              <button emit="painter-fit-to-canvas" class="pure-button">
-                <i class="fa fa-expand-arrows-alt"></i>
-              </button>
-            </div>
+      <button emit="painter-fit-to-canvas" title="Fit to Window" class="pure-button">
+        <i class="fa fa-expand-arrows-alt"></i>
+      </button>
 
-            <div class="pure-u-1-3 simple-padding">
-              <button emit="painter-togglegrid" emit-args='{"show":true}' class="pure-button">
-                <i class="fa fa-th"></i>
-              </button>
-              <button emit="painter-colormode" emit-args='{"onePaletteMode":false}' class="pure-button">
-                <i class="fa fa-palette"></i>
-              </button>
-            </div>
-
-            <div class="pure-u-1-3 simple-padding">
-              <%- include('ctrlpainter_bank.html'); %>
-            </div>
-          </div>
+      <button emit="painter-togglegrid" title="Toggle Grid" emit-args='{"show":true}' class="pure-button">
+        <i class="fa fa-th"></i>
+      </button>
+      <button emit="painter-colormode" title="Toggle Color Mode" emit-args='{"onePaletteMode":false}' class="pure-button">
+        <i class="fa fa-palette"></i>
+      </button>
+    </form>
+  </div>
+</div>
 

views/ctrlpainter_bank.html

@@ -1,19 +1,26 @@
-<div class="painter-bank-controls hidden">
-  <button class="pure-button" emit="bank_remove_duplicates"><i class="fa fa-eraser"></i></button>
-  <label for="mode-select">
-    Bank Size:
-    <select id="mode-select" class="painter-bank-mode">
-      <option value="8K">8K</option>
-      <option value="4K">4K</option>
-      <option value="2K">2K</option>
-      <option value="1K">1K</option>
-      <option value="2T">Tile (8x16)</option>
-      <option value="1T">Tile (8x8)</option>
-    </select>
-  </label>
+<div class="painter-bank-controls hidden"> 
+  <form class="pure-form">
+    <legend>Bank Tools</legend>
+    <button class="pure-button" title="Remove Duplicates/Compress" emit="bank_remove_duplicates"><i class="fa fa-eraser"></i></button>
+    <div class="pure-control-group simple-padding-top">
+      <label for="mode-select">
+        Bank Size:
+        <select id="mode-select" class="painter-bank-mode">
+          <option value="8K">8K</option>
+          <option value="4K">4K</option>
+          <option value="2K">2K</option>
+          <option value="1K">1K</option>
+          <option value="2T">Tile (8x16)</option>
+          <option value="1T">Tile (8x8)</option>
+        </select>
+      </label>
+    </div>
 
-  <label for="offset-select" class="painter-bank-offset hidden">
-    Offset:
-    <input id="offset-select" class="input-u-1-6" type="number" min="0" max="7" step="1" value="0" /> 
-  </label>
+    <div class="pure-control-group simple-padding-top painter-bank-offset hidden">
+      <label for="offset-select">
+        Offset:
+      </label>
+      <input id="offset-select" class="pure-input-1-2" type="number" min="0" max="7" step="1" value="0" />
+    </div>
+  </form>
 </div>

views/index.html

@@ -7,13 +7,7 @@
     <div class="pure-g pure-g-nw">
 
       <div class="pure-u-2-24 simple-padding">
-      <%- include('tools.html', {
-        toolbtns:[
-          {emitargs:'{"id":"Welcome"}', faicon:"fa-brush"},
-          {emitargs:'{"id":"Welcome"}', faicon:"fa-eraser"},
-          {emitargs:'{"id":"Welcome"}', faicon:"fa-eye-dropper"}
-        ] 
-      }); %>      
+        <%- include("ctrlpainter_bank.html"); %>
       </div>
       <div class="pure-u-16-24">
       <%- include('workspace.html'); %>

views/tools.html

@@ -1,7 +0,0 @@
-          <div class="pure-button-group" role="group" aria-label="...">
-            <% toolbtns.forEach((btn) => { %>
-            <button emit="modal-open" emit-args="<%= btn.emitargs %>" class="pure-button">
-              <i class="fa <%= btn.faicon %>"></i>
-            </button>
-            <% }); %>
-          </div>