From ba7ca0cd8727b5397729983d052636637f36dd59 Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Tue, 7 Feb 2017 21:33:44 +0100
Subject: [PATCH] client/tags: use new color input (#119)

---
 client/css/core-forms.styl          | 20 ++++++++++++---
 client/css/tag-categories-view.styl |  5 ++--
 client/js/util/views.js             | 39 +++++++++++++++++++++--------
 3 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/client/css/core-forms.styl b/client/css/core-forms.styl
index 8323d16e..5b62e0c1 100644
--- a/client/css/core-forms.styl
+++ b/client/css/core-forms.styl
@@ -170,13 +170,25 @@ input:disabled
     cursor: not-allowed
 
 label.color
+    white-space: nowrap
     position: relative
+    display: flex
     input[type=text]
+        margin-right: 0.25em
+        width: auto
+    .preview
+        display: inline-block
         text-align: center
-        pointer-events: none
-    input[type=color]
-        position: absolute
-        opacity: 0
+        padding: 0 0.5em
+        border: 2px solid black
+        &:after
+            content: 'A'
+    .background-preview
+        border-right: 0
+        color: transparent
+    .text-preview
+        border-left: 0
+
 
 form.show-validation .input
     input:invalid
diff --git a/client/css/tag-categories-view.styl b/client/css/tag-categories-view.styl
index 31c58380..d5f07627 100644
--- a/client/css/tag-categories-view.styl
+++ b/client/css/tag-categories-view.styl
@@ -2,7 +2,7 @@
 
 .content-wrapper.tag-categories
     width: 100%
-    max-width: 40em
+    max-width: 45em
     table
         border-spacing: 0
         width: 100%
@@ -11,7 +11,8 @@
         td, th
             padding: .4em
             &.color
-                text-align: center
+                input[type=text]
+                    width: 8em
             &.usages
                 text-align: center
             &.remove, &.set-default
diff --git a/client/js/util/views.js b/client/js/util/views.js
index 7f062599..db5ae4b0 100644
--- a/client/js/util/views.js
+++ b/client/js/util/views.js
@@ -139,12 +139,29 @@ function makeColorInput(options) {
             type: 'text',
             value: options.value || '',
             required: options.required,
-            style: 'color: ' + options.value,
-            disabled: true,
+            class: 'color',
         });
-    const colorInput = makeElement(
-        'input', {type: 'color', value: options.value || ''});
-    return makeElement('label', {class: 'color'}, colorInput, textInput);
+    const backgroundPreviewNode = makeElement(
+        'div',
+        {
+            class: 'preview background-preview',
+            style:
+                `border-color: ${options.value};
+                background-color: ${options.value}`,
+        });
+    const textPreviewNode = makeElement(
+        'div',
+        {
+            class: 'preview text-preview',
+            style:
+                `border-color: ${options.value};
+                color: ${options.value}`,
+        });
+    return makeElement(
+        'label', {class: 'color'},
+        textInput,
+        backgroundPreviewNode,
+        textPreviewNode);
 }
 
 function makeNumericInput(options) {
@@ -478,11 +495,13 @@ function monitorNodeRemoval(monitoredNode, callback) {
 }
 
 document.addEventListener('input', e => {
-    const type = e.target.getAttribute('type');
-    if (type && type.toLowerCase() === 'color') {
-        const textInput = e.target.parentNode.querySelector('input[type=text]');
-        textInput.style.color = e.target.value;
-        textInput.value = e.target.value;
+    if (e.target.classList.contains('color')) {
+        let bkNode = e.target.parentNode.querySelector('.background-preview');
+        let textNode = e.target.parentNode.querySelector('.text-preview');
+        bkNode.style.backgroundColor = e.target.value;
+        bkNode.style.borderColor = e.target.value;
+        textNode.style.color = e.target.value;
+        textNode.style.borderColor = e.target.value;
     }
 });