From ef044cd17d58419de59619ddefdf1fea842cdd98 Mon Sep 17 00:00:00 2001 From: Martin Raifer Date: Tue, 8 Nov 2022 13:46:02 +0100 Subject: [PATCH] Show icons depicting the different values of the `crossing:markings` field for https://github.com/openstreetmap/id-tagging-schema/pull/590 --- CHANGELOG.md | 1 + css/80_app.css | 31 ++++++++++++ modules/ui/fields/combo.js | 50 ++++++++++++++++++- .../crossing_markings-dashes.svg | 9 ++++ .../crossing_markings-dots.svg | 9 ++++ .../crossing_markings-ladder.svg | 21 ++++++++ .../crossing_markings-ladder_paired.svg | 33 ++++++++++++ .../crossing_markings-ladder_skewed.svg | 21 ++++++++ .../crossing_markings-lines.svg | 9 ++++ .../crossing_markings-lines_paired.svg | 15 ++++++ .../crossing_markings-surface.svg | 34 +++++++++++++ .../crossing_markings-zebra.svg | 15 ++++++ .../crossing_markings-zebra_bicolour.svg | 21 ++++++++ .../crossing_markings-zebra_double.svg | 35 +++++++++++++ .../crossing_markings-zebra_paired.svg | 29 +++++++++++ 15 files changed, 331 insertions(+), 2 deletions(-) create mode 100644 svg/iD-sprite/fields/crossing_markings/crossing_markings-dashes.svg create mode 100644 svg/iD-sprite/fields/crossing_markings/crossing_markings-dots.svg create mode 100644 svg/iD-sprite/fields/crossing_markings/crossing_markings-ladder.svg create mode 100644 svg/iD-sprite/fields/crossing_markings/crossing_markings-ladder_paired.svg create mode 100644 svg/iD-sprite/fields/crossing_markings/crossing_markings-ladder_skewed.svg create mode 100644 svg/iD-sprite/fields/crossing_markings/crossing_markings-lines.svg create mode 100644 svg/iD-sprite/fields/crossing_markings/crossing_markings-lines_paired.svg create mode 100644 svg/iD-sprite/fields/crossing_markings/crossing_markings-surface.svg create mode 100644 svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra.svg create mode 100644 svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra_bicolour.svg create mode 100644 svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra_double.svg create mode 100644 svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra_paired.svg diff --git a/CHANGELOG.md b/CHANGELOG.md index d7400f7868..d766c42953 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -61,6 +61,7 @@ _Breaking developer changes, which may affect downstream projects or sites that * Add new field type `colour` ([schema-builder#38], [#8782]) * Add ability to reference strings of other presets/fields * Render `natural=strait` features in blue color ([#9294]) +* Show icons depicting the different values of the `crossing:markings` field #### :hammer: Development * Synchronize fetching of released presets files * Make settings like CDN and API urls configurable in a central config file (`/config/is.js`) diff --git a/css/80_app.css b/css/80_app.css index ec606a85a8..c2c8955441 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -1735,6 +1735,37 @@ a.hide-toggle { width: auto; } +.form-field-input-combo .tag-value-icon { + display: inline-block; + position: relative; + height: 24px; + width: 30px; + margin-right: -30px; + align-self: center; + vertical-align: middle; + z-index: 1; + text-align: center; +} +.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon { + margin-right: 0; + margin-left: -30px; +} +.tag-value-icon .icon { + width: 11px; + height: 17px; + margin: auto; +} +.ideditor[dir='ltr'] .form-field-input-combo .tag-value-icon + input { + padding-left: 30px; +} +.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon + input { + padding-right: 30px; +} +.combobox-option .tag-value-icon { + display: inline-block; + width: 18px; +} + /* Field - Text / Numeric ------------------------------------------------------- */ diff --git a/modules/ui/fields/combo.js b/modules/ui/fields/combo.js index df9e2a465b..b3a06cc60a 100644 --- a/modules/ui/fields/combo.js +++ b/modules/ui/fields/combo.js @@ -8,6 +8,7 @@ import { osmEntity } from '../../osm/entity'; import { t } from '../../core/localizer'; import { services } from '../../services'; import { uiCombobox } from '../combobox'; +import { svgIcon } from '../../svg/icon'; import { utilKeybinding } from '../../util/keybinding'; import { utilArrayUniq, utilGetSetValue, utilNoAuto, utilRebind, utilTotalExtent, utilUnicodeCharsCount } from '../../util'; @@ -20,6 +21,22 @@ export { uiFieldCombo as uiFieldTypeCombo }; +const valueIcons = { + 'crossing:markings': [ + 'dashes', + 'dots', + 'ladder:paired', + 'ladder:skewed', + 'ladder', + 'lines:paired', + 'lines', + 'surface', + 'zebra:bicolour', + 'zebra:double', + 'zebra:paired', + 'zebra', + ] +}; export function uiFieldCombo(field, context) { var dispatch = d3_dispatch('change'); @@ -165,7 +182,7 @@ export function uiFieldCombo(field, context) { key: v, value: stringsField.t('options.' + v, { default: v }), title: v, - display: stringsField.t.append('options.' + v, { default: v }), + display: beautifyDisplay(stringsField.t.append('options.' + v, { default: v }), v), klass: stringsField.hasTextForStringId('options.' + v) ? '' : 'raw-option' }; }); @@ -244,7 +261,7 @@ export function uiFieldCombo(field, context) { return { key: k, value: label, - display: stringsField.t.append('options.' + k, { default: k }), + display: beautifyDisplay(stringsField.t.append('options.' + k, { default: k }), k), title: isLocalizable ? k : (d.title !== label ? d.title : ''), klass: isLocalizable ? '' : 'raw-option' }; @@ -257,6 +274,20 @@ export function uiFieldCombo(field, context) { }); } + // adds icons to tag values which have one + function beautifyDisplay(disp, value) { + if (valueIcons[field.key] && valueIcons[field.key].indexOf(value) !== -1) { + return function(selection) { + selection + .insert('span', ':first-child') + .attr('class', 'tag-value-icon') + .call(svgIcon('#iD-crossing_markings-' + value.replace(':', '_'))); + disp.call(this, selection); + }; + } + return disp; + } + function setPlaceholder(values) { @@ -626,6 +657,21 @@ export function uiFieldCombo(field, context) { dispatch.call('change', this, t); } }); + + if (valueIcons[field.key]) { + _container.selectAll('.tag-value-icon').remove(); + var value = tags[field.key]; + if (valueIcons[field.key].indexOf(value) !== -1) { + var iconSelector = _container.selectAll('.tag-value-icon') + .data([value]); + + iconSelector + .enter() + .insert('div', 'input') + .attr('class', 'tag-value-icon') + .call(svgIcon('#iD-crossing_markings-' + value.replace(':', '_'))); + } + } } }; diff --git a/svg/iD-sprite/fields/crossing_markings/crossing_markings-dashes.svg b/svg/iD-sprite/fields/crossing_markings/crossing_markings-dashes.svg new file mode 100644 index 0000000000..319a26aca9 --- /dev/null +++ b/svg/iD-sprite/fields/crossing_markings/crossing_markings-dashes.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/svg/iD-sprite/fields/crossing_markings/crossing_markings-dots.svg b/svg/iD-sprite/fields/crossing_markings/crossing_markings-dots.svg new file mode 100644 index 0000000000..756aecff76 --- /dev/null +++ b/svg/iD-sprite/fields/crossing_markings/crossing_markings-dots.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/svg/iD-sprite/fields/crossing_markings/crossing_markings-ladder.svg b/svg/iD-sprite/fields/crossing_markings/crossing_markings-ladder.svg new file mode 100644 index 0000000000..730af04a53 --- /dev/null +++ b/svg/iD-sprite/fields/crossing_markings/crossing_markings-ladder.svg @@ -0,0 +1,21 @@ + + + + + + + + + diff --git a/svg/iD-sprite/fields/crossing_markings/crossing_markings-ladder_paired.svg b/svg/iD-sprite/fields/crossing_markings/crossing_markings-ladder_paired.svg new file mode 100644 index 0000000000..1434b1bb2b --- /dev/null +++ b/svg/iD-sprite/fields/crossing_markings/crossing_markings-ladder_paired.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + diff --git a/svg/iD-sprite/fields/crossing_markings/crossing_markings-ladder_skewed.svg b/svg/iD-sprite/fields/crossing_markings/crossing_markings-ladder_skewed.svg new file mode 100644 index 0000000000..7b24eefb60 --- /dev/null +++ b/svg/iD-sprite/fields/crossing_markings/crossing_markings-ladder_skewed.svg @@ -0,0 +1,21 @@ + + + + + + + + + diff --git a/svg/iD-sprite/fields/crossing_markings/crossing_markings-lines.svg b/svg/iD-sprite/fields/crossing_markings/crossing_markings-lines.svg new file mode 100644 index 0000000000..7d06fff7ed --- /dev/null +++ b/svg/iD-sprite/fields/crossing_markings/crossing_markings-lines.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/svg/iD-sprite/fields/crossing_markings/crossing_markings-lines_paired.svg b/svg/iD-sprite/fields/crossing_markings/crossing_markings-lines_paired.svg new file mode 100644 index 0000000000..6ea40bb495 --- /dev/null +++ b/svg/iD-sprite/fields/crossing_markings/crossing_markings-lines_paired.svg @@ -0,0 +1,15 @@ + + + + + + + diff --git a/svg/iD-sprite/fields/crossing_markings/crossing_markings-surface.svg b/svg/iD-sprite/fields/crossing_markings/crossing_markings-surface.svg new file mode 100644 index 0000000000..7dfc3b80f9 --- /dev/null +++ b/svg/iD-sprite/fields/crossing_markings/crossing_markings-surface.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + diff --git a/svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra.svg b/svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra.svg new file mode 100644 index 0000000000..7c2986d53f --- /dev/null +++ b/svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra.svg @@ -0,0 +1,15 @@ + + + + + + + diff --git a/svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra_bicolour.svg b/svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra_bicolour.svg new file mode 100644 index 0000000000..2658205b64 --- /dev/null +++ b/svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra_bicolour.svg @@ -0,0 +1,21 @@ + + + + + + + + + diff --git a/svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra_double.svg b/svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra_double.svg new file mode 100644 index 0000000000..4bab669c93 --- /dev/null +++ b/svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra_double.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + diff --git a/svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra_paired.svg b/svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra_paired.svg new file mode 100644 index 0000000000..8dfcf32f9f --- /dev/null +++ b/svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra_paired.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + +