add preview for colour input

Author: k-yle

css/80_app.css

@@ -1505,6 +1505,15 @@ a.hide-toggle {
     fill: #333;
     opacity: .5;
 }
+.form-field-button.colour-preview {
+    background-color: #fff;
+    border-radius: 0 0 4px 0;
+}
+.form-field-button.colour-preview > div {
+    border: 3px solid #fff;
+    height: 100%;
+    border-radius: 8px;
+}
 
 
 /* round corners of first/last child elements */
@@ -1703,12 +1712,13 @@ a.hide-toggle {
 
 /* Field - Text / Numeric
 ------------------------------------------------------- */
-.form-field-input-text > input:only-of-type,
+.form-field-input-text > input:only-child,
 .form-field-input-tel > input:only-of-type,
 .form-field-input-email > input:only-of-type,
 .form-field-input-url > input:only-child {
     border-radius: 0 0 4px 4px;
 }
+.form-field-input-text > input:not(:only-child),
 .form-field-input-url > input:not(:only-child) {
     border-radius: 0 0 0 4px;
 }

modules/ui/fields/address.js

@@ -288,7 +288,7 @@ export function uiFieldAddress(field, context) {
             })
             .attr('title', function(subfield) {
                 var val = tags[field.key + ':' + subfield.id];
-                return val && Array.isArray(val) && val.filter(Boolean).join('\n');
+                return (val && Array.isArray(val)) ? val.filter(Boolean).join('\n') : undefined;
             })
             .classed('mixed', function(subfield) {
                 return Array.isArray(tags[field.key + ':' + subfield.id]);

modules/ui/fields/input.js

@@ -21,6 +21,7 @@ export function uiFieldText(field, context) {
     var dispatch = d3_dispatch('change');
     var input = d3_select(null);
     var outlinkButton = d3_select(null);
+    var wrap = d3_select(null);
     var _entityIDs = [];
     var _tags;
     var _phoneFormats = {};
@@ -62,7 +63,7 @@ export function uiFieldText(field, context) {
         calcLocked();
         var isLocked = field.locked();
 
-        var wrap = selection.selectAll('.form-field-input-wrap')
+        wrap = selection.selectAll('.form-field-input-wrap')
             .data([0]);
 
         wrap = wrap.enter()
@@ -167,9 +168,29 @@ export function uiFieldText(field, context) {
                     if (value) window.open(value, '_blank');
                 })
                 .merge(outlinkButton);
+        } else if (field.key.includes('colour')) {
+            input.attr('type', 'text');
+
+            updateColourPreview();
         }
     }
 
+    function updateColourPreview() {
+        wrap.selectAll('.foreign-id-permalink')
+            .remove();
+
+        outlinkButton = wrap.selectAll('.foreign-id-permalink')
+            .data([utilGetSetValue(input)], d => d);
+
+        outlinkButton
+            .enter()
+            .append('div')
+            .attr('class', 'form-field-button foreign-id-permalink colour-preview')
+            .append('div')
+            .style('background-color', d => d)
+            .merge(outlinkButton);
+    }
+
 
     function updatePhonePlaceholder() {
         if (input.empty() || !Object.keys(_phoneFormats).length) return;
@@ -247,6 +268,8 @@ export function uiFieldText(field, context) {
             .attr('placeholder', isMixed ? t('inspector.multiple_values') : (field.placeholder() || t('inspector.unknown')))
             .classed('mixed', isMixed);
 
+        if (field.key.includes('colour')) updateColourPreview();
+
         if (outlinkButton && !outlinkButton.empty()) {
             var disabled = !validIdentifierValueForLink();
             outlinkButton.classed('disabled', disabled);