Merge branch 'colour-preview' into develop

css/80_app.css

@@ -189,7 +189,8 @@ input[type=number],
 input[type=url],
 input[type=tel],
 input[type=email],
-input[type=date] {
+input[type=date],
+input[type=color] {
     /* need this since line-height interpretation may vary by font or browser */
     height: 2.585em;
 }
@@ -1505,6 +1506,34 @@ a.hide-toggle {
     fill: #333;
     opacity: .5;
 }
+.form-field-button.colour-preview {
+    border-radius: 0 0 4px 0;
+}
+.form-field-button.colour-preview > div.colour-box {
+    border: 3px solid #fff;
+    height: 100%;
+    border-radius: 8px;
+    cursor: pointer;
+    text-align: center;
+    line-height: 20px;
+    padding: 1px 0 0 1px;
+}
+.inspector-hover .form-field-button.colour-preview > div.colour-box {
+    border-color: #ececec;
+}
+.form-field-button.colour-preview:active > div.colour-box,
+.form-field-button.colour-preview:focus > div.colour-box {
+    border-color: #f1f1f1;
+}
+@media (hover: hover) {
+    .form-field-button.colour-preview:hover > div.colour-box {
+        border-color: #f1f1f1;
+    }
+}
+.form-field-button.colour-selector {
+    visibility: hidden;
+    position: absolute;
+}
 
 
 /* round corners of first/last child elements */
@@ -1703,12 +1732,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

@@ -1,5 +1,6 @@
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 import { select as d3_select } from 'd3-selection';
+import _debounce from 'lodash-es/debounce';
 import * as countryCoder from '@ideditor/country-coder';
 
 import { presetManager } from '../../presets';
@@ -21,6 +22,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 +64,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 +169,65 @@ export function uiFieldText(field, context) {
                     if (value) window.open(value, '_blank');
                 })
                 .merge(outlinkButton);
+        } else if (field.key.split(':').includes('colour')) {
+            input.attr('type', 'text');
+
+            updateColourPreview();
         }
     }
 
+    function isColourValid(colour) {
+        if (!colour.match(/^(#([0-9a-fA-F]{3}){1,2}|\w+)$/)) {
+            // OSM only supports hex or named colors
+            return false;
+        } else if (!CSS.supports('color', colour) || ['unset', 'inherit', 'initial', 'revert'].includes(colour)) {
+            // see https://stackoverflow.com/a/68217760/1627467
+            return false;
+        }
+        return true;
+    }
+    function updateColourPreview() {
+        wrap.selectAll('.colour-preview')
+            .remove();
+
+        const colour = utilGetSetValue(input);
+
+        if (!isColourValid(colour) && colour !== '') return;
+
+        var colourSelector = wrap.selectAll('.colour-selector')
+            .data([0]);
+        outlinkButton = wrap.selectAll('.colour-preview')
+            .data([colour]);
+
+        colourSelector
+            .enter()
+            .append('input')
+            .attr('type', 'color')
+            .attr('class', 'form-field-button colour-selector')
+            .attr('value', colour)
+            .on('input', _debounce(function(d3_event) {
+                d3_event.preventDefault();
+                var colour = this.value;
+                if (!isColourValid(colour)) return;
+                utilGetSetValue(input, this.value);
+                change()();
+                updateColourPreview();
+            }, 100));
+
+        outlinkButton = outlinkButton
+            .enter()
+            .append('div')
+            .attr('class', 'form-field-button colour-preview')
+            .append('div')
+            .style('background-color', d => d)
+            .attr('class', 'colour-box');
+        if (colour === '') outlinkButton = outlinkButton
+            .call(svgIcon('#iD-icon-edit'));
+        outlinkButton
+            .on('click', () => wrap.select('.colour-selector').node().click())
+            .merge(outlinkButton);
+    }
+
 
     function updatePhonePlaceholder() {
         if (input.empty() || !Object.keys(_phoneFormats).length) return;
@@ -253,6 +311,8 @@ export function uiFieldText(field, context) {
             .attr('placeholder', isMixed ? t('inspector.multiple_values') : (field.placeholder() || t('inspector.unknown')))
             .classed('mixed', isMixed);
 
+        if (field.key.split(':').includes('colour')) updateColourPreview();
+
         if (outlinkButton && !outlinkButton.empty()) {
             var disabled = !validIdentifierValueForLink();
             outlinkButton.classed('disabled', disabled);

modules/util/get_set_value.js

@@ -1,5 +1,6 @@
 // Like selection.property('value', ...), but avoids no-op value sets,
 // which can result in layout/repaint thrashing in some situations.
+/** @returns {string} */
 export function utilGetSetValue(selection, value) {
     function d3_selection_value(value) {
         function valueNull() {