Merge branch 'refs/heads/header-revision'

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%;

data/core.yaml

@@ -185,7 +185,8 @@ en:
     search: Search
     unknown: Unknown
     incomplete: <not downloaded>
-    feature_list: Feature List
+    feature_list: Feature list
+    edit: Edit feature
   background:
     title: Background
     description: Background settings

dist/locales/en.json

@@ -228,7 +228,8 @@
         "search": "Search",
         "unknown": "Unknown",
         "incomplete": "<not downloaded>",
-        "feature_list": "Feature List"
+        "feature_list": "Feature list",
+        "edit": "Edit feature"
     },
     "background": {
         "title": "Background",

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;
     };