content update

3 files changed, 44 insertions, 25 deletions

diff --git a/tools/draw/app.css b/tools/draw/app.css
index 40e4838..62df222 100644
--- a/tools/draw/app.css
+++ b/tools/draw/app.css
@@ -38,21 +38,36 @@ canvas {
         height: 100%;
 }
 
-nav {
-        position: fixed;
-        left: 10px;
-        top: 10px;
-        width: 100px;
-}
-
-nav button {
-        border: 2px dashed #bbb;
+button {
+        display: block;
         background: #fff;
         border-radius: 5px;
-        display: block;
         width: 100%;
         margin-bottom: 10px;
-        padding: 10px 5px;
         font-weight: bold;
         cursor: pointer;
+        text-align: center;
+}
+
+nav.colors {
+        position: fixed;
+        left: 10px;
+        top: 10px;
+        width: 40px;
+}
+
+nav.colors button {
+        height: 40px;
+}
+
+nav.tools {
+        position: fixed;
+        left: 10px;
+        bottom: 10px;
+        width: 65px;
+}
+
+nav.tools button {
+        border: 2px solid #bbb;
+        padding: 10px 0;
 }
diff --git a/tools/draw/app.js b/tools/draw/app.js
index 7ddc45d..329a8fc 100644
--- a/tools/draw/app.js
+++ b/tools/draw/app.js
@@ -40,9 +40,12 @@ window.addEventListener('load', function(evt) {
 
 
         document.querySelectorAll('nav button').forEach(function(button, idx) {
-                button.addEventListener('click', function(evt) {
-                        console.log(button.dataset.method);
 
+                if (button.dataset.method == 'color') {
+                        button.style.background = button.dataset.value;
+                }
+
+                button.addEventListener('click', function(evt) {
                         switch (button.dataset.method) {
                                 case 'color':
                                         {
@@ -65,7 +68,6 @@ window.addEventListener('load', function(evt) {
                         }
                 });
 
-});
+        });
 
 });
-
diff --git a/tools/draw/index.html b/tools/draw/index.html
index fcfe346..5c3c3d9 100644
--- a/tools/draw/index.html
+++ b/tools/draw/index.html
@@ -16,16 +16,18 @@
                         <canvas></canvas>
                 </section>
 
-                <nav>
-                        <button data-method="color" data-value="limegreen">limegreen</button>
-                        <button data-method="color" data-value="crimson">crimson</button>
-                        <button data-method="color" data-value="darkturquoise">darkturquoise</button>
-                        <button data-method="color" data-value="purple">purple</button>
-                        <button data-method="color" data-value="fuchsia">fuchsia</button>
-                        <button data-method="color" data-value="blueviolet">blueviolet</button>
-                        <button data-method="color" data-value="goldenrod">goldenrod</button>
-                        <button data-method="color" data-value="royalblue">royalblue</button>
-                        <br>
+                <nav class="colors">
+                        <button data-method="color" data-value="limegreen"></button>
+                        <button data-method="color" data-value="crimson"></button>
+                        <button data-method="color" data-value="darkturquoise"></button>
+                        <button data-method="color" data-value="purple"></button>
+                        <button data-method="color" data-value="fuchsia"></button>
+                        <button data-method="color" data-value="blueviolet"></button>
+                        <button data-method="color" data-value="goldenrod"></button>
+                        <button data-method="color" data-value="royalblue"></button>
+                </nav>
+
+                <nav class="tools">
                         <button data-method="size" data-value="2">small</button>
                         <button data-method="size" data-value="4">normal</button>
                         <button data-method="size" data-value="10">big</button>