Add a menu item to the help pane to show keyboard shortcuts

(closes #4079)

css/80_app.css

@@ -2417,16 +2417,20 @@ div.full-screen > button:hover {
     border-radius: 4px 4px 0 0;
 }
 
-.help-wrap .toc li:nth-last-child(2) a {
+.help-wrap .toc li:nth-last-child(3) a {
     border-bottom: 1px solid #CCC;
     border-radius: 0 0 4px 4px
 }
 
+.help-wrap .toc li.shortcuts a,
 .help-wrap .toc li.walkthrough a {
     overflow: hidden;
     margin-top: 10px;
     border-bottom: 1px solid #ccc;
     border-radius: 4px;
+}
+
+.help-wrap .toc li.walkthrough a {
     text-align: center;
 }
 
@@ -3532,6 +3536,9 @@ img.tile-removing {
 .map-control .tooltip {
     min-width: 160px;
 }
+.map-control .shortcuts .tooltip {
+    max-width: 160px;
+}
 
 /* Move over tooltips that are near the edge of screen */
 .add-point .tooltip {

data/core.yaml

@@ -1018,6 +1018,7 @@ en:
       start: "Start mapping!"
   shortcuts:
     title: "Keyboard shortcuts"
+    tooltip: "Show the keyboard shortcuts screen."
     key:
       alt: Alt
       backspace: Backspace

dist/locales/en.json

@@ -885,6 +885,7 @@
         },
         "shortcuts": {
             "title": "Keyboard shortcuts",
+            "tooltip": "Show the keyboard shortcuts screen.",
             "key": {
                 "alt": "Alt",
                 "backspace": "Backspace",

modules/ui/help.js

@@ -2,8 +2,9 @@ import * as d3 from 'd3';
 import marked from 'marked';
 import { d3keybinding } from '../lib/d3.keybinding.js';
 import { t, textDirection } from '../util/locale';
-import { svgIcon } from '../svg/index';
-import { uiIntro } from './intro/index';
+import { svgIcon } from '../svg';
+import { uiIntro } from './intro';
+import { uiShortcuts } from './shortcuts';
 import { uiTooltipHtml } from './tooltipHtml';
 import { tooltip } from '../util/tooltip';
 
@@ -135,6 +136,11 @@ export function uiHelp(context) {
         }
 
 
+        function clickShortcuts() {
+            context.container().call(uiShortcuts(context), true);
+        }
+
+
         var pane = selection.append('div')
                 .attr('class', 'help-wrap map-overlay fillL col5 content hide'),
             tooltipBehavior = tooltip()
@@ -160,6 +166,21 @@ export function uiHelp(context) {
             .html(function(d) { return d.title; })
             .on('click', clickHelp);
 
+        var shortcuts = toc
+            .append('li')
+            .attr('class', 'shortcuts')
+            .call(tooltip()
+                .html(true)
+                .title(uiTooltipHtml(t('shortcuts.tooltip'), '?'))
+                .placement('top')
+            )
+            .append('a')
+            .on('click', clickShortcuts);
+
+        shortcuts
+            .append('div')
+            .text(t('shortcuts.title'));
+
         var walkthrough = toc
             .append('li')
             .attr('class', 'walkthrough')

modules/ui/init.js

@@ -285,7 +285,7 @@ export function uiInit(context) {
             context.container()
                 .call(uiSplash(context))
                 .call(uiRestore(context))
-				.call(uiShortcuts(context));
+                .call(uiShortcuts(context));
         }
 
         var authenticating = uiLoading(context)