From 50d204866bde517716f65ff419a9a69199f79c58 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Thu, 29 Nov 2018 22:31:58 -0500 Subject: [PATCH] Flexbox the raw member, membership controls, finish tag editor --- css/80_app.css | 101 +++++++++++++++------------- modules/ui/fields/radio.js | 2 +- modules/ui/fields/wikipedia.js | 4 +- modules/ui/raw_member_editor.js | 31 +++++---- modules/ui/raw_membership_editor.js | 59 ++++++++-------- modules/ui/raw_tag_editor.js | 2 +- 6 files changed, 107 insertions(+), 92 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 126894880..12fb9b707 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2079,6 +2079,39 @@ div.combobox { } +/* More Fields dropdown +------------------------------------------------------- */ +.more-fields { + padding: 0 20px 20px 20px; + font-weight: bold; +} +.changeset-editor .more-fields { + padding: 15px 20px 0 20px; +} + +.more-fields label { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; +} + +.more-fields input { + margin-left: 10px; + flex: 1 1 50%; +} +[dir='rtl'] .more-fields input { + margin-left: auto; + margin-right: 10px; +} + +.form-field-input-wrap .label { + height: 30px; + background: #f6f6f6; + padding: 5px 10px; +} + + /* Raw Tag Editor ------------------------------------------------------- */ .tag-list { @@ -2089,9 +2122,14 @@ div.combobox { position: relative; } .tag-row .inner-wrap { + display: flex; + flex-flow: row nowrap; width: 100%; position: relative; - display: flex; +} +.tag-row .key-wrap, +.tag-row .value-wrap { + flex: 1 1 auto; } .tag-row.readonly, @@ -2116,11 +2154,6 @@ div.combobox { border-right: 1px solid #ccc; } -.tag-row .key-wrap, -.tag-row .input-wrap-position { - flex: 1; - height: 30px; -} .tag-row input.key { font-weight: bold; @@ -2147,6 +2180,7 @@ div.combobox { border-top: 1px solid #ccc; } .tag-row button { + flex: 0 0 32px; height: 31px; width: 32px; border: 1px solid #ccc; @@ -2186,7 +2220,6 @@ div.combobox { .tag-row .tag-reference-button { border-radius: 0; - background: #fafafa; } [dir='rtl'] .tag-row .tag-reference-button { border-left-width: 1px; @@ -2257,19 +2290,28 @@ div.combobox { .raw-membership-editor .member-list li:first-child { padding-top: 10px; } -.raw-member-editor .member-row, -.raw-membership-editor .member-row { - position: relative; -} .raw-member-editor .member-row .member-entity-name, .raw-membership-editor .member-row .member-entity-name { font-weight: normal; padding-left: 10px; } +.form-field-input-member > input.member-role { + border-radius: 0 0 0 4px; +} +[dir='rtl'] .form-field-input-member > input.member-role { + border-radius: 0 0 4px 0; +} + +.member-incomplete .form-field-input-member > input.member-role, +[dir='rtl'] .member-incomplete .form-field-input-member > input.member-role { + border-radius: 0 0 4px 4px; +} + .member-incomplete .member-delete { display: none; } + .member-row-new .member-entity-input { border-radius: 4px 4px 0 0; border: 1px solid #ccc; @@ -2301,39 +2343,6 @@ input.key-trap { } -/* More Fields dropdown -------------------------------------------------------- */ -.more-fields { - padding: 0 20px 20px 20px; - font-weight: bold; -} -.changeset-editor .more-fields { - padding: 15px 20px 0 20px; -} - -.more-fields label { - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - align-items: center; -} - -.more-fields input { - margin-left: 10px; - flex: 1 1 50%; -} -[dir='rtl'] .more-fields input { - margin-left: auto; - margin-right: 10px; -} - -.form-field-input-wrap .label { - height: 30px; - background: #f6f6f6; - padding: 5px 10px; -} - - /* Inspector (hover styles) ------------------------------------------------------- */ .inspector-hover .form-field-input-wrap .label, @@ -2398,7 +2407,7 @@ input.key-trap { /* Styles for raw tag inspector on hover */ .inspector-hover .tag-row .key-wrap, -.inspector-hover .tag-row .input-wrap-position { +.inspector-hover .tag-row .value-wrap { height: 31px; } @@ -2638,7 +2647,7 @@ input.key-trap { display: none; } .data-editor.raw-tag-editor .tag-row .key-wrap, -.data-editor.raw-tag-editor .tag-row .input-wrap-position { +.data-editor.raw-tag-editor .tag-row .value-wrap { width: 50%; } diff --git a/modules/ui/fields/radio.js b/modules/ui/fields/radio.js index d4d0e8247..04d1197be 100644 --- a/modules/ui/fields/radio.js +++ b/modules/ui/fields/radio.js @@ -40,7 +40,7 @@ export function uiFieldRadio(field, context) { var enter = wrap.enter() .append('div') - .attr('class', 'form-field-input-wrap form-field-input-radio') + .attr('class', 'form-field-input-wrap form-field-input-radio'); enter .append('span') diff --git a/modules/ui/fields/wikipedia.js b/modules/ui/fields/wikipedia.js index b102e1410..589776e81 100644 --- a/modules/ui/fields/wikipedia.js +++ b/modules/ui/fields/wikipedia.js @@ -79,7 +79,7 @@ export function uiFieldWikipedia(field, context) { langRow = langRow.enter() .append('div') .attr('class', 'wiki-lang-container') - .merge(langRow) + .merge(langRow); lang = langRow.selectAll('input.wiki-lang') @@ -107,7 +107,7 @@ export function uiFieldWikipedia(field, context) { titleRow = titleRow.enter() .append('div') .attr('class', 'wiki-title-container') - .merge(titleRow) + .merge(titleRow); title = titleRow.selectAll('input.wiki-title') .data([0]); diff --git a/modules/ui/raw_member_editor.js b/modules/ui/raw_member_editor.js index b12678b78..98f5c4111 100644 --- a/modules/ui/raw_member_editor.js +++ b/modules/ui/raw_member_editor.js @@ -21,11 +21,12 @@ import { export function uiRawMemberEditor(context) { - var taginfo = services.taginfo, - _entityID; + var taginfo = services.taginfo; + var _entityID; function downloadMember(d) { d3_event.preventDefault(); + // display the loading indicator d3_select(this.parentNode).classed('tag-reference-loading', true); context.loadEntity(d.id); @@ -82,8 +83,8 @@ export function uiRawMemberEditor(context) { function rawMemberEditor(selection) { - var entity = context.entity(_entityID), - memberships = []; + var entity = context.entity(_entityID); + var memberships = []; entity.members.slice(0, 1000).forEach(function(member, index) { memberships.push({ @@ -108,8 +109,8 @@ export function uiRawMemberEditor(context) { ); - function content(wrap) { - var list = wrap.selectAll('.member-list') + function content(selection) { + var list = selection.selectAll('.member-list') .data([0]); list = list.enter() @@ -206,7 +207,11 @@ export function uiRawMemberEditor(context) { } }); - enter + var wrapEnter = enter + .append('div') + .attr('class', 'form-field-input-wrap form-field-input-member'); + + wrapEnter .append('input') .attr('class', 'member-role') .property('type', 'text') @@ -216,7 +221,7 @@ export function uiRawMemberEditor(context) { .property('value', function(d) { return d.role; }) .on('change', changeRole); - enter + wrapEnter .append('button') .attr('tabindex', -1) .attr('title', t('icons.remove')) @@ -225,17 +230,17 @@ export function uiRawMemberEditor(context) { .call(svgIcon('#iD-operation-delete')); if (taginfo) { - enter.each(bindTypeahead); + wrapEnter.each(bindTypeahead); } function bindTypeahead(d) { - var row = d3_select(this), - role = row.selectAll('input.member-role'); + var row = d3_select(this); + var role = row.selectAll('input.member-role'); function sort(value, data) { - var sameletter = [], - other = []; + var sameletter = []; + var other = []; for (var i = 0; i < data.length; i++) { if (data[i].value.substring(0, value.length) === value) { sameletter.push(data[i]); diff --git a/modules/ui/raw_membership_editor.js b/modules/ui/raw_membership_editor.js index e902317d7..be2b8b3a2 100644 --- a/modules/ui/raw_membership_editor.js +++ b/modules/ui/raw_membership_editor.js @@ -1,6 +1,5 @@ import _extend from 'lodash-es/extend'; import _filter from 'lodash-es/filter'; -import _forEach from 'lodash-es/forEach'; import _groupBy from 'lodash-es/groupBy'; import { @@ -28,9 +27,9 @@ import { utilDisplayName, utilNoAuto, utilHighlightEntity } from '../util'; export function uiRawMembershipEditor(context) { - var taginfo = services.taginfo, - _entityID, - _showBlank; + var taginfo = services.taginfo; + var _entityID; + var _showBlank; function selectRelation(d) { @@ -90,16 +89,14 @@ export function uiRawMembershipEditor(context) { var graph = context.graph(); context.intersects(context.extent()).forEach(function(entity) { - if (entity.type !== 'relation' || entity.id === _entityID) - return; + if (entity.type !== 'relation' || entity.id === _entityID) return; - var matched = context.presets().match(entity, graph), - presetName = (matched && matched.name()) || t('inspector.relation'), - entityName = utilDisplayName(entity) || ''; + var matched = context.presets().match(entity, graph); + var presetName = (matched && matched.name()) || t('inspector.relation'); + var entityName = utilDisplayName(entity) || ''; var value = presetName + ' ' + entityName; - if (q && value.toLowerCase().indexOf(q.toLowerCase()) === -1) - return; + if (q && value.toLowerCase().indexOf(q.toLowerCase()) === -1) return; result.push({ relation: entity, value: value }); }); @@ -120,7 +117,7 @@ export function uiRawMembershipEditor(context) { }); }); - _forEach(result, function(obj) { + result.forEach(function(obj) { obj.title = obj.value; }); @@ -130,9 +127,9 @@ export function uiRawMembershipEditor(context) { function rawMembershipEditor(selection) { - var entity = context.entity(_entityID), - parents = context.graph().parentRelations(entity), - memberships = []; + var entity = context.entity(_entityID); + var parents = context.graph().parentRelations(entity); + var memberships = []; parents.slice(0, 1000).forEach(function(relation) { relation.members.forEach(function(member, index) { @@ -154,8 +151,8 @@ export function uiRawMembershipEditor(context) { ); - function content(wrap) { - var list = wrap.selectAll('.member-list') + function content(selection) { + var list = selection.selectAll('.member-list') .data([0]); list = list.enter() @@ -187,7 +184,7 @@ export function uiRawMembershipEditor(context) { }); }); - var label = enter + var labelEnter = enter .append('label') .attr('class', 'form-field-label') .append('span') @@ -196,7 +193,7 @@ export function uiRawMembershipEditor(context) { .attr('href', '#') .on('click', selectRelation); - label + labelEnter .append('span') .attr('class', 'member-entity-type') .text(function(d) { @@ -204,12 +201,16 @@ export function uiRawMembershipEditor(context) { return (matched && matched.name()) || t('inspector.relation'); }); - label + labelEnter .append('span') .attr('class', 'member-entity-name') .text(function(d) { return utilDisplayName(d.relation); }); - enter + var wrapEnter = enter + .append('div') + .attr('class', 'form-field-input-wrap form-field-input-member'); + + wrapEnter .append('input') .attr('class', 'member-role') .property('type', 'text') @@ -219,7 +220,7 @@ export function uiRawMembershipEditor(context) { .property('value', function(d) { return d.member.role; }) .on('change', changeRole); - enter + wrapEnter .append('button') .attr('tabindex', -1) .attr('class', 'remove form-field-button member-delete') @@ -227,7 +228,7 @@ export function uiRawMembershipEditor(context) { .call(svgIcon('#iD-operation-delete')); if (taginfo) { - enter.each(bindTypeahead); + wrapEnter.each(bindTypeahead); } @@ -275,7 +276,7 @@ export function uiRawMembershipEditor(context) { ); - var addrel = wrap.selectAll('.add-relation') + var addrel = selection.selectAll('.add-relation') .data([0]); addrel = addrel.enter() @@ -287,7 +288,7 @@ export function uiRawMembershipEditor(context) { .call(svgIcon('#iD-icon-plus', 'light')) .on('click', function() { _showBlank = true; - content(wrap); + content(selection); list.selectAll('.member-entity-input').node().focus(); }); @@ -299,12 +300,12 @@ export function uiRawMembershipEditor(context) { function bindTypeahead(d) { - var row = d3_select(this), - role = row.selectAll('input.member-role'); + var row = d3_select(this); + var role = row.selectAll('input.member-role'); function sort(value, data) { - var sameletter = [], - other = []; + var sameletter = []; + var other = []; for (var i = 0; i < data.length; i++) { if (data[i].value.substring(0, value.length) === value) { sameletter.push(data[i]); diff --git a/modules/ui/raw_tag_editor.js b/modules/ui/raw_tag_editor.js index bc97d8248..3fedd01c6 100644 --- a/modules/ui/raw_tag_editor.js +++ b/modules/ui/raw_tag_editor.js @@ -122,7 +122,7 @@ export function uiRawTagEditor(context) { innerWrap .append('div') - .attr('class', 'input-wrap-position') + .attr('class', 'value-wrap') .append('input') .property('type', 'text') .attr('class', 'value')