diff --git a/css/80_app.css b/css/80_app.css index 36d2fa684..ba465a0c9 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -4432,14 +4432,12 @@ img.tile-debug { .flash-icon use { color: #222; } -.flash-icon.disabled use { - color: rgba(32,32,32,0.7); -} .flash-icon.operation use { fill: #222; color: #79f; } +.flash-icon.disabled use, .flash-icon.operation.disabled use { fill: rgba(32,32,32,0.7); color: rgba(40,40,40,0.7); diff --git a/modules/ui/zoom.js b/modules/ui/zoom.js index c630a8730..6c026903f 100644 --- a/modules/ui/zoom.js +++ b/modules/ui/zoom.js @@ -13,7 +13,7 @@ export function uiZoom(context) { var zooms = [{ id: 'zoom-in', - icon: 'plus', + icon: 'iD-icon-plus', title: t('zoom.in'), action: zoomIn, disabled: function() { @@ -23,7 +23,7 @@ export function uiZoom(context) { key: '+' }, { id: 'zoom-out', - icon: 'minus', + icon: 'iD-icon-minus', title: t('zoom.out'), action: zoomOut, disabled: function() { @@ -66,21 +66,33 @@ export function uiZoom(context) { return [d.key]; }); + var lastPointerUpType; + var buttons = selection.selectAll('button') .data(zooms) .enter() .append('button') .attr('class', function(d) { return d.id; }) + .on('pointerup.editor', function(d) { + lastPointerUpType = d3_event.pointerType; + }) .on('click.editor', function(d) { if (!d.disabled()) { d.action(); + } else if (lastPointerUpType === 'touch' || lastPointerUpType === 'pen') { + context.ui().flash + .duration(2000) + .iconName('#' + d.icon) + .iconClass('disabled') + .text(d.disabledTitle)(); } + lastPointerUpType = null; }) .call(tooltipBehavior); buttons.each(function(d) { d3_select(this) - .call(svgIcon('#iD-icon-' + d.icon, 'light')); + .call(svgIcon('#' + d.icon, 'light')); }); ['plus', 'ffplus', '=', 'ffequals'].forEach(function(key) { diff --git a/modules/ui/zoom_to_selection.js b/modules/ui/zoom_to_selection.js index 880919e48..7a60befbe 100644 --- a/modules/ui/zoom_to_selection.js +++ b/modules/ui/zoom_to_selection.js @@ -11,15 +11,31 @@ export function uiZoomToSelection(context) { return !mode || !mode.zoomToSelected; } + var _lastPointerUpType; + + function pointerup() { + _lastPointerUpType = d3_event.pointerType; + } + function click() { d3_event.preventDefault(); - if (isDisabled()) return; - - var mode = context.mode(); - if (mode && mode.zoomToSelected) { - mode.zoomToSelected(); + if (isDisabled()) { + if (_lastPointerUpType === 'touch' || _lastPointerUpType === 'pen') { + context.ui().flash + .duration(2000) + .iconName('#iD-icon-framed-dot') + .iconClass('disabled') + .text(t('inspector.zoom_to.no_selection'))(); + } + } else { + var mode = context.mode(); + if (mode && mode.zoomToSelected) { + mode.zoomToSelected(); + } } + + _lastPointerUpType = null; } return function(selection) { @@ -36,6 +52,7 @@ export function uiZoomToSelection(context) { var button = selection .append('button') + .on('pointerup', pointerup) .on('click', click) .call(svgIcon('#iD-icon-framed-dot', 'light')) .call(tooltipBehavior);