From 3d86ada4d9d606fc3ae09dbfb7027ab575fe8ff6 Mon Sep 17 00:00:00 2001
From: Mitja Felicijan <mitja.felicijan@gmail.com>
Date: Wed, 19 Sep 2018 02:12:04 +0200
Subject: content update

---
 tools/draw/app.css    | 37 ++++++++++++++++++++++++++-----------
 tools/draw/app.js     | 10 ++++++----
 tools/draw/index.html | 22 ++++++++++++----------
 3 files changed, 44 insertions(+), 25 deletions(-)

(limited to 'tools')

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>
-- 
cgit v1.2.3