diff --git a/css/80_app.css b/css/80_app.css index 12ec777cd..4e684b64d 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -1663,7 +1663,6 @@ input.date-selector { .form-field-input-multicombo li { display: inline-flex; flex-flow: row nowrap; - align-items: center; margin-bottom: 3px; margin-top: 3px; border-radius: 4px; @@ -1686,6 +1685,8 @@ input.date-selector { } .form-field-input-multicombo li.chip input { width: 1em; + height: 11px; + margin-top: 7px; } .ideditor[dir='ltr'] .form-field-input-multicombo li.chip { padding: 2px 0px 2px 5px; @@ -1716,9 +1717,11 @@ input.date-selector { flex: 1 1 auto; overflow: hidden; word-wrap: break-word; + margin-top: 4px; } -.form-field-input-multicombo a { +.form-field-input-multicombo a, +.form-field-input-multicombo button { font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; padding: 0px 5px 0px 5px; @@ -1728,6 +1731,35 @@ input.date-selector { display: block; text-align: center; flex: 0 0 auto; + background: transparent; + border: 0; +} + +.form-field-input-multicombo li.chip .field_buttons { + display: inline-block; + text-align: right; + margin-right: 2px; + margin-top: 2px; + margin-bottom: 2px; +} + +.form-field-input-multicombo li.chip .field_buttons a { + display: block; + float: right; + margin-top: -2px; + margin-bottom: -2px; +} + +.form-field-input-multicombo li.chip .field_buttons button { + display: inline-block; + margin-right: -4px; + margin-top: -4px; + margin-bottom: -2px; + margin-left: -2px; +} + +.form-field-input-multicombo li.chip .field_buttons button:hover { + background-color: transparent; } .form-field-input-multicombo .input-wrap { diff --git a/modules/ui/fields/combo.js b/modules/ui/fields/combo.js index 1a224d7cd..6c81d0542 100644 --- a/modules/ui/fields/combo.js +++ b/modules/ui/fields/combo.js @@ -677,7 +677,12 @@ export function uiFieldCombo(field, context) { .attr('class', 'chip'); enter.append('span'); - enter.append('a'); + const field_buttons = enter + .append('div') + .attr('class', 'field_buttons'); + field_buttons + .append('a') + .attr('class', 'remove'); chips = chips.merge(enter) .order() @@ -714,17 +719,35 @@ export function uiFieldCombo(field, context) { registerDragAndDrop(chips); } - chips.select('span').each(function(d) { + chips.each(function(d) { const selection = d3_select(this); - if (d.display) { - selection.text(''); - d.display(selection); - } else { - selection.text(d.value); + const text_span = selection.select('span'); + const field_buttons = selection.select('.field_buttons'); + const clean_value = d.value.trim(); + text_span.text(''); + if (clean_value.startsWith('https://')) { + // create a button to open the link in a new tab + text_span.text(clean_value); + field_buttons.select('button').remove(); + field_buttons.append('button') + .call(svgIcon('#iD-icon-out-link')) + .attr('class', 'form-field-button foreign-id-permalink') + .attr('title', () => t('icons.visit_website')) + .attr('aria-label', () => t('icons.visit_website')) + .on('click', function(d3_event) { + d3_event.preventDefault(); + window.open(clean_value, '_blank'); + }); + return; } + if (d.display) { + d.display(text_span); + return; + } + text_span.text(d.value); }); - chips.select('a') + chips.select('a.remove') .attr('href', '#') .on('click', removeMultikey) .attr('class', 'remove')