diff --git a/css/80_app.css b/css/80_app.css index 50eb8ccab..dad03b124 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -1056,6 +1056,7 @@ button.save.has-count .count::before { transition: margin-bottom 200ms; } +.form-field.nowrap, .wrap-form-field:last-child .form-field { margin-bottom: 0; } diff --git a/modules/ui/field.js b/modules/ui/field.js index 069dc9805..148369f1d 100644 --- a/modules/ui/field.js +++ b/modules/ui/field.js @@ -7,7 +7,12 @@ import { uiTagReference } from './tag_reference'; import { utilRebind } from '../util'; -export function uiField(context, presetField, entity, show) { +export function uiField(context, presetField, entity, options) { + options = _.extend({ + show: true, + wrap: true + }, options); + var dispatch = d3.dispatch('change'), field = _.clone(presetField), state = '', @@ -25,7 +30,7 @@ export function uiField(context, presetField, entity, show) { field.keys = field.keys || [field.key]; - field.show = show; + field.show = options.show; function isModified() { @@ -77,31 +82,34 @@ export function uiField(context, presetField, entity, show) { // Enter var enter = container.enter() .append('div') - .attr('class', function(d) { return 'form-field form-field-' + d.id; }); + .attr('class', function(d) { return 'form-field form-field-' + d.id; }) + .classed('nowrap', !options.wrap); - var label = enter - .append('label') - .attr('class', 'form-label') - .attr('for', function(d) { return 'preset-input-' + d.id; }) - .text(function(d) { return d.label(); }); + if (options.wrap) { + var label = enter + .append('label') + .attr('class', 'form-label') + .attr('for', function(d) { return 'preset-input-' + d.id; }) + .text(function(d) { return d.label(); }); - var wrap = label - .append('div') - .attr('class', 'form-label-button-wrap'); + var wrap = label + .append('div') + .attr('class', 'form-label-button-wrap'); - wrap - .append('button') - .attr('class', 'remove-icon') - .attr('tabindex', -1) - .call(svgIcon('#operation-delete')); + wrap + .append('button') + .attr('class', 'remove-icon') + .attr('tabindex', -1) + .call(svgIcon('#operation-delete')); - wrap - .append('button') - .attr('class', 'modified-icon') - .attr('tabindex', -1) - .call( - (textDirection === 'rtl') ? svgIcon('#icon-redo') : svgIcon('#icon-undo') - ); + wrap + .append('button') + .attr('class', 'modified-icon') + .attr('tabindex', -1) + .call( + (textDirection === 'rtl') ? svgIcon('#icon-redo') : svgIcon('#icon-undo') + ); + } // Update @@ -118,23 +126,27 @@ export function uiField(context, presetField, entity, show) { .classed('modified', isModified()) .classed('present', isPresent()) .each(function(d) { - var referenceKey = d.key; - if (d.type === 'multiCombo') { // lookup key without the trailing ':' - referenceKey = referenceKey.replace(/:$/, ''); - } - var reference = uiTagReference(d.reference || { key: referenceKey }, context); + if (options.wrap) { + var referenceKey = d.key; + if (d.type === 'multiCombo') { // lookup key without the trailing ':' + referenceKey = referenceKey.replace(/:$/, ''); + } + var reference = uiTagReference(d.reference || { key: referenceKey }, context); - if (state === 'hover') { - reference.showing(false); + if (state === 'hover') { + reference.showing(false); + } } d3.select(this) .call(d.impl); - d3.select(this) - .call(reference.body) - .select('.form-label-button-wrap') - .call(reference.button); + if (options.wrap) { + d3.select(this) + .call(reference.body) + .select('.form-label-button-wrap') + .call(reference.button); + } d.impl.tags(tags); }); diff --git a/modules/ui/fields/radio.js b/modules/ui/fields/radio.js index 17db4e6cb..f11b98736 100644 --- a/modules/ui/fields/radio.js +++ b/modules/ui/fields/radio.js @@ -121,12 +121,12 @@ export function uiFieldRadio(field, context) { .attr('class', 'structure-extras-wrap') .merge(extrasWrap); - // var list = extrasWrap.selectAll('ul') - // .data([0]); + var list = extrasWrap.selectAll('ul') + .data([0]); - // list = list.enter() - // .append('ul') - // .merge(list); + list = list.enter() + .append('ul') + .merge(list); // // Type @@ -174,14 +174,14 @@ export function uiFieldRadio(field, context) { var showLayer = (selected === 'bridge' || selected === 'tunnel'); if (!layerField) { var field = context.presets().field('layer'); - layerField = uiField(context, field, entity, true) + layerField = uiField(context, field, entity, { wrap: false }) .on('change', changeLayer); } layerField.tags(tags); - var layerItem = extrasWrap.selectAll('.structure-layer-item') + var layerItem = list.selectAll('.structure-layer-item') .data(layerField && showLayer ? [0] : []); // Exit @@ -190,73 +190,26 @@ export function uiFieldRadio(field, context) { // Enter var layerEnter = layerItem.enter() - .append('div') + .append('li') .attr('class', 'cf structure-layer-item'); + layerEnter + .append('span') + .attr('class', 'col6 label structure-label-layer') + .attr('for', 'preset-input-layer') + .text(t('inspector.radio.structure.layer')); + + layerEnter + .append('div') + .attr('class', 'col6 structure-input-layer-wrap'); + // Update layerItem = layerItem .merge(layerEnter); - layerItem + layerItem.selectAll('.structure-input-layer-wrap') .call(layerField.render); - - // var layerItem = list.selectAll('.structure-layer-item') - // .data(showLayer ? [0] : []); - - // layerItem.exit() - // .remove(); - - // var layerEnter = layerItem.enter() - // .append('li') - // .attr('class', 'cf structure-layer-item'); - - // layerEnter - // .append('span') - // .attr('class', 'col6 label structure-label-layer') - // .attr('for', 'structure-input-layer') - // .text(t('inspector.radio.structure.layer')); - - // layerEnter - // .append('div') - // .attr('class', 'col6 structure-input-layer-wrap') - // .append('input') - // .attr('type', 'text') - // .attr('class', 'structure-input-layer') - // .attr('placeholder', '0') - // .call(utilNoAuto); - - // var spin = layerEnter - // .append('div') - // .attr('class', 'spin-control'); - - // spin - // .append('button') - // .datum(-1) - // .attr('class', 'decrement') - // .attr('tabindex', -1); - - // spin - // .append('button') - // .datum(1) - // .attr('class', 'increment') - // .attr('tabindex', -1); - - // layerItem = layerItem - // .merge(layerEnter); - - // layerInput = layerItem.selectAll('.structure-input-layer') - // .on('change', changeLayer) - // .on('blur', changeLayer); - - // layerItem.selectAll('button') - // .on('click', function(d) { - // d3.event.preventDefault(); - // var num = parseInt(layerInput.node().value || 0, 10); - // if (!isNaN(num)) layerInput.node().value = num + d; - // changeLayer(); - // }); - } @@ -292,8 +245,6 @@ export function uiFieldRadio(field, context) { function changeLayer(t, onInput) { - // note: don't use utilGetSetValue here because we want 0 to be falsy. - // var t = { layer: layerInput.node().value || undefined }; if (t.layer === '0') { t.layer = undefined; } diff --git a/modules/ui/preset_editor.js b/modules/ui/preset_editor.js index 5b129651a..beeb67cc5 100644 --- a/modules/ui/preset_editor.js +++ b/modules/ui/preset_editor.js @@ -47,21 +47,21 @@ export function uiPresetEditor(context) { preset.fields.forEach(function(field) { if (field.matchGeometry(geometry)) { fieldsArr.push( - uiField(context, field, entity, true) + uiField(context, field, entity) ); } }); if (entity.isHighwayIntersection(context.graph()) && presets.field('restrictions')) { fieldsArr.push( - uiField(context, presets.field('restrictions'), entity, true) + uiField(context, presets.field('restrictions'), entity) ); } presets.universal().forEach(function(field) { if (preset.fields.indexOf(field) === -1) { fieldsArr.push( - uiField(context, field, entity, false) + uiField(context, field, entity, { show: false }) ); } });