From 2b8058cf894380b80a6e75ed4035235c9a4d0b6d Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Thu, 8 Jun 2017 22:37:43 -0400
Subject: [PATCH] Add a menu item to the help pane to show keyboard shortcuts
 (closes #4079)

---
 css/80_app.css       |  9 ++++++++-
 data/core.yaml       |  1 +
 dist/locales/en.json |  1 +
 modules/ui/help.js   | 25 +++++++++++++++++++++++--
 modules/ui/init.js   |  2 +-
 5 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 283b0d121..71d753223 100644
--- a/css/80_app.css
+++ b/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 {
diff --git a/data/core.yaml b/data/core.yaml
index 4413272aa..68846ec8f 100644
--- a/data/core.yaml
+++ b/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
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 819d76b1e..848d1b1e1 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -885,6 +885,7 @@
         },
         "shortcuts": {
             "title": "Keyboard shortcuts",
+            "tooltip": "Show the keyboard shortcuts screen.",
             "key": {
                 "alt": "Alt",
                 "backspace": "Backspace",
diff --git a/modules/ui/help.js b/modules/ui/help.js
index 308a55a1f..bb7c2c71b 100644
--- a/modules/ui/help.js
+++ b/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')
diff --git a/modules/ui/init.js b/modules/ui/init.js
index 243943a59..30236a4a1 100644
--- a/modules/ui/init.js
+++ b/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)