Merge pull request #1449 from umap-project/kbd

Replace "Ctrl" by "Cmd" under macOS and style the "kbd" tag in keyboard shortcuts labels

umap/static/umap/base.css

@@ -47,6 +47,16 @@ p {
     margin-top: 14px;
     margin-bottom: 14px;
 }
+kbd {
+  border: 1px solid #b4b4b4;
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.2),
+    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
+  border-radius: 3px;
+  padding: 1px 4px;
+  display: inline-block;
+  white-space: nowrap;
+}
 
 /*
 * List

umap/static/umap/js/umap.controls.js

@@ -1,6 +1,9 @@
 L.U.BaseAction = L.ToolbarAction.extend({
   initialize: function (map) {
     this.map = map
+    if (this.options.label) {
+      this.options.tooltip = this.map.help.displayLabel(this.options.label, withKbdTag=false)
+    }
     this.options.toolbarIcon = {
       className: this.options.className,
       tooltip: this.options.tooltip,
@@ -15,7 +18,7 @@ L.U.ImportAction = L.U.BaseAction.extend({
   options: {
     helpMenu: true,
     className: 'upload-data dark',
-    tooltip: `${L._('Import data')} (Ctrl+I)`,
+    label: 'IMPORT_PANEL'
   },
 
   addHooks: function () {
@@ -84,7 +87,7 @@ L.U.DrawMarkerAction = L.U.BaseAction.extend({
   options: {
     helpMenu: true,
     className: 'umap-draw-marker dark',
-    tooltip: `${L._('Draw a marker')} (Ctrl+M)`,
+    label: 'DRAW_MARKER'
   },
 
   addHooks: function () {
@@ -96,7 +99,7 @@ L.U.DrawPolylineAction = L.U.BaseAction.extend({
   options: {
     helpMenu: true,
     className: 'umap-draw-polyline dark',
-    tooltip: `${L._('Draw a polyline')} (Ctrl+L)`,
+    label: 'DRAW_LINE'
   },
 
   addHooks: function () {
@@ -108,7 +111,7 @@ L.U.DrawPolygonAction = L.U.BaseAction.extend({
   options: {
     helpMenu: true,
     className: 'umap-draw-polygon dark',
-    tooltip: `${L._('Draw a polygon')} (Ctrl+P)`,
+    label: 'DRAW_POLYGON'
   },
 
   addHooks: function () {
@@ -1020,7 +1023,7 @@ L.U.Map.include({
       'mouseover',
       function () {
         this.ui.tooltip({
-          content: `${L._('Cancel')} (<kbd>Ctrl+Z</kbd>)`,
+          content: this.help.displayLabel('CANCEL'),
           anchor: controlEditCancel,
           position: 'bottom',
           delay: 500,
@@ -1044,7 +1047,7 @@ L.U.Map.include({
       'mouseover',
       function () {
         this.ui.tooltip({
-          content: `${L._('Back to preview')} (<kbd>Ctrl+E</kbd>)`,
+          content: this.help.displayLabel('PREVIEW'),
           anchor: controlEditDisable,
           position: 'bottom',
           delay: 500,
@@ -1065,7 +1068,7 @@ L.U.Map.include({
       'mouseover',
       function () {
         this.ui.tooltip({
-          content: `${L._('Save current edits')} (<kbd>Ctrl+S</kbd>)`,
+          content: this.help.displayLabel('SAVE'),
           anchor: controlEditSave,
           position: 'bottom',
           delay: 500,

umap/static/umap/js/umap.core.js

@@ -434,6 +434,67 @@ L.U.Keys = {
 }
 
 L.U.Help = L.Class.extend({
+
+  SHORTCUTS: {
+    DRAW_MARKER: {
+      shortcut:'Modifier+M',
+      label: L._('Draw a marker')
+    },
+    DRAW_LINE: {
+      shortcut:'Modifier+L',
+      label: L._('Draw a polyline')
+    },
+    DRAW_POLYGON: {
+      shortcut:'Modifier+P',
+      label: L._('Draw a polygon')
+    },
+    TOGGLE_EDIT: {
+      shortcut:'Modifier+E',
+      label: L._('Toggle edit mode')
+    },
+    STOP_EDIT: {
+      shortcut:'Modifier+E',
+      label: L._('Stop editing')
+    },
+    SAVE_MAP: {
+      shortcut:'Modifier+S',
+      label: L._('Save map')
+    },
+    IMPORT_PANEL: {
+      shortcut:'Modifier+I',
+      label: L._('Import data')
+    },
+    SEARCH: {
+      shortcut:'Modifier+F',
+      label: L._('Search location')
+    },
+    CANCEL: {
+      shortcut:'Modifier+Z',
+      label: L._('Cancel edits')
+    },
+    PREVIEW: {
+      shortcut:'Modifier+E',
+      label: L._('Back to preview')
+    },
+    SAVE: {
+      shortcut:'Modifier+S',
+      label: L._('Save current edits')
+    },
+  },
+
+  displayLabel: function (action, withKbdTag=true) {
+    let {shortcut, label} = this.SHORTCUTS[action]
+    const modifier = this.isMacOS ? 'Cmd' : 'Ctrl'
+    shortcut = shortcut.replace('Modifier', modifier)
+    if (withKbdTag) {
+      shortcut = shortcut.split('+').map((el) => `<kbd>${el}</kbd>`).join('+')
+      label += ` ${shortcut}`
+    } else {
+      label += ` (${shortcut})`
+    }
+    return label
+  },
+
   initialize: function (map) {
     this.map = map
     this.box = L.DomUtil.create(
@@ -452,6 +513,7 @@ L.U.Help = L.Class.extend({
     const label = L.DomUtil.create('span', '', closeButton)
     label.title = label.textContent = L._('Close')
     this.content = L.DomUtil.create('div', 'umap-help-content', this.box)
+    this.isMacOS = /mac/i.test(navigator.userAgentData ? navigator.userAgentData.platform : navigator.platform)
   },
 
   onKeyDown: function (e) {

umap/static/umap/js/umap.js

@@ -162,6 +162,9 @@ L.U.Map.include({
     this.features_index = {}
     this.facets = {}
 
+    // Needed for actions labels
+    this.help = new L.U.Help(this)
+
     if (this.options.hash) this.addHash()
     this.initTileLayers(this.options.tilelayers)
     // Needs tilelayer to exist for minimap
@@ -235,7 +238,6 @@ L.U.Map.include({
       }
     }
 
-    this.help = new L.U.Help(this)
     this.slideshow = new L.U.Slideshow(this, this.options.slideshow)
     this.permissions = new L.U.MapPermissions(this)
     this.initCaptionBar()
@@ -1884,27 +1886,27 @@ L.U.Map.include({
       if (this.editEnabled) {
         if (!this.isDirty) {
           items.push({
-            text: `${L._('Stop editing')} (<kbd>Ctrl+E</kbd>)`,
+            text: this.help.displayLabel('STOP_EDIT'),
             callback: this.disableEdit,
           })
         }
         if (this.options.enableMarkerDraw) {
           items.push({
-            text: `${L._('Draw a marker')} (<kbd>Ctrl+M</kbd>)`,
+            text: this.help.displayLabel('DRAW_MARKER'),
             callback: this.startMarker,
             context: this,
           })
         }
         if (this.options.enablePolylineDraw) {
           items.push({
-            text: `${L._('Draw a polygon')} (<kbd>Ctrl+P</kbd>)`,
+            text: this.help.displayLabel('DRAW_POLYGON'),
             callback: this.startPolygon,
             context: this,
           })
         }
         if (this.options.enablePolygonDraw) {
           items.push({
-            text: `${L._('Draw a line')} (<kbd>Ctrl+L</kbd>)`,
+            text: this.help.displayLabel('DRAW_LINE'),
             callback: this.startPolyline,
             context: this,
           })
@@ -1918,7 +1920,7 @@ L.U.Map.include({
         })
       } else {
         items.push({
-          text: `${L._('Start editing')} (<kbd>Ctrl+E</kbd>)`,
+          text: this.help.displayLabel('TOGGLE_EDIT'),
           callback: this.enableEdit,
         })
       }
@@ -1939,7 +1941,7 @@ L.U.Map.include({
         callback: this.displayCaption,
       },
       {
-        text: L._('Search location'),
+        text: this.help.displayLabel('SEARCH'),
         callback: this.search,
       }
     )