From 04825da109481361fdfad72384b7ece4ac9df586 Mon Sep 17 00:00:00 2001 From: Ajith Ranka Date: Wed, 25 Jan 2017 12:51:46 +0530 Subject: [PATCH 01/14] display a shortcuts modal, continues #1481 --- css/80_app.css | 12 ++++++ data/index.js | 1 + data/shortcuts.json | 95 +++++++++++++++++++++++++++++++++++++++++ modules/ui/init.js | 4 +- modules/ui/shortcuts.js | 69 ++++++++++++++++++++++++++++++ 5 files changed, 180 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 4c4745b1e..d09a925d6 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -3082,6 +3082,18 @@ img.tile-removing { } +/* Shortcuts Modal +------------------------------------------------------- */ +.modal-shortcuts { + padding-bottom: 20px; +} + +.modal-shortcuts kbd { + padding: 2px 4px; + background: #eee; + margin-right: 4px; +} + /* Save Mode ------------------------------------------------------- */ .mode-save a.user-info { diff --git a/data/index.js b/data/index.js index 1fc44aaff..f2ae2544b 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 000000000..ce0206929 --- /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 8908bd27a..243943a59 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'; @@ -283,7 +284,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 000000000..09df94e85 --- /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; +} From ccc438527f4e7df06c94a96e95ec33e60195fa50 Mon Sep 17 00:00:00 2001 From: Ajith Ranka Date: Wed, 25 Jan 2017 13:01:54 +0530 Subject: [PATCH 02/14] fix eslint error: missing semicolon --- modules/ui/shortcuts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js index 09df94e85..2f9dad149 100644 --- a/modules/ui/shortcuts.js +++ b/modules/ui/shortcuts.js @@ -55,7 +55,7 @@ export function uiShortcuts(context) { var description = p .append('span') .attr('class', 'col8') - .text(function(d) { return d.desc }); + .text(function(d) { return d.desc; }); } var keybinding = d3keybinding('shortcuts') From 5e8ad595b0d9f3f01f22fda226caaceae094ff93 Mon Sep 17 00:00:00 2001 From: Kushan Joshi <0o3ko0@gmail.com> Date: Wed, 8 Feb 2017 17:28:16 +0530 Subject: [PATCH 03/14] interim --- data/core.yaml | 26 +++++ data/shortcuts.json | 232 ++++++++++++++++++++++++---------------- modules/ui/shortcuts.js | 8 +- 3 files changed, 167 insertions(+), 99 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index 0d9695e18..d84d076dc 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -1016,3 +1016,29 @@ en: 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." save: "Don't forget to regularly save your changes!" start: "Start mapping!" +shortcuts: + display: + desc: "Changing the display" + shortcuts: + pan_map: "Pan map" + pan_map_screen: "Pan map by one screenful" + zoom: "Zoom in / Zoom out" + zoom_large: "Zoom in / Zoom out by a lot" + bg_switcher: "Display background layer switcher" + bg: "Switch between previous and current backgrounds" + wireframe: "Toggle wireframe mode" + help: "Show in-editor help/documentation" + minimap: "Toggle minimap" + infobox: "Toggle info/measurements box" + radial_menu: "Toggle radial menu for currently selected object" + edit: + desc: "Editing mode" + shortcuts: + add_point: "Switch to 'add point' mode" + add_line: "Switch to 'add line' mode" + add_area: "Switch to 'add area' mode" + continue_line: "Continue drawing a line at the selected node" + stop_line: "Stop drawing of a line or area" + undo: "Undo last action" + redo: "Redo last action" + save: "Save changes" \ No newline at end of file diff --git a/data/shortcuts.json b/data/shortcuts.json index ce0206929..ca0b68e24 100644 --- a/data/shortcuts.json +++ b/data/shortcuts.json @@ -1,95 +1,137 @@ -{ - "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" - } - ] - } - ] -} +[ + { + "key": "display", + "desc": "Changing the display", + "shortcuts": [ + { + "shortcut": [ + "↓", + "↑", + "←", + "→" + ], + "key": "pan_map" + }, + { + "shortcut": [ + "⇧↓", + "⇧↑", + "⇧←", + "⇧→" + ], + "key": "pan_map_screen" + }, + { + "shortcut": [ + "+", + "-" + ], + "key": "zoom" + }, + { + "shortcut": [ + "⌘+", + "⌘-" + ], + "key": "zoom_large" + }, + { + "shortcut": [ + "B" + ], + "key": "bg_switcher" + }, + { + "shortcut": [ + "⌘B" + ], + "key": "bg" + }, + { + "shortcut": [ + "W" + ], + "key": "wireframe" + }, + { + "shortcut": [ + "H" + ], + "key": "help" + }, + { + "shortcut": [ + "/" + ], + "key": "minimap" + }, + { + "shortcut": [ + "⌘I" + ], + "key": "infobox" + }, + { + "shortcut": [ + "Spacebar" + ], + "key": "radial_menu" + } + ] + }, + { + "key": "edit", + "desc": "Editing mode", + "shortcuts": [ + { + "shortcut": [ + "1" + ], + "key": "add_point" + }, + { + "shortcut": [ + "2" + ], + "desc": "add_line" + }, + { + "shortcut": [ + "3" + ], + "key": "add_area" + }, + { + "shortcut": [ + "A" + ], + "key": "continue_line" + }, + { + "shortcut": [ + "↵ Enter", + "Esc" + ], + "key": "stop_line" + }, + { + "shortcut": [ + "⌘Z" + ], + "key": "undo" + }, + { + "shortcut": [ + "⌘⇧Z" + ], + "key": "redo" + }, + { + "shortcut": [ + "⌘S" + ], + "save": "save" + } + ] + } +] \ No newline at end of file diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js index 2f9dad149..b2e73e353 100644 --- a/modules/ui/shortcuts.js +++ b/modules/ui/shortcuts.js @@ -2,7 +2,7 @@ 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'; +import shortcuts from '../../data/shortcuts.json'; export function uiShortcuts(context) { var key = uiCmd('⇧/'); @@ -29,7 +29,7 @@ export function uiShortcuts(context) { var section = shortcutsModal .selectAll('section') - .data(dataShortcuts) + .data(shortcuts) .enter().append('section') .attr('class', 'modal-section modal-shortcuts cf'); @@ -48,14 +48,14 @@ export function uiShortcuts(context) { shortcuts .selectAll('kbd') - .data(function(d) { return d.keys; }) + .data(function(d) { return d.shortcut; }) .enter().append('kbd') .text(function(d) { return uiCmd(d); }); var description = p .append('span') .attr('class', 'col8') - .text(function(d) { return d.desc; }); + .text(function(d) { return t('shortcuts.' }); } var keybinding = d3keybinding('shortcuts') From 8d2e2c7f9fe4094d4fdb4f2fc67b2732e6810ec1 Mon Sep 17 00:00:00 2001 From: Kushan Joshi <0o3ko0@gmail.com> Date: Thu, 9 Feb 2017 22:32:40 +0530 Subject: [PATCH 04/14] Adding tabs to shortcuts --- css/80_app.css | 56 ++++++++++++++- data/core.yaml | 46 ++++++------ data/index.js | 2 +- data/shortcuts.json | 48 ++++++------- modules/ui/shortcuts.js | 155 ++++++++++++++++++++++++++++++++-------- 5 files changed, 227 insertions(+), 80 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index d09a925d6..834b99137 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -3087,11 +3087,61 @@ img.tile-removing { .modal-shortcuts { padding-bottom: 20px; } +.modal-shortcuts .modal-section { + margin-bottom: 10px; +} +.modal-shortcuts .wrapper { + padding: 0 20px; +} +.modal-shortcuts .tabs-bar { + text-align: center; + padding-bottom: 20px; +} + +.modal-shortcuts .tab { + display: inline-block; + padding: 0 10px; + margin: 0 5px; + cursor: pointer; + border: 1px solid #ccc; + background-color: #eee; + border-radius: 4px; +} + +.modal-shortcuts .tab:hover { + background-color: #ccc; +} +.modal-shortcuts .tab.active { + background-color: #E8EBFF; + color: #7092FF; +} + +.modal-shortcuts .kbd-row { + padding-right: 10px; + color: #767676; + text-align: right; + white-space: nowrap; + padding-bottom: 3px; +} +.modal-shortcuts .shorctut-desc { + padding-bottom: 3px; +} .modal-shortcuts kbd { - padding: 2px 4px; - background: #eee; - margin-right: 4px; + display: inline-block; + text-align: right; + padding: 3px 5px; + font: 11px; + line-height: 10px; + letter-spacing: 1px; + color: #555; + vertical-align: middle; + background-color: #fcfcfc; + border: solid 1px #ccc; + margin: 0 2px; + border-bottom-color: #bbb; + border-radius: 3px; + box-shadow: inset 0 -1px 0 #bbb; } /* Save Mode diff --git a/data/core.yaml b/data/core.yaml index d84d076dc..74d11a3c5 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -1016,29 +1016,27 @@ en: 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." save: "Don't forget to regularly save your changes!" start: "Start mapping!" -shortcuts: + shortcuts: display: - desc: "Changing the display" - shortcuts: - pan_map: "Pan map" - pan_map_screen: "Pan map by one screenful" - zoom: "Zoom in / Zoom out" - zoom_large: "Zoom in / Zoom out by a lot" - bg_switcher: "Display background layer switcher" - bg: "Switch between previous and current backgrounds" - wireframe: "Toggle wireframe mode" - help: "Show in-editor help/documentation" - minimap: "Toggle minimap" - infobox: "Toggle info/measurements box" - radial_menu: "Toggle radial menu for currently selected object" + desc: "Display" + pan_map: "Pan map" + pan_map_screen: "Pan map by one screenful" + zoom: "Zoom in / Zoom out" + zoom_large: "Zoom in / Zoom out by a lot" + bg_switcher: "Display background layer switcher" + bg: "Switch between backgrounds" + wireframe: "Toggle wireframe mode" + help: "Show in-editor help/documentation" + minimap: "Toggle minimap" + infobox: "Toggle info/measurements box" + radial_menu: "Toggle radial menu for selected object" edit: - desc: "Editing mode" - shortcuts: - add_point: "Switch to 'add point' mode" - add_line: "Switch to 'add line' mode" - add_area: "Switch to 'add area' mode" - continue_line: "Continue drawing a line at the selected node" - stop_line: "Stop drawing of a line or area" - undo: "Undo last action" - redo: "Redo last action" - save: "Save changes" \ No newline at end of file + desc: "Editing" + add_point: "Switch to 'add point' mode" + add_line: "Switch to 'add line' mode" + add_area: "Switch to 'add area' mode" + continue_line: "Continue drawing a line at the selected node" + stop_line: "Stop drawing of a line or area" + undo: "Undo last action" + redo: "Redo last action" + save: "Save changes" \ No newline at end of file diff --git a/data/index.js b/data/index.js index f2ae2544b..c784846ab 100644 --- a/data/index.js +++ b/data/index.js @@ -6,7 +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 { shortcuts } 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 index ca0b68e24..9a79dc569 100644 --- a/data/shortcuts.json +++ b/data/shortcuts.json @@ -1,7 +1,7 @@ -[ +{ "shortcuts": [ { "key": "display", - "desc": "Changing the display", + "desc": "shortcuts.display.desc", "shortcuts": [ { "shortcut": [ @@ -10,7 +10,7 @@ "←", "→" ], - "key": "pan_map" + "key": "shortcuts.display.pan_map" }, { "shortcut": [ @@ -19,119 +19,119 @@ "⇧←", "⇧→" ], - "key": "pan_map_screen" + "key": "shortcuts.display.pan_map_screen" }, { "shortcut": [ "+", "-" ], - "key": "zoom" + "key": "shortcuts.display.zoom" }, { "shortcut": [ "⌘+", "⌘-" ], - "key": "zoom_large" + "key": "shortcuts.display.zoom_large" }, { "shortcut": [ "B" ], - "key": "bg_switcher" + "key": "shortcuts.display.bg_switcher" }, { "shortcut": [ "⌘B" ], - "key": "bg" + "key": "shortcuts.display.bg" }, { "shortcut": [ "W" ], - "key": "wireframe" + "key": "shortcuts.display.wireframe" }, { "shortcut": [ "H" ], - "key": "help" + "key": "shortcuts.display.help" }, { "shortcut": [ "/" ], - "key": "minimap" + "key": "shortcuts.display.minimap" }, { "shortcut": [ "⌘I" ], - "key": "infobox" + "key": "shortcuts.display.infobox" }, { "shortcut": [ - "Spacebar" + "Space" ], - "key": "radial_menu" + "key": "shortcuts.display.radial_menu" } ] }, { "key": "edit", - "desc": "Editing mode", + "desc": "shortcuts.edit.desc", "shortcuts": [ { "shortcut": [ "1" ], - "key": "add_point" + "key": "shortcuts.edit.add_point" }, { "shortcut": [ "2" ], - "desc": "add_line" + "key": "shortcuts.edit.add_line" }, { "shortcut": [ "3" ], - "key": "add_area" + "key": "shortcuts.edit.add_area" }, { "shortcut": [ "A" ], - "key": "continue_line" + "key": "shortcuts.edit.continue_line" }, { "shortcut": [ "↵ Enter", "Esc" ], - "key": "stop_line" + "key": "shortcuts.edit.stop_line" }, { "shortcut": [ "⌘Z" ], - "key": "undo" + "key": "shortcuts.edit.undo" }, { "shortcut": [ "⌘⇧Z" ], - "key": "redo" + "key": "shortcuts.edit.redo" }, { "shortcut": [ "⌘S" ], - "save": "save" + "key": "shortcuts.edit.save" } ] } -] \ No newline at end of file +]} \ No newline at end of file diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js index b2e73e353..758564888 100644 --- a/modules/ui/shortcuts.js +++ b/modules/ui/shortcuts.js @@ -2,16 +2,109 @@ import * as d3 from 'd3'; import { uiCmd } from './cmd'; import { uiModal } from './modal'; import { d3keybinding } from '../lib/d3.keybinding.js'; -import shortcuts from '../../data/shortcuts.json'; +import { t } from '../util/locale'; +import { shortcuts as shortcutsData } from '../../data'; export function uiShortcuts(context) { var key = uiCmd('⇧/'); - + var activeTab = 0; function shortcuts(selection) { + if (!d3.selectAll('.modal').empty()) return; + var modalSelection; + function render(selection) { + var wrapper = selection + .selectAll('.wrapper') + .data([0]); + + var wrapperEnter = wrapper + .enter() + .append('div') + .attr('class', 'wrapper'); + + var tabsBar = wrapperEnter + .append('div') + .attr('class', 'tabs-bar'); + + var shortcutsList = wrapperEnter + .append('div') + .attr('class', 'shortcuts-list'); + + wrapper = wrapper.merge(wrapperEnter); + + var tabs = tabsBar + .selectAll('.tab') + .data(shortcutsData); + + var tabsEnter = tabs + .enter() + .append('div') + .attr('class', 'tab') + .on('click', function (d, i) { + activeTab = i; + render(selection); + }); + + tabsEnter + .append('span') + .text(function (d) { return t(d.desc); }); + + tabs = tabs + .merge(tabsEnter); + + // Update + wrapper.selectAll('.tab') + .classed('active', function (d, i) { + return i === activeTab; + }); + + var shortcuts = shortcutsList + .selectAll('.shortcut-tab') + .data(shortcutsData); + + var shortcutsEnter = shortcuts + .enter() + .append('div') + .attr('class', 'shortcut-tab') + .on('click', function (d, i) { + activeTab = i; + render(selection); + }); + + var row = shortcutsEnter + .selectAll('.shortcut-row') + .data(function (d) { return d.shortcuts; }) + .enter() + .append('div') + .attr('class', 'shortcut-row'); + + var shortcutsRow = row + .append('div') + .attr('class', 'kbd-row col6'); + + shortcutsRow + .selectAll('kbd') + .data(function (d) { return d.shortcut; }) + .enter().append('kbd') + .text(function (d) { return uiCmd(d); }); + + var description = row + .append('div') + .attr('class', 'shorctut-desc col6') + .text(function (d) { return t(d.key); }); + + shortcuts = shortcuts + .merge(shortcutsEnter); + + wrapper.selectAll('.shortcut-tab') + .style('display', function (d, i) { + return i === activeTab ? 'block' : 'none'; + }); + + } function show() { if (!d3.selectAll('.modal').empty()) return; - var modalSelection = uiModal(selection); + modalSelection = uiModal(selection); modalSelection.select('.modal') .attr('class', 'modal fillL col6'); @@ -19,7 +112,7 @@ export function uiShortcuts(context) { var shortcutsModal = modalSelection.select('.content'); shortcutsModal - .attr('class','cf'); + .attr('class', 'cf modal-shortcuts'); shortcutsModal .append('div') @@ -27,35 +120,41 @@ export function uiShortcuts(context) { .append('h3') .text('Keyboard shortcuts'); - var section = shortcutsModal - .selectAll('section') - .data(shortcuts) - .enter().append('section') - .attr('class', 'modal-section modal-shortcuts cf'); + // var wrap = shortcutsModal.selectAll('.wrapper') + // - .data([0]); - section - .append('h4') - .text(function(d) { return d.desc; }); + // wrap = wrap.enter() + // .append('div') + // .attr('class', 'preset-input-wrap') + // .merge(wrap); + shortcutsModal.call(render); - var p = section - .selectAll('p') - .data(function(d) { return d.shortcuts; }) - .enter().append('p'); - var shortcuts = p - .append('span') - .attr('class', 'col4'); + // section + // .append('h4') + // .text(function(d) { return t(d.desc); }); - shortcuts - .selectAll('kbd') - .data(function(d) { return d.shortcut; }) - .enter().append('kbd') - .text(function(d) { return uiCmd(d); }); + // var row = section + // .selectAll('.shortcut-row') + // .data(function(d) { return d.shortcuts; }) + // .enter() + // .append('div') + // .attr('class', 'shortcut-row'); - var description = p - .append('span') - .attr('class', 'col8') - .text(function(d) { return t('shortcuts.' }); + // var shortcuts = row + // .append('div') + // .attr('class', 'kbd-row col4'); + + // shortcuts + // .selectAll('kbd') + // .data(function(d) { return d.shortcut; }) + // .enter().append('kbd') + // .text(function(d) { return uiCmd(d); }); + + // var description = row + // .append('div') + // .attr('class', 'shorctut-desc col6') + // .text(function(d) { return t(d.key); }); } var keybinding = d3keybinding('shortcuts') From b237b6c96cb06b0985f3becd80f07d6a4bc80550 Mon Sep 17 00:00:00 2001 From: Kushan Joshi <0o3ko0@gmail.com> Date: Thu, 9 Feb 2017 23:45:15 +0530 Subject: [PATCH 05/14] interim --- css/80_app.css | 9 ++-- dist/locales/en.json | 27 +++++++++++ modules/ui/shortcuts.js | 102 +++++++++++++++------------------------- 3 files changed, 72 insertions(+), 66 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 834b99137..3f0b6f13c 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -3096,7 +3096,7 @@ img.tile-removing { .modal-shortcuts .tabs-bar { text-align: center; - padding-bottom: 20px; + padding-bottom: 10px; } .modal-shortcuts .tab { @@ -3118,20 +3118,23 @@ img.tile-removing { } .modal-shortcuts .kbd-row { + display: inline-block; padding-right: 10px; color: #767676; text-align: right; white-space: nowrap; padding-bottom: 3px; + } -.modal-shortcuts .shorctut-desc { +.modal-shortcuts .shortcut-desc { + display: inline-block; padding-bottom: 3px; } .modal-shortcuts kbd { display: inline-block; text-align: right; padding: 3px 5px; - font: 11px; + font-size: 11px; line-height: 10px; letter-spacing: 1px; color: #555; diff --git a/dist/locales/en.json b/dist/locales/en.json index d00bcd664..ebacea12e 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -883,6 +883,33 @@ "start": "Start mapping!" } }, + "shortcuts": { + "display": { + "desc": "Display", + "pan_map": "Pan map", + "pan_map_screen": "Pan map by one screenful", + "zoom": "Zoom in / Zoom out", + "zoom_large": "Zoom in / Zoom out by a lot", + "bg_switcher": "Display background layer switcher", + "bg": "Switch between backgrounds", + "wireframe": "Toggle wireframe mode", + "help": "Show in-editor help/documentation", + "minimap": "Toggle minimap", + "infobox": "Toggle info/measurements box", + "radial_menu": "Toggle radial menu for selected object" + }, + "edit": { + "desc": "Editing", + "add_point": "Switch to 'add point' mode", + "add_line": "Switch to 'add line' mode", + "add_area": "Switch to 'add area' mode", + "continue_line": "Continue drawing a line at the selected node", + "stop_line": "Stop drawing of a line or area", + "undo": "Undo last action", + "redo": "Redo last action", + "save": "Save changes" + } + }, "presets": { "categories": { "category-barrier": { diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js index 758564888..1c40208a5 100644 --- a/modules/ui/shortcuts.js +++ b/modules/ui/shortcuts.js @@ -5,12 +5,34 @@ import { d3keybinding } from '../lib/d3.keybinding.js'; import { t } from '../util/locale'; import { shortcuts as shortcutsData } from '../../data'; -export function uiShortcuts(context) { +export function uiShortcuts() { var key = uiCmd('⇧/'); var activeTab = 0; + function shortcuts(selection) { - if (!d3.selectAll('.modal').empty()) return; var modalSelection; + + function show() { + modalSelection = uiModal(selection); + + modalSelection.select('.modal') + .attr('class', 'modal fillL col6'); + + var shortcutsModal = modalSelection.select('.content'); + + shortcutsModal + .attr('class', 'cf modal-shortcuts'); + + shortcutsModal + .append('div') + .attr('class', 'modal-section') + .append('h3') + .text('Keyboard shortcuts'); + + shortcutsModal + .call(render); + } + function render(selection) { var wrapper = selection .selectAll('.wrapper') @@ -57,6 +79,7 @@ export function uiShortcuts(context) { return i === activeTab; }); + var shortcuts = shortcutsList .selectAll('.shortcut-tab') .data(shortcutsData); @@ -84,81 +107,34 @@ export function uiShortcuts(context) { shortcutsRow .selectAll('kbd') .data(function (d) { return d.shortcut; }) - .enter().append('kbd') - .text(function (d) { return uiCmd(d); }); + .enter() + .append('kbd') + .text(function (d) { return d; }); - var description = row + row .append('div') - .attr('class', 'shorctut-desc col6') + .attr('class', 'shortcut-desc ') .text(function (d) { return t(d.key); }); shortcuts = shortcuts .merge(shortcutsEnter); + // Update wrapper.selectAll('.shortcut-tab') .style('display', function (d, i) { return i === activeTab ? 'block' : 'none'; }); - - } - function show() { - if (!d3.selectAll('.modal').empty()) return; - - modalSelection = uiModal(selection); - - modalSelection.select('.modal') - .attr('class', 'modal fillL col6'); - - var shortcutsModal = modalSelection.select('.content'); - - shortcutsModal - .attr('class', 'cf modal-shortcuts'); - - shortcutsModal - .append('div') - .attr('class', 'modal-section') - .append('h3') - .text('Keyboard shortcuts'); - - // var wrap = shortcutsModal.selectAll('.wrapper') - // - .data([0]); - - // wrap = wrap.enter() - // .append('div') - // .attr('class', 'preset-input-wrap') - // .merge(wrap); - shortcutsModal.call(render); - - - // section - // .append('h4') - // .text(function(d) { return t(d.desc); }); - - // var row = section - // .selectAll('.shortcut-row') - // .data(function(d) { return d.shortcuts; }) - // .enter() - // .append('div') - // .attr('class', 'shortcut-row'); - - // var shortcuts = row - // .append('div') - // .attr('class', 'kbd-row col4'); - - // shortcuts - // .selectAll('kbd') - // .data(function(d) { return d.shortcut; }) - // .enter().append('kbd') - // .text(function(d) { return uiCmd(d); }); - - // var description = row - // .append('div') - // .attr('class', 'shorctut-desc col6') - // .text(function(d) { return t(d.key); }); } var keybinding = d3keybinding('shortcuts') - .on(key, show); + .on(key, function () { + if (modalSelection) { + modalSelection.close(); + modalSelection = null; + return; + } + show(); + }); d3.select(document) .call(keybinding); From 47164d8f150de6a5a971a8f212761f36646da4a9 Mon Sep 17 00:00:00 2001 From: Kushan Joshi <0o3ko0@gmail.com> Date: Fri, 10 Feb 2017 00:50:56 +0530 Subject: [PATCH 06/14] ui minor fixes for shortcut.js --- css/80_app.css | 20 ++++++++++++++++---- modules/ui/shortcuts.js | 8 ++++---- 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 3f0b6f13c..59c95efb6 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -3109,6 +3109,12 @@ img.tile-removing { border-radius: 4px; } +.modal-shortcuts .shortcut-tab { + display: flex; + flex-direction: column; + flex-grow: 1; +} + .modal-shortcuts .tab:hover { background-color: #ccc; } @@ -3117,19 +3123,25 @@ img.tile-removing { color: #7092FF; } +.modal-shortcuts .shortcut-row { + display: flex; + flex-direction: row; +} + .modal-shortcuts .kbd-row { - display: inline-block; padding-right: 10px; color: #767676; text-align: right; white-space: nowrap; - padding-bottom: 3px; + padding-bottom: 5px; + width: 50%; } .modal-shortcuts .shortcut-desc { - display: inline-block; - padding-bottom: 3px; + padding-bottom: 5px; + width: 50%; } + .modal-shortcuts kbd { display: inline-block; text-align: right; diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js index 1c40208a5..e7bbbdc41 100644 --- a/modules/ui/shortcuts.js +++ b/modules/ui/shortcuts.js @@ -102,18 +102,18 @@ export function uiShortcuts() { var shortcutsRow = row .append('div') - .attr('class', 'kbd-row col6'); + .attr('class', 'kbd-row'); shortcutsRow .selectAll('kbd') .data(function (d) { return d.shortcut; }) .enter() .append('kbd') - .text(function (d) { return d; }); + .text(function (d) { return uiCmd(d); }); row .append('div') - .attr('class', 'shortcut-desc ') + .attr('class', 'shortcut-desc') .text(function (d) { return t(d.key); }); shortcuts = shortcuts @@ -122,7 +122,7 @@ export function uiShortcuts() { // Update wrapper.selectAll('.shortcut-tab') .style('display', function (d, i) { - return i === activeTab ? 'block' : 'none'; + return i === activeTab ? 'flex' : 'none'; }); } From 957c75a7cc905f6a10c09f07c6bc78b6c15d0302 Mon Sep 17 00:00:00 2001 From: Kushan Joshi <0o3ko0@gmail.com> Date: Fri, 17 Feb 2017 15:00:23 +0530 Subject: [PATCH 07/14] remove uiCmd --- modules/ui/shortcuts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js index e7bbbdc41..b42676bc0 100644 --- a/modules/ui/shortcuts.js +++ b/modules/ui/shortcuts.js @@ -6,7 +6,7 @@ import { t } from '../util/locale'; import { shortcuts as shortcutsData } from '../../data'; export function uiShortcuts() { - var key = uiCmd('⇧/'); + var key = '⇧/'; var activeTab = 0; function shortcuts(selection) { From d45063dd692902f15d696ca870cb278367b45f94 Mon Sep 17 00:00:00 2001 From: Kushan Joshi <0o3ko0@gmail.com> Date: Thu, 9 Mar 2017 21:25:56 +0530 Subject: [PATCH 08/14] Make rtl compatible and minor refactor --- css/80_app.css | 27 ++++- data/core.yaml | 2 + data/index.js | 2 +- data/shortcuts.json | 2 +- dist/locales/en.json | 3 + modules/ui/shortcuts.js | 257 ++++++++++++++++++++-------------------- 6 files changed, 158 insertions(+), 135 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 59c95efb6..fb46fdf0f 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -3132,11 +3132,10 @@ img.tile-removing { padding-right: 10px; color: #767676; text-align: right; - white-space: nowrap; padding-bottom: 5px; width: 50%; - -} + +} .modal-shortcuts .shortcut-desc { padding-bottom: 5px; width: 50%; @@ -3144,7 +3143,7 @@ img.tile-removing { .modal-shortcuts kbd { display: inline-block; - text-align: right; + text-align: right; padding: 3px 5px; font-size: 11px; line-height: 10px; @@ -3159,6 +3158,7 @@ img.tile-removing { box-shadow: inset 0 -1px 0 #bbb; } + /* Save Mode ------------------------------------------------------- */ .mode-save a.user-info { @@ -4092,3 +4092,22 @@ li.hide + li.version .badge .tooltip .tooltip-arrow { [dir='rtl'] .spin-control button.increment{ border-bottom-left-radius: 3px; } +/* modal */ +[dir='rtl'] .modal > button { + position: absolute; + left: 0; + right: unset; + top: 0; + height: 59px; + z-index: 50; +} + +/* shortcuts modal */ + +[dir='rtl'] .kbd-row { + padding-left: 10px; + color: #767676; + text-align: left; + padding-bottom: 5px; + width: 50%; +} diff --git a/data/core.yaml b/data/core.yaml index 74d11a3c5..24cdea271 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -1017,6 +1017,8 @@ en: save: "Don't forget to regularly save your changes!" start: "Start mapping!" shortcuts: + modal: + title: "Keyboard shortcuts" display: desc: "Display" pan_map: "Pan map" diff --git a/data/index.js b/data/index.js index c784846ab..f2ae2544b 100644 --- a/data/index.js +++ b/data/index.js @@ -6,7 +6,7 @@ export { dataDeprecated } from './deprecated.json'; export { dataDiscarded } from './discarded.json'; export { dataLocales } from './locales.json'; export { dataPhoneFormats } from './phone-formats.json'; -export { shortcuts } from './shortcuts.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 index 9a79dc569..ac17243df 100644 --- a/data/shortcuts.json +++ b/data/shortcuts.json @@ -1,4 +1,4 @@ -{ "shortcuts": [ +{ "dataShortcuts": [ { "key": "display", "desc": "shortcuts.display.desc", diff --git a/dist/locales/en.json b/dist/locales/en.json index ebacea12e..59b3e21bc 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -884,6 +884,9 @@ } }, "shortcuts": { + "modal": { + "title": "Keyboard shortcuts" + }, "display": { "desc": "Display", "pan_map": "Pan map", diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js index b42676bc0..a0a2c69fa 100644 --- a/modules/ui/shortcuts.js +++ b/modules/ui/shortcuts.js @@ -3,142 +3,141 @@ import { uiCmd } from './cmd'; import { uiModal } from './modal'; import { d3keybinding } from '../lib/d3.keybinding.js'; import { t } from '../util/locale'; -import { shortcuts as shortcutsData } from '../../data'; +import { dataShortcuts } from '../../data'; export function uiShortcuts() { var key = '⇧/'; var activeTab = 0; + var modalSelection; + var savedSelection; + var keybinding = d3keybinding('shortcuts') + .on(key, function () { + if (modalSelection) { + modalSelection.close(); + modalSelection = null; + return; + } + modalSelection = uiModal(savedSelection); + shortcutsModal(modalSelection); + }); - function shortcuts(selection) { - var modalSelection; + d3.select(document) + .call(keybinding); + + function shortcutsModal(modalSelection) { + modalSelection.select('.modal') + .attr('class', 'modal modal-shortcuts fillL col6'); - function show() { - modalSelection = uiModal(selection); + var shortcutsModal = modalSelection.select('.content'); - modalSelection.select('.modal') - .attr('class', 'modal fillL col6'); - - var shortcutsModal = modalSelection.select('.content'); - - shortcutsModal - .attr('class', 'cf modal-shortcuts'); - - shortcutsModal - .append('div') - .attr('class', 'modal-section') - .append('h3') - .text('Keyboard shortcuts'); - - shortcutsModal - .call(render); - } - - function render(selection) { - var wrapper = selection - .selectAll('.wrapper') - .data([0]); - - var wrapperEnter = wrapper - .enter() - .append('div') - .attr('class', 'wrapper'); - - var tabsBar = wrapperEnter - .append('div') - .attr('class', 'tabs-bar'); - - var shortcutsList = wrapperEnter - .append('div') - .attr('class', 'shortcuts-list'); - - wrapper = wrapper.merge(wrapperEnter); - - var tabs = tabsBar - .selectAll('.tab') - .data(shortcutsData); - - var tabsEnter = tabs - .enter() - .append('div') - .attr('class', 'tab') - .on('click', function (d, i) { - activeTab = i; - render(selection); - }); - - tabsEnter - .append('span') - .text(function (d) { return t(d.desc); }); - - tabs = tabs - .merge(tabsEnter); - - // Update - wrapper.selectAll('.tab') - .classed('active', function (d, i) { - return i === activeTab; - }); - - - var shortcuts = shortcutsList - .selectAll('.shortcut-tab') - .data(shortcutsData); - - var shortcutsEnter = shortcuts - .enter() - .append('div') - .attr('class', 'shortcut-tab') - .on('click', function (d, i) { - activeTab = i; - render(selection); - }); - - var row = shortcutsEnter - .selectAll('.shortcut-row') - .data(function (d) { return d.shortcuts; }) - .enter() - .append('div') - .attr('class', 'shortcut-row'); - - var shortcutsRow = row - .append('div') - .attr('class', 'kbd-row'); - - shortcutsRow - .selectAll('kbd') - .data(function (d) { return d.shortcut; }) - .enter() - .append('kbd') - .text(function (d) { return uiCmd(d); }); - - row - .append('div') - .attr('class', 'shortcut-desc') - .text(function (d) { return t(d.key); }); - - shortcuts = shortcuts - .merge(shortcutsEnter); - - // Update - wrapper.selectAll('.shortcut-tab') - .style('display', function (d, i) { - return i === activeTab ? 'flex' : 'none'; - }); - } - - var keybinding = d3keybinding('shortcuts') - .on(key, function () { - if (modalSelection) { - modalSelection.close(); - modalSelection = null; - return; - } - show(); - }); - - d3.select(document) - .call(keybinding); + shortcutsModal + .append('div') + .attr('class', 'modal-section') + .append('h3') + .text(t('shortcuts.modal.title')); + + shortcutsModal + .call(renderTabs); } - return shortcuts; + function renderTabs(selection) { + var wrapper = selection + .selectAll('.wrapper') + .data([0]); + + var wrapperEnter = wrapper + .enter() + .append('div') + .attr('class', 'wrapper modal-section'); + + var tabsBar = wrapperEnter + .append('div') + .attr('class', 'tabs-bar'); + + var shortcutsList = wrapperEnter + .append('div') + .attr('class', 'shortcuts-list'); + + wrapper = wrapper.merge(wrapperEnter); + + var tabs = tabsBar + .selectAll('.tab') + .data(dataShortcuts); + + var tabsEnter = tabs + .enter() + .append('div') + .attr('class', 'tab') + .on('click', function (d, i) { + activeTab = i; + renderTabs(selection); + }); + + tabsEnter + .append('span') + .text(function (d) { return t(d.desc); }); + + tabs = tabs + .merge(tabsEnter); + + // Update + wrapper.selectAll('.tab') + .classed('active', function (d, i) { + return i === activeTab; + }); + + + var shortcuts = shortcutsList + .selectAll('.shortcut-tab') + .data(dataShortcuts); + + var shortcutsEnter = shortcuts + .enter() + .append('div') + .attr('class', 'shortcut-tab') + .on('click', function (d, i) { + activeTab = i; + renderTabs(selection); + }); + + var row = shortcutsEnter + .selectAll('.shortcut-row') + .data(function (d) { return d.shortcuts; }) + .enter() + .append('div') + .attr('class', 'shortcut-row'); + + var shortcutsRow = row + .append('div') + .attr('class', 'kbd-row'); + + shortcutsRow + .selectAll('kbd') + .data(function (d) { return d.shortcut; }) + .enter() + .append('kbd') + .text(function (d) { return uiCmd(d); }); + + row + .append('div') + .attr('class', 'shortcut-desc') + .text(function (d) { return t(d.key); }); + + shortcuts = shortcuts + .merge(shortcutsEnter); + + // Update + wrapper.selectAll('.shortcut-tab') + .style('display', function (d, i) { + return i === activeTab ? 'flex' : 'none'; + }); + } + + return function(selection, show) { + savedSelection = selection; + if (show) { + modalSelection = uiModal(selection); + shortcutsModal(modalSelection); + } + }; } From 0e3b372abd2a039ac4cea92a461e04268f4f2b34 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Tue, 16 May 2017 15:30:12 -0400 Subject: [PATCH 09/14] format --- data/shortcuts.json | 87 ++++++++++------------------------------- modules/ui/shortcuts.js | 8 +++- 2 files changed, 26 insertions(+), 69 deletions(-) diff --git a/data/shortcuts.json b/data/shortcuts.json index ac17243df..3fe790fbf 100644 --- a/data/shortcuts.json +++ b/data/shortcuts.json @@ -4,77 +4,47 @@ "desc": "shortcuts.display.desc", "shortcuts": [ { - "shortcut": [ - "↓", - "↑", - "←", - "→" - ], + "shortcut": ["↓", "↑", "←", "→"], "key": "shortcuts.display.pan_map" }, { - "shortcut": [ - "⇧↓", - "⇧↑", - "⇧←", - "⇧→" - ], + "shortcut": ["⇧↓", "⇧↑", "⇧←", "⇧→"], "key": "shortcuts.display.pan_map_screen" }, { - "shortcut": [ - "+", - "-" - ], + "shortcut": ["+", "-"], "key": "shortcuts.display.zoom" }, { - "shortcut": [ - "⌘+", - "⌘-" - ], + "shortcut": ["⌘+", "⌘-"], "key": "shortcuts.display.zoom_large" }, { - "shortcut": [ - "B" - ], + "shortcut": ["B"], "key": "shortcuts.display.bg_switcher" }, { - "shortcut": [ - "⌘B" - ], + "shortcut": ["⌘B"], "key": "shortcuts.display.bg" }, { - "shortcut": [ - "W" - ], + "shortcut": ["W"], "key": "shortcuts.display.wireframe" }, { - "shortcut": [ - "H" - ], + "shortcut": ["H"], "key": "shortcuts.display.help" }, { - "shortcut": [ - "/" - ], + "shortcut": ["/"], "key": "shortcuts.display.minimap" }, { - "shortcut": [ - "⌘I" - ], + "shortcut": ["⌘I"], "key": "shortcuts.display.infobox" }, { - "shortcut": [ - "Space" - ], + "shortcut": ["Space"], "key": "shortcuts.display.radial_menu" } ] @@ -84,54 +54,37 @@ "desc": "shortcuts.edit.desc", "shortcuts": [ { - "shortcut": [ - "1" - ], + "shortcut": ["1"], "key": "shortcuts.edit.add_point" }, { - "shortcut": [ - "2" - ], + "shortcut": ["2"], "key": "shortcuts.edit.add_line" }, { - "shortcut": [ - "3" - ], + "shortcut": ["3"], "key": "shortcuts.edit.add_area" }, { - "shortcut": [ - "A" - ], + "shortcut": ["A"], "key": "shortcuts.edit.continue_line" }, { - "shortcut": [ - "↵ Enter", - "Esc" - ], + "shortcut": ["↵ Enter", "Esc"], "key": "shortcuts.edit.stop_line" }, { - "shortcut": [ - "⌘Z" - ], + "shortcut": ["⌘Z"], "key": "shortcuts.edit.undo" }, { - "shortcut": [ - "⌘⇧Z" - ], + "shortcut": ["⌘⇧Z"], "key": "shortcuts.edit.redo" }, { - "shortcut": [ - "⌘S" - ], + "shortcut": ["⌘S"], "key": "shortcuts.edit.save" } ] } -]} \ No newline at end of file +]} diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js index a0a2c69fa..3b20ecf33 100644 --- a/modules/ui/shortcuts.js +++ b/modules/ui/shortcuts.js @@ -5,6 +5,7 @@ import { d3keybinding } from '../lib/d3.keybinding.js'; import { t } from '../util/locale'; import { dataShortcuts } from '../../data'; + export function uiShortcuts() { var key = '⇧/'; var activeTab = 0; @@ -23,7 +24,8 @@ export function uiShortcuts() { d3.select(document) .call(keybinding); - + + function shortcutsModal(modalSelection) { modalSelection.select('.modal') .attr('class', 'modal modal-shortcuts fillL col6'); @@ -35,11 +37,12 @@ export function uiShortcuts() { .attr('class', 'modal-section') .append('h3') .text(t('shortcuts.modal.title')); - + shortcutsModal .call(renderTabs); } + function renderTabs(selection) { var wrapper = selection .selectAll('.wrapper') @@ -133,6 +136,7 @@ export function uiShortcuts() { }); } + return function(selection, show) { savedSelection = selection; if (show) { From 9b956755e36914e6f3ee5fb86d021ab50e6d6c3e Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Tue, 16 May 2017 17:08:29 -0400 Subject: [PATCH 10/14] Less button-y tabs --- css/80_app.css | 42 +++++++++++++++++------------------------- 1 file changed, 17 insertions(+), 25 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index fb46fdf0f..a3e757856 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -172,7 +172,7 @@ a:visited, a { } a:hover { - color:#597be7; + color: #597be7; } /* Forms @@ -646,7 +646,7 @@ button.save.has-count .count::before { position: absolute; right: 0; top: 0; - height: 59px; + height: 60px; z-index: 50; } @@ -3084,29 +3084,31 @@ img.tile-removing { /* Shortcuts Modal ------------------------------------------------------- */ -.modal-shortcuts { - padding-bottom: 20px; -} -.modal-shortcuts .modal-section { - margin-bottom: 10px; -} -.modal-shortcuts .wrapper { - padding: 0 20px; + +.modal-shortcuts .modal-section:last-child { + padding-top: 10px; } .modal-shortcuts .tabs-bar { text-align: center; - padding-bottom: 10px; + padding-bottom: 15px; + font-size: 16px; + font-weight: bold; } .modal-shortcuts .tab { display: inline-block; - padding: 0 10px; + padding: 5px 10px; margin: 0 5px; cursor: pointer; - border: 1px solid #ccc; - background-color: #eee; - border-radius: 4px; + color: #666; +} +.modal-shortcuts .tab.active { + color: #7092ff; +} +.modal-shortcuts .tab:hover { + color: #597be7; + background-color: #efefef; } .modal-shortcuts .shortcut-tab { @@ -3115,14 +3117,6 @@ img.tile-removing { flex-grow: 1; } -.modal-shortcuts .tab:hover { - background-color: #ccc; -} -.modal-shortcuts .tab.active { - background-color: #E8EBFF; - color: #7092FF; -} - .modal-shortcuts .shortcut-row { display: flex; flex-direction: row; @@ -4098,8 +4092,6 @@ li.hide + li.version .badge .tooltip .tooltip-arrow { left: 0; right: unset; top: 0; - height: 59px; - z-index: 50; } /* shortcuts modal */ From 0013866fe37797b51449d187acfeeb392f3a4a2b Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Wed, 17 May 2017 15:16:23 -0400 Subject: [PATCH 11/14] Put shortcuts into groups, add more shortcuts for operations --- css/80_app.css | 21 +++- data/core.yaml | 77 +++++++++----- data/shortcuts.json | 223 ++++++++++++++++++++++++++-------------- dist/locales/en.json | 85 ++++++++++----- modules/ui/shortcuts.js | 32 +++--- 5 files changed, 294 insertions(+), 144 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index a3e757856..25ab000fd 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -3084,6 +3084,10 @@ img.tile-removing { /* Shortcuts Modal ------------------------------------------------------- */ +.modal-shortcuts { + width: 75%; + max-width: 800px; +} .modal-shortcuts .modal-section:last-child { padding-top: 10px; @@ -3112,12 +3116,23 @@ img.tile-removing { } .modal-shortcuts .shortcut-tab { + display: flex; + flex-flow: row wrap; +} + +.modal-shortcuts .shortcut-group { + padding: 10px; + flex: 0 0 50%; display: flex; flex-direction: column; - flex-grow: 1; +} + +.modal-shortcuts .shortcut-group h3 { + text-align: center; } .modal-shortcuts .shortcut-row { + flex: 0 0 auto; display: flex; flex-direction: row; } @@ -3127,12 +3142,12 @@ img.tile-removing { color: #767676; text-align: right; padding-bottom: 5px; - width: 50%; + flex: 1 1 40%; } .modal-shortcuts .shortcut-desc { padding-bottom: 5px; - width: 50%; + flex: 1 1 60%; } .modal-shortcuts kbd { diff --git a/data/core.yaml b/data/core.yaml index 24cdea271..a007e5f5d 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -1017,28 +1017,55 @@ en: save: "Don't forget to regularly save your changes!" start: "Start mapping!" shortcuts: - modal: - title: "Keyboard shortcuts" - display: - desc: "Display" - pan_map: "Pan map" - pan_map_screen: "Pan map by one screenful" - zoom: "Zoom in / Zoom out" - zoom_large: "Zoom in / Zoom out by a lot" - bg_switcher: "Display background layer switcher" - bg: "Switch between backgrounds" - wireframe: "Toggle wireframe mode" - help: "Show in-editor help/documentation" - minimap: "Toggle minimap" - infobox: "Toggle info/measurements box" - radial_menu: "Toggle radial menu for selected object" - edit: - desc: "Editing" - add_point: "Switch to 'add point' mode" - add_line: "Switch to 'add line' mode" - add_area: "Switch to 'add area' mode" - continue_line: "Continue drawing a line at the selected node" - stop_line: "Stop drawing of a line or area" - undo: "Undo last action" - redo: "Redo last action" - save: "Save changes" \ No newline at end of file + title: "Keyboard shortcuts" + browsing: + title: "Browsing" + navigation: + title: "Navigation" + pan_map: "Pan map" + pan_map_screen: "Pan map by one screenful" + zoom: "Zoom in / Zoom out" + zoom_large: "Zoom in / Zoom out by a lot" + display: + title: "Display" + background: "Background settings" + background_switch: "Switch back to last background" + toggle_minimap: "Toggle minimap" + map_data: "Map data settings" + wireframe: "Toggle wireframe mode" + help: + title: "Help" + help: "Show help/documentation" + selected: + title: "With selected" + toggle_infobox: "Toggle info box" + toggle_menu: "Toggle edit menu" + editing: + title: "Editing" + drawing: + title: "Drawing" + add_point: "'Add point' mode" + add_line: "'Add line' mode" + add_area: "'Add area' mode" + place_point: "Place a point" + stop_line: "Stop drawing of a line or area" + operations: + title: "Operations" + continue_line: "Continue a line at the selected node" + merge: "Combine (Merge) selected items" + disconnect: "Disconnect features at the selected node" + split: "Split a line into two at the selected node" + move: "Move selected items" + rotate: "Rotate selected items" + orthagonalize: "Straighten line / Square area corners" + circularize: "Circularize an area" + reflect_long: "Reflect items across the longer axis" + reflect_short: "Reflect items across the shorter axis" + reverse: "Reverse a line" + edit: + title: "Edit" + copy: "Copy map features" + paste: "Paste map features" + undo: "Undo last action" + redo: "Redo last action" + save: "Save changes" diff --git a/data/shortcuts.json b/data/shortcuts.json index 3fe790fbf..71874356c 100644 --- a/data/shortcuts.json +++ b/data/shortcuts.json @@ -1,89 +1,156 @@ { "dataShortcuts": [ { - "key": "display", - "desc": "shortcuts.display.desc", - "shortcuts": [ + "tab": "browsing", + "text": "shortcuts.browsing.title", + "groups": [ { - "shortcut": ["↓", "↑", "←", "→"], - "key": "shortcuts.display.pan_map" - }, - { - "shortcut": ["⇧↓", "⇧↑", "⇧←", "⇧→"], - "key": "shortcuts.display.pan_map_screen" - }, - { - "shortcut": ["+", "-"], - "key": "shortcuts.display.zoom" - }, - { - "shortcut": ["⌘+", "⌘-"], - "key": "shortcuts.display.zoom_large" - }, - { - "shortcut": ["B"], - "key": "shortcuts.display.bg_switcher" - }, - { - "shortcut": ["⌘B"], - "key": "shortcuts.display.bg" - }, - { - "shortcut": ["W"], - "key": "shortcuts.display.wireframe" - }, - { - "shortcut": ["H"], - "key": "shortcuts.display.help" - }, - { - "shortcut": ["/"], - "key": "shortcuts.display.minimap" - }, - { - "shortcut": ["⌘I"], - "key": "shortcuts.display.infobox" - }, - { - "shortcut": ["Space"], - "key": "shortcuts.display.radial_menu" + "group": "navigation", + "text": "shortcuts.browsing.navigation.title", + "shortcuts": [ + { + "shortcut": ["↓", "↑", "←", "→"], + "text": "shortcuts.browsing.navigation.pan_map" + }, { + "shortcut": ["⇧↓", "⇧↑", "⇧←", "⇧→"], + "text": "shortcuts.browsing.navigation.pan_map_screen" + }, { + "shortcut": ["+", "-"], + "text": "shortcuts.browsing.navigation.zoom" + }, { + "shortcut": ["⌘+", "⌘-"], + "text": "shortcuts.browsing.navigation.zoom_large" + } + ] + }, { + "group": "display", + "text": "shortcuts.browsing.display.title", + "shortcuts": [ + { + "shortcut": ["B"], + "text": "shortcuts.browsing.display.background" + }, { + "shortcut": ["⌘B"], + "text": "shortcuts.browsing.display.background_switch" + }, { + "shortcut": ["/"], + "text": "shortcuts.browsing.display.toggle_minimap" + }, { + "shortcut": ["F"], + "text": "shortcuts.browsing.display.map_data" + }, { + "shortcut": ["W"], + "text": "shortcuts.browsing.display.wireframe" + } + ] + }, { + "group": "help", + "text": "shortcuts.browsing.help.title", + "shortcuts": [ + { + "shortcut": ["H"], + "text": "shortcuts.browsing.help.help" + } + ] + }, { + "group": "selected", + "text": "shortcuts.browsing.selected.title", + "shortcuts": [ + { + "shortcut": ["⌘I"], + "text": "shortcuts.browsing.selected.toggle_infobox" + }, { + "shortcut": ["Space"], + "text": "shortcuts.browsing.selected.toggle_menu" + } + ] } ] }, { - "key": "edit", - "desc": "shortcuts.edit.desc", - "shortcuts": [ + "tab": "editing", + "text": "shortcuts.editing.title", + "groups": [ { - "shortcut": ["1"], - "key": "shortcuts.edit.add_point" - }, - { - "shortcut": ["2"], - "key": "shortcuts.edit.add_line" - }, - { - "shortcut": ["3"], - "key": "shortcuts.edit.add_area" - }, - { - "shortcut": ["A"], - "key": "shortcuts.edit.continue_line" - }, - { - "shortcut": ["↵ Enter", "Esc"], - "key": "shortcuts.edit.stop_line" - }, - { - "shortcut": ["⌘Z"], - "key": "shortcuts.edit.undo" - }, - { - "shortcut": ["⌘⇧Z"], - "key": "shortcuts.edit.redo" - }, - { - "shortcut": ["⌘S"], - "key": "shortcuts.edit.save" + "group": "drawing", + "text": "shortcuts.editing.drawing.title", + "shortcuts": [ + { + "shortcut": ["1"], + "text": "shortcuts.editing.drawing.add_point" + }, { + "shortcut": ["2"], + "text": "shortcuts.editing.drawing.add_line" + }, { + "shortcut": ["3"], + "text": "shortcuts.editing.drawing.add_area" + }, { + "shortcut": ["Space"], + "text": "shortcuts.editing.drawing.place_point" + }, { + "shortcut": ["↵ Enter", "Esc"], + "text": "shortcuts.editing.drawing.stop_line" + } + ] + }, { + "group": "operations", + "text": "shortcuts.editing.operations.title", + "shortcuts": [ + { + "shortcut": ["A"], + "text": "shortcuts.editing.operations.continue_line" + }, { + "shortcut": ["C"], + "text": "shortcuts.editing.operations.merge" + }, { + "shortcut": ["D"], + "text": "shortcuts.editing.operations.disconnect" + }, { + "shortcut": ["X"], + "text": "shortcuts.editing.operations.split" + }, { + "shortcut": ["M"], + "text": "shortcuts.editing.operations.move" + }, { + "shortcut": ["R"], + "text": "shortcuts.editing.operations.rotate" + }, { + "shortcut": ["S"], + "text": "shortcuts.editing.operations.orthagonalize" + }, { + "shortcut": ["O"], + "text": "shortcuts.editing.operations.circularize" + }, { + "shortcut": ["T"], + "text": "shortcuts.editing.operations.reflect_long" + }, { + "shortcut": ["Y"], + "text": "shortcuts.editing.operations.reflect_short" + }, { + "shortcut": ["V"], + "text": "shortcuts.editing.operations.reverse" + } + ] + }, { + "group": "edit", + "text": "shortcuts.editing.edit.title", + "shortcuts": [ + { + "shortcut": ["⌘C"], + "text": "shortcuts.editing.edit.copy" + }, { + "shortcut": ["⌘V"], + "text": "shortcuts.editing.edit.paste" + }, { + "shortcut": ["⌘Z"], + "text": "shortcuts.editing.edit.undo" + }, { + "shortcut": ["⌘⇧Z"], + "text": "shortcuts.editing.edit.redo" + }, { + "shortcut": ["⌘S"], + "text": "shortcuts.editing.edit.save" + } + ] } ] } diff --git a/dist/locales/en.json b/dist/locales/en.json index 59b3e21bc..9151864d2 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -884,33 +884,66 @@ } }, "shortcuts": { - "modal": { - "title": "Keyboard shortcuts" + "title": "Keyboard shortcuts", + "browsing": { + "title": "Browsing", + "navigation": { + "title": "Navigation", + "pan_map": "Pan map", + "pan_map_screen": "Pan map by one screenful", + "zoom": "Zoom in / Zoom out", + "zoom_large": "Zoom in / Zoom out by a lot" + }, + "display": { + "title": "Display", + "background": "Background settings", + "background_switch": "Switch back to last background", + "toggle_minimap": "Toggle minimap", + "map_data": "Map data settings", + "wireframe": "Toggle wireframe mode" + }, + "help": { + "title": "Help", + "help": "Show help/documentation" + }, + "selected": { + "title": "With selected", + "toggle_infobox": "Toggle info box", + "toggle_menu": "Toggle edit menu" + } }, - "display": { - "desc": "Display", - "pan_map": "Pan map", - "pan_map_screen": "Pan map by one screenful", - "zoom": "Zoom in / Zoom out", - "zoom_large": "Zoom in / Zoom out by a lot", - "bg_switcher": "Display background layer switcher", - "bg": "Switch between backgrounds", - "wireframe": "Toggle wireframe mode", - "help": "Show in-editor help/documentation", - "minimap": "Toggle minimap", - "infobox": "Toggle info/measurements box", - "radial_menu": "Toggle radial menu for selected object" - }, - "edit": { - "desc": "Editing", - "add_point": "Switch to 'add point' mode", - "add_line": "Switch to 'add line' mode", - "add_area": "Switch to 'add area' mode", - "continue_line": "Continue drawing a line at the selected node", - "stop_line": "Stop drawing of a line or area", - "undo": "Undo last action", - "redo": "Redo last action", - "save": "Save changes" + "editing": { + "title": "Editing", + "drawing": { + "title": "Drawing", + "add_point": "'Add point' mode", + "add_line": "'Add line' mode", + "add_area": "'Add area' mode", + "place_point": "Place a point", + "stop_line": "Stop drawing of a line or area" + }, + "operations": { + "title": "Operations", + "continue_line": "Continue a line at the selected node", + "merge": "Combine (Merge) selected items", + "disconnect": "Disconnect features at the selected node", + "split": "Split a line into two at the selected node", + "move": "Move selected items", + "rotate": "Rotate selected items", + "orthagonalize": "Straighten line / Square area corners", + "circularize": "Circularize an area", + "reflect_long": "Reflect items across the longer axis", + "reflect_short": "Reflect items across the shorter axis", + "reverse": "Reverse a line" + }, + "edit": { + "title": "Edit", + "copy": "Copy map features", + "paste": "Paste map features", + "undo": "Undo last action", + "redo": "Redo last action", + "save": "Save changes" + } } }, "presets": { diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js index 3b20ecf33..abe7385a5 100644 --- a/modules/ui/shortcuts.js +++ b/modules/ui/shortcuts.js @@ -36,14 +36,14 @@ export function uiShortcuts() { .append('div') .attr('class', 'modal-section') .append('h3') - .text(t('shortcuts.modal.title')); + .text(t('shortcuts.title')); shortcutsModal - .call(renderTabs); + .call(render); } - function renderTabs(selection) { + function render(selection) { var wrapper = selection .selectAll('.wrapper') .data([0]); @@ -73,12 +73,12 @@ export function uiShortcuts() { .attr('class', 'tab') .on('click', function (d, i) { activeTab = i; - renderTabs(selection); + render(selection); }); tabsEnter .append('span') - .text(function (d) { return t(d.desc); }); + .text(function (d) { return t(d.text); }); tabs = tabs .merge(tabsEnter); @@ -97,13 +97,21 @@ export function uiShortcuts() { var shortcutsEnter = shortcuts .enter() .append('div') - .attr('class', 'shortcut-tab') - .on('click', function (d, i) { - activeTab = i; - renderTabs(selection); - }); + .attr('class', 'shortcut-tab'); - var row = shortcutsEnter + + var groupsEnter = shortcutsEnter + .selectAll('.shortcut-group') + .data(function (d) { return d.groups; }) + .enter() + .append('div') + .attr('class', 'shortcut-group'); + + groupsEnter + .append('h3') + .text(function(d) { return t(d.text); }); + + var row = groupsEnter .selectAll('.shortcut-row') .data(function (d) { return d.shortcuts; }) .enter() @@ -124,7 +132,7 @@ export function uiShortcuts() { row .append('div') .attr('class', 'shortcut-desc') - .text(function (d) { return t(d.key); }); + .text(function (d) { return t(d.text); }); shortcuts = shortcuts .merge(shortcutsEnter); From 9628670b98e80b2e80029f0f879c89e3510d9cab Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Thu, 18 May 2017 13:36:19 -0400 Subject: [PATCH 12/14] Use translated keyboard shortcuts for operations, add '?' --- data/core.yaml | 3 ++- data/shortcuts.json | 31 +++++++++++++++++-------------- dist/locales/en.json | 5 +++-- modules/ui/shortcuts.js | 4 +++- 4 files changed, 25 insertions(+), 18 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index a007e5f5d..d3195381b 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -1036,6 +1036,7 @@ en: help: title: "Help" help: "Show help/documentation" + keyboard: "Show keyboard shortcuts" selected: title: "With selected" toggle_infobox: "Toggle info box" @@ -1057,7 +1058,7 @@ en: split: "Split a line into two at the selected node" move: "Move selected items" rotate: "Rotate selected items" - orthagonalize: "Straighten line / Square area corners" + orthogonalize: "Straighten line / Square area corners" circularize: "Circularize an area" reflect_long: "Reflect items across the longer axis" reflect_short: "Reflect items across the shorter axis" diff --git a/data/shortcuts.json b/data/shortcuts.json index 71874356c..78e26e407 100644 --- a/data/shortcuts.json +++ b/data/shortcuts.json @@ -49,6 +49,9 @@ { "shortcut": ["H"], "text": "shortcuts.browsing.help.help" + }, { + "shortcut": ["?"], + "text": "shortcuts.browsing.help.keyboard" } ] }, { @@ -96,38 +99,38 @@ "text": "shortcuts.editing.operations.title", "shortcuts": [ { - "shortcut": ["A"], + "shortcut": ["operations.continue.key"], "text": "shortcuts.editing.operations.continue_line" }, { - "shortcut": ["C"], + "shortcut": ["operations.merge.key"], "text": "shortcuts.editing.operations.merge" }, { - "shortcut": ["D"], + "shortcut": ["operations.disconnect.key"], "text": "shortcuts.editing.operations.disconnect" }, { - "shortcut": ["X"], + "shortcut": ["operations.split.key"], "text": "shortcuts.editing.operations.split" }, { - "shortcut": ["M"], + "shortcut": ["operations.reverse.key"], + "text": "shortcuts.editing.operations.reverse" + }, { + "shortcut": ["operations.move.key"], "text": "shortcuts.editing.operations.move" }, { - "shortcut": ["R"], + "shortcut": ["operations.rotate.key"], "text": "shortcuts.editing.operations.rotate" }, { - "shortcut": ["S"], - "text": "shortcuts.editing.operations.orthagonalize" + "shortcut": ["operations.orthogonalize.key"], + "text": "shortcuts.editing.operations.orthogonalize" }, { - "shortcut": ["O"], + "shortcut": ["operations.circularize.key"], "text": "shortcuts.editing.operations.circularize" }, { - "shortcut": ["T"], + "shortcut": ["operations.reflect.key.long"], "text": "shortcuts.editing.operations.reflect_long" }, { - "shortcut": ["Y"], + "shortcut": ["operations.reflect.key.short"], "text": "shortcuts.editing.operations.reflect_short" - }, { - "shortcut": ["V"], - "text": "shortcuts.editing.operations.reverse" } ] }, { diff --git a/dist/locales/en.json b/dist/locales/en.json index 9151864d2..33ea1db4e 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -904,7 +904,8 @@ }, "help": { "title": "Help", - "help": "Show help/documentation" + "help": "Show help/documentation", + "keyboard": "Show keyboard shortcuts" }, "selected": { "title": "With selected", @@ -930,7 +931,7 @@ "split": "Split a line into two at the selected node", "move": "Move selected items", "rotate": "Rotate selected items", - "orthagonalize": "Straighten line / Square area corners", + "orthogonalize": "Straighten line / Square area corners", "circularize": "Circularize an area", "reflect_long": "Reflect items across the longer axis", "reflect_short": "Reflect items across the shorter axis", diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js index abe7385a5..5ddbf8d38 100644 --- a/modules/ui/shortcuts.js +++ b/modules/ui/shortcuts.js @@ -127,7 +127,9 @@ export function uiShortcuts() { .data(function (d) { return d.shortcut; }) .enter() .append('kbd') - .text(function (d) { return uiCmd(d); }); + .text(function (d) { + return d.indexOf('.') !== -1 ? uiCmd(t(d)) : uiCmd(d); + }); row .append('div') From 0149c1250940cce71d496a3e90e26e14e124b497 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Wed, 31 May 2017 17:09:27 -0400 Subject: [PATCH 13/14] Couldn't get quite the layout I wanted with flexbox, so using tables (fwiw, GitHub's shortcut screen is this way too) --- css/80_app.css | 37 +++++--------- data/shortcuts.json | 108 ++++++++++++++++++++-------------------- modules/ui/shortcuts.js | 47 ++++++++++------- 3 files changed, 95 insertions(+), 97 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 25ab000fd..3d1b61f6b 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -3120,45 +3120,34 @@ img.tile-removing { flex-flow: row wrap; } -.modal-shortcuts .shortcut-group { - padding: 10px; - flex: 0 0 50%; - display: flex; - flex-direction: column; +.modal-shortcuts .shortcut-column { + flex: 1 1 50%; + width: 50%; } -.modal-shortcuts .shortcut-group h3 { - text-align: center; +.modal-shortcuts td { + padding-bottom: 5px; } -.modal-shortcuts .shortcut-row { - flex: 0 0 auto; - display: flex; - flex-direction: row; +.modal-shortcuts .shortcut-section { + padding: 15px 0 10px 0; } -.modal-shortcuts .kbd-row { +.modal-shortcuts .shortcut-keys { padding-right: 10px; color: #767676; text-align: right; - padding-bottom: 5px; - flex: 1 1 40%; - -} -.modal-shortcuts .shortcut-desc { - padding-bottom: 5px; - flex: 1 1 60%; } -.modal-shortcuts kbd { +.modal-shortcuts .shortcut-keys kbd { display: inline-block; - text-align: right; + text-align: center; padding: 3px 5px; font-size: 11px; - line-height: 10px; - letter-spacing: 1px; + line-height: 12px; + min-width: 12px; color: #555; - vertical-align: middle; + vertical-align: baseline; background-color: #fcfcfc; border: solid 1px #ccc; margin: 0 2px; diff --git a/data/shortcuts.json b/data/shortcuts.json index 78e26e407..d804aeb08 100644 --- a/data/shortcuts.json +++ b/data/shortcuts.json @@ -2,12 +2,13 @@ { "tab": "browsing", "text": "shortcuts.browsing.title", - "groups": [ + "columns": [ { - "group": "navigation", - "text": "shortcuts.browsing.navigation.title", - "shortcuts": [ + "rows": [ { + "section": "navigation", + "text": "shortcuts.browsing.navigation.title" + }, { "shortcut": ["↓", "↑", "←", "→"], "text": "shortcuts.browsing.navigation.pan_map" }, { @@ -19,13 +20,25 @@ }, { "shortcut": ["⌘+", "⌘-"], "text": "shortcuts.browsing.navigation.zoom_large" + }, + + { + "section": "help", + "text": "shortcuts.browsing.help.title" + }, { + "shortcut": ["H"], + "text": "shortcuts.browsing.help.help" + }, { + "shortcut": ["?"], + "text": "shortcuts.browsing.help.keyboard" } ] }, { - "group": "display", - "text": "shortcuts.browsing.display.title", - "shortcuts": [ + "rows": [ { + "section": "display", + "text": "shortcuts.browsing.display.title" + }, { "shortcut": ["B"], "text": "shortcuts.browsing.display.background" }, { @@ -40,25 +53,12 @@ }, { "shortcut": ["W"], "text": "shortcuts.browsing.display.wireframe" - } - ] - }, { - "group": "help", - "text": "shortcuts.browsing.help.title", - "shortcuts": [ + }, + { - "shortcut": ["H"], - "text": "shortcuts.browsing.help.help" + "section": "selected", + "text": "shortcuts.browsing.selected.title" }, { - "shortcut": ["?"], - "text": "shortcuts.browsing.help.keyboard" - } - ] - }, { - "group": "selected", - "text": "shortcuts.browsing.selected.title", - "shortcuts": [ - { "shortcut": ["⌘I"], "text": "shortcuts.browsing.selected.toggle_infobox" }, { @@ -68,16 +68,16 @@ ] } ] - }, - { + }, { "tab": "editing", "text": "shortcuts.editing.title", - "groups": [ + "columns" : [ { - "group": "drawing", - "text": "shortcuts.editing.drawing.title", - "shortcuts": [ + "rows": [ { + "section": "drawing", + "text": "shortcuts.editing.drawing.title" + }, { "shortcut": ["1"], "text": "shortcuts.editing.drawing.add_point" }, { @@ -92,13 +92,34 @@ }, { "shortcut": ["↵ Enter", "Esc"], "text": "shortcuts.editing.drawing.stop_line" + }, + + { + "section": "edit", + "text": "shortcuts.editing.edit.title" + }, { + "shortcut": ["⌘C"], + "text": "shortcuts.editing.edit.copy" + }, { + "shortcut": ["⌘V"], + "text": "shortcuts.editing.edit.paste" + }, { + "shortcut": ["⌘Z"], + "text": "shortcuts.editing.edit.undo" + }, { + "shortcut": ["⌘⇧Z"], + "text": "shortcuts.editing.edit.redo" + }, { + "shortcut": ["⌘S"], + "text": "shortcuts.editing.edit.save" } ] }, { - "group": "operations", - "text": "shortcuts.editing.operations.title", - "shortcuts": [ + "rows": [ { + "section": "operations", + "text": "shortcuts.editing.operations.title" + }, { "shortcut": ["operations.continue.key"], "text": "shortcuts.editing.operations.continue_line" }, { @@ -133,27 +154,6 @@ "text": "shortcuts.editing.operations.reflect_short" } ] - }, { - "group": "edit", - "text": "shortcuts.editing.edit.title", - "shortcuts": [ - { - "shortcut": ["⌘C"], - "text": "shortcuts.editing.edit.copy" - }, { - "shortcut": ["⌘V"], - "text": "shortcuts.editing.edit.paste" - }, { - "shortcut": ["⌘Z"], - "text": "shortcuts.editing.edit.undo" - }, { - "shortcut": ["⌘⇧Z"], - "text": "shortcuts.editing.edit.redo" - }, { - "shortcut": ["⌘S"], - "text": "shortcuts.editing.edit.save" - } - ] } ] } diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js index 5ddbf8d38..95635b1e5 100644 --- a/modules/ui/shortcuts.js +++ b/modules/ui/shortcuts.js @@ -99,30 +99,38 @@ export function uiShortcuts() { .append('div') .attr('class', 'shortcut-tab'); - - var groupsEnter = shortcutsEnter - .selectAll('.shortcut-group') - .data(function (d) { return d.groups; }) + var columnsEnter = shortcutsEnter + .selectAll('.shortcut-column') + .data(function (d) { return d.columns; }) .enter() - .append('div') - .attr('class', 'shortcut-group'); + .append('table') + .attr('class', 'shortcut-column'); - groupsEnter - .append('h3') - .text(function(d) { return t(d.text); }); - - var row = groupsEnter + var rowsEnter = columnsEnter .selectAll('.shortcut-row') - .data(function (d) { return d.shortcuts; }) + .data(function (d) { return d.rows; }) .enter() - .append('div') + .append('tr') .attr('class', 'shortcut-row'); - var shortcutsRow = row - .append('div') - .attr('class', 'kbd-row'); + var sectionRows = rowsEnter + .filter(function (d) { return !d.shortcut; }); - shortcutsRow + sectionRows + .append('td'); + + sectionRows + .append('td') + .attr('class', 'shortcut-section') + .append('h3') + .text(function (d) { return t(d.text); }); + + var shortcutRows = rowsEnter + .filter(function (d) { return d.shortcut; }); + + shortcutRows + .append('td') + .attr('class', 'shortcut-keys') .selectAll('kbd') .data(function (d) { return d.shortcut; }) .enter() @@ -131,11 +139,12 @@ export function uiShortcuts() { return d.indexOf('.') !== -1 ? uiCmd(t(d)) : uiCmd(d); }); - row - .append('div') + shortcutRows + .append('td') .attr('class', 'shortcut-desc') .text(function (d) { return t(d.text); }); + shortcuts = shortcuts .merge(shortcutsEnter); From 8a3970613afa12d6d34e9b10ba4a8ad682ef9cce Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Wed, 31 May 2017 23:20:48 -0400 Subject: [PATCH 14/14] Finalize keyboard shortcut style, add a few more commands --- css/80_app.css | 2 +- data/core.yaml | 68 ++++++++++++++++----------- data/shortcuts.json | 102 ++++++++++++++++++++++++++++------------ dist/locales/en.json | 72 +++++++++++++++++----------- modules/ui/shortcuts.js | 6 +-- 5 files changed, 162 insertions(+), 88 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 3d1b61f6b..d29722c1c 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -3095,7 +3095,7 @@ img.tile-removing { .modal-shortcuts .tabs-bar { text-align: center; - padding-bottom: 15px; + padding-bottom: 10px; font-size: 16px; font-weight: bold; } diff --git a/data/core.yaml b/data/core.yaml index d3195381b..5961f997e 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -560,7 +560,7 @@ en: ### Using the editor - A list of available keyboard shortcuts can be found [here](http://wiki.openstreetmap.org/wiki/ID/Shortcuts). + You can view a list of keyboard shortcuts by pressing the `?` key. roads: | # Roads @@ -1022,25 +1022,37 @@ en: title: "Browsing" navigation: title: "Navigation" - pan_map: "Pan map" - pan_map_screen: "Pan map by one screenful" + pan: "Pan map" + pan_more: "Pan map by one screenful" zoom: "Zoom in / Zoom out" - zoom_large: "Zoom in / Zoom out by a lot" - display: - title: "Display" - background: "Background settings" - background_switch: "Switch back to last background" - toggle_minimap: "Toggle minimap" - map_data: "Map data settings" - wireframe: "Toggle wireframe mode" + zoom_more: "Zoom in / Zoom out by a lot" help: title: "Help" help: "Show help/documentation" keyboard: "Show keyboard shortcuts" - selected: - title: "With selected" - toggle_infobox: "Toggle info box" - toggle_menu: "Toggle edit menu" + display_options: + title: "Display options" + background: "Show background options" + background_switch: "Switch back to last background" + map_data: "Show map data options" + wireframe: "Toggle wireframe mode" + minimap: "Toggle minimap" + selecting: + title: "Selecting features" + select_one: "Select a single feature" + select_multi: "Select multiple features" + lasso: "Draw a selection lasso around features" + with_selected: + title: "With feature selected" + infobox: "Toggle info / measurement box" + edit_menu: "Toggle edit menu" + vertex_selected: + title: "With node selected" + previous: "Jump to previous node" + next: "Jump to next node" + first: "Jump to first node" + last: "Jump to last node" + change_parent: "Switch parent way" editing: title: "Editing" drawing: @@ -1049,24 +1061,26 @@ en: add_line: "'Add line' mode" add_area: "'Add area' mode" place_point: "Place a point" - stop_line: "Stop drawing of a line or area" + disable_snap: "Hold to disable point snapping" + stop_line: "Finish drawing a line or area" operations: title: "Operations" continue_line: "Continue a line at the selected node" - merge: "Combine (Merge) selected items" + merge: "Combine (merge) selected features" disconnect: "Disconnect features at the selected node" split: "Split a line into two at the selected node" - move: "Move selected items" - rotate: "Rotate selected items" - orthogonalize: "Straighten line / Square area corners" - circularize: "Circularize an area" - reflect_long: "Reflect items across the longer axis" - reflect_short: "Reflect items across the shorter axis" reverse: "Reverse a line" - edit: - title: "Edit" - copy: "Copy map features" - paste: "Paste map features" + move: "Move selected features" + rotate: "Rotate selected features" + orthogonalize: "Straighten line / Square area corners" + circularize: "Circularize a closed line or area" + reflect_long: "Reflect features across the longer axis" + reflect_short: "Reflect features across the shorter axis" + delete: "Delete selected features" + commands: + title: "Commands" + copy: "Copy selected features" + paste: "Paste selected features" undo: "Undo last action" redo: "Redo last action" save: "Save changes" diff --git a/data/shortcuts.json b/data/shortcuts.json index d804aeb08..ee2d0650c 100644 --- a/data/shortcuts.json +++ b/data/shortcuts.json @@ -10,16 +10,16 @@ "text": "shortcuts.browsing.navigation.title" }, { "shortcut": ["↓", "↑", "←", "→"], - "text": "shortcuts.browsing.navigation.pan_map" + "text": "shortcuts.browsing.navigation.pan" }, { "shortcut": ["⇧↓", "⇧↑", "⇧←", "⇧→"], - "text": "shortcuts.browsing.navigation.pan_map_screen" + "text": "shortcuts.browsing.navigation.pan_more" }, { "shortcut": ["+", "-"], "text": "shortcuts.browsing.navigation.zoom" }, { "shortcut": ["⌘+", "⌘-"], - "text": "shortcuts.browsing.navigation.zoom_large" + "text": "shortcuts.browsing.navigation.zoom_more" }, { @@ -31,40 +31,78 @@ }, { "shortcut": ["?"], "text": "shortcuts.browsing.help.keyboard" + }, + + { + "section": "display_options", + "text": "shortcuts.browsing.display_options.title" + }, { + "shortcut": ["B"], + "text": "shortcuts.browsing.display_options.background" + }, { + "shortcut": ["⌘B"], + "text": "shortcuts.browsing.display_options.background_switch" + }, { + "shortcut": ["F"], + "text": "shortcuts.browsing.display_options.map_data" + }, { + "shortcut": ["W"], + "text": "shortcuts.browsing.display_options.wireframe" + }, { + "shortcut": ["/"], + "text": "shortcuts.browsing.display_options.minimap" } ] }, { "rows": [ { - "section": "display", - "text": "shortcuts.browsing.display.title" + "section": "selecting", + "text": "shortcuts.browsing.selecting.title" }, { - "shortcut": ["B"], - "text": "shortcuts.browsing.display.background" + "shortcut": ["Left-click"], + "text": "shortcuts.browsing.selecting.select_one" }, { - "shortcut": ["⌘B"], - "text": "shortcuts.browsing.display.background_switch" + "shortcut": ["⇧ Left-click"], + "text": "shortcuts.browsing.selecting.select_multi" }, { - "shortcut": ["/"], - "text": "shortcuts.browsing.display.toggle_minimap" + "shortcut": ["⇧ Left-click + drag"], + "text": "shortcuts.browsing.selecting.lasso" }, { - "shortcut": ["F"], - "text": "shortcuts.browsing.display.map_data" - }, { - "shortcut": ["W"], - "text": "shortcuts.browsing.display.wireframe" + "shortcut": [], + "text": "" }, { - "section": "selected", - "text": "shortcuts.browsing.selected.title" + "section": "with_selected", + "text": "shortcuts.browsing.with_selected.title" }, { "shortcut": ["⌘I"], - "text": "shortcuts.browsing.selected.toggle_infobox" + "text": "shortcuts.browsing.with_selected.infobox" }, { - "shortcut": ["Space"], - "text": "shortcuts.browsing.selected.toggle_menu" + "shortcut": ["Right-click", "Space"], + "text": "shortcuts.browsing.with_selected.edit_menu" + }, + + { + "section": "vertex_selected", + "text": "shortcuts.browsing.vertex_selected.title" + }, { + "shortcut": ["[", "↖ PgUp"], + "text": "shortcuts.browsing.vertex_selected.previous" + }, { + "shortcut": ["]", "↘ PgDn"], + "text": "shortcuts.browsing.vertex_selected.next" + }, { + "shortcut": ["{", "⇞ Home"], + "text": "shortcuts.browsing.vertex_selected.first" + }, { + "shortcut": ["}", "⇟ End"], + "text": "shortcuts.browsing.vertex_selected.last" + }, { + "shortcut": ["\\", "↨ Pause"], + "text": "shortcuts.browsing.vertex_selected.change_parent" } + ] } ] @@ -90,28 +128,31 @@ "shortcut": ["Space"], "text": "shortcuts.editing.drawing.place_point" }, { - "shortcut": ["↵ Enter", "Esc"], + "shortcut": ["⌥ Alt"], + "text": "shortcuts.editing.drawing.disable_snap" + }, { + "shortcut": ["↵ Enter", "⎋ Esc"], "text": "shortcuts.editing.drawing.stop_line" }, { - "section": "edit", - "text": "shortcuts.editing.edit.title" + "section": "commands", + "text": "shortcuts.editing.commands.title" }, { "shortcut": ["⌘C"], - "text": "shortcuts.editing.edit.copy" + "text": "shortcuts.editing.commands.copy" }, { "shortcut": ["⌘V"], - "text": "shortcuts.editing.edit.paste" + "text": "shortcuts.editing.commands.paste" }, { "shortcut": ["⌘Z"], - "text": "shortcuts.editing.edit.undo" + "text": "shortcuts.editing.commands.undo" }, { "shortcut": ["⌘⇧Z"], - "text": "shortcuts.editing.edit.redo" + "text": "shortcuts.editing.commands.redo" }, { "shortcut": ["⌘S"], - "text": "shortcuts.editing.edit.save" + "text": "shortcuts.editing.commands.save" } ] }, { @@ -152,6 +193,9 @@ }, { "shortcut": ["operations.reflect.key.short"], "text": "shortcuts.editing.operations.reflect_short" + }, { + "shortcut": ["⌘⌫", "⌦"], + "text": "shortcuts.editing.operations.delete" } ] } diff --git a/dist/locales/en.json b/dist/locales/en.json index 33ea1db4e..c3e5eb98b 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -626,7 +626,7 @@ "help": { "title": "Help", "help": "# Help\n\nThis is an editor for [OpenStreetMap](http://www.openstreetmap.org/), the\nfree and editable map of the world. You can use it to add and update\ndata in your area, making an open-source and open-data map of the world\nbetter for everyone.\n\nEdits that you make on this map will be visible to everyone who uses\nOpenStreetMap. In order to make an edit, you'll need to\n[log in](https://www.openstreetmap.org/login).\n\nThe [iD editor](http://ideditor.com/) is a collaborative project with [source\ncode available on GitHub](https://github.com/openstreetmap/iD).\n", - "editing_saving": "# Editing & Saving\n\nThis editor is designed to work primarily online, and you're accessing\nit through a website right now.\n\n### Selecting Features\n\nTo select a map feature, like a road or point of interest, click\non it on the map. This will highlight the selected feature, open a panel with\ndetails about it, and show a menu of things you can do with the feature.\n\nTo select multiple features, hold down the 'Shift' key. Then either click\non the features you want to select, or drag on the map to draw a rectangle.\nThis will draw a box and select all the points within it.\n\n### Saving Edits\n\nWhen you make changes like editing roads, buildings, and places, these are\nstored locally until you save them to the server. Don't worry if you make\na mistake - you can undo changes by clicking the undo button, and redo\nchanges by clicking the redo button.\n\nClick 'Save' to finish a group of edits - for instance, if you've completed\nan area of town and would like to start on a new area. You'll have a chance\nto review what you've done, and the editor supplies helpful suggestions\nand warnings if something doesn't seem right about the changes.\n\nIf everything looks good, you can enter a short comment explaining the change\nyou made, and click 'Save' again to post the changes\nto [OpenStreetMap.org](http://www.openstreetmap.org/), where they are visible\nto all other users and available for others to build and improve upon.\n\nIf you can't finish your edits in one sitting, you can leave the editor\nwindow and come back (on the same browser and computer), and the\neditor application will offer to restore your work.\n\n### Using the editor\n\nA list of available keyboard shortcuts can be found [here](http://wiki.openstreetmap.org/wiki/ID/Shortcuts).\n", + "editing_saving": "# Editing & Saving\n\nThis editor is designed to work primarily online, and you're accessing\nit through a website right now.\n\n### Selecting Features\n\nTo select a map feature, like a road or point of interest, click\non it on the map. This will highlight the selected feature, open a panel with\ndetails about it, and show a menu of things you can do with the feature.\n\nTo select multiple features, hold down the 'Shift' key. Then either click\non the features you want to select, or drag on the map to draw a rectangle.\nThis will draw a box and select all the points within it.\n\n### Saving Edits\n\nWhen you make changes like editing roads, buildings, and places, these are\nstored locally until you save them to the server. Don't worry if you make\na mistake - you can undo changes by clicking the undo button, and redo\nchanges by clicking the redo button.\n\nClick 'Save' to finish a group of edits - for instance, if you've completed\nan area of town and would like to start on a new area. You'll have a chance\nto review what you've done, and the editor supplies helpful suggestions\nand warnings if something doesn't seem right about the changes.\n\nIf everything looks good, you can enter a short comment explaining the change\nyou made, and click 'Save' again to post the changes\nto [OpenStreetMap.org](http://www.openstreetmap.org/), where they are visible\nto all other users and available for others to build and improve upon.\n\nIf you can't finish your edits in one sitting, you can leave the editor\nwindow and come back (on the same browser and computer), and the\neditor application will offer to restore your work.\n\n### Using the editor\n\nYou can view a list of keyboard shortcuts by pressing the `?` key.\n", "roads": "# Roads\n\nYou can create, fix, and delete roads with this editor. Roads can be all\nkinds: paths, highways, trails, cycleways, and more - any often-crossed\nsegment should be mappable.\n\n### Selecting\n\nClick on a road to select it. An outline should become visible, along\nwith a small tools menu on the map and a sidebar showing more information\nabout the road.\n\n### Modifying\n\nOften you'll see roads that aren't aligned to the imagery behind them\nor to a GPS track. You can adjust these roads so they are in the correct\nplace.\n\nFirst click on the road you want to change. This will highlight it and show\ncontrol points along it that you can drag to better locations. If\nyou want to add new control points for more detail, double-click a part\nof the road without a node, and one will be added.\n\nIf the road connects to another road, but doesn't properly connect on\nthe map, you can drag one of its control points onto the other road in\norder to join them. Having roads connect is important for the map\nand essential for providing driving directions.\n\nYou can also click the 'Move' tool or press the `M` shortcut key to move the entire road at\none time, and then click again to save that movement.\n\n### Deleting\n\nIf a road is entirely incorrect - you can see that it doesn't exist in satellite\nimagery and ideally have confirmed locally that it's not present - you can delete\nit, which removes it from the map. Be cautious when deleting features -\nlike any other edit, the results are seen by everyone and satellite imagery\nis often out of date, so the road could simply be newly built.\n\nYou can delete a road by clicking on it to select it, then clicking the\ntrash can icon or pressing the 'Delete' key.\n\n### Creating\n\nFound somewhere there should be a road but there isn't? Click the 'Line'\nicon in the top-left of the editor or press the shortcut key `2` to start drawing\na line.\n\nClick on the start of the road on the map to start drawing. If the road\nbranches off from an existing road, start by clicking on the place where they connect.\n\nThen click on points along the road so that it follows the right path, according\nto satellite imagery or GPS. If the road you are drawing crosses another road, connect\nit by clicking on the intersection point. When you're done drawing, double-click\nor press 'Return' or 'Enter' on your keyboard.\n", "gps": "# GPS\n\nCollected GPS traces are one valuable source of data for OpenStreetMap. This editor\nsupports local traces - `.gpx` files on your local computer. You can collect\nthis kind of GPS trace with a number of smartphone applications as well as\npersonal GPS hardware.\n\nFor information on how to perform a GPS survey, read\n[Mapping with a smartphone, GPS, or paper](http://learnosm.org/en/mobile-mapping/).\n\nTo use a GPX track for mapping, drag and drop the GPX file onto the map\neditor. If it's recognized, it will be added to the map as a bright purple\nline. Click on the 'Map Data' menu on the right side to enable,\ndisable, or zoom to this new GPX-powered layer.\n\nThe GPX track isn't directly uploaded to OpenStreetMap - the best way to\nuse it is to draw on the map, using it as a guide for the new features that\nyou add, and also to [upload it to OpenStreetMap](http://www.openstreetmap.org/trace/create)\nfor other users to use.\n", "imagery": "# Imagery\n\nAerial imagery is an important resource for mapping. A combination of\nairplane flyovers, satellite views, and freely-compiled sources are available\nin the editor under the 'Background Settings' menu on the right.\n\nBy default a [Bing Maps](http://www.bing.com/maps/) satellite layer is\npresented in the editor, but as you pan and zoom the map to new geographical\nareas, new sources will become available. Some countries, like the United\nStates, France, and Denmark have very high-quality imagery available for some areas.\n\nImagery is sometimes offset from the map data because of a mistake on the\nimagery provider's side. If you see a lot of roads shifted from the background,\ndon't immediately move them all to match the background. Instead you can adjust\nthe imagery so that it matches the existing data by clicking 'Fix alignment' at\nthe bottom of the Background Settings UI.\n", @@ -889,28 +889,42 @@ "title": "Browsing", "navigation": { "title": "Navigation", - "pan_map": "Pan map", - "pan_map_screen": "Pan map by one screenful", + "pan": "Pan map", + "pan_more": "Pan map by one screenful", "zoom": "Zoom in / Zoom out", - "zoom_large": "Zoom in / Zoom out by a lot" - }, - "display": { - "title": "Display", - "background": "Background settings", - "background_switch": "Switch back to last background", - "toggle_minimap": "Toggle minimap", - "map_data": "Map data settings", - "wireframe": "Toggle wireframe mode" + "zoom_more": "Zoom in / Zoom out by a lot" }, "help": { "title": "Help", "help": "Show help/documentation", "keyboard": "Show keyboard shortcuts" }, - "selected": { - "title": "With selected", - "toggle_infobox": "Toggle info box", - "toggle_menu": "Toggle edit menu" + "display_options": { + "title": "Display options", + "background": "Show background options", + "background_switch": "Switch back to last background", + "map_data": "Show map data options", + "wireframe": "Toggle wireframe mode", + "minimap": "Toggle minimap" + }, + "selecting": { + "title": "Selecting features", + "select_one": "Select a single feature", + "select_multi": "Select multiple features", + "lasso": "Draw a selection lasso around features" + }, + "with_selected": { + "title": "With feature selected", + "infobox": "Toggle info / measurement box", + "edit_menu": "Toggle edit menu" + }, + "vertex_selected": { + "title": "With node selected", + "previous": "Jump to previous node", + "next": "Jump to next node", + "first": "Jump to first node", + "last": "Jump to last node", + "change_parent": "Switch parent way" } }, "editing": { @@ -921,26 +935,28 @@ "add_line": "'Add line' mode", "add_area": "'Add area' mode", "place_point": "Place a point", - "stop_line": "Stop drawing of a line or area" + "disable_snap": "Hold to disable point snapping", + "stop_line": "Finish drawing a line or area" }, "operations": { "title": "Operations", "continue_line": "Continue a line at the selected node", - "merge": "Combine (Merge) selected items", + "merge": "Combine (merge) selected features", "disconnect": "Disconnect features at the selected node", "split": "Split a line into two at the selected node", - "move": "Move selected items", - "rotate": "Rotate selected items", + "reverse": "Reverse a line", + "move": "Move selected features", + "rotate": "Rotate selected features", "orthogonalize": "Straighten line / Square area corners", - "circularize": "Circularize an area", - "reflect_long": "Reflect items across the longer axis", - "reflect_short": "Reflect items across the shorter axis", - "reverse": "Reverse a line" + "circularize": "Circularize a closed line or area", + "reflect_long": "Reflect features across the longer axis", + "reflect_short": "Reflect features across the shorter axis", + "delete": "Delete selected features" }, - "edit": { - "title": "Edit", - "copy": "Copy map features", - "paste": "Paste map features", + "commands": { + "title": "Commands", + "copy": "Copy selected features", + "paste": "Paste selected features", "undo": "Undo last action", "redo": "Redo last action", "save": "Save changes" diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js index 95635b1e5..6179f41b9 100644 --- a/modules/ui/shortcuts.js +++ b/modules/ui/shortcuts.js @@ -7,12 +7,12 @@ import { dataShortcuts } from '../../data'; export function uiShortcuts() { - var key = '⇧/'; var activeTab = 0; var modalSelection; var savedSelection; + var keybinding = d3keybinding('shortcuts') - .on(key, function () { + .on(['?', '⇧/'], function () { if (modalSelection) { modalSelection.close(); modalSelection = null; @@ -142,7 +142,7 @@ export function uiShortcuts() { shortcutRows .append('td') .attr('class', 'shortcut-desc') - .text(function (d) { return t(d.text); }); + .text(function (d) { return d.text ? t(d.text) : '\u00a0'; }); shortcuts = shortcuts