Mention keyboard shortcuts in intro, localize Alt key

modules/ui/intro/area.js

@@ -2,6 +2,7 @@ import * as d3 from 'd3';
 import { t } from '../../util/locale';
 import { modeBrowse, modeSelect } from '../../modes';
 import { utilRebind } from '../../util/rebind';
+import { uiCmd } from '../cmd';
 import { icon, pad, transitionTime } from './helper';
 
 
@@ -111,13 +112,15 @@ export function uiIntroArea(context, reveal) {
 
         areaId = null;
         revealPlayground(playground,
-            t('intro.areas.continue_playground'), { duration: 250 }
+            t('intro.areas.continue_playground', { alt: uiCmd.display('⌥') }),
+            { duration: 250 }
         );
 
         timeout(function() {
             context.map().on('move.intro drawn.intro', function() {
                 revealPlayground(playground,
-                    t('intro.areas.continue_playground'), { duration: 0 }
+                    t('intro.areas.continue_playground', { alt: uiCmd.display('⌥') }),
+                    { duration: 0 }
                 );
             });
         }, 250);  // after reveal

modules/ui/intro/start_editing.js

@@ -14,10 +14,18 @@ export function uiIntroStartEditing(context, reveal) {
         title: 'intro.startediting.title'
     };
 
-
     function showHelp() {
         reveal('.map-control.help-control',
-            t('intro.startediting.help', { button: icon('#icon-help', 'pre-text') }), {
+            t('intro.startediting.help', { button: icon('#icon-help', 'pre-text'), key: t('help.key') }), {
+                buttonText: t('intro.ok'),
+                buttonCallback: function() { shortcuts(); }
+            }
+        );
+    }
+
+    function shortcuts() {
+        reveal('.map-control.help-control',
+            t('intro.startediting.shortcuts', { key: t('shortcuts.toggle.key') }), {
                 buttonText: t('intro.ok'),
                 buttonCallback: function() { showSave(); }
             }
@@ -25,6 +33,7 @@ export function uiIntroStartEditing(context, reveal) {
     }
 
     function showSave() {
+        d3.selectAll('.shaded').remove();  // in case user opened keyboard shortcuts
         reveal('#bar button.save',
             t('intro.startediting.save'), {
                 buttonText: t('intro.ok'),
@@ -34,6 +43,8 @@ export function uiIntroStartEditing(context, reveal) {
     }
 
     function showStart() {
+        d3.selectAll('.shaded').remove();  // in case user opened keyboard shortcuts
+
         modalSelection = uiModal(context.container());
 
         modalSelection.select('.modal')
@@ -70,6 +81,7 @@ export function uiIntroStartEditing(context, reveal) {
 
     chapter.exit = function() {
         modalSelection.remove();
+        d3.selectAll('.shaded').remove();  // in case user opened keyboard shortcuts
     };