ui color picker

7 files changed, 50 insertions, 10 deletions

diff --git a/README.rst b/README.rst
index 266b08d..5389b96 100644
--- a/README.rst
+++ b/README.rst
@@ -138,7 +138,6 @@ creates wheel package inside `build` directory.
 TODO
 ----
 
-* ui svg rewrite
 * unit tests
 * changelog
 * alternative hosting (https://opcut.herokuapp.com is shutting down)
diff --git a/VERSION b/VERSION
index 7532512..2b7c5ae 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.4.2-dev
+0.4.2
diff --git a/src_js/common.ts b/src_js/common.ts
index 793ce7a..2675438 100644
--- a/src_js/common.ts
+++ b/src_js/common.ts
@@ -81,7 +81,11 @@ export const defaultState = {
     svg: {
         font_size: '1',
         show_names: true,
-        show_dimensions: false
+        show_dimensions: false,
+        cut_color: '#646464',
+        item_color: '#fafafa',
+        selected_color: '#c88c8c',
+        unused_color: '#eeeeee'
     },
     calculating: false
 };
diff --git a/src_js/vt/input.ts b/src_js/vt/input.ts
index 749edbb..c7358ba 100644
--- a/src_js/vt/input.ts
+++ b/src_js/vt/input.ts
@@ -84,3 +84,19 @@ export function select(
         ])
     ];
 }
+
+
+export function color(
+    value: string,
+    onChange: (val: string) => void
+): u.VNode {
+    return ['input', {
+        props: {
+            type: 'color',
+            value: value
+        },
+        on: {
+            change: (evt: Event) => onChange((evt.target as HTMLInputElement).value)
+        }
+    }];
+}
diff --git a/src_js/vt/result.ts b/src_js/vt/result.ts
index fc23089..f49f823 100644
--- a/src_js/vt/result.ts
+++ b/src_js/vt/result.ts
@@ -41,6 +41,26 @@ export function main(): u.VNodeChild[] {
                 'Show dimensions',
                 r.get('svg', 'show_dimensions') as boolean,
                 val => r.set(['svg', 'show_dimensions'], val)
+            ),
+            ['label', 'Cut color'],
+            input.color(
+                r.get('svg', 'cut_color') as string,
+                val => r.set(['svg', 'cut_color'], val)
+            ),
+            ['label', 'Item color'],
+            input.color(
+                r.get('svg', 'item_color') as string,
+                val => r.set(['svg', 'item_color'], val)
+            ),
+            ['label', 'Selected color'],
+            input.color(
+                r.get('svg', 'selected_color') as string,
+                val => r.set(['svg', 'selected_color'], val)
+            ),
+            ['label', 'Unused color'],
+            input.color(
+                r.get('svg', 'unused_color') as string,
+                val => r.set(['svg', 'unused_color'], val)
             )
         ],
         Object.keys(result.params.panels).map(panelResult)
diff --git a/src_js/vt/svg.ts b/src_js/vt/svg.ts
index 1108e87..73406fd 100644
--- a/src_js/vt/svg.ts
+++ b/src_js/vt/svg.ts
@@ -16,16 +16,17 @@ export function main(): u.VNode | null {
     const panel = result.params.panels[selected.panel];
     const used = u.filter(i => i.panel == selected.panel, result.used);
     const unused = u.filter(i => i.panel == selected.panel, result.unused);
-    const panelColor = 'rgb(100,100,100)';
-    const itemColor = 'rgb(250,250,250)';
-    const selectedItemColor = 'rgb(200,140,140)';
-    const unusedColor = 'rgb(238,238,238)';
+
     const fontSize = String(
         Math.max(panel.height, panel.width) * 0.02 *
         u.strictParseFloat(r.get('svg', 'font_size') as string)
     );
     const showNames = r.get('svg', 'show_names');
     const showDimensions = r.get('svg', 'show_dimensions');
+    const cutColor = r.get('svg', 'cut_color');
+    const itemColor = r.get('svg', 'item_color');
+    const selectedItemColor = r.get('svg', 'selected_color');
+    const unusedColor = r.get('svg', 'unused_color');
 
     return ['svg', {
         attrs: {
@@ -41,7 +42,7 @@ export function main(): u.VNode | null {
                 width: String(panel.width),
                 height: String(panel.height),
                 'stroke-width': '0',
-                fill: panelColor
+                fill: cutColor
             }}
         ],
         used.map(used => {
diff --git a/src_scss/main.scss b/src_scss/main.scss
index 5f3f866..ece52ed 100644
--- a/src_scss/main.scss
+++ b/src_scss/main.scss
@@ -178,7 +178,7 @@ body {
                 margin: 1.5rem 0;
 
                 & > *:hover {
-                    background-color: $color-grey-400;
+                    background-color: $color-grey-300;
                     cursor: pointer;
                 }
             }
@@ -207,7 +207,7 @@ body {
             }
 
             .selected {
-                background-color: $color-grey-400;
+                background-color: $color-grey-300;
             }
         }
     }