From 4e3e9421272ac0c11507cf2d6aaa797bef88b61d Mon Sep 17 00:00:00 2001 From: Martin Raifer Date: Mon, 12 Dec 2022 19:03:03 +0100 Subject: [PATCH] show (route) relation `colour`s in lists and comboboxes --- CHANGELOG.md | 2 ++ css/80_app.css | 29 +++++++++++++++++- modules/ui/feature_list.js | 2 ++ modules/ui/sections/raw_member_editor.js | 2 ++ modules/ui/sections/raw_membership_editor.js | 32 +++++++++++++++++--- 5 files changed, 62 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 52586f666..25612167a 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/css/80_app.css b/css/80_app.css index de9ea0a8c..ff3e49b2d 100644 --- a/css/80_app.css +++ b/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; diff --git a/modules/ui/feature_list.js b/modules/ui/feature_list.js index c0634f1eb..17586d01d 100644 --- a/modules/ui/feature_list.js +++ b/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 diff --git a/modules/ui/sections/raw_member_editor.js b/modules/ui/sections/raw_member_editor.js index ab5942785..9ad0901a9 100644 --- a/modules/ui/sections/raw_member_editor.js +++ b/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 diff --git a/modules/ui/sections/raw_membership_editor.js b/modules/ui/sections/raw_membership_editor.js index 093df5d4b..3e1e250e3 100644 --- a/modules/ui/sections/raw_membership_editor.js +++ b/modules/ui/sections/raw_membership_editor.js @@ -239,7 +239,7 @@ 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) || ''; @@ -247,23 +247,45 @@ export function uiSectionRawMembershipEditor(context) { 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