Flexbox preset field, member, and membership UI

This commit is contained in:
Quincy Morgan
2018-11-18 11:28:48 -05:00
parent b7e218a6cb
commit 7bad67ff76
11 changed files with 119 additions and 129 deletions
+5 -2
View File
@@ -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');
}
+4 -4
View File
@@ -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')
+4 -4
View File
@@ -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); })
+5 -2
View File
@@ -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
+9 -3
View File
@@ -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()
+6 -6
View File
@@ -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
+10 -3
View File
@@ -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 }));
+2
View File
@@ -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);
+1 -1
View File
@@ -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')
+1 -1
View File
@@ -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);