Move "Zoom in to Edit" to sidebar

css/app.css

@@ -2382,18 +2382,22 @@ img.wiki-image {
 ------------------------------------------------------- */
 
 .notice {
-    float:left;
-    width:25%;
-    padding-right: 10px;
-    text-align:center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+    background: #fff;
+    z-index: 2;
 }
 
 .notice .zoom-to {
-    width:100%;
-    height: 40px;
+    margin: auto;
+    width: 80%;
+    height: 100px;
     border-radius: 5px;
     line-height: 40px;
-    background: #fff;
     color: #000;
     opacity: 0.9;
 }

js/id/ui/modes.js

@@ -4,7 +4,7 @@ iD.ui.Modes = function(context) {
         iD.modes.AddLine(context),
         iD.modes.AddArea(context)];
 
-    return function(selection, limiter) {
+    return function(selection) {
         var buttons = selection.selectAll('button.add-button')
             .data(modes);
 
@@ -25,23 +25,15 @@ iD.ui.Modes = function(context) {
                    return iD.ui.tooltipHtml(mode.description, mode.key);
                }));
 
-        var notice = iD.ui.notice(limiter)
-            .message(false)
-            .on('zoom', function() { context.map().zoom(16); });
-
         function disableTooHigh() {
-            if (context.map().editable()) {
-                notice.message(false);
-                buttons.attr('disabled', null);
-            } else {
-                buttons.attr('disabled', 'disabled');
-                notice.message(true);
+            buttons.attr('disabled', context.map().editable() ? null : 'disabled');
+            if (!context.map().editable()) {
                 context.enter(iD.modes.Browse(context));
             }
         }
 
         context.map()
-            .on('move.mode-buttons', _.debounce(disableTooHigh, 500));
+            .on('move.modes', _.debounce(disableTooHigh, 500));
 
         disableTooHigh();
 

js/id/ui/notice.js

@@ -1,31 +1,26 @@
-iD.ui.notice = function(selection) {
-    var event = d3.dispatch('zoom'),
-        notice = {};
+iD.ui.Notice = function(context) {
+    return function(selection) {
+        var div = selection.append('div')
+            .attr('class', 'notice');
 
-    var div = selection.append('div')
-        .attr('class', 'notice');
+        var button = div.append('button')
+            .attr('class', 'zoom-to notice')
+            .on('click', function() { context.map().zoom(16); });
 
-    var button = div.append('button')
-        .attr('class', 'zoom-to notice')
-        .on('click', event.zoom);
+        button.append('span')
+            .attr('class', 'icon zoom-in-invert');
 
-    button.append('span')
-        .attr('class', 'icon zoom-in-invert');
+        button.append('span')
+            .attr('class', 'label')
+            .text(t('zoom_in_edit'));
 
-    button.append('span')
-        .attr('class', 'label')
-        .text(t('zoom_in_edit'));
-
-    notice.message = function(_) {
-        if (_) {
-            selection.select('.button-wrap').style('display', 'none');
-            div.style('display', 'block');
-        } else {
-            selection.select('.button-wrap').style('display', 'block');
-            div.style('display', 'none');
+        function disableTooHigh() {
+            div.style('display', context.map().editable() ? 'none' : 'block');
         }
-        return notice;
-    };
 
-    return d3.rebind(notice, event, 'on');
+        context.map()
+            .on('move.notice', _.debounce(disableTooHigh, 500));
+
+        disableTooHigh();
+    };
 };

js/id/ui/sidebar.js

@@ -7,6 +7,8 @@ iD.ui.Sidebar = function(context) {
             .attr('class', 'feature-list-pane')
             .call(iD.ui.FeatureList(context));
 
+        selection.call(iD.ui.Notice(context));
+
         var inspectorWrap = selection.append('div')
             .attr('class', 'inspector-hidden inspector-wrap fr');