Show (route) relation colours in lists and comboboxes

re: #1219
re: openstreetmap/iD#9424

Author: bhousel

css/80_app.css

@@ -1385,13 +1385,11 @@ a.hide-toggle {
     text-overflow: ellipsis;
     flex: 1 1 auto;
     padding: 5px 0 4px 10px;
+    white-space: nowrap;
 }
 .ideditor[dir='rtl'] .field-label .label-text {
     padding: 5px 10px 4px 0;
 }
-.field-label .label-text span {
-    white-space: nowrap;
-}
 
 .label-text .label-textannotation svg.icon {
     margin: 0 8px;
@@ -2619,12 +2617,40 @@ img.tag-reference-wiki-image {
     padding-left: 10px;
 }
 
+.section-raw-member-editor .member-row .member-entity-name.has-color::before,
+.section-raw-membership-editor .member-row .member-entity-name.has-color::before,
+.feature-list .entity-name.has-color::before,
+.combobox-parent-relation .has-color::before {
+    display: inline-block;
+    content: '';
+    margin-left: -5px;
+    margin-right: 5px;
+    border-style: solid;
+    border-width: 4px;
+    border-radius: 4px;
+    border-color: inherit;
+}
+.combobox-parent-relation .has-color::before  {
+    margin-left: 2px;
+}
+
 .ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name,
 .ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name {
     padding-left:0;
     padding-right: 10px;
 }
 
+.ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name.has-color::before,
+.ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name.has-color::before,
+.ideditor[dir='rtl'] .feature-list .entity-name.has-color::before {
+    margin-left: 5px;
+    margin-right: -5px;
+}
+.ideditor[dir='rtl'] .combobox-parent-relation .has-color::before  {
+    margin-left: 5px;
+    margin-right: 2px;
+}
+
 .form-field-input-member > input.member-role {
     border-radius: 0 0 4px 4px;
 }

modules/ui/combobox.js

@@ -7,7 +7,7 @@ import { utilGetSetValue, utilRebind, utilTriggerEvent } from '../util';
 // It is keyed on the `value` of the entry. Data should be an array of objects like:
 //   [{
 //       value:   'string value',  // required
-//       display: 'label html'     // optional
+//       display: 'label html'     // optional html value or function
 //       title:   'hover text'     // optional
 //       terms:   ['search terms'] // optional
 //   }, ...]
@@ -384,7 +384,16 @@ export function uiCombobox(context, klass) {
                     return 'combobox-option ' + (d.klass || '');
                 })
                 .attr('title', function(d) { return d.title; })
-                .html(function(d) { return d.display || d.value; })
+                .each(function(d, i, nodes) {
+                    const selection = d3_select(nodes[i]);
+                    if (typeof d.display === 'function') {  // display function
+                        selection.call(d.display);
+                    } else if (d.display) {                 // display html value
+                        selection.html(d.display);
+                    } else {                                // text value
+                        selection.text(d.value);
+                    }
+                })
                 .on('mouseenter', _mouseEnterHandler)
                 .on('mouseleave', _mouseLeaveHandler)
                 .merge(options)

modules/ui/feature_list.js

@@ -303,6 +303,8 @@ export function uiFeatureList(context) {
       label
         .append('span')
         .attr('class', 'entity-name')
+        .classed('has-color', d => d.entity && d.entity.type === 'relation' && d.entity.tags.colour)
+        .style('border-color', d => d.entity && d.entity.type === 'relation' && d.entity.tags.colour)
         .text(d => d.name);
 
       enter

modules/ui/sections/raw_member_editor.js

@@ -194,7 +194,9 @@ export function uiSectionRawMemberEditor(context) {
           labelLink
             .append('span')
             .attr('class', 'member-entity-name')
-            .html(d => (d.member ? l10n.displayName(d.member.tags) : ''));
+            .classed('has-color', d => d.member.type === 'relation' && d.member.tags.colour)
+            .style('border-color', d => d.member.type === 'relation' && d.member.tags.colour)
+            .text(d => (d.member ? l10n.displayName(d.member.tags) : ''));
 
           label
             .append('button')

modules/ui/sections/raw_membership_editor.js

@@ -234,30 +234,51 @@ export function uiSectionRawMembershipEditor(context) {
         var result = [];
         var graph = editor.staging.graph;
 
+        function baseDisplayValue(entity) {
+            var matched = presets.match(entity, graph);
+            var presetName = (matched && matched.name()) || l10n.t('inspector.relation');
+            var entityName = l10n.displayName(entity.tags) || '';
+            return presetName + ' ' + entityName;
+        }
+
         function baseDisplayLabel(entity) {
             var matched = presets.match(entity, graph);
             var presetName = (matched && matched.name()) || l10n.t('inspector.relation');
             var entityName = l10n.displayName(entity.tags) || '';
 
-            return presetName + ' ' + entityName;
+            return selection => {
+                selection
+                    .append('b')
+                    .text(presetName + ' ');
+                selection
+                    .append('span')
+                    .classed('has-color', entity.tags.colour)
+                    .style('border-color', entity.tags.colour)
+                    .text(entityName);
+            };
         }
 
         var explicitRelation = q && graph.hasEntity(q.toLowerCase());
         if (explicitRelation && explicitRelation.type === 'relation' && explicitRelation.id !== entityID) {
             // loaded relation is specified explicitly, only show that
             result.push({
                 relation: explicitRelation,
-                value: baseDisplayLabel(explicitRelation) + ' ' + explicitRelation.id
+                value: baseDisplayValue(explicitRelation) + ' ' + explicitRelation.id,
+                display: baseDisplayLabel(explicitRelation)
             });
 
         } else {
             editor.intersects(map.extent()).forEach(function(entity) {
                 if (entity.type !== 'relation' || entity.id === entityID) return;
 
-                var value = baseDisplayLabel(entity);
+                var value = baseDisplayValue(entity);
                 if (q && (value + ' ' + entity.id).toLowerCase().indexOf(q.toLowerCase()) === -1) return;
 
-                result.push({ relation: entity, value: value });
+                result.push({
+                    relation: entity,
+                    value: value,
+                    display: baseDisplayLabel(entity)
+                });
             });
 
             result.sort(function(a, b) {
@@ -334,14 +355,16 @@ export function uiSectionRawMembershipEditor(context) {
             .append('span')
             .attr('class', 'member-entity-type')
             .html(function(d) {
-                var matched = presets.match(d.relation, editor.staging.graph);
+                const matched = presets.match(d.relation, editor.staging.graph);
                 return (matched && matched.name()) || l10n.t('inspector.relation');
             });
 
         labelLink
             .append('span')
             .attr('class', 'member-entity-name')
-            .html(function(d) {
+            .classed('has-color', d => d.relation.tags.colour)
+            .style('border-color', d => d.relation.tags.colour)
+            .text(function(d) {
                 const matched = presets.match(d.relation, editor.staging.graph);
                 // hide the network from the name if there is NSI match
                 return l10n.displayName(d.relation.tags, matched.suggestion);