From f19c879abaa677713ff5d3f85d38fd4da877a7f1 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Sun, 18 Jun 2017 02:30:31 -0400 Subject: [PATCH] Mention keyboard shortcuts in intro, localize Alt key --- data/core.yaml | 5 +++-- dist/locales/en.json | 5 +++-- modules/ui/intro/area.js | 7 +++++-- modules/ui/intro/start_editing.js | 16 ++++++++++++++-- 4 files changed, 25 insertions(+), 8 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index b80a96e30..3fa423746 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -957,7 +957,7 @@ en: title: "Areas" add_playground: "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can be also be used for more detailed mapping of many features you might normally map as points. **Click the {button} Area button to add a new area.**" start_playground: "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Click or press spacebar to place a starting node on one of the corners of the playground.**" - continue_playground: "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the Alt key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**" + continue_playground: "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the '{alt}' key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**" finish_playground: "Finish the area by pressing enter, or clicking again on either the first or last node. **Finish drawing an area for the playground.**" search_playground: "**Search for '{preset}'.**" choose_playground: "**Choose {preset} from the list.**" @@ -1019,7 +1019,8 @@ en: play: "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, click '{next}'.**" startediting: title: "Start Editing" - help: "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by clicking the {button} Help button." + help: "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by clicking the {button} Help button or pressing the '{key}' key." + shortcuts: "You can view a list of commands along with their keyboard shortcuts by pressing the '{key}' key." save: "Don't forget to regularly save your changes!" start: "Start mapping!" shortcuts: diff --git a/dist/locales/en.json b/dist/locales/en.json index 6d87952df..db1bc2be2 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -819,7 +819,7 @@ "title": "Areas", "add_playground": "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can be also be used for more detailed mapping of many features you might normally map as points. **Click the {button} Area button to add a new area.**", "start_playground": "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Click or press spacebar to place a starting node on one of the corners of the playground.**", - "continue_playground": "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the Alt key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**", + "continue_playground": "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the '{alt}' key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**", "finish_playground": "Finish the area by pressing enter, or clicking again on either the first or last node. **Finish drawing an area for the playground.**", "search_playground": "**Search for '{preset}'.**", "choose_playground": "**Choose {preset} from the list.**", @@ -884,7 +884,8 @@ }, "startediting": { "title": "Start Editing", - "help": "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by clicking the {button} Help button.", + "help": "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by clicking the {button} Help button or pressing the '{key}' key.", + "shortcuts": "You can view a list of commands along with their keyboard shortcuts by pressing the '{key}' key.", "save": "Don't forget to regularly save your changes!", "start": "Start mapping!" } diff --git a/modules/ui/intro/area.js b/modules/ui/intro/area.js index 8b605fd03..df173ab4f 100644 --- a/modules/ui/intro/area.js +++ b/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 diff --git a/modules/ui/intro/start_editing.js b/modules/ui/intro/start_editing.js index 895fd7e71..8d3610067 100644 --- a/modules/ui/intro/start_editing.js +++ b/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 };