feat(elements): add first draft of toolbox

christianliebel · Jul 2, 2020 · 0e8581d · 0e8581d
1 parent 7cfe469
commit 0e8581d
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 0 deletions.
diff --git a/elements/index.js b/elements/index.js
@@ -8,4 +8,6 @@ import './inset-container.js';
 import './menu-bar.js';
 import './ruler.js';
 import './status-bar.js';
+import './tool.js';
 import './tool-bar.js';
+import './tool-box.js';
diff --git a/elements/tool-box.js b/elements/tool-box.js
@@ -0,0 +1,43 @@
+import {css, html, LitElement} from '../web_modules/lit-element.js';
+
+class ToolBox extends LitElement {
+    static get styles() {
+        return css`
+            :host {
+                display: flex;
+                flex-flow: row wrap;
+                align-content: flex-start;
+                justify-content: center;
+            }
+            
+            paint-inset-container {
+                width: 41px;
+                height: 66px;
+                margin-top: 3px;
+            }
+        `;
+    }
+
+    render() {
+        return html`
+            <paint-tool tool="freeform" title="Free-Form Select"></paint-tool>
+            <paint-tool tool="select" title="Select"></paint-tool>
+            <paint-tool tool="eraser" title="Eraser/Color Eraser"></paint-tool>
+            <paint-tool tool="fill" title="Fill With Color"></paint-tool>
+            <paint-tool tool="pick" title="Pick Color"></paint-tool>
+            <paint-tool tool="magnifier" title="Magnifier"></paint-tool>
+            <paint-tool tool="pencil" title="Pencil" class="active"></paint-tool>
+            <paint-tool tool="brush" title="Brush"></paint-tool>            
+            <paint-tool tool="paintbrush" title="Paintbrush"></paint-tool>
+            <paint-tool tool="text" title="Text"></paint-tool>
+            <paint-tool tool="line" title="Line"></paint-tool>
+            <paint-tool tool="curve" title="Curve"></paint-tool>
+            <paint-tool tool="rectangle" title="Rectangle"></paint-tool>
+            <paint-tool tool="polygon" title="Polygon"></paint-tool>
+            <paint-tool tool="ellipse" title="Ellipse"></paint-tool>
+            <paint-tool tool="title" title="Rounded Rectangle"></paint-tool>
+            <paint-inset-container></paint-inset-container>
+        `;
+    }
+}
+customElements.define('paint-tool-box', ToolBox);
diff --git a/elements/tool.js b/elements/tool.js
@@ -0,0 +1,47 @@
+import {css, html, LitElement} from '../web_modules/lit-element.js';
+
+class Tool extends LitElement {
+    static get styles() {
+        return css`
+            :host {
+                display: inline-block;
+                box-sizing: border-box;
+                width: 25px;
+                height: 25px;
+                border: 1px solid var(--button-text);
+                border-top: 1px solid var(--highlight-text);
+                border-left: 1px solid var(--highlight-text);
+                background-color: var(--button-face);
+                image-rendering: pixelated;
+            }
+            
+            div {
+                box-sizing: border-box;
+                height: 100%;
+                border: 1px solid var(--canvas);
+                border-top: 1px solid var(--button-face);
+                border-left: 1px solid var(--button-face);
+            }
+            
+            :host(.active) {
+                border: 1px solid var(--highlight-text);
+                border-top: 1px solid var(--button-text);
+                border-left: 1px solid var(--button-text);
+                background: var(--selected-background);
+            }
+            
+            :host(.active) div {
+                border: 1px solid var(--button-face);
+                border-top: 1px solid var(--canvas);
+                border-left: 1px solid var(--canvas);
+            }
+        `;
+    }
+
+    render() {
+        return html`
+            <div></div>
+        `;
+    }
+}
+customElements.define('paint-tool', Tool);