From 6200edea25feb0fb0d74cefbb53b29bde12de9b1 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 28 May 2018 12:03:47 +0100 Subject: [PATCH 1/9] Added initial shortcuts. --- src/components/App.jsx | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/src/components/App.jsx b/src/components/App.jsx index 78175034..4e776768 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -50,6 +50,43 @@ export default class App extends React.Component { onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false) }) + document.body.addEventListener("keyup", (e) => { + if(e.keyCode === 27) { + e.target.blur(); + document.body.focus(); + } + else if(document.activeElement === document.body) { + console.log(">>> e", e.keyCode); + if(e.keyCode === 191) { + console.log("TODO: SHORTCUTS"); + } + else if(e.keyCode === 79) { + console.log("TODO: OPEN"); + } + else if(e.keyCode === 69) { + console.log("TODO: EXPORT"); + } + else if(e.keyCode === 83) { + console.log("TODO: SOURCES"); + } + else if(e.keyCode === 80) { + console.log("TODO: METADATA"); + } + else if(e.keyCode === 73) { + console.log("TODO: INSPECT"); + } + else if(e.keyCode === 76) { + console.log("TODO: LAYER LIST"); + } + else if(e.keyCode === 67) { + console.log("TODO: CURRENT LAYER"); + } + else if(e.keyCode === 77) { + console.log("TODO: MAP"); + } + } + }) + const styleUrl = initialStyleUrl() if(styleUrl) { this.styleStore = new StyleStore() From 35353d75f5761d4a4ea8781d5b9849a0ef065b32 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 29 May 2018 17:06:00 +0100 Subject: [PATCH 2/9] Added application shortcuts and shortcut modal. Also moved modals into App.jsx to move the business logic to one place. --- src/components/App.jsx | 147 ++++++++++++++++++----- src/components/AppLayout.jsx | 1 + src/components/Toolbar.jsx | 44 +------ src/components/modals/ShortcutsModal.jsx | 75 ++++++++++++ 4 files changed, 199 insertions(+), 68 deletions(-) create mode 100644 src/components/modals/ShortcutsModal.jsx diff --git a/src/components/App.jsx b/src/components/App.jsx index 4e776768..9265b934 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -12,6 +12,12 @@ import Toolbar from './Toolbar' import AppLayout from './AppLayout' import MessagePanel from './MessagePanel' +import SettingsModal from './modals/SettingsModal' +import ExportModal from './modals/ExportModal' +import SourcesModal from './modals/SourcesModal' +import OpenModal from './modals/OpenModal' +import ShortcutsModal from './modals/ShortcutsModal' + import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata' import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' import style from '../libs/style.js' @@ -50,39 +56,75 @@ export default class App extends React.Component { onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false) }) + + const keyCodes = { + "esc": 27, + "?": 191, + "o": 79, + "e": 69, + "s": 83, + "p": 80, + "i": 73, + "m": 77, + } + + const shortcuts = [ + { + keyCode: keyCodes["?"], + handler: () => { + this.toggleModal("shortcuts"); + } + }, + { + keyCode: keyCodes["o"], + handler: () => { + this.toggleModal("open"); + } + }, + { + keyCode: keyCodes["e"], + handler: () => { + this.toggleModal("export"); + } + }, + { + keyCode: keyCodes["s"], + handler: () => { + this.toggleModal("sources"); + } + }, + { + keyCode: keyCodes["p"], + handler: () => { + this.toggleModal("settings"); + } + }, + { + keyCode: keyCodes["i"], + handler: () => { + this.changeInspectMode(); + } + }, + { + keyCode: keyCodes["m"], + handler: () => { + document.querySelector(".mapboxgl-canvas").focus(); + } + }, + ] + document.body.addEventListener("keyup", (e) => { - if(e.keyCode === 27) { + if(e.keyCode === keyCodes["esc"]) { e.target.blur(); document.body.focus(); } else if(document.activeElement === document.body) { - console.log(">>> e", e.keyCode); - if(e.keyCode === 191) { - console.log("TODO: SHORTCUTS"); - } - else if(e.keyCode === 79) { - console.log("TODO: OPEN"); - } - else if(e.keyCode === 69) { - console.log("TODO: EXPORT"); - } - else if(e.keyCode === 83) { - console.log("TODO: SOURCES"); - } - else if(e.keyCode === 80) { - console.log("TODO: METADATA"); - } - else if(e.keyCode === 73) { - console.log("TODO: INSPECT"); - } - else if(e.keyCode === 76) { - console.log("TODO: LAYER LIST"); - } - else if(e.keyCode === 67) { - console.log("TODO: CURRENT LAYER"); - } - else if(e.keyCode === 77) { - console.log("TODO: MAP"); + const shortcut = shortcuts.find((shortcut) => { + return (shortcut.keyCode === e.keyCode) + }) + + if(shortcut) { + shortcut.handler(e); } } }) @@ -120,6 +162,13 @@ export default class App extends React.Component { vectorLayers: {}, inspectModeEnabled: false, spec: styleSpec.latest, + isOpen: { + settings: false, + sources: false, + open: false, + shortcuts: false, + export: false, + } } this.layerWatcher = new LayerWatcher({ @@ -374,6 +423,15 @@ export default class App extends React.Component { this.setState({ selectedLayerIndex: idx }) } + toggleModal(modalName) { + this.setState({ + isOpen: { + ...this.state.isOpen, + [modalName]: !this.state.isOpen[modalName] + } + }) + } + render() { const layers = this.state.mapStyle.layers || [] const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : null @@ -386,6 +444,7 @@ export default class App extends React.Component { onStyleChanged={this.onStyleChanged.bind(this)} onStyleOpen={this.onStyleChanged.bind(this)} onInspectModeToggle={this.changeInspectMode.bind(this)} + onToggleModal={this.toggleModal.bind(this)} /> const layerList = : null + + const modals =
+ + + + + +
+ return } } diff --git a/src/components/AppLayout.jsx b/src/components/AppLayout.jsx index 1804686d..63fc5c6c 100644 --- a/src/components/AppLayout.jsx +++ b/src/components/AppLayout.jsx @@ -39,6 +39,7 @@ class AppLayout extends React.Component { {this.props.bottom} } + {this.props.modals} } } diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index caa1c5e8..2d856531 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -18,10 +18,6 @@ import HelpIcon from 'react-icons/lib/md/help-outline' import InspectionIcon from 'react-icons/lib/md/find-in-page' import logoImage from 'maputnik-design/logos/logo-color.svg' -import SettingsModal from './modals/SettingsModal' -import ExportModal from './modals/ExportModal' -import SourcesModal from './modals/SourcesModal' -import OpenModal from './modals/OpenModal' import pkgJson from '../../package.json' import style from '../libs/style' @@ -99,40 +95,8 @@ export default class Toolbar extends React.Component { } } - toggleModal(modalName) { - this.setState({ - isOpen: { - ...this.state.isOpen, - [modalName]: !this.state.isOpen[modalName] - } - }) - } - render() { return
- - - -
- + Open - + Export - + Sources - + Style Settings diff --git a/src/components/modals/ShortcutsModal.jsx b/src/components/modals/ShortcutsModal.jsx new file mode 100644 index 00000000..a8db17e3 --- /dev/null +++ b/src/components/modals/ShortcutsModal.jsx @@ -0,0 +1,75 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import Button from '../Button' +import Modal from './Modal' + + +class ShortcutsModal extends React.Component { + static propTypes = { + isOpen: PropTypes.bool.isRequired, + onOpenToggle: PropTypes.func.isRequired, + } + + constructor(props) { + super(props); + } + + render() { + const help = [ + { + key: "?", + text: "Show shortcuts menu" + }, + { + key: "o", + text: "Open modal" + }, + { + key: "e", + text: "Export modal" + }, + { + key: "s", + text: "Sources modal" + }, + { + key: "p", + text: "Source settings modal" + }, + { + key: "i", + text: "Toggle map" + }, + { + key: "m", + text: "Focus map" + }, + ] + + + return +
+
    + {help.map((item) => { + return
  • + {item.key} {item.text} +
    • + })} +
+

+ +

+
+ + } +} + +export default ShortcutsModal From f9f5e8f925b7400a464a7d9ce7642bed33d6fe79 Mon Sep 17 00:00:00 2001 From: orangemug Date: Fri, 1 Jun 2018 20:40:51 +0100 Subject: [PATCH 3/9] Changed close button from to
{this.props.children}
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 4fe3acfa..f87a00cc 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -43,7 +43,10 @@ } .maputnik-modal-header-toggle { - cursor: pointer; + border: none; + background: initial; + color: white; + padding: 0; } .maputnik-modal-scroller { From dd122d1bacb6e64b39d295f94e1cdc9bfe22efbb Mon Sep 17 00:00:00 2001 From: orangemug Date: Fri, 1 Jun 2018 20:45:05 +0100 Subject: [PATCH 4/9] Hide hidden FileReaderInput from keyboard focus --- src/components/modals/OpenModal.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx index 64df02f7..c31ffd3d 100644 --- a/src/components/modals/OpenModal.jsx +++ b/src/components/modals/OpenModal.jsx @@ -144,7 +144,7 @@ class OpenModal extends React.Component {

Upload Style

Upload a JSON style from your computer.

- +
From ab9c39b86296d0d20d34375a5c889df854914bc9 Mon Sep 17 00:00:00 2001 From: orangemug Date: Fri, 1 Jun 2018 20:51:21 +0100 Subject: [PATCH 5/9] Removed additional close button --- src/components/modals/ShortcutsModal.jsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/modals/ShortcutsModal.jsx b/src/components/modals/ShortcutsModal.jsx index a8db17e3..99e660ce 100644 --- a/src/components/modals/ShortcutsModal.jsx +++ b/src/components/modals/ShortcutsModal.jsx @@ -62,11 +62,6 @@ class ShortcutsModal extends React.Component { })} -

- -

} From 480d54c2d8e962df96e5cf993151d120849cfd21 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 2 Jun 2018 10:17:39 +0100 Subject: [PATCH 6/9] Finished shortcuts modal styling --- src/components/modals/ShortcutsModal.jsx | 11 +++++++---- src/styles/_modal.scss | 17 +++++++++++++++++ 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/components/modals/ShortcutsModal.jsx b/src/components/modals/ShortcutsModal.jsx index 99e660ce..b14b4131 100644 --- a/src/components/modals/ShortcutsModal.jsx +++ b/src/components/modals/ShortcutsModal.jsx @@ -19,7 +19,7 @@ class ShortcutsModal extends React.Component { const help = [ { key: "?", - text: "Show shortcuts menu" + text: "Shortcuts menu" }, { key: "o", @@ -35,11 +35,11 @@ class ShortcutsModal extends React.Component { }, { key: "p", - text: "Source settings modal" + text: "Style settings modal" }, { key: "i", - text: "Toggle map" + text: "Toggle inspect" }, { key: "m", @@ -54,7 +54,10 @@ class ShortcutsModal extends React.Component { onOpenToggle={this.props.onOpenToggle} title={'Shortcuts'} > -
+
+

+ Press ESC to lose focus of any active elements, then press one of: +

    {help.map((item) => { return
  • diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index f87a00cc..98c3807e 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -222,3 +222,20 @@ text-decoration: none; color: #ef5350; } + +.maputnik-modal-shortcuts { + code { + color: white; + background: #3c3c3c; + padding: 2px 6px; + display: inline-block; + text-align: center; + border-radius: 2px; + margin-right: 4px; + font-family: monospace; + } + + li { + margin-bottom: 4px; + } +} From 74d1cd2d01a9fce09303539e0157df013d1bf9e2 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 3 Jun 2018 09:17:53 +0100 Subject: [PATCH 7/9] Renamed 'Sources' -> 'Data Sources' to make it clearer and make shortcuts easier to remember. --- src/components/App.jsx | 6 +++--- src/components/Toolbar.jsx | 2 +- src/components/modals/ShortcutsModal.jsx | 8 ++++---- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/App.jsx b/src/components/App.jsx index 9265b934..eda2f05b 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -63,7 +63,7 @@ export default class App extends React.Component { "o": 79, "e": 69, "s": 83, - "p": 80, + "d": 68, "i": 73, "m": 77, } @@ -88,13 +88,13 @@ export default class App extends React.Component { } }, { - keyCode: keyCodes["s"], + keyCode: keyCodes["d"], handler: () => { this.toggleModal("sources"); } }, { - keyCode: keyCodes["p"], + keyCode: keyCodes["s"], handler: () => { this.toggleModal("settings"); } diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 2d856531..4e83d66a 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -118,7 +118,7 @@ export default class Toolbar extends React.Component { - Sources + Data Sources diff --git a/src/components/modals/ShortcutsModal.jsx b/src/components/modals/ShortcutsModal.jsx index b14b4131..0aa0a7f9 100644 --- a/src/components/modals/ShortcutsModal.jsx +++ b/src/components/modals/ShortcutsModal.jsx @@ -30,12 +30,12 @@ class ShortcutsModal extends React.Component { text: "Export modal" }, { - key: "s", - text: "Sources modal" + key: "d", + text: "Data Sources modal" }, { - key: "p", - text: "Style settings modal" + key: "s", + text: "Style Settings modal" }, { key: "i", From 00afbad7ac7a236d83aff6c1a3712e9e5cb2cc1e Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 3 Jun 2018 10:00:50 +0100 Subject: [PATCH 8/9] Fixed lint errors. --- src/components/AppLayout.jsx | 1 + src/components/Toolbar.jsx | 1 + src/components/modals/ShortcutsModal.jsx | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/AppLayout.jsx b/src/components/AppLayout.jsx index 63fc5c6c..8ea4cae5 100644 --- a/src/components/AppLayout.jsx +++ b/src/components/AppLayout.jsx @@ -9,6 +9,7 @@ class AppLayout extends React.Component { layerEditor: PropTypes.element, map: PropTypes.element.isRequired, bottom: PropTypes.element, + modals: PropTypes.node, } static childContextTypes = { diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 2f7002dc..b0a0b729 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -37,6 +37,7 @@ class ToolbarLink extends React.Component { className: PropTypes.string, children: PropTypes.node, href: PropTypes.string, + onToggleModal: PropTypes.func, } render() { diff --git a/src/components/modals/ShortcutsModal.jsx b/src/components/modals/ShortcutsModal.jsx index 0aa0a7f9..6a17e4bf 100644 --- a/src/components/modals/ShortcutsModal.jsx +++ b/src/components/modals/ShortcutsModal.jsx @@ -60,7 +60,7 @@ class ShortcutsModal extends React.Component {

      {help.map((item) => { - return
    • + return
    • {item.key} {item.text}
      • })} From ede782abed55ad522f16678bf22b8b1cf0364a9d Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 3 Jun 2018 10:18:55 +0100 Subject: [PATCH 9/9] Fixed typo. --- src/components/Toolbar.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index b0a0b729..9f7516bc 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -80,7 +80,8 @@ export default class Toolbar extends React.Component { // A dict of source id's and the available source layers sources: PropTypes.object.isRequired, onInspectModeToggle: PropTypes.func.isRequired, - children: PropTypes.node + children: PropTypes.node, + onToggleModal: PropTypes.func, } constructor(props) {