client/tags: use new color input (#119)

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

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

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;
     }
 });