From 1029c2655e3781b45d666ca761d1d90cac5c16e5 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Mon, 9 Sep 2024 14:44:11 +0200 Subject: [PATCH] wip: add a profile drop-down menu fix #2113 --- umap/static/umap/css/icon.css | 3 ++ umap/static/umap/img/16-white.svg | 6 +++ umap/static/umap/img/source/16-white.svg | 8 +++- umap/static/umap/js/modules/ui/contextmenu.js | 15 +++++-- umap/static/umap/js/umap.controls.js | 42 +++++++++++++++---- umap/static/umap/map.css | 8 +--- 6 files changed, 63 insertions(+), 19 deletions(-) diff --git a/umap/static/umap/css/icon.css b/umap/static/umap/css/icon.css index 6da14e7d..b76020b1 100644 --- a/umap/static/umap/css/icon.css +++ b/umap/static/umap/css/icon.css @@ -112,6 +112,9 @@ html[dir="rtl"] .icon { .icon-polyline { background-position: 0 calc(var(--tile) * 3); } +.icon-profile { + background-position: 0 calc(var(--tile) * 4); +} .icon-resize { background-position: calc(var(--tile) * 3) calc(var(--tile) * 6); } diff --git a/umap/static/umap/img/16-white.svg b/umap/static/umap/img/16-white.svg index ceabb640..86704816 100644 --- a/umap/static/umap/img/16-white.svg +++ b/umap/static/umap/img/16-white.svg @@ -190,5 +190,11 @@ + + + + + + diff --git a/umap/static/umap/img/source/16-white.svg b/umap/static/umap/img/source/16-white.svg index 0333e0af..9e99a16a 100644 --- a/umap/static/umap/img/source/16-white.svg +++ b/umap/static/umap/img/source/16-white.svg @@ -16,7 +16,7 @@ - + @@ -212,5 +212,11 @@ + + + + + + diff --git a/umap/static/umap/js/modules/ui/contextmenu.js b/umap/static/umap/js/modules/ui/contextmenu.js index 9231129a..c5c47555 100644 --- a/umap/static/umap/js/modules/ui/contextmenu.js +++ b/umap/static/umap/js/modules/ui/contextmenu.js @@ -15,11 +15,16 @@ export default class ContextMenu extends Positioned { }) } - open([x, y], items) { + open([left, top], items) { this.container.innerHTML = '' for (const item of items) { if (item === '-') { this.container.appendChild(document.createElement('hr')) + } else if (typeof item.action === 'string') { + const li = loadTemplate( + `
  • ${item.label}
    • ` + ) + this.container.appendChild(li) } else { const li = loadTemplate( `
    • ` @@ -32,8 +37,12 @@ export default class ContextMenu extends Positioned { } } document.body.appendChild(this.container) - this.computePosition([x, y]) - this.container.querySelector('button').focus() + if (this.options.fixed) { + this.setPosition({ left, top }) + } else { + this.computePosition([left, top]) + } + this.container.querySelector('li > *').focus() this.container.addEventListener('keydown', (event) => { if (event.key === 'Escape') { event.stopPropagation() diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 0a54e66e..255aae91 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -641,14 +641,37 @@ const ControlsMixin = { } this.on('postsync', L.bind(update, this)) if (this.options.user?.id) { - L.DomUtil.createLink( - 'umap-user', - rightContainer, - L._('My Dashboard ({username})', { - username: this.options.user.name, - }), - this.options.user.url - ) + const button = U.Utils.loadTemplate(` + + `) + rightContainer.appendChild(button) + const menu = new U.ContextMenu({ className: 'dark', fixed: true }) + const actions = [ + { + label: L._('New map'), + action: this.urls.get('map_new'), + }, + { + label: L._('My profile'), + action: this.urls.get('user_profile'), + }, + { + label: L._('My maps'), + action: this.urls.get('user_dashboard'), + }, + { + label: L._('My teams'), + action: this.urls.get('user_teams'), + }, + ] + button.addEventListener('click', () => { + const x = button.offsetLeft + const y = button.offsetTop + button.offsetHeight + menu.open([x, y], actions) + }) } this.help.getStartedLink(rightContainer) const controlEditCancel = L.DomUtil.createButton( @@ -808,7 +831,8 @@ U.TileLayerControl = L.Control.IconLayers.extend({ ) const button = L.DomUtil.element({ tagName: 'button', - className: 'leaflet-iconLayers-layerCell leaflet-iconLayers-layerCell-plus button', + className: + 'leaflet-iconLayers-layerCell leaflet-iconLayers-layerCell-plus button', textContent: '+', parent: lastRow, }) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index c330e00b..4c57acf9 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -592,17 +592,16 @@ ul.photon-autocomplete { left: 0; right: 0; height: 46px; - background-color: var(--color-darkGray); padding: 0 10px; text-align: start; line-height: var(--control-size); cursor: auto; border-bottom: 1px solid #222; z-index: var(--zindex-panels); - opacity: 0.98; - color: #fff; display: flex; justify-content: space-between; + background-color: var(--background-color); + color: var(--text-color); } .umap-left-edit-toolbox, .umap-right-edit-toolbox { @@ -1488,9 +1487,6 @@ span.popup-icon { .umap-main-edit-toolbox .umap-user { margin-inline-end: 10px; } - .umap-main-edit-toolbox .umap-user:after { - display: none; - } } @media all and (max-width: 640px) { .umap-main-edit-toolbox .umap-user {