diff --git a/css/app.css b/css/app.css index 40e088b6e..cf42c3da9 100644 --- a/css/app.css +++ b/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; } diff --git a/js/id/ui/modes.js b/js/id/ui/modes.js index 1c2cc1678..24daba7b4 100644 --- a/js/id/ui/modes.js +++ b/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(); diff --git a/js/id/ui/notice.js b/js/id/ui/notice.js index 5cd7eabda..03d022826 100644 --- a/js/id/ui/notice.js +++ b/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(); + }; }; diff --git a/js/id/ui/sidebar.js b/js/id/ui/sidebar.js index ebb292462..2b15748ed 100644 --- a/js/id/ui/sidebar.js +++ b/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');