wip changing all fields to use flexbox everywhere

modules/lib/d3.combobox.js

@@ -242,8 +242,8 @@ export function d3combobox() {
 
         function render() {
             if (_suggestions.length >= _minItems &&
-                document.activeElement === input.node() &&
-                input.attr('readonly') === null) {
+                document.activeElement === input.node()) {
+                // input.attr('readonly') === null)
                 show();
             } else {
                 hide();

modules/ui/fields/access.js

@@ -19,8 +19,7 @@ export function uiFieldAccess(field, context) {
 
         wrap = wrap.enter()
             .append('div')
-            .attr('class', 'form-field-input-wrap')
-            .append('ul')
+            .attr('class', 'form-field-input-wrap form-field-input-' + field.type)
             .merge(wrap);
 
         var list = wrap.selectAll('ul')
@@ -214,6 +213,8 @@ export function uiFieldAccess(field, context) {
             .attr('placeholder', 'yes');
 
         var which = tags.highway;
+        if (!placeholders[which]) return;
+
         var keys = Object.keys(placeholders[which]);
         keys.forEach(function(k) {
             var v = placeholders[which][k];

modules/ui/fields/address.js

@@ -148,11 +148,11 @@ export function uiFieldAddress(field, context) {
             });
         }
 
-        wrap.selectAll('div.addr-row')
+        wrap.selectAll('div.form-row-container')
             .data(addressFormat.format)
             .enter()
             .append('div')
-            .attr('class', 'addr-row')
+            .attr('class', 'form-row-container')
             .selectAll('input')
             .data(row)
             .enter()
@@ -212,7 +212,7 @@ export function uiFieldAddress(field, context) {
 
         wrap = wrap.enter()
             .append('div')
-            .attr('class', 'form-field-input-wrap')
+            .attr('class', 'form-field-input-wrap form-field-input-' + field.type)
             .merge(wrap);
 
         if (nominatim && _entity) {

modules/ui/fields/check.js

@@ -90,14 +90,13 @@ export function uiFieldCheck(field, context) {
 
     var check = function(selection) {
         checkImpliedYes();
-        selection.classed('checkselect', 'true');
 
         label = selection.selectAll('.form-field-input-wrap')
             .data([0]);
 
         var enter = label.enter()
             .append('label')
-            .attr('class', 'form-field-input-wrap');
+            .attr('class', 'form-field-input-wrap form-field-input-check');
 
         enter
             .append('input')

modules/ui/fields/combo.js

@@ -286,19 +286,26 @@ export function uiFieldCombo(field, context) {
 
 
     function combo(selection) {
+        container = selection.selectAll('.form-field-input-wrap')
+            .data([0]);
+
+        var type = (isMulti || isSemi) ? 'multicombo': 'combo';
+        container = container.enter()
+            .append('div')
+            .attr('class', 'form-field-input-wrap form-field-input-' + type)
+            .merge(container);
+
         if (isMulti || isSemi) {
-            container = selection.selectAll('ul').data([0]);
+            container = container.selectAll('.chiplist')
+                .data([0]);
 
             container = container.enter()
                 .append('ul')
-                .attr('class', 'form-field-multicombo')
+                .attr('class', 'chiplist')
                 .on('click', function() {
                     window.setTimeout(function() { input.node().focus(); }, 10);
                 })
                 .merge(container);
-
-        } else {
-            container = selection;
         }
 
         input = container.selectAll('input')

modules/ui/fields/cycleway.js

@@ -26,7 +26,7 @@ export function uiFieldCycleway(field, context) {
 
         wrap = wrap.enter()
             .append('div')
-            .attr('class', 'form-field-input-wrap')
+            .attr('class', 'form-field-input-wrap form-field-input-' + field.type)
             .merge(wrap);
 
 

modules/ui/fields/input.js

@@ -42,9 +42,17 @@ export function uiFieldText(field, context) {
         var preset = _entity && context.presets().match(_entity, context.graph());
         var isSuggestion = preset && preset.suggestion && field.id === 'brand';
 
+        var wrap = selection.selectAll('.form-field-input-wrap')
+            .data([0]);
+
+        wrap = wrap.enter()
+            .append('div')
+            .attr('class', 'form-field-input-wrap form-field-input-' + field.type)
+            .merge(wrap);
+
         var fieldID = 'preset-input-' + field.safeid;
 
-        input = selection.selectAll('input')
+        input = wrap.selectAll('input')
             .data([0]);
 
         input = input.enter()
@@ -68,7 +76,7 @@ export function uiFieldText(field, context) {
             var center = _entity.extent(context.graph()).center();
             nominatim.countryCode(center, function (err, countryCode) {
                 if (err || !dataPhoneFormats[countryCode]) return;
-                selection.selectAll('#' + fieldID)
+                wrap.selectAll('#' + fieldID)
                     .attr('placeholder', dataPhoneFormats[countryCode]);
             });
 
@@ -77,31 +85,17 @@ export function uiFieldText(field, context) {
 
             input.attr('type', 'text');
 
-            var spinControl = selection.selectAll('.spin-control')
-                .data([0]);
+            var buttons = wrap.selectAll('.increment, .decrement')
+                .data(rtl ? [1, -1] : [-1, 1]);
 
-            var enter = spinControl.enter()
-                .append('div')
-                .attr('class', 'spin-control');
-
-            enter
+            buttons.enter()
                 .append('button')
-                .datum(rtl ? 1 : -1)
-                .attr('class', 'button-input-action minor')
-                .classed(rtl ? 'increment' : 'decrement', true)
-                .attr('tabindex', -1);
-
-            enter
-                .append('button')
-                .datum(rtl ? -1 : 1)
-                .attr('class', 'button-input-action minor')
-                .classed(rtl ? 'decrement' : 'increment', true)
-                .attr('tabindex', -1);
-
-            spinControl = spinControl
-                .merge(enter);
-
-            spinControl.selectAll('button')
+                .attr('tabindex', -1)
+                .attr('class', function(d) {
+                    var which = (d === 1 ? 'increment' : 'decrement');
+                    return 'form-field-button ' + which;
+                })
+                .merge(buttons)
                 .on('click', function(d) {
                     d3_event.preventDefault();
                     input.node().value = parsed(input.node().value) + d;
@@ -118,7 +112,7 @@ export function uiFieldText(field, context) {
                     .filter(function(k) { return k !== pKey && k !== 'name'; });
             }
 
-            selection.call(isSuggestion ? _brandTip : _brandTip.destroy);
+            wrap.call(isSuggestion ? _brandTip : _brandTip.destroy);
         }
     }
 
@@ -128,6 +122,7 @@ export function uiFieldText(field, context) {
         return parseFloat(val || 0, 10) || 0;
     }
 
+
     // clamp number to min/max
     function clamped(num) {
         if (field.minValue !== undefined) {

modules/ui/fields/lanes.js

@@ -24,7 +24,7 @@ export function uiFieldLanes(field, context) {
 
         wrap = wrap.enter()
             .append('div')
-            .attr('class', 'form-field-input-wrap')
+            .attr('class', 'form-field-input-wrap form-field-input-' + field.type)
             .merge(wrap);
 
         var surface =  wrap.selectAll('.surface')

modules/ui/fields/localized.js

@@ -67,13 +67,13 @@ export function uiFieldLocalized(field, context) {
         calcLocked();
         var preset = _entity && context.presets().match(_entity, context.graph());
 
-        var wrap = selection.selectAll('.localized-input-wrap')
+        var wrap = selection.selectAll('.form-field-input-wrap')
             .data([0]);
 
         // enter/update
         wrap = wrap.enter()
             .append('div')
-            .attr('class', 'localized-input-wrap')
+            .attr('class', 'form-field-input-wrap form-field-input-' + field.type)
             .merge(wrap)
             .call(_isLocked ? _brandTip : _brandTip.destroy);
 
@@ -157,7 +157,7 @@ export function uiFieldLocalized(field, context) {
 
         translateButton = translateButton.enter()
             .append('button')
-            .attr('class', 'localized-add button-input-action minor')
+            .attr('class', 'localized-add form-field-button')
             .attr('tabindex', -1)
             .call(svgIcon('#iD-icon-plus'))
             .merge(translateButton);
@@ -344,7 +344,7 @@ export function uiFieldLocalized(field, context) {
 
                 label
                     .append('button')
-                    .attr('class', 'minor remove-icon-multilingual')
+                    .attr('class', 'remove-icon-multilingual')
                     .on('click', function(d){
                         if (_isLocked) return;
                         d3_event.preventDefault();

modules/ui/fields/maxspeed.js

@@ -15,11 +15,11 @@ import {
 
 export function uiFieldMaxspeed(field, context) {
     var dispatch = d3_dispatch('change');
-    var _entity;
-    var isImperial;
     var unitInput = d3_select(null);
     var input = d3_select(null);
     var combobox;
+    var _entity;
+    var _isImperial;
 
     var metricValues = [20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120];
     var imperialValues = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80];
@@ -33,7 +33,16 @@ export function uiFieldMaxspeed(field, context) {
             .container(context.container())
             .data(['km/h', 'mph'].map(comboValues));
 
-        input = selection.selectAll('#preset-input-' + field.safeid)
+        var wrap = selection.selectAll('.form-field-input-wrap')
+            .data([0]);
+
+        wrap = wrap.enter()
+            .append('div')
+            .attr('class', 'form-field-input-wrap form-field-input-' + field.type)
+            .merge(wrap);
+
+
+        input = wrap.selectAll('#preset-input-' + field.safeid)
             .data([0]);
 
         input = input.enter()
@@ -52,19 +61,18 @@ export function uiFieldMaxspeed(field, context) {
         var loc;
         if (_entity.type === 'node') {
             loc = _entity.loc;
-        }
-        else {
+        } else {
             var childNodes = context.graph().childNodes(context.entity(_entity.id));
             loc = childNodes[~~(childNodes.length/2)].loc;
         }
 
-        isImperial = _some(dataImperial.features, function(f) {
+        _isImperial = _some(dataImperial.features, function(f) {
             return _some(f.geometry.coordinates, function(d) {
                 return geoPointInPolygon(loc, d);
             });
         });
 
-        unitInput = selection.selectAll('input.maxspeed-unit')
+        unitInput = wrap.selectAll('input.maxspeed-unit')
             .data([0]);
 
         unitInput = unitInput.enter()
@@ -80,8 +88,8 @@ export function uiFieldMaxspeed(field, context) {
 
 
         function changeUnits() {
-            isImperial = utilGetSetValue(unitInput) === 'mph';
-            utilGetSetValue(unitInput, isImperial ? 'mph' : 'km/h');
+            _isImperial = utilGetSetValue(unitInput) === 'mph';
+            utilGetSetValue(unitInput, _isImperial ? 'mph' : 'km/h');
             setSuggestions();
             change();
         }
@@ -89,8 +97,8 @@ export function uiFieldMaxspeed(field, context) {
 
 
     function setSuggestions() {
-        combobox.data((isImperial ? imperialValues : metricValues).map(comboValues));
-        utilGetSetValue(unitInput, isImperial ? 'mph' : 'km/h');
+        combobox.data((_isImperial ? imperialValues : metricValues).map(comboValues));
+        utilGetSetValue(unitInput, _isImperial ? 'mph' : 'km/h');
     }
 
 
@@ -108,7 +116,7 @@ export function uiFieldMaxspeed(field, context) {
 
         if (!value) {
             tag[field.key] = undefined;
-        } else if (isNaN(value) || !isImperial) {
+        } else if (isNaN(value) || !_isImperial) {
             tag[field.key] = value;
         } else {
             tag[field.key] = value + ' mph';
@@ -123,9 +131,9 @@ export function uiFieldMaxspeed(field, context) {
 
         if (value && value.indexOf('mph') >= 0) {
             value = parseInt(value, 10);
-            isImperial = true;
+            _isImperial = true;
         } else if (value) {
-            isImperial = false;
+            _isImperial = false;
         }
 
         setSuggestions();

modules/ui/fields/radio.js

@@ -27,7 +27,7 @@ export function uiFieldRadio(field, context) {
 
 
     function selectedKey() {
-        var node = wrap.selectAll('.toggle-list label.active input');
+        var node = wrap.selectAll('.form-field-input-radio label.active input');
         return !node.empty() && node.datum();
     }
 
@@ -40,7 +40,7 @@ export function uiFieldRadio(field, context) {
 
         var enter = wrap.enter()
             .append('div')
-            .attr('class', 'form-field-input-wrap toggle-list');
+            .attr('class', 'form-field-input-wrap form-field-input-radio')
 
         enter
             .append('span')

modules/ui/fields/restrictions.js

@@ -107,7 +107,7 @@ export function uiFieldRestrictions(field, context) {
 
         wrap = wrap.enter()
             .append('div')
-            .attr('class', 'form-field-input-wrap')
+            .attr('class', 'form-field-input-wrap form-field-input-' + field.type)
             .merge(wrap);
 
         var container = wrap.selectAll('.restriction-container')

modules/ui/fields/textarea.js

@@ -15,7 +15,15 @@ export function uiFieldTextarea(field) {
 
 
     function textarea(selection) {
-        input = selection.selectAll('textarea')
+        var wrap = selection.selectAll('.form-field-input-wrap')
+            .data([0]);
+
+        wrap = wrap.enter()
+            .append('div')
+            .attr('class', 'form-field-input-wrap form-field-input-' + field.type)
+            .merge(wrap);
+
+        input = wrap.selectAll('textarea')
             .data([0]);
 
         input = input.enter()

modules/ui/fields/wikipedia.js

@@ -27,7 +27,6 @@ export function uiFieldWikipedia(field, context) {
     var dispatch = d3_dispatch('change');
     var wikipedia = services.wikipedia;
     var wikidata = services.wikidata;
-    var link = d3_select(null);
     var lang = d3_select(null);
     var title = d3_select(null);
     var _wikiURL = '';
@@ -65,7 +64,25 @@ export function uiFieldWikipedia(field, context) {
             });
 
 
-        lang = selection.selectAll('input.wiki-lang')
+        var wrap = selection.selectAll('.form-field-input-wrap')
+            .data([0]);
+
+        wrap = wrap.enter()
+            .append('div')
+            .attr('class', 'form-field-input-wrap form-field-input-' + field.type)
+            .merge(wrap);
+
+
+        var langRow = wrap.selectAll('.wiki-lang-container')
+            .data([0]);
+
+        langRow = langRow.enter()
+            .append('div')
+            .attr('class', 'form-row-container wiki-lang-container')
+            .merge(langRow)
+
+
+        lang = langRow.selectAll('input.wiki-lang')
             .data([0]);
 
         lang = lang.enter()
@@ -84,7 +101,15 @@ export function uiFieldWikipedia(field, context) {
             .on('change', changeLang);
 
 
-        title = selection.selectAll('input.wiki-title')
+        var titleRow = wrap.selectAll('.wiki-title-container')
+            .data([0]);
+
+        titleRow = titleRow.enter()
+            .append('div')
+            .attr('class', 'form-row-container wiki-title-container')
+            .merge(titleRow)
+
+        title = titleRow.selectAll('input.wiki-title')
             .data([0]);
 
         title = title.enter()
@@ -101,12 +126,12 @@ export function uiFieldWikipedia(field, context) {
             .on('change', change);
 
 
-        link = selection.selectAll('.wiki-link')
+        var link = titleRow.selectAll('.wiki-link')
             .data([0]);
 
         link = link.enter()
             .append('button')
-            .attr('class', 'button-input-action wiki-link minor')
+            .attr('class', 'form-field-button wiki-link')
             .attr('tabindex', -1)
             .call(svgIcon('#iD-icon-out-link'))
             .merge(link);

modules/ui/raw_member_editor.js

@@ -220,7 +220,7 @@ export function uiRawMemberEditor(context) {
                 .append('button')
                 .attr('tabindex', -1)
                 .attr('title', t('icons.remove'))
-                .attr('class', 'remove button-input-action member-delete minor')
+                .attr('class', 'remove form-field-button member-delete')
                 .on('click', deleteMember)
                 .call(svgIcon('#iD-operation-delete'));
 

modules/ui/raw_membership_editor.js

@@ -222,7 +222,7 @@ export function uiRawMembershipEditor(context) {
             enter
                 .append('button')
                 .attr('tabindex', -1)
-                .attr('class', 'remove button-input-action member-delete minor')
+                .attr('class', 'remove form-field-button member-delete')
                 .on('click', deleteMembership)
                 .call(svgIcon('#iD-operation-delete'));
 
@@ -259,7 +259,7 @@ export function uiRawMembershipEditor(context) {
             enter
                 .append('button')
                 .attr('tabindex', -1)
-                .attr('class', 'remove button-input-action member-delete minor')
+                .attr('class', 'remove form-field-button member-delete')
                 .on('click', deleteMembership)
                 .call(svgIcon('#iD-operation-delete'));
 

modules/ui/raw_tag_editor.js

@@ -135,7 +135,7 @@ export function uiRawTagEditor(context) {
         innerWrap
             .append('button')
             .attr('tabindex', -1)
-            .attr('class', 'remove minor')
+            .attr('class', 'form-field-button remove')
             .call(svgIcon('#iD-operation-delete'));