mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-18 14:45:12 +02:00
Flexbox preset field, member, and membership UI
This commit is contained in:
+5
-2
@@ -107,7 +107,11 @@ export function uiField(context, presetField, entity, options) {
|
||||
var label = enter
|
||||
.append('label')
|
||||
.attr('class', 'form-label')
|
||||
.attr('for', function(d) { return 'preset-input-' + d.safeid; })
|
||||
.attr('for', function(d) { return 'preset-input-' + d.safeid; });
|
||||
|
||||
label
|
||||
.append('span')
|
||||
.attr('class', 'label-text')
|
||||
.text(function(d) { return d.label(); });
|
||||
|
||||
var wrap = label
|
||||
@@ -228,4 +232,3 @@ export function uiField(context, presetField, entity, options) {
|
||||
|
||||
return utilRebind(field, dispatch, 'on');
|
||||
}
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ export function uiFieldAccess(field, context) {
|
||||
|
||||
wrap = wrap.enter()
|
||||
.append('div')
|
||||
.attr('class', 'cf preset-input-wrap')
|
||||
.attr('class', 'preset-input-wrap')
|
||||
.append('ul')
|
||||
.merge(wrap);
|
||||
|
||||
@@ -39,17 +39,17 @@ export function uiFieldAccess(field, context) {
|
||||
// Enter
|
||||
var enter = items.enter()
|
||||
.append('li')
|
||||
.attr('class', function(d) { return 'cf preset-access-' + d; });
|
||||
.attr('class', function(d) { return 'preset-access-' + d; });
|
||||
|
||||
enter
|
||||
.append('span')
|
||||
.attr('class', 'col6 label preset-label-access')
|
||||
.attr('class', 'label preset-label-access')
|
||||
.attr('for', function(d) { return 'preset-input-access-' + d; })
|
||||
.text(function(d) { return field.t('types.' + d); });
|
||||
|
||||
enter
|
||||
.append('div')
|
||||
.attr('class', 'col6 preset-input-access-wrap')
|
||||
.attr('class', 'preset-input-access-wrap')
|
||||
.append('input')
|
||||
.attr('type', 'text')
|
||||
.attr('class', 'preset-input-access')
|
||||
|
||||
@@ -28,7 +28,7 @@ export function uiFieldCycleway(field, context) {
|
||||
|
||||
wrap = wrap.enter()
|
||||
.append('div')
|
||||
.attr('class', 'cf preset-input-wrap')
|
||||
.attr('class', 'preset-input-wrap')
|
||||
.merge(wrap);
|
||||
|
||||
|
||||
@@ -45,17 +45,17 @@ export function uiFieldCycleway(field, context) {
|
||||
|
||||
var enter = items.enter()
|
||||
.append('li')
|
||||
.attr('class', function(d) { return 'cf preset-cycleway-' + stripcolon(d); });
|
||||
.attr('class', function(d) { return 'preset-cycleway-' + stripcolon(d); });
|
||||
|
||||
enter
|
||||
.append('span')
|
||||
.attr('class', 'col6 label preset-label-cycleway')
|
||||
.attr('class', 'label preset-label-cycleway')
|
||||
.attr('for', function(d) { return 'preset-input-cycleway-' + stripcolon(d); })
|
||||
.text(function(d) { return field.t('types.' + d); });
|
||||
|
||||
enter
|
||||
.append('div')
|
||||
.attr('class', 'col6 preset-input-cycleway-wrap')
|
||||
.attr('class', 'preset-input-cycleway-wrap')
|
||||
.append('input')
|
||||
.attr('type', 'text')
|
||||
.attr('class', function(d) { return 'preset-input-cycleway preset-input-' + stripcolon(d); })
|
||||
|
||||
@@ -37,6 +37,7 @@ export function uiFieldText(field, context) {
|
||||
.attr('type', field.type)
|
||||
.attr('id', fieldId)
|
||||
.attr('placeholder', field.placeholder() || t('inspector.unknown'))
|
||||
.classed(field.type, true)
|
||||
.call(utilNoAuto)
|
||||
.merge(input);
|
||||
|
||||
@@ -68,13 +69,15 @@ export function uiFieldText(field, context) {
|
||||
enter
|
||||
.append('button')
|
||||
.datum(rtl ? 1 : -1)
|
||||
.attr('class', rtl ? 'increment' : 'decrement')
|
||||
.attr('class', 'button-input-action minor')
|
||||
.classed(rtl ? 'increment' : 'decrement', true)
|
||||
.attr('tabindex', -1);
|
||||
|
||||
enter
|
||||
.append('button')
|
||||
.datum(rtl ? -1 : 1)
|
||||
.attr('class', rtl ? 'decrement' : 'increment')
|
||||
.attr('class', 'button-input-action minor')
|
||||
.classed(rtl ? 'decrement' : 'increment', true)
|
||||
.attr('tabindex', -1);
|
||||
|
||||
spinControl = spinControl
|
||||
|
||||
@@ -189,18 +189,24 @@ export function uiFieldLocalized(field, context) {
|
||||
var label = wrap
|
||||
.append('label')
|
||||
.attr('class','form-label')
|
||||
.text(t('translate.localized_translation_label'))
|
||||
.attr('for','localized-lang');
|
||||
|
||||
label
|
||||
.append('span')
|
||||
.attr('class', 'label-text')
|
||||
.text(t('translate.localized_translation_label'));
|
||||
|
||||
label
|
||||
.append('div')
|
||||
.attr('class', 'form-label-button-wrap')
|
||||
.append('button')
|
||||
.attr('class', 'minor remove')
|
||||
.attr('class', 'minor remove-icon')
|
||||
.on('click', function(d){
|
||||
d3_event.preventDefault();
|
||||
var t = {};
|
||||
t[key(d.lang)] = undefined;
|
||||
dispatch.call('change', this, t);
|
||||
d3_select(this.parentNode.parentNode)
|
||||
d3_select(this.parentNode.parentNode.parentNode)
|
||||
.style('top','0')
|
||||
.style('max-height','240px')
|
||||
.transition()
|
||||
|
||||
@@ -125,17 +125,17 @@ export function uiFieldRadio(field, context) {
|
||||
// Enter
|
||||
var typeEnter = typeItem.enter()
|
||||
.insert('li', ':first-child')
|
||||
.attr('class', 'cf structure-type-item');
|
||||
.attr('class', 'structure-type-item');
|
||||
|
||||
typeEnter
|
||||
.append('span')
|
||||
.attr('class', 'col6 label structure-label-type')
|
||||
.attr('class', 'label structure-label-type')
|
||||
.attr('for', 'preset-input-' + selected)
|
||||
.text(t('inspector.radio.structure.type'));
|
||||
|
||||
typeEnter
|
||||
.append('div')
|
||||
.attr('class', 'col6 structure-input-type-wrap');
|
||||
.attr('class', 'structure-input-type-wrap');
|
||||
|
||||
// Update
|
||||
typeItem = typeItem
|
||||
@@ -170,17 +170,17 @@ export function uiFieldRadio(field, context) {
|
||||
// Enter
|
||||
var layerEnter = layerItem.enter()
|
||||
.append('li')
|
||||
.attr('class', 'cf structure-layer-item');
|
||||
.attr('class', 'structure-layer-item');
|
||||
|
||||
layerEnter
|
||||
.append('span')
|
||||
.attr('class', 'col6 label structure-label-layer')
|
||||
.attr('class', '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');
|
||||
.attr('class', 'structure-input-layer-wrap');
|
||||
|
||||
// Update
|
||||
layerItem = layerItem
|
||||
|
||||
@@ -145,7 +145,10 @@ export function uiRawMemberEditor(context) {
|
||||
var label = d3_select(this).append('label')
|
||||
.attr('class', 'form-label');
|
||||
|
||||
var labelLink = label.append('a')
|
||||
var labelLink = label
|
||||
.append('span')
|
||||
.attr('class', 'label-text')
|
||||
.append('a')
|
||||
.attr('href', '#')
|
||||
.on('click', selectMember);
|
||||
|
||||
@@ -174,11 +177,15 @@ export function uiRawMemberEditor(context) {
|
||||
var incompleteLabel = d3_select(this).append('label')
|
||||
.attr('class', 'form-label');
|
||||
|
||||
incompleteLabel.append('span')
|
||||
var labelText = incompleteLabel
|
||||
.append('span')
|
||||
.attr('class', 'label-text');
|
||||
|
||||
labelText.append('span')
|
||||
.attr('class', 'member-entity-type')
|
||||
.text(t('inspector.'+d.type, { id: d.id }));
|
||||
|
||||
incompleteLabel.append('span')
|
||||
labelText.append('span')
|
||||
.attr('class', 'member-entity-name')
|
||||
.text(t('inspector.incomplete', { id: d.id }));
|
||||
|
||||
|
||||
@@ -186,6 +186,8 @@ export function uiRawMembershipEditor(context) {
|
||||
var label = enter
|
||||
.append('label')
|
||||
.attr('class', 'form-label')
|
||||
.append('span')
|
||||
.attr('class', 'label-text')
|
||||
.append('a')
|
||||
.attr('href', '#')
|
||||
.on('click', selectRelation);
|
||||
|
||||
@@ -103,7 +103,7 @@ export function uiRawTagEditor(context) {
|
||||
|
||||
var enter = items.enter()
|
||||
.append('li')
|
||||
.attr('class', 'tag-row cf')
|
||||
.attr('class', 'tag-row')
|
||||
.classed('readonly', isReadOnly);
|
||||
|
||||
var innerWrap = enter.append('div')
|
||||
|
||||
@@ -187,7 +187,7 @@ export function uiTagReference(tag) {
|
||||
|
||||
_body = _body.enter()
|
||||
.append('div')
|
||||
.attr('class', 'tag-reference-body cf')
|
||||
.attr('class', 'tag-reference-body')
|
||||
.style('max-height', '0')
|
||||
.style('opacity', '0')
|
||||
.merge(_body);
|
||||
|
||||
Reference in New Issue
Block a user