diff --git a/css/app.css b/css/app.css index c1564641a..a46452d82 100644 --- a/css/app.css +++ b/css/app.css @@ -941,12 +941,12 @@ a:hover .icon.out-link { background-position: -500px -14px;} padding: 20px; } -.entity-editor-pane .preset-icon-wrap { +.entity-editor-pane .preset-list-item { border-bottom: 1px solid #ccc; padding: 20px; } -.entity-editor-pane .preset-icon-wrap::after { +.entity-editor-pane .preset-list-item::after { content: ""; position: absolute; height: 0; @@ -960,16 +960,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} border-bottom-color: #ccc; } -.entity-editor-pane .preset-icon-wrap > button { - display: block; - height: 60px; - width: 60px; - margin: auto; - border-radius: 4px; - position: relative; - background-color: transparent; -} - .form-field { margin-bottom: 10px; width: 100%; diff --git a/data/core.yaml b/data/core.yaml index 035f7615f..1617207af 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -185,7 +185,8 @@ en: search: Search unknown: Unknown incomplete: - feature_list: Feature List + feature_list: Feature list + edit: Edit feature background: title: Background description: Background settings diff --git a/dist/locales/en.json b/dist/locales/en.json index 5e647f930..563f91472 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -228,7 +228,8 @@ "search": "Search", "unknown": "Unknown", "incomplete": "", - "feature_list": "Feature List" + "feature_list": "Feature list", + "edit": "Edit feature" }, "background": { "title": "Background", diff --git a/js/id/ui/entity_editor.js b/js/id/ui/entity_editor.js index dd6039578..89d0267f0 100644 --- a/js/id/ui/entity_editor.js +++ b/js/id/ui/entity_editor.js @@ -2,7 +2,8 @@ iD.ui.EntityEditor = function(context) { var event = d3.dispatch('choose'), state = 'select', id, - preset; + preset, + reference; var rawTagEditor = iD.ui.RawTagEditor(context) .on('change', changeTags); @@ -19,11 +20,6 @@ iD.ui.EntityEditor = function(context) { var $enter = $header.enter().append('div') .attr('class', 'header fillL cf'); - $enter.append('button') - .attr('class', 'fl preset-reset') - .append('span') - .attr('class', 'icon back'); - $enter.append('button') .attr('class', 'fr preset-close') .append('span') @@ -34,7 +30,7 @@ iD.ui.EntityEditor = function(context) { // Update $header.select('h3') - .text(preset.name()); + .text(t('inspector.edit')); $header.select('.preset-close') .on('click', function() { @@ -50,12 +46,22 @@ iD.ui.EntityEditor = function(context) { .attr('class', 'inspector-body'); $enter.append('div') - .attr('class', 'preset-icon-wrap inspector-inner') + .attr('class', 'preset-list-item inspector-inner fillL') + .append('div') + .attr('class', 'preset-list-button-wrap') .append('button') - .attr('class', 'preset-reset preset-icon-button') + .attr('class', 'preset-list-button preset-reset') .call(bootstrap.tooltip() .title(t('inspector.back_tooltip')) - .placement('right')); + .placement('bottom')) + .append('div') + .attr('class', 'label'); + + $body.select('.preset-list-button-wrap') + .call(reference.button); + + $body.select('.preset-list-item') + .call(reference.body); $enter.append('div') .attr('class', 'inspector-border inspector-preset'); @@ -76,11 +82,14 @@ iD.ui.EntityEditor = function(context) { // Update - $body.select('.preset-icon-wrap button') + $body.select('.preset-list-item button') .call(iD.ui.PresetIcon() .geometry(context.geometry(id)) .preset(preset)); + $body.select('.preset-list-item .label') + .text(preset.name()); + $body.select('.inspector-preset') .call(iD.ui.preset(context) .preset(preset) @@ -113,7 +122,7 @@ iD.ui.EntityEditor = function(context) { function historyChanged() { var entity = context.hasEntity(id); if (!entity) return; - preset = context.presets().match(entity, context.graph()); + entityEditor.preset(context.presets().match(entity, context.graph())); entityEditor(selection); } @@ -151,13 +160,17 @@ iD.ui.EntityEditor = function(context) { entityEditor.entityID = function(_) { if (!arguments.length) return id; id = _; - preset = context.presets().match(context.entity(id), context.graph()); + entityEditor.preset(context.presets().match(context.entity(id), context.graph())); return entityEditor; }; entityEditor.preset = function(_) { if (!arguments.length) return preset; - preset = _; + if (_ !== preset) { + preset = _; + reference = iD.ui.TagReference(preset.reference()) + .showing(false); + } return entityEditor; };