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] 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')