empty panel, visual tweaks

images/gear.svg

@@ -8,7 +8,7 @@
     </clipPath>
 </defs>
 <g id="group0" transform="rotate(10 50 50)" fill="none">
-    <path id="shape0" fill="#DEDEDD" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="miter" d="
+    <path id="shape0" fill="#ffffff" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="miter" d="
     M 44 0 L 56 0
           L 59.65 13.65
           L 69.12 17.27

images/paint.svg

@@ -4,13 +4,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">
 <defs/>
 <g id="layer0">
-    <path id="shape0" fill="#DEDEDD" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="miter" d="
+    <path id="shape0" fill="#ffffff" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="miter" d="
           M 0 100 L 0 70 L 30 100 z
     "/>
-    <path id="shape1" fill="#DEDEDD" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="miter" d="
+    <path id="shape1" fill="#ffffff" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="miter" d="
           M 70 0 L 100 30 L 90 40 L 60 10 z
     "/>
-    <path id="shape2" fill="#DEDEDD" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="miter" d="
+    <path id="shape2" fill="#ffffff" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="miter" d="
           M 55 15 L 5 65 L 35 95 L 85 45 z
     "/>
  </g>

main.js

@@ -2,6 +2,7 @@ import factory from "./painting/factory.js";
 import Canvas from "./painting/canvas.js";
 import Shape from "./painting/shape.js";
 import Button from "./ui/button.js";
+import Panel from "./ui/panel.js";
 
 document.body.innerHTML = "";
 
@@ -11,12 +12,21 @@ let canvas = new Canvas(window.innerWidth, window.innerHeight);
 let repaint = new Button("paint");
 repaint.addHandler(canvas.clear.bind(canvas));
 repaint.addHandler(paint);
-repaint.setPosition(50, 50);
+repaint.setPosition(25, 25);
+
+let panel = new Panel(300, window.innerHeight - 10);
+panel.setPosition(5, 5);
+
+let settings = new Button("gear");
+settings.addHandler(panel.toggle.bind(panel));
+settings.setPosition(75, 25);
 
 window.addEventListener("resize", onWindowResize, false);
 
 document.body.appendChild(canvas.element);
+document.body.appendChild(panel.element);
 document.body.appendChild(repaint.element);
+document.body.appendChild(settings.element);
 
 function onWindowResize(e) {
     Shape.setBounding(window.innerWidth, window.innerHeight);

style.css

@@ -4,13 +4,46 @@ body {
 }
 
 button {
+    z-index: 2;
     overflow: hidden;
-    background-color: aqua;
+    background-color: #00b6ff;
     border: none;
     border-radius: 50%;
-    width: 25px;
-    height: 25px;
-    background-size: contain;
+    width: 50px;
+    height: 50px;
+    background-size: 66%;
     background-position: center;
     background-repeat: no-repeat;
+    padding: 0;
+    outline: none;
+
+    -webkit-transition: background-color 0.2s;
+    -moz-transition: background-color 0.2s;
+    -ms-transition: background-color 0.2s;
+    -o-transition: background-color 0.2s;
+    transition: background-color 0.2s;
+}
+
+button:hover {
+    background-color: #2eceff;
+}
+
+.panel {
+    z-index: 1;
+    overflow: hidden;
+    background-color: white;
+    transform: none;
+    -webkit-transition: transform 0.2s;
+    -moz-transition: transform 0.2s;
+    -ms-transition: transform 0.2s;
+    -o-transition: transform 0.2s;
+    transition: transform 0.2s;
+}
+
+.panel.hidden {
+    transform: translate(-500px);
+}
+
+.shadow {
+    box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 4px 0px;
 }

ui/button.js

@@ -1,6 +1,7 @@
 class Button {
     constructor(image) {
         this.element = document.createElement("button");
+        this.element.add("shadow");
         this.element.style.backgroundImage = "url(images/" + image + ".svg)";
         this._boundClick = this._onClick.bind(this);
         this.element.addEventListener("click", this._boundClick, false);

ui/panel.js

@@ -0,0 +1,39 @@
+class Panel {
+    constructor(width, height) {
+        this._width = width;
+        this._height = height;
+        this._hidden = true;
+        this.element = document.createElement("div");
+        this.element.classList.add("shadow");
+        this.element.classList.add("hidden");
+    }
+
+    setPosition(x, y) {
+        this.element.style.position = "absolute";
+        this.element.style.top = y + "px";
+        this.element.style.left = x + "px";
+    }
+
+    toggle() {
+        if (this._hidden) {
+            this.show();
+        } else {
+            this.hide();
+        }
+    }
+    show() {
+        if (this._hidden) {
+            this.element.classList.remove("hidden");
+            this._hidden = false;
+        }
+    }
+    hide() {
+        if (!this._hidden) {
+            this.element.classList.add("hidden");
+            this._hidden = true;
+        }
+    }
+}
+
+
+export default Panel;