From deb2b15cf49400649365bc0ef5fe732b8bd299b0 Mon Sep 17 00:00:00 2001
From: Martin Raifer <martin@raifer.tech>
Date: Tue, 24 Jan 2023 15:09:14 +0100
Subject: [PATCH] load value icons in combo fields, increase their size
 slightly

as specified in the tagging schema [v6](https://github.com/ideditor/schema-builder/blob/main/CHANGELOG.md#600)

for #9477
---
 css/80_app.css             | 10 +++++-----
 modules/ui/fields/combo.js | 31 ++++++++-----------------------
 2 files changed, 13 insertions(+), 28 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index de9ea0a8c..c2d0944b8 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -1753,19 +1753,19 @@ a.hide-toggle {
     padding-right: 11px;
 }
 .tag-value-icon .icon {
-    width: 11px;
-    height: 17px;
+    width: 21px;
+    height: 21px;
     margin: auto;
 }
 .ideditor[dir='ltr'] .form-field-input-combo .tag-value-icon + input {
-    padding-left: 30px;
+    padding-left: 40px;
 }
 .ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon + input {
-    padding-right: 30px;
+    padding-right: 40px;
 }
 .combobox-option .tag-value-icon {
     display: inline-block;
-    width: 18px;
+    width: 28px;
 }
 
 
diff --git a/modules/ui/fields/combo.js b/modules/ui/fields/combo.js
index b87af5267..4992aa304 100644
--- a/modules/ui/fields/combo.js
+++ b/modules/ui/fields/combo.js
@@ -22,23 +22,6 @@ 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');
     var _isMulti = (field.type === 'multiCombo' || field.type === 'manyCombo');
@@ -300,13 +283,14 @@ export function uiFieldCombo(field, context) {
 
     // adds icons to tag values which have one
     function addComboboxIcons(disp, value) {
-        if (valueIcons[field.key]) {
+        const iconsField = field.resolveReference('iconsCrossReference');
+        if (iconsField.icons) {
             return function(selection) {
                 var span = selection
                     .insert('span', ':first-child')
                     .attr('class', 'tag-value-icon');
-                if (valueIcons[field.key].indexOf(value) !== -1) {
-                    span.call(svgIcon('#iD-' + field.key.replace(/:/g, '_') + '-' + value.replace(/:/g, '_')));
+                if (iconsField.icons[value]) {
+                    span.call(svgIcon(`#${iconsField.icons[value]}`));
                 }
                 disp.call(this, selection);
             };
@@ -531,15 +515,16 @@ export function uiFieldCombo(field, context) {
 
     function updateIcon(value) {
         value = tagValue(value);
-        if (valueIcons[field.key]) {
+        const iconsField = field.resolveReference('iconsCrossReference');
+        if (iconsField.icons) {
             _container.selectAll('.tag-value-icon').remove();
-            if (valueIcons[field.key].indexOf(value) !== -1) {
+            if (iconsField.icons[value]) {
                 _container.selectAll('.tag-value-icon')
                     .data([value])
                     .enter()
                     .insert('div', 'input')
                     .attr('class', 'tag-value-icon')
-                    .call(svgIcon('#iD-' + field.key.replace(/:/g, '_') + '-' + value.replace(/:/g, '_')));
+                    .call(svgIcon(`#${iconsField.icons[value]}`));
             }
         }
     }