diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css
index b7713a5a8..78b7c3427 100644
--- a/umap/static/umap/base.css
+++ b/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
diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
index 67baa3dc7..e250a3298 100644
--- a/umap/static/umap/js/umap.controls.js
+++ b/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')} (Ctrl+Z)`,
+ 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')} (Ctrl+E)`,
+ 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')} (Ctrl+S)`,
+ content: this.help.displayLabel('SAVE'),
anchor: controlEditSave,
position: 'bottom',
delay: 500,
diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js
index d2aa44332..e3ce8f02f 100644
--- a/umap/static/umap/js/umap.core.js
+++ b/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) => `${el}`).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) {
diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js
index 159328eef..baed29cdb 100644
--- a/umap/static/umap/js/umap.js
+++ b/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')} (Ctrl+E)`,
+ text: this.help.displayLabel('STOP_EDIT'),
callback: this.disableEdit,
})
}
if (this.options.enableMarkerDraw) {
items.push({
- text: `${L._('Draw a marker')} (Ctrl+M)`,
+ text: this.help.displayLabel('DRAW_MARKER'),
callback: this.startMarker,
context: this,
})
}
if (this.options.enablePolylineDraw) {
items.push({
- text: `${L._('Draw a polygon')} (Ctrl+P)`,
+ text: this.help.displayLabel('DRAW_POLYGON'),
callback: this.startPolygon,
context: this,
})
}
if (this.options.enablePolygonDraw) {
items.push({
- text: `${L._('Draw a line')} (Ctrl+L)`,
+ 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')} (Ctrl+E)`,
+ 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,
}
)