diff --git a/css/80_app.css b/css/80_app.css index 96af4669a..f77f55516 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -457,16 +457,13 @@ button[disabled].action:hover { position: relative; height: 40px; width: auto; + margin: 0 5px; } #bar .toolbar-item .item-label { text-align: center; - margin-top: 1px; - margin-bottom: 2px; font-size: 11px; white-space: nowrap; -} -#bar .toolbar-item:not(.spacer) { - margin: 0 5px 0 5px; + margin: 1px 2px 2px 2px; } #bar .toolbar-item.spacer { width: 100%; diff --git a/modules/ui/tools/save.js b/modules/ui/tools/save.js index e9cede948..f84bbf5c6 100644 --- a/modules/ui/tools/save.js +++ b/modules/ui/tools/save.js @@ -16,57 +16,54 @@ export function uiToolSave(context) { label: t('save.title') }; + var button = null, + tooltipBehavior = null; var history = context.history(); var key = uiCmd('⌘S'); var _numChanges = 0; + function isSaving() { + var mode = context.mode(); + return mode && mode.id === 'save'; + } - tool.render = function(selection) { + function isDisabled() { + return _numChanges === 0 || isSaving(); + } - - function isSaving() { - var mode = context.mode(); - return mode && mode.id === 'save'; + function save() { + d3_event.preventDefault(); + if (!context.inIntro() && !isSaving() && history.hasChanges()) { + context.enter(modeSave(context)); } + } - - function isDisabled() { - return _numChanges === 0 || isSaving(); + function bgColor() { + var step; + if (_numChanges === 0) { + return null; + } else if (_numChanges <= 50) { + step = _numChanges / 50; + return d3_interpolateRgb('#fff', '#ff8')(step); // white -> yellow + } else { + step = Math.min((_numChanges - 50) / 50, 1.0); + return d3_interpolateRgb('#ff8', '#f88')(step); // yellow -> red } + } + function updateCount() { + var val = history.difference().summary().length; + if (val === _numChanges) return; + _numChanges = val; - function save() { - d3_event.preventDefault(); - if (!context.inIntro() && !isSaving() && history.hasChanges()) { - context.enter(modeSave(context)); - } - } - - - function bgColor() { - var step; - if (_numChanges === 0) { - return null; - } else if (_numChanges <= 50) { - step = _numChanges / 50; - return d3_interpolateRgb('#fff', '#ff8')(step); // white -> yellow - } else { - step = Math.min((_numChanges - 50) / 50, 1.0); - return d3_interpolateRgb('#ff8', '#f88')(step); // yellow -> red - } - } - - - function updateCount() { - var val = history.difference().summary().length; - if (val === _numChanges) return; - _numChanges = val; - + if (tooltipBehavior) { tooltipBehavior .title(uiTooltipHtml( t(_numChanges > 0 ? 'save.help' : 'save.no_changes'), key) ); + } + if (button) { button .classed('disabled', isDisabled()) .style('background', bgColor(_numChanges)); @@ -74,14 +71,17 @@ export function uiToolSave(context) { button.select('span.count') .text(_numChanges); } + } - var tooltipBehavior = tooltip() + tool.render = function(selection) { + + tooltipBehavior = tooltip() .placement('bottom') .html(true) .title(uiTooltipHtml(t('save.no_changes'), key)); - var button = selection + button = selection .append('button') .attr('class', 'save disabled bar-button') .attr('tabindex', -1) @@ -107,14 +107,31 @@ export function uiToolSave(context) { context .on('enter.save', function() { - button - .classed('disabled', isDisabled()); + if (button) { + button + .classed('disabled', isDisabled()); - if (isSaving()) { - button.call(tooltipBehavior.hide); + if (isSaving()) { + button.call(tooltipBehavior.hide); + } } }); }; + tool.uninstall = function() { + + context.keybinding() + .off(key, true); + + context.history() + .on('change.save', null); + + context + .on('enter.save', null); + + button = null; + tooltipBehavior = null; + }; + return tool; } diff --git a/modules/ui/tools/search_add.js b/modules/ui/tools/search_add.js index 079f1798b..66202ca61 100644 --- a/modules/ui/tools/search_add.js +++ b/modules/ui/tools/search_add.js @@ -37,7 +37,7 @@ export function uiToolSearchAdd(context) { var allowedGeometry = ['area', 'line', 'point', 'vertex']; var shownGeometry = []; - + var key = t('modes.add_feature.key'); function updateShownGeometry(geom) { shownGeometry = geom.sort(); @@ -68,8 +68,6 @@ export function uiToolSearchAdd(context) { tool.render = function(selection) { updateShownGeometry(allowedGeometry.slice()); // shallow copy - var key = t('modes.add_feature.key'); - searchWrap = selection .append('div') .attr('class', 'search-wrap') @@ -164,7 +162,8 @@ export function uiToolSearchAdd(context) { updateResultsList(); }); - context.features().on('change.search-add', updateForFeatureHiddenState); + context.features() + .on('change.search-add', updateForFeatureHiddenState); context.keybinding().on(key, function() { search.node().focus(); @@ -183,6 +182,17 @@ export function uiToolSearchAdd(context) { updateResultsList(); }; + tool.uninstall = function() { + context.keybinding().off(key); + + context.features() + .on('change.search-add', null); + + context.map() + .on('move.search-add', null) + .on('drawn.search-add', null); + }; + function osmEditable() { var mode = context.mode(); return context.editable() && mode && mode.id !== 'save'; diff --git a/modules/ui/tools/undo_redo.js b/modules/ui/tools/undo_redo.js index 32fcb67f5..3e61b8767 100644 --- a/modules/ui/tools/undo_redo.js +++ b/modules/ui/tools/undo_redo.js @@ -100,5 +100,21 @@ export function uiToolUndoRedo(context) { } }; + tool.uninstall = function() { + context.keybinding() + .off(commands[0].cmd) + .off(commands[1].cmd); + + context.map() + .on('move.undo_redo', null) + .on('drawn.undo_redo', null); + + context.history() + .on('change.undo_redo', null); + + context + .on('enter.undo_redo', null); + }; + return tool; }