Transition between preset grid and tag editor panes. Fixes #1056

css/app.css

@@ -305,6 +305,12 @@ form.hide {
     background-size:5px 5px;
 }
 
+.pane {
+    position:absolute;
+    width:100%;
+    height:100%;
+}
+
 /* Buttons */
 
 button {
@@ -757,7 +763,6 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     left: 10px;
     top: 20px;
     pointer-events: none;
-    z-index: 2;
 }
 
 .preset-grid-search-wrap input {
@@ -770,7 +775,6 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     text-indent: 30px;
     height: 100%;
     position: absolute;
-    z-index: 1;
 }
 
 .preset-search-result {

js/id/ui/background.js

@@ -200,7 +200,8 @@ iD.ui.Background = function(context) {
             .on('click', function() {
                 var exp = d3.select(this).classed('expanded');
                 nudge_container.style('display', exp ? 'none' : 'block');
-                d3.select(this).classed('expanded', !exp);
+                d3.select(this)
+                    .classed('expanded', !exp);
                 d3.event.preventDefault();
             });
 

js/id/ui/inspector.js

@@ -6,13 +6,28 @@ iD.ui.Inspector = function(context) {
     function inspector(selection) {
         var entity = selection.datum();
 
+        var presetLayer = selection
+            .append('div')
+            .style('right', '0px')
+            .classed('pane', true);
+
+        var tagLayer = selection
+            .append('div')
+            .style('right', '0px')
+            .classed('pane', true);
+
         var presetGrid = iD.ui.PresetGrid(context)
             .entity(entity)
             .on('close', function() {
                 event.close();
             })
             .on('choose', function(preset) {
-                selection.call(tagEditor, preset);
+                tagLayer
+                    .style('right', '-500px')
+                    .style('display', 'block')
+                    .call(tagEditor, preset)
+                    .transition()
+                    .style('right', '0px');
             });
 
         tagEditor = iD.ui.TagEditor(context)
@@ -24,12 +39,18 @@ iD.ui.Inspector = function(context) {
                 event.close(entity);
             })
             .on('choose', function() {
-                selection.call(presetGrid, true);
+                tagLayer
+                    .transition()
+                    .style('right', '-500px')
+                    .each('end', function() {
+                        d3.select(this).style('display', 'none');
+                    });
+                presetLayer.call(presetGrid, true);
             });
 
-        selection.call(initial ? presetGrid : tagEditor);
+        if (initial) presetLayer.call(presetGrid);
+        else tagLayer.call(tagEditor);
 
-        selection.call(iD.ui.Toggle(true));
     }
 
     inspector.tags = function() {

js/id/ui/preset_grid.js

@@ -23,8 +23,6 @@ iD.ui.PresetGrid = function(context) {
             .attr('class', 'preset-grid inspector-body fillL inspector-body-' + entity.geometry(context.graph()))
             .call(drawGrid, context.presets().defaults(entity, 12));
 
-        searchwrap.append('span').attr('class', 'icon search');
-
         function keydown() {
             // hack to let delete shortcut work when search is autofocused
             if (search.property('value').length === 0 &&
@@ -53,7 +51,10 @@ iD.ui.PresetGrid = function(context) {
                 grid.classed('filtered', value.length);
                 if (value.length) {
                     var results = presets.search(value);
-                    message.text(t('inspector.results', {n: results.collection.length, search: value}));
+                    message.text(t('inspector.results', {
+                        n: results.collection.length,
+                        search: value
+                    }));
                     grid.call(drawGrid, results);
                 } else {
                     grid.call(drawGrid, context.presets().defaults(entity, 12));
@@ -67,6 +68,10 @@ iD.ui.PresetGrid = function(context) {
             .attr('type', 'search')
             .on('keydown', keydown)
             .on('keyup', keyup);
+
+        searchwrap.append('span')
+            .attr('class', 'icon search');
+
         search.node().focus();
 
         if (preset) {