Flash disabled reason for zoom buttons on touch action (close #7699)

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);

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) {

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);