From 44f62fb9518f772ae6b6eefb0700cf7ee45123b8 Mon Sep 17 00:00:00 2001 From: Ajith Ranka Date: Wed, 25 Jan 2017 12:51:46 +0530 Subject: [PATCH] display a shortcuts modal, continues #1481 --- css/80_app.css | 13 ++++++ data/index.js | 1 + data/shortcuts.json | 95 +++++++++++++++++++++++++++++++++++++++++ modules/ui/init.js | 4 +- modules/ui/shortcuts.js | 69 ++++++++++++++++++++++++++++++ 5 files changed, 181 insertions(+), 1 deletion(-) create mode 100644 data/shortcuts.json create mode 100644 modules/ui/shortcuts.js diff --git a/css/80_app.css b/css/80_app.css index 694c819471..f382f1825f 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2927,6 +2927,19 @@ img.tile-removing { background-position: -400px -460px; } +/* Shortcuts Modal +------------------------------------------------------- */ + +.modal-shortcuts { + padding-bottom: 20px; +} + +.modal-shortcuts kbd { + padding: 2px 4px; + background: #eee; + margin-right: 4px; +} + /* Commit Modal ------------------------------------------------------- */ diff --git a/data/index.js b/data/index.js index 1fc44aaff1..f2ae2544ba 100644 --- a/data/index.js +++ b/data/index.js @@ -6,6 +6,7 @@ export { dataDeprecated } from './deprecated.json'; export { dataDiscarded } from './discarded.json'; export { dataLocales } from './locales.json'; export { dataPhoneFormats } from './phone-formats.json'; +export { dataShortcuts } from './shortcuts.json'; export { default as dataImperial } from './imperial.json'; export { default as dataDriveLeft } from './drive-left.json'; diff --git a/data/shortcuts.json b/data/shortcuts.json new file mode 100644 index 0000000000..ce02069293 --- /dev/null +++ b/data/shortcuts.json @@ -0,0 +1,95 @@ +{ + "dataShortcuts": [ + { + "desc": "Changing the display", + "shortcuts": [ + { + "keys": ["↓", "↑", "←", "→"], + "desc": "Pan map" + }, + { + "keys": ["⇧↓", "⇧↑", "⇧←", "⇧→"], + "desc": "Pan map by one screenful" + }, + { + "keys": ["+", "-"], + "desc": "Zoom in / Zoom out" + }, + { + "keys": ["⌘+", "⌘-"], + "desc": "Zoom in / Zoom out by a lot" + }, + { + "keys": ["B"], + "desc": "Display background layer switcher" + }, + { + "keys": ["⌘B"], + "desc": "Switch between previous and current backgrounds" + }, + { + "keys": ["W"], + "desc": "Toggle wireframe mode" + }, + { + "keys": ["H"], + "desc": "Show in-editor help/documentation" + }, + { + "keys": ["/"], + "desc": "Toggle minimap" + }, + { + "keys": ["⌘I"], + "desc": "Toggle info/measurements box" + }, + { + "keys": ["Spacebar"], + "desc": "Toggle radial menu for currently selected object" + } + ] + }, + { + "desc": "Editing mode", + "shortcuts": [ + { + "keys": ["1"], + "desc": "Switch to 'add point' mode" + }, + { + "keys": ["2"], + "desc": "Switch to 'add line' mode" + }, + { + "keys": ["3"], + "desc": "Switch to 'add area' mode" + }, + { + "keys": ["A"], + "desc": "Continue drawing a line at the selected node" + }, + { + "keys": ["↵ Enter", "Esc"], + "desc": "Stop drawing of a line or area" + } + ] + }, + { + "desc": "Undoing or saving changes", + "shortcuts": [ + { + "keys": ["⌘Z"], + "desc": "Undo last action" + }, + { + "keys": ["⌘⇧Z"], + "desc": "Redo last action" + }, + { + "keys": ["⌘S"], + "desc": "Save changes" + } + ] + } + ] +} diff --git a/modules/ui/init.js b/modules/ui/init.js index 324e01ad7b..a95e9c02fe 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -24,6 +24,7 @@ import { uiModes } from './modes'; import { uiRestore } from './restore'; import { uiSave } from './save'; import { uiScale } from './scale'; +import { uiShortcuts } from './shortcuts'; import { uiSidebar } from './sidebar'; import { uiSpinner } from './spinner'; import { uiSplash } from './splash'; @@ -284,7 +285,8 @@ export function uiInit(context) { if (!uiInitCounter++) { context.container() .call(uiSplash(context)) - .call(uiRestore(context)); + .call(uiRestore(context)) + .call(uiShortcuts(context)); } var authenticating = uiLoading(context) diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js new file mode 100644 index 0000000000..09df94e85d --- /dev/null +++ b/modules/ui/shortcuts.js @@ -0,0 +1,69 @@ +import * as d3 from 'd3'; +import { uiCmd } from './cmd'; +import { uiModal } from './modal'; +import { d3keybinding } from '../lib/d3.keybinding.js'; +import { dataShortcuts } from '../../data/shortcuts.json'; + +export function uiShortcuts(context) { + var key = uiCmd('⇧/'); + + function shortcuts(selection) { + function show() { + if (!d3.selectAll('.modal').empty()) return; + + var modalSelection = uiModal(selection); + + modalSelection.select('.modal') + .attr('class', 'modal fillL col6'); + + var shortcutsModal = modalSelection.select('.content'); + + shortcutsModal + .attr('class','cf'); + + shortcutsModal + .append('div') + .attr('class', 'modal-section') + .append('h3') + .text('Keyboard shortcuts'); + + var section = shortcutsModal + .selectAll('section') + .data(dataShortcuts) + .enter().append('section') + .attr('class', 'modal-section modal-shortcuts cf'); + + section + .append('h4') + .text(function(d) { return d.desc; }); + + var p = section + .selectAll('p') + .data(function(d) { return d.shortcuts; }) + .enter().append('p'); + + var shortcuts = p + .append('span') + .attr('class', 'col4'); + + shortcuts + .selectAll('kbd') + .data(function(d) { return d.keys; }) + .enter().append('kbd') + .text(function(d) { return uiCmd(d); }); + + var description = p + .append('span') + .attr('class', 'col8') + .text(function(d) { return d.desc }); + } + + var keybinding = d3keybinding('shortcuts') + .on(key, show); + + d3.select(document) + .call(keybinding); + } + + return shortcuts; +}