diff --git a/css/80_app.css b/css/80_app.css index b2be2f88b..6d83b1109 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -1237,7 +1237,7 @@ a.hide-toggle { margin-bottom: 0; } -.form-label { +.form-field-label { position: relative; font-weight: bold; color: #333; @@ -1248,49 +1248,45 @@ a.hide-toggle { flex: 1 1 100%; display: flex; } -.form-label .label-text { +.form-field-label .label-text { flex: 1 1 auto; padding: 5px 0 5px 10px; } -[dir='rtl'] .form-label .label-text { +[dir='rtl'] .form-field-label .label-text { padding: 5px 10px 5px 0; } -.form-label-button-wrap { - background: transparent; - flex: 0 1 auto; -} -.form-label-button-wrap .tag-reference-button { +.form-field-label .tag-reference-button { border-radius: 0 3px 0 0; } -.form-label-button-wrap .icon { +.form-field-label .icon { opacity: .5; } -.form-label button { +.form-field-label button { border-left: 1px solid #ccc; width: 32px; height: 100%; border-radius: 0; background: #f6f6f6; } -[dir='rtl'] .form-label button { +[dir='rtl'] .form-field-label button { border-left: none; border-right: 1px solid #ccc; border-radius: 4px 0 0 0; } -.form-label button:hover { +.form-field-label button:hover { background: #f1f1f1; } -.form-label .modified-icon, +.form-field-label .modified-icon, .form-field .remove-icon { display: none; } -.modified .form-label .modified-icon, -.present .form-label .remove-icon { +.modified .form-field-label .modified-icon, +.present .form-field-label .remove-icon { display: inline-block; } @@ -1392,7 +1388,7 @@ a.hide-toggle { .inspector-hover .form-field-multicombo .chips .remove, .inspector-hover .hide-toggle:before, .inspector-hover .more-fields, -.inspector-hover .form-label-button-wrap, +.inspector-hover .form-field-label button, .inspector-hover .tag-reference-button, .inspector-hover .footer * { opacity: 0; @@ -1813,7 +1809,7 @@ a.hide-toggle { } button.localized-add.disabled, -.localized-multilingual .form-label button.disabled, +.localized-multilingual .form-field-label button.disabled, .localized-multilingual .localized-lang.disabled, .localized-multilingual .localized-value.disabled { color: #777; @@ -1960,19 +1956,10 @@ button.localized-add.disabled, .form-field-comment:not(.present) #preset-input-comment { border-color: rgb(230, 100, 100); } - -.form-field-comment:not(.present) .form-label { +.form-field-comment:not(.present) .form-field-label { border-color: rgb(230, 100, 100); background: rgba(230, 100, 100, 0.2); } - -.form-field-comment:not(.present) .form-label { -} - -.form-field-comment:not(.present) .form-label-button-wrap { - border-color: rgb(230, 100, 100); -} - .form-field-comment:not(.present) button { border-color: rgb(230, 100, 100); } diff --git a/modules/ui/field.js b/modules/ui/field.js index d1f09a286..0fef60cef 100644 --- a/modules/ui/field.js +++ b/modules/ui/field.js @@ -106,20 +106,16 @@ export function uiField(context, presetField, entity, options) { if (options.wrap) { var label = enter .append('label') - .attr('class', 'form-label') + .attr('class', 'form-field-label') .attr('for', function(d) { return 'preset-input-' + d.safeid; }); - + label .append('span') .attr('class', 'label-text') .text(function(d) { return d.label(); }); - var wrap = label - .append('div') - .attr('class', 'form-label-button-wrap'); - if (options.remove) { - wrap + label .append('button') .attr('class', 'remove-icon') .attr('title', t('icons.remove')) @@ -128,7 +124,7 @@ export function uiField(context, presetField, entity, options) { } if (options.revert) { - wrap + label .append('button') .attr('class', 'modified-icon') .attr('title', t('icons.undo')) @@ -142,10 +138,10 @@ export function uiField(context, presetField, entity, options) { container = container .merge(enter); - container.selectAll('.form-label-button-wrap .remove-icon') + container.selectAll('.form-field-label > .remove-icon') .on('click', remove); - container.selectAll('.form-label-button-wrap .modified-icon') + container.selectAll('.form-field-label > .modified-icon') .on('click', revert); container @@ -179,7 +175,7 @@ export function uiField(context, presetField, entity, options) { if (help) { d3_select(this) .call(help.body) - .select('.form-label-button-wrap') + .select('.form-field-label') .call(help.button); } @@ -187,7 +183,7 @@ export function uiField(context, presetField, entity, options) { if (reference) { d3_select(this) .call(reference.body) - .select('.form-label-button-wrap') + .select('.form-field-label') .call(reference.button); } diff --git a/modules/ui/fields/localized.js b/modules/ui/fields/localized.js index 2f7c2b50a..033ef16fb 100644 --- a/modules/ui/fields/localized.js +++ b/modules/ui/fields/localized.js @@ -335,7 +335,7 @@ export function uiFieldLocalized(field, context) { var label = wrap .append('label') - .attr('class', 'form-label'); + .attr('class', 'form-field-label'); label .append('span') @@ -343,8 +343,6 @@ export function uiFieldLocalized(field, context) { .text(t('translate.localized_translation_label')); label - .append('div') - .attr('class', 'form-label-button-wrap') .append('button') .attr('class', 'minor remove-icon-multilingual') .on('click', function(d){ diff --git a/modules/ui/raw_member_editor.js b/modules/ui/raw_member_editor.js index 656227c79..336b363db 100644 --- a/modules/ui/raw_member_editor.js +++ b/modules/ui/raw_member_editor.js @@ -145,8 +145,9 @@ export function uiRawMemberEditor(context) { utilHighlightEntity(d.id, false, context); }); - var label = d3_select(this).append('label') - .attr('class', 'form-label'); + var label = d3_select(this) + .append('label') + .attr('class', 'form-field-label'); var labelLink = label .append('span') @@ -155,21 +156,21 @@ export function uiRawMemberEditor(context) { .attr('href', '#') .on('click', selectMember); - labelLink.append('span') + labelLink + .append('span') .attr('class', 'member-entity-type') .text(function(d) { var matched = context.presets().match(d.member, context.graph()); return (matched && matched.name()) || utilDisplayType(d.member.id); }); - labelLink.append('span') + labelLink + .append('span') .attr('class', 'member-entity-name') .text(function(d) { return utilDisplayName(d.member); }); - var buttonWrap = label.append('div') - .attr('class', 'form-label-button-wrap'); - - buttonWrap.append('button') + label + .append('button') .attr('class', 'download-icon') .attr('title', t('icons.zoom_to')) .attr('tabindex', -1) @@ -177,25 +178,26 @@ export function uiRawMemberEditor(context) { .on('click', zoomToMember); } else { - var incompleteLabel = d3_select(this).append('label') - .attr('class', 'form-label'); + var incompleteLabel = d3_select(this) + .append('label') + .attr('class', 'form-field-label'); var labelText = incompleteLabel .append('span') .attr('class', 'label-text'); - labelText.append('span') + labelText + .append('span') .attr('class', 'member-entity-type') .text(t('inspector.'+d.type, { id: d.id })); - labelText.append('span') + labelText + .append('span') .attr('class', 'member-entity-name') .text(t('inspector.incomplete', { id: d.id })); - var wrap = incompleteLabel.append('div') - .attr('class', 'form-label-button-wrap'); - - wrap.append('button') + incompleteLabel + .append('button') .attr('class', 'download-icon') .attr('title', t('icons.download')) .attr('tabindex', -1) diff --git a/modules/ui/raw_membership_editor.js b/modules/ui/raw_membership_editor.js index 123907bb7..d37e64a49 100644 --- a/modules/ui/raw_membership_editor.js +++ b/modules/ui/raw_membership_editor.js @@ -189,7 +189,7 @@ export function uiRawMembershipEditor(context) { var label = enter .append('label') - .attr('class', 'form-label') + .attr('class', 'form-field-label') .append('span') .attr('class', 'label-text') .append('a')