Add mouse icons instead of "left-click", add better key separators

css/80_app.css

@@ -3156,6 +3156,21 @@ img.tile-removing {
     box-shadow: inset 0 -1px 0 #bbb;
 }
 
+.modal-shortcuts .shortcut-keys svg.mouseclick use.left {
+    fill: rgba(112, 146, 255, 1);
+    color: rgba(112, 146, 255, 0);
+}
+.modal-shortcuts .shortcut-keys 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;
+}
+
+
 
 /* Save Mode
 ------------------------------------------------------- */

data/core.yaml

@@ -1018,6 +1018,8 @@ en:
       start: "Start mapping!"
   shortcuts:
     title: "Keyboard shortcuts"
+    or: "-or-"
+    drag: drag
     browsing:
       title: "Browsing"
       navigation:

data/shortcuts.json

@@ -10,18 +10,22 @@
                         "text": "shortcuts.browsing.navigation.title"
                     }, {
                         "shortcuts": ["↓", "↑", "←", "→"],
-                        "text": "shortcuts.browsing.navigation.pan"
+                        "text": "shortcuts.browsing.navigation.pan",
+                        "separator": ","
                     }, {
                         "modifiers": ["⇧"],
                         "shortcuts": ["↓", "↑", "←", "→"],
-                        "text": "shortcuts.browsing.navigation.pan_more"
+                        "text": "shortcuts.browsing.navigation.pan_more",
+                        "separator": ","
                     }, {
                         "shortcuts": ["+", "-"],
-                        "text": "shortcuts.browsing.navigation.zoom"
+                        "text": "shortcuts.browsing.navigation.zoom",
+                        "separator": ","
                     }, {
                         "modifiers": ["⇧"],
                         "shortcuts": ["+", "-"],
-                        "text": "shortcuts.browsing.navigation.zoom_more"
+                        "text": "shortcuts.browsing.navigation.zoom_more",
+                        "separator": ","
                     },
 
                     {
@@ -70,7 +74,8 @@
                         "text": "shortcuts.browsing.selecting.select_multi"
                     }, {
                         "modifiers": ["⇧"],
-                        "shortcuts": ["Left-click + drag"],
+                        "shortcuts": ["Left-click"],
+                        "gesture": "shortcuts.drag",
                         "text": "shortcuts.browsing.selecting.lasso"
                     }, {
                         "shortcuts": [],

dist/locales/en.json

@@ -885,6 +885,8 @@
         },
         "shortcuts": {
             "title": "Keyboard shortcuts",
+            "or": "-or-",
+            "drag": "drag",
             "browsing": {
                 "title": "Browsing",
                 "navigation": {

modules/ui/shortcuts.js

@@ -1,9 +1,11 @@
 import * as d3 from 'd3';
+
+import { t } from '../util/locale';
+import { d3keybinding } from '../lib/d3.keybinding.js';
+import { dataShortcuts } from '../../data';
+import { svgIcon } from '../svg';
 import { uiCmd } from './cmd';
 import { uiModal } from './modal';
-import { d3keybinding } from '../lib/d3.keybinding.js';
-import { t } from '../util/locale';
-import { dataShortcuts } from '../../data';
 
 
 export function uiShortcuts() {
@@ -113,6 +115,7 @@ export function uiShortcuts() {
             .append('tr')
             .attr('class', 'shortcut-row');
 
+
         var sectionRows = rowsEnter
             .filter(function (d) { return !d.shortcuts; });
 
@@ -125,6 +128,7 @@ export function uiShortcuts() {
             .append('h3')
             .text(function (d) { return t(d.text); });
 
+
         var shortcutRows = rowsEnter
             .filter(function (d) { return d.shortcuts; });
 
@@ -141,6 +145,7 @@ export function uiShortcuts() {
             .enter()
             .each(function () {
                 var selection = d3.select(this);
+
                 selection
                     .append('kbd')
                     .attr('class', 'modifier')
@@ -154,25 +159,56 @@ export function uiShortcuts() {
 
         shortcutKeys
             .selectAll('kbd.shortcut')
-            .data(function (d) { return d.shortcuts; })
+            .data(function (d) {
+                return d.shortcuts.map(function(s) {
+                    return {
+                        shortcut: s,
+                        separator: d.separator
+                    };
+                });
+            })
             .enter()
             .each(function (d, i, nodes) {
                 var selection = d3.select(this);
-                selection
-                    .append('kbd')
-                    .attr('class', 'shortcut')
-                    .text(function (d) {
-                        return d.indexOf('.') !== -1 ? uiCmd.display(t(d)) : uiCmd.display(d);
-                    });
+                var click = d.shortcut.toLowerCase().match(/(.*).click/);
+
+                if (click && click[1]) {
+                    selection
+                        .call(svgIcon('#walkthrough-mouse', 'mouseclick', click[1]));
+                } else {
+                    selection
+                        .append('kbd')
+                        .attr('class', 'shortcut')
+                        .text(function (d) {
+                            var key = d.shortcut;
+                            return key.indexOf('.') !== -1 ? uiCmd.display(t(key)) : uiCmd.display(key);
+                        });
+                }
 
                 if (i < nodes.length - 1) {
                     selection
                         .append('span')
-                        .text(',');
+                        .text(d.separator || '\u00a0' + t('shortcuts.or') + '\u00a0');
                 }
             });
 
 
+        shortcutKeys
+            .filter(function(d) { return d.gesture; })
+            .each(function () {
+                var selection = d3.select(this);
+
+                selection
+                    .append('span')
+                    .text('+');
+
+                selection
+                    .append('span')
+                    .attr('class', 'gesture')
+                    .text(function (d) { return t(d.gesture); });
+            });
+
+
         shortcutRows
             .append('td')
             .attr('class', 'shortcut-desc')