Update help and walkthrough for touch interactions

css/80_app.css

@@ -407,6 +407,16 @@ button[disabled].action {
     height: 20px;
 }
 
+.icon.operation use {
+    fill: #222;
+    color: #79f;
+}
+button.disabled .icon.operation use,
+.icon.operation.disabled use {
+    fill: rgba(32,32,32,.2);
+    color: rgba(40,40,40,.2);
+}
+
 .icon.monochrome use {
     fill: currentColor;
 }
@@ -3754,19 +3764,6 @@ li.issue-fix-item:not(.actionable) .fix-icon {
     margin-bottom: 20px;
 }
 
-.help-pane .left-content .body p code {
-    padding: 3px 4px;
-    font-size: 12px;
-    color: #555;
-    vertical-align: baseline;
-    background-color: #f6f6f6;
-    border: solid 1px #ccc;
-    margin: 0 2px;
-    border-bottom-color: #bbb;
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 #bbb;
-}
-
 .help-pane .left-content .icon.pre-text {
     vertical-align: text-top;
     margin-right: 0;
@@ -3775,7 +3772,8 @@ li.issue-fix-item:not(.actionable) .fix-icon {
 }
 
 .help-pane .toc {
-    width: 40%;
+    width: 100%;
+    max-width: 200px;
     float: right;
     margin-left: 20px;
     margin-bottom: 20px;
@@ -4408,11 +4406,6 @@ img.tile-debug {
 .flash-icon use {
     color: #222;
 }
-
-.flash-icon.operation use {
-    fill: #222;
-    color: #79f;
-}
 .flash-icon.disabled use,
 .flash-icon.operation.disabled use {
     fill: rgba(32,32,32,0.7);
@@ -4939,15 +4932,6 @@ img.tile-debug {
     color: #555;
 }
 
-svg.mouseclick use.left {
-    fill: rgba(112, 146, 255, 1);
-    color: rgba(112, 146, 255, 0);
-}
-svg.mouseclick use.right {
-    fill: rgba(112, 146, 255, 0);
-    color: rgba(112, 146, 255, 1);
-}
-
 .modal-shortcuts .shortcut-keys .gesture {
     color: #333;
     padding: 3px;
@@ -5414,15 +5398,8 @@ li.hide + li.version .badge .tooltip .popover-arrow {
 }
 
 .edit-menu-item use {
-    fill: #222;
-    color: #79f;
     pointer-events: none;
 }
-.edit-menu-item.disabled use {
-    fill: rgba(32,32,32,.2);
-    color: rgba(40,40,40,.2);
-}
-
 
 /* Lasso
 ------------------------------------------------------- */

data/shortcuts.json

@@ -107,7 +107,7 @@
             "text": "shortcuts.browsing.selecting.title"
           },
           {
-            "shortcuts": ["Left-click", "shortcuts.key.space"],
+            "shortcuts": ["Left-click", "Tap", "shortcuts.key.space"],
             "text": "shortcuts.browsing.selecting.select_one"
           },
           {
@@ -131,7 +131,7 @@
             "text": "shortcuts.browsing.with_selected.title"
           },
           {
-            "shortcuts": ["Right-click", "☰"],
+            "shortcuts": ["Right-click", "Long-press", "☰"],
             "text": "shortcuts.browsing.with_selected.edit_menu"
           },
           {
@@ -193,7 +193,7 @@
             "text": "shortcuts.editing.drawing.add_note"
           },
           {
-            "shortcuts": ["Left-click", "shortcuts.key.space"],
+            "shortcuts": ["Left-click", "Tap", "shortcuts.key.space"],
             "text": "shortcuts.editing.drawing.place_point"
           },
           {

modules/core/context.js

@@ -80,6 +80,7 @@ export function coreContext() {
   /* User interface and keybinding */
   let _ui;
   context.ui = () => _ui;
+  context.lastPointerType = () => _ui.lastPointerType();
 
   let _keybinding = utilKeybinding('context');
   context.keybinding = () => _keybinding;

modules/ui/cmd.js

@@ -53,7 +53,7 @@ uiCmd.display = function(code) {
         '↘': mac ? '↘ ' + t('shortcuts.key.pgdn')   : t('shortcuts.key.pgdn'),
         '⇞': mac ? '⇞ ' + t('shortcuts.key.home')   : t('shortcuts.key.home'),
         '⇟': mac ? '⇟ ' + t('shortcuts.key.end')    : t('shortcuts.key.end'),
-        '↵': mac ? '↵ ' + t('shortcuts.key.return') : t('shortcuts.key.enter'),
+        '↵': mac ? '⏎ ' + t('shortcuts.key.return') : t('shortcuts.key.enter'),
         '⎋': mac ? '⎋ ' + t('shortcuts.key.esc')    : t('shortcuts.key.esc'),
         '☰': mac ? '☰ ' + t('shortcuts.key.menu')  : t('shortcuts.key.menu'),
     };

modules/ui/curtain.js

@@ -64,9 +64,12 @@ export function uiCurtain(containerNode) {
      * @param  {integer}   [options.duration]        transition time in milliseconds
      * @param  {string}    [options.buttonText]      if set, create a button with this text label
      * @param  {function}  [options.buttonCallback]  if set, the callback for the button
+     * @param  {function}  [options.padding]         extra margin in px to put around bbox
      * @param  {String|ClientRect} [options.tooltipBox]  box for tooltip position, if different from box for the curtain
      */
     curtain.reveal = function(box, text, options) {
+        options = options || {};
+
         if (typeof box === 'string') {
             box = d3_select(box).node();
         }
@@ -76,8 +79,14 @@ export function uiCurtain(containerNode) {
             box.top -= containerRect.top;
             box.left -= containerRect.left;
         }
-
-        options = options || {};
+        if (box && options.padding) {
+            box.top -= options.padding;
+            box.left -= options.padding;
+            box.bottom += options.padding;
+            box.right += options.padding;
+            box.height += options.padding * 2;
+            box.width += options.padding * 2;
+        }
 
         var tooltipBox;
         if (options.tooltipBox) {

modules/ui/edit_menu.js

@@ -1,12 +1,16 @@
 import { event as d3_event, select as d3_select } from 'd3-selection';
+import { dispatch as d3_dispatch } from 'd3-dispatch';
 
 import { geoVecAdd } from '../geo';
 import { localizer } from '../core/localizer';
 import { uiTooltip } from './tooltip';
+import { utilRebind } from '../util/rebind';
 import { svgIcon } from '../svg/icon';
 
 
 export function uiEditMenu(context) {
+    var dispatch = d3_dispatch('toggled');
+
     var _menu = d3_select(null);
     var _operations = [];
     // the position the menu should be displayed relative to
@@ -99,7 +103,7 @@ export function uiEditMenu(context) {
                 .call(tooltip)
                 .append('div')
                 .attr('class', 'icon-wrap')
-                .call(svgIcon('#iD-operation-' + d.id, 'operation-icon'));
+                .call(svgIcon('#iD-operation-' + d.id, 'operation'));
         });
 
         if (showLabels) {
@@ -161,6 +165,8 @@ export function uiEditMenu(context) {
             }
             lastPointerUpType = null;
         }
+
+        dispatch.call('toggled', this, true);
     };
 
     function updatePosition() {
@@ -269,6 +275,8 @@ export function uiEditMenu(context) {
 
         _menu.remove();
         _tooltips = [];
+
+        dispatch.call('toggled', this, false);
     };
 
     editMenu.anchorLoc = function(val) {
@@ -290,5 +298,5 @@ export function uiEditMenu(context) {
         return editMenu;
     };
 
-    return editMenu;
+    return utilRebind(editMenu, dispatch, 'on');
 }

modules/ui/flash.js

@@ -7,7 +7,7 @@ export function uiFlash(context) {
     var _iconName = '#iD-icon-no';
     var _iconClass = 'disabled';
     var _text = '';
-    var _textClass;    
+    var _textClass;
 
     function flash() {
         if (_flashTimer) {
@@ -31,7 +31,7 @@ export function uiFlash(context) {
 
         var iconEnter = contentEnter
             .append('svg')
-            .attr('class', 'flash-icon')
+            .attr('class', 'flash-icon icon')
             .append('g')
             .attr('transform', 'translate(10,10)');
 
@@ -56,7 +56,7 @@ export function uiFlash(context) {
 
         content
             .selectAll('.flash-icon')
-            .attr('class', 'flash-icon ' + (_iconClass || ''));
+            .attr('class', 'icon flash-icon ' + (_iconClass || ''));
 
         content
             .selectAll('.flash-icon use')

modules/ui/init.js

@@ -52,6 +52,8 @@ export function uiInit(context) {
     var _initCounter = 0;
     var _needWidth = {};
 
+    var _lastPointerType;
+
 
     function render(container) {
 
@@ -95,13 +97,15 @@ export function uiInit(context) {
         if ('PointerEvent' in window) {
             d3_select(window)
                 .on('pointerdown.ui pointerup.ui', function() {
-                    var pointerType =  d3_event.pointerType || 'mouse';
-                    if (container.attr('pointer') !== pointerType) {
+                    var pointerType = d3_event.pointerType || 'mouse';
+                    if (_lastPointerType !== pointerType) {
+                        _lastPointerType = pointerType;
                         container
                             .attr('pointer', pointerType);
                     }
                 }, true);
         } else {
+            _lastPointerType = 'mouse';
             container
                 .attr('pointer', 'mouse');
         }
@@ -481,6 +485,10 @@ export function uiInit(context) {
         ui.ensureLoaded();
     };
 
+    ui.lastPointerType = function() {
+        return _lastPointerType;
+    };
+
     ui.flash = uiFlash(context);
 
     ui.sidebar = uiSidebar(context);
@@ -587,7 +595,11 @@ export function uiInit(context) {
     };
 
 
-    var _editMenu; // uiEditMenu
+    var _editMenu = uiEditMenu(context);
+
+    ui.editMenu = function() {
+        return _editMenu;
+    };
 
     ui.showEditMenu = function(anchorPoint, triggerType, operations) {
 
@@ -606,9 +618,6 @@ export function uiInit(context) {
             surfaceNode.focus();
         }
 
-        // don't load the menu until it's needed
-        if (!_editMenu) _editMenu = uiEditMenu(context);
-
         operations.forEach(function(operation) {
             if (operation.point) operation.point(anchorPoint);
         });