Merge pull request #3791 from openstreetmap/shortcuts-modal

Display a shortcuts modal

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;
 }
 
@@ -3082,6 +3082,81 @@ img.tile-removing {
 }
 
 
+/* Shortcuts Modal
+------------------------------------------------------- */
+.modal-shortcuts {
+    width: 75%;
+    max-width: 800px;
+}
+
+.modal-shortcuts .modal-section:last-child {
+    padding-top: 10px;
+}
+
+.modal-shortcuts .tabs-bar {
+    text-align: center;
+    padding-bottom: 10px;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.modal-shortcuts .tab {
+    display: inline-block;
+    padding: 5px 10px;
+    margin: 0 5px;
+    cursor: pointer;
+    color: #666;
+}
+.modal-shortcuts .tab.active {
+    color: #7092ff;
+}
+.modal-shortcuts .tab:hover {
+    color: #597be7;
+    background-color: #efefef;
+}
+
+.modal-shortcuts .shortcut-tab {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.modal-shortcuts .shortcut-column {
+    flex: 1 1 50%;
+    width: 50%;
+}
+
+.modal-shortcuts td {
+    padding-bottom: 5px;
+}
+
+.modal-shortcuts .shortcut-section {
+    padding: 15px 0 10px 0;
+}
+
+.modal-shortcuts .shortcut-keys {
+    padding-right: 10px;
+    color: #767676;
+    text-align: right;
+}
+
+.modal-shortcuts .shortcut-keys kbd {
+    display: inline-block;
+    text-align: center;
+    padding: 3px 5px;
+    font-size: 11px;
+    line-height: 12px;
+    min-width: 12px;
+    color: #555;
+    vertical-align: baseline;
+    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
 ------------------------------------------------------- */
 .mode-save a.user-info {
@@ -4015,3 +4090,20 @@ 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;
+}
+
+/* shortcuts modal */
+
+[dir='rtl'] .kbd-row {
+    padding-left: 10px;
+    color: #767676;
+    text-align: left;
+    padding-bottom: 5px;
+    width: 50%;
+}

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
@@ -1016,3 +1016,71 @@ 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:
+    title: "Keyboard shortcuts"
+    browsing:
+      title: "Browsing"
+      navigation:
+        title: "Navigation"
+        pan: "Pan map"
+        pan_more: "Pan map by one screenful"
+        zoom: "Zoom in / Zoom out"
+        zoom_more: "Zoom in / Zoom out by a lot"
+      help:
+        title: "Help"
+        help: "Show help/documentation"
+        keyboard: "Show keyboard shortcuts"
+      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:
+        title: "Drawing"
+        add_point: "'Add point' mode"
+        add_line: "'Add line' mode"
+        add_area: "'Add area' mode"
+        place_point: "Place a point"
+        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 features"
+        disconnect: "Disconnect features at the selected node"
+        split: "Split a line into two at the selected node"
+        reverse: "Reverse a line"
+        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"

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';