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, } )