From 4e3def9ce8f90b772d3d4674a95057580786d20b Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Fri, 18 Jan 2019 13:48:17 -0500 Subject: [PATCH] Fix the width of the add-tag and add-relation buttons (closes #5729) --- css/80_app.css | 65 +++++++++++++++-------------- modules/ui/raw_membership_editor.js | 50 ++++++++++++++-------- modules/ui/raw_tag_editor.js | 28 +++++++++---- 3 files changed, 88 insertions(+), 55 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 91d6ba38f..ea6981236 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2128,7 +2128,7 @@ div.combobox { } .tag-row .key-wrap, .tag-row .value-wrap { - flex: 1 1 auto; + flex: 1 1 50%; } .tag-row.readonly, @@ -2225,22 +2225,6 @@ div.combobox { border-right-width: 0; } -/* Adding form fields to tag editor */ -.raw-tag-editor .add-tag { - width: 40%; - height: 30px; - border-top: 0; - background: rgba(0,0,0,.5); - border-radius: 0 0 4px 4px; -} -.raw-tag-editor .add-tag:focus, -.raw-tag-editor .add-tag:hover { - background: rgba(0,0,0,.8); -} -.raw-tag-editor .add-tag .label { - display: none; -} - /* Tag reference */ .tag-reference-loading { background-color: #f5f5f5; @@ -2325,18 +2309,6 @@ div.combobox { border: 0; } -.add-relation { - width: 40%; - height: 30px; - background: rgba(0,0,0,.5); - border-radius: 4px; - margin-top: 10px; -} -.add-relation:focus, -.add-relation:hover { - background: rgba(0,0,0,.8); -} - /* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */ .raw-membership-editor.inspector-inner { margin-bottom: 150px; @@ -2351,6 +2323,38 @@ input.key-trap { } +/* add tag, add relation buttons */ +.add-row { + display: flex; + width: 100%; + flex-flow: row nowrap; +} +.add-row .add-tag, +.add-row .add-relation, +.add-row .space-value { + flex: 1 1 50%; +} +.add-row .space-buttons { + flex: 0 0 62px; +} +.add-row button { + height: 30px; + background: rgba(0,0,0,.5); +} +.add-row button:focus, +.add-row button:hover { + background: rgba(0,0,0,.8); +} + +.add-tag { + border-radius: 0 0 4px 4px; +} +.add-relation { + margin-top: 10px; + border-radius: 4px; +} + + /* Inspector (hover styles) ------------------------------------------------------- */ .inspector-hover .form-field-input-wrap .label, @@ -2395,8 +2399,7 @@ input.key-trap { .inspector-hover .form-field-input-radio label, .inspector-hover .form-field-input-radio label span, .inspector-hover .form-field-input-radio label.remove .icon, -.inspector-hover .inspector-inner .add-tag, -.inspector-hover .inspector-inner .add-relation { +.inspector-hover .inspector-inner .add-row { display: none; } diff --git a/modules/ui/raw_membership_editor.js b/modules/ui/raw_membership_editor.js index 0e88d853a..db941f4f3 100644 --- a/modules/ui/raw_membership_editor.js +++ b/modules/ui/raw_membership_editor.js @@ -187,12 +187,13 @@ export function uiRawMembershipEditor(context) { itemsEnter.each(function(d){ // highlight the relation in the map while hovering on the list item - d3_select(this).on('mouseover', function() { - utilHighlightEntity(d.relation.id, true, context); - }); - d3_select(this).on('mouseout', function() { - utilHighlightEntity(d.relation.id, false, context); - }); + d3_select(this) + .on('mouseover', function() { + utilHighlightEntity(d.relation.id, true, context); + }) + .on('mouseout', function() { + utilHighlightEntity(d.relation.id, false, context); + }); }); var labelEnter = itemsEnter @@ -281,11 +282,11 @@ export function uiRawMembershipEditor(context) { .append('button') .attr('tabindex', -1) .attr('class', 'remove form-field-button member-delete') + .call(svgIcon('#iD-operation-delete')) .on('click', function() { list.selectAll('.member-row-new') .remove(); - }) - .call(svgIcon('#iD-operation-delete')); + }); // Update newMembership = newMembership @@ -301,18 +302,33 @@ export function uiRawMembershipEditor(context) { ); - var addrel = selection.selectAll('.add-relation') + // Container for the Add button + var addRow = selection.selectAll('.add-row') .data([0]); - // Enter - var addrelEnter = addrel.enter() - .append('button') - .attr('class', 'add-relation'); + // enter + var addRowEnter = addRow.enter() + .append('div') + .attr('class', 'add-row'); - // Update - addrel - .merge(addrelEnter) - .call(svgIcon('#iD-icon-plus', 'light')) + addRowEnter + .append('button') + .attr('class', 'add-relation') + .call(svgIcon('#iD-icon-plus', 'light')); + + addRowEnter + .append('div') + .attr('class', 'space-value'); // preserve space + + addRowEnter + .append('div') + .attr('class', 'space-buttons'); // preserve space + + // update + addRow = addRow + .merge(addRowEnter); + + addRow.select('.add-relation') .on('click', function() { _showBlank = true; content(selection); diff --git a/modules/ui/raw_tag_editor.js b/modules/ui/raw_tag_editor.js index 0194382af..08a7fce7c 100644 --- a/modules/ui/raw_tag_editor.js +++ b/modules/ui/raw_tag_editor.js @@ -67,6 +67,7 @@ export function uiRawTagEditor(context) { _newRow = ''; } + // List of tags var list = wrap.selectAll('.tag-list') .data([0]); @@ -75,16 +76,30 @@ export function uiRawTagEditor(context) { .attr('class', 'tag-list') .merge(list); - var newTag = wrap.selectAll('.add-tag') - .data([0]); - newTag.enter() + // Container for the Add button + var addRowEnter = wrap.selectAll('.add-row') + .data([0]) + .enter() + .append('div') + .attr('class', 'add-row'); + + addRowEnter .append('button') .attr('class', 'add-tag') - .on('click', addTag) - .call(svgIcon('#iD-icon-plus', 'light')); + .call(svgIcon('#iD-icon-plus', 'light')) + .on('click', addTag); + + addRowEnter + .append('div') + .attr('class', 'space-value'); // preserve space + + addRowEnter + .append('div') + .attr('class', 'space-buttons'); // preserve space + // Tag list items var items = list.selectAll('.tag-row') .data(entries, function(d) { return d.key; }); @@ -92,8 +107,8 @@ export function uiRawTagEditor(context) { .each(unbind) .remove(); - // Enter + // Enter var enter = items.enter() .append('li') .attr('class', 'tag-row') @@ -133,7 +148,6 @@ export function uiRawTagEditor(context) { // Update - items = items .merge(enter) .sort(function(a, b) {