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
This commit is contained in:
Martin Raifer
2023-01-24 15:09:14 +01:00
parent d9695f1cef
commit deb2b15cf4
2 changed files with 13 additions and 28 deletions

View File

@@ -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;
}

View File

@@ -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]}`));
}
}
}