Get rid of extra form-label-button-wrap div

Buttons can now be directly appended to the form-field-label flex container

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

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

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){

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)

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')