CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-04-29 07:06:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'fields-flexbox'

Browse Source
This commit is contained in:
Bryan Housel
2018-11-29 22:32:42 -05:00
parent 055b81c0d1 50d204866b
commit 664c5ccaa6
18 changed files with 731 additions and 586 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/80_app.css
+567 -471
View File
File diff suppressed because it is too large Load Diff
modules/lib/d3.combobox.js
+2 -2
View File
@@ -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
+3 -2
View File
@@ -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
+2 -2
View File
@@ -148,7 +148,7 @@ export function uiFieldAddress(field, context) {
});
}
wrap.selectAll('div.addr-row')
wrap.selectAll('.addr-row')
.data(addressFormat.format)
.enter()
.append('div')
@@ -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
+1 -2
View File
@@ -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
+12 -5
View File
@@ -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
+1 -1
View File
@@ -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
+21 -26
View File
@@ -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
+1 -1
View File
@@ -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
+4 -4
View File
@@ -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
+22 -14
View File
@@ -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
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
+9 -1
View File
@@ -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
+30 -5
View File
@@ -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', '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', '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
+19 -14
View File
@@ -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,26 +221,26 @@ 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'))
.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'));
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
+32 -31
View File
@@ -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,15 +220,15 @@ 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 button-input-action member-delete minor')
.attr('class', 'remove form-field-button member-delete')
.on('click', deleteMembership)
.call(svgIcon('#iD-operation-delete'));
if (taginfo) {
enter.each(bindTypeahead);
wrapEnter.each(bindTypeahead);
}
@@ -259,7 +260,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'));
@@ -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
+2 -2
View File
@@ -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')
@@ -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'));