show (route) relation colours in lists and comboboxes

Author: tyrasd

CHANGELOG.md

@@ -40,6 +40,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 #### :tada: New Features
 * Show a _remaining input length_ indicator and a warning if the maximum for OSM tags (typically, 255 characters) is exceeded ([#9390], [#9392] thanks [@alanb43], [#7943], [#9374])
 #### :sparkles: Usability & Accessibility
+* Show the color of (route) relations in the form of small colored circles in relation membership section and feature search results ([#9424])
 #### :white_check_mark: Validation
 #### :bug: Bugfixes
 * Fix bug which made it impossible to change an object's preset from a sub-preset to the respective parents preset (e.g. from Driveway to Service Road) ([#9372])
@@ -65,6 +66,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 [#9397]: https://github.com/openstreetmap/iD/issues/9397
 [#9413]: https://github.com/openstreetmap/iD/pull/9413
 [#9423]: https://github.com/openstreetmap/iD/pull/9423
+[#9424]: https://github.com/openstreetmap/iD/pull/9424
 [@alanb43]: https://github.com/alanb43
 [@Rewinteer]: https://github.com/Rewinteer
 

css/80_app.css

@@ -1412,7 +1412,7 @@ a.hide-toggle {
 .ideditor[dir='rtl'] .field-label .label-text {
     padding: 5px 10px 4px 0;
 }
-.field-label .label-text span {
+.field-label .label-text {
     white-space: nowrap;
 }
 
@@ -2748,12 +2748,39 @@ img.tag-reference-wiki-image {
     font-weight: normal;
     padding-left: 10px;
 }
+.section-raw-member-editor .member-row .member-entity-name.has-colour::before,
+.section-raw-membership-editor .member-row .member-entity-name.has-colour::before,
+.feature-list .entity-name.has-colour::before,
+.combobox-parent-relation .has-colour::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-colour::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-colour::before,
+.ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name.has-colour::before,
+.ideditor[dir='rtl'] .feature-list .entity-name.has-colour::before {
+    margin-left: 5px;
+    margin-right: -5px;
+}
+.ideditor[dir='rtl'] .combobox-parent-relation .has-colour::before  {
+    margin-left: 5px;
+    margin-right: 2px;
+}
+
 
 .form-field-input-member > input.member-role {
     border-radius: 0 0 4px 4px;

modules/ui/feature_list.js

@@ -310,6 +310,8 @@ export function uiFeatureList(context) {
             label
                 .append('span')
                 .attr('class', 'entity-name')
+                .classed('has-colour', 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(function(d) { return d.name; });
 
             enter

modules/ui/sections/raw_member_editor.js

@@ -198,6 +198,8 @@ export function uiSectionRawMemberEditor(context) {
                     labelLink
                         .append('span')
                         .attr('class', 'member-entity-name')
+                        .classed('has-colour', d => d.member.type === 'relation' && d.member.tags.colour)
+                        .style('border-color', d => d.member.type === 'relation' && d.member.tags.colour)
                         .text(function(d) { return utilDisplayName(d.member); });
 
                     label

modules/ui/sections/raw_membership_editor.js

@@ -239,31 +239,53 @@ export function uiSectionRawMembershipEditor(context) {
 
         var graph = context.graph();
 
-        function baseDisplayLabel(entity) {
+        function baseDisplayValue(entity) {
             var matched = presetManager.match(entity, graph);
             var presetName = (matched && matched.name()) || t('inspector.relation');
             var entityName = utilDisplayName(entity) || '';
 
             return presetName + ' ' + entityName;
         }
 
+        function baseDisplayLabel(entity) {
+            var matched = presetManager.match(entity, graph);
+            var presetName = (matched && matched.name()) || t('inspector.relation');
+            var entityName = utilDisplayName(entity) || '';
+
+            return selection => {
+                selection
+                    .append('b')
+                    .text(presetName + ' ');
+                selection
+                    .append('span')
+                    .classed('has-colour', entity.tags.colour)
+                    .style('border-color', entity.tags.colour)
+                    .text(entityName);
+            };
+        }
+
         var explicitRelation = q && context.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 {
 
             context.history().intersects(context.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,
+                    display: baseDisplayLabel(entity)
+                });
             });
 
             result.sort(function(a, b) {
@@ -349,6 +371,8 @@ export function uiSectionRawMembershipEditor(context) {
         labelLink
             .append('span')
             .attr('class', 'member-entity-name')
+            .classed('has-colour', d => d.relation.tags.colour)
+            .style('border-color', d => d.relation.tags.colour)
             .text(function(d) { return utilDisplayName(d.relation); });
 
         labelEnter