From 9c71d74ec9b9b51387e8f384f4077c5af9b94ab6 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Mon, 27 Nov 2023 21:45:24 +0100 Subject: [PATCH 1/5] WIP --- umap/static/umap/js/umap.core.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js index 6631f6ad..15cc3cac 100644 --- a/umap/static/umap/js/umap.core.js +++ b/umap/static/umap/js/umap.core.js @@ -434,6 +434,16 @@ L.U.Keys = { } L.U.Help = L.Class.extend({ + + SHORTCUTS: { + 'Ctrl+M': L._('Draw a marker'), + 'Ctrl+L': L._('Draw a polyline'), + 'Ctrl+P': L._('Draw a polygon'), + 'Ctrl+E': L._('Toggle edit mode'), + 'Ctrl+S': L._('Save map'), + 'Ctrl+I': L._('Open import panel'), + }, + initialize: function (map) { this.map = map this.box = L.DomUtil.create( @@ -525,6 +535,10 @@ L.U.Help = L.Class.extend({ for (const id in this.map.helpMenuActions) { addAction(this.map.helpMenuActions[id]) } + const kbdList = L.DomUtil.create('div', 'kbd-list', container) + for (const [kbd, label] of Object.entries(this.SHORTCUTS)) { + L.DomUtil.add('span', '', kbdList, `${kbd} ${label}`) + } return container }, From d98d5686fbd1c7c674865be2f29a5a2ee6089ae7 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 5 Dec 2023 20:31:21 +0100 Subject: [PATCH 2/5] Display Cmd instead of Ctrl for shortcuts on MacOS --- umap/static/umap/js/umap.controls.js | 17 ++++--- umap/static/umap/js/umap.core.js | 67 ++++++++++++++++++++++++---- umap/static/umap/js/umap.js | 16 ++++--- 3 files changed, 77 insertions(+), 23 deletions(-) diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index c2bd29df..9a50d925 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 15cc3cac..639ebbd5 100644 --- a/umap/static/umap/js/umap.core.js +++ b/umap/static/umap/js/umap.core.js @@ -436,12 +436,60 @@ L.U.Keys = { L.U.Help = L.Class.extend({ SHORTCUTS: { - 'Ctrl+M': L._('Draw a marker'), - 'Ctrl+L': L._('Draw a polyline'), - 'Ctrl+P': L._('Draw a polygon'), - 'Ctrl+E': L._('Toggle edit mode'), - 'Ctrl+S': L._('Save map'), - 'Ctrl+I': L._('Open import panel'), + 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] + if (withKbdTag) { + shortcut = shortcut.split('+').map((el) => `${el}`).join('+') + } + const modifier = this.isMacOS ? 'Cmd' : 'Ctrl' + label += ` (${shortcut.replace('Modifier', modifier)})` + return label }, initialize: function (map) { @@ -462,6 +510,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) { @@ -535,9 +584,9 @@ L.U.Help = L.Class.extend({ for (const id in this.map.helpMenuActions) { addAction(this.map.helpMenuActions[id]) } - const kbdList = L.DomUtil.create('div', 'kbd-list', container) - for (const [kbd, label] of Object.entries(this.SHORTCUTS)) { - L.DomUtil.add('span', '', kbdList, `${kbd} ${label}`) + const kbdList = L.DomUtil.create('ul', 'kbd-list', container) + for (const key of Object.keys(this.SHORTCUTS)) { + L.DomUtil.add('li', '', kbdList, this.displayLabel(key)) } return container }, diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index f4149bd2..5708e58d 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() @@ -1896,27 +1898,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, }) @@ -1930,7 +1932,7 @@ L.U.Map.include({ }) } else { items.push({ - text: `${L._('Start editing')} (Ctrl+E)`, + text: this.help.displayLabel('TOGGLE_EDIT'), callback: this.enableEdit, }) } @@ -1951,7 +1953,7 @@ L.U.Map.include({ callback: this.displayCaption, }, { - text: L._('Search location'), + text: this.help.displayLabel('SEARCH'), callback: this.search, } ) From 5a6cd9a5b5ce42846f14ede5e06c7d29f21e02e0 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Mon, 11 Dec 2023 11:13:58 +0100 Subject: [PATCH 3/5] Do not display keyboard shortcuts in main help for now This main help already display some of them, so let's first focus on this label refactor, and then do a refactor of that main help modal. --- umap/static/umap/js/umap.core.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js index 639ebbd5..0ab38188 100644 --- a/umap/static/umap/js/umap.core.js +++ b/umap/static/umap/js/umap.core.js @@ -584,10 +584,6 @@ L.U.Help = L.Class.extend({ for (const id in this.map.helpMenuActions) { addAction(this.map.helpMenuActions[id]) } - const kbdList = L.DomUtil.create('ul', 'kbd-list', container) - for (const key of Object.keys(this.SHORTCUTS)) { - L.DomUtil.add('li', '', kbdList, this.displayLabel(key)) - } return container }, From 2f89a76e0814195929a013692a80b7b4941b6b87 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Mon, 11 Dec 2023 11:32:37 +0100 Subject: [PATCH 4/5] Add minimal CSS for kbd tag --- umap/static/umap/base.css | 10 ++++++++++ umap/static/umap/js/umap.core.js | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index b7713a5a..78b7c342 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.core.js b/umap/static/umap/js/umap.core.js index 0ab38188..868fef9a 100644 --- a/umap/static/umap/js/umap.core.js +++ b/umap/static/umap/js/umap.core.js @@ -488,7 +488,7 @@ L.U.Help = L.Class.extend({ shortcut = shortcut.split('+').map((el) => `${el}`).join('+') } const modifier = this.isMacOS ? 'Cmd' : 'Ctrl' - label += ` (${shortcut.replace('Modifier', modifier)})` + label += ` ${shortcut.replace('Modifier', modifier)}` return label }, From 7f5960d1c4c8812145122368de985cc8486f83d2 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Fri, 15 Dec 2023 17:24:55 +0100 Subject: [PATCH 5/5] Add parenthesis around keyboard when there is no kbd tag This happens in title attributes, for example. --- umap/static/umap/js/umap.core.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js index 868fef9a..487bbff0 100644 --- a/umap/static/umap/js/umap.core.js +++ b/umap/static/umap/js/umap.core.js @@ -484,11 +484,14 @@ L.U.Help = L.Class.extend({ 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})` } - const modifier = this.isMacOS ? 'Cmd' : 'Ctrl' - label += ` ${shortcut.replace('Modifier', modifier)}` return label },