diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7400f786..d766c4295 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 ec606a85a..c2c895544 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 df9e2a465..b3a06cc60 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 000000000..319a26aca
--- /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 000000000..756aecff7
--- /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 000000000..730af04a5
--- /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 000000000..1434b1bb2
--- /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 000000000..7b24eefb6
--- /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 000000000..7d06fff7e
--- /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 000000000..6ea40bb49
--- /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 000000000..7dfc3b80f
--- /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 000000000..7c2986d53
--- /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 000000000..2658205b6
--- /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 000000000..4bab669c9
--- /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 000000000..8dfcf32f9
--- /dev/null
+++ b/svg/iD-sprite/fields/crossing_markings/crossing_markings-zebra_paired.svg
@@ -0,0 +1,29 @@
+
+