Flexbox the raw member, membership controls, finish tag editor

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

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

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

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

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

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