From fc42eb2573b9d1c9d991cd4361ca334fd43cbcac Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 29 Aug 2023 11:22:23 +0200 Subject: [PATCH 1/3] Add a small asterisk near map title when it's dirty --- umap/static/umap/map.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 7fe8e700..e7c06827 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -507,6 +507,15 @@ ul.photon-autocomplete { margin-right: 5px; font-weight: bold; } +a.map-name:after { + content: '\00a0'; + padding-left: 3px; + width: 5px; + display: inline-block; +} +.umap-is-dirty a.map-name:after { + content: '*'; +} .umap-main-edit-toolbox .share-status { margin: 0 20px; } From 38bed0a6cfc8cd97b4cdfdc4418bcdeaa689873b Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 29 Aug 2023 13:57:00 +0200 Subject: [PATCH 2/3] Move "My Dashboard" and "Help" to the right of the edit toolbar --- umap/static/umap/img/16-white.svg | 4 +-- umap/static/umap/img/source/16-white.svg | 10 +++---- umap/static/umap/js/umap.controls.js | 20 ++++++------- umap/static/umap/js/umap.core.js | 1 + umap/static/umap/map.css | 37 +++++++++++++++--------- 5 files changed, 40 insertions(+), 32 deletions(-) diff --git a/umap/static/umap/img/16-white.svg b/umap/static/umap/img/16-white.svg index 8cf99581..2d484d8a 100644 --- a/umap/static/umap/img/16-white.svg +++ b/umap/static/umap/img/16-white.svg @@ -33,9 +33,6 @@ - - -   @@ -147,5 +144,6 @@ + diff --git a/umap/static/umap/img/source/16-white.svg b/umap/static/umap/img/source/16-white.svg index 1daaa9ea..269d82e4 100644 --- a/umap/static/umap/img/source/16-white.svg +++ b/umap/static/umap/img/source/16-white.svg @@ -1,14 +1,14 @@ - + - - + + @@ -50,9 +50,6 @@ - - -   @@ -167,5 +164,6 @@ + diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 09588575..b5d729d9 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -995,16 +995,6 @@ L.U.Map.include({ name.href = '#' share_status.href = '#' logo.href = '/' - if (this.options.user) { - const userLabel = L.DomUtil.add( - 'a', - 'umap-user', - container, - L._(`My Dashboard ({username})`, { username: this.options.user.name }) - ) - userLabel.href = this.options.user.url - } - this.help.button(container, 'edit') L.DomEvent.on(name, 'click', this.edit, this) L.DomEvent.on(share_status, 'click', this.permissions.edit, this.permissions) this.on('postsync', L.bind(update, this)) @@ -1020,6 +1010,16 @@ L.U.Map.include({ disable.href = '#' disable.textContent = L._('Disable editing') disable.title = `${disable.textContent} (Ctrl+E)` + this.help.button(container, 'edit') + if (this.options.user) { + const userLabel = L.DomUtil.add( + 'a', + 'umap-user', + container, + L._(`My Dashboard ({username})`, { username: this.options.user.name }) + ) + userLabel.href = this.options.user.url + } L.DomEvent.addListener(disable, 'click', L.DomEvent.stop).addListener( disable, diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js index 2a9aeb03..94ed1c90 100644 --- a/umap/static/umap/js/umap.core.js +++ b/umap/static/umap/js/umap.core.js @@ -422,6 +422,7 @@ L.U.Help = L.Class.extend({ button: function (container, entries) { const helpButton = L.DomUtil.create('a', 'umap-help-button', container) helpButton.href = '#' + helpButton.textContent = L._("Help") if (entries) { L.DomEvent.on(helpButton, 'click', L.DomEvent.stop).on( helpButton, diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index e7c06827..561cccbf 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -348,17 +348,8 @@ ul.photon-autocomplete { float: right; } .umap-help-button { - display: inline-block; - width: 16px; - height: 16px; - margin-left: 5px; - background-position: -4px -4px; - background-repeat: no-repeat; - background-image: url('./img/16.svg'); - vertical-align: middle; -} -.dark .umap-help-button { - background-image: url('./img/16-white.svg'); + float: right; + margin-right: 20px; } .umap-help-on .umap-help-box { visibility: visible; @@ -413,6 +404,7 @@ ul.photon-autocomplete { margin-left: 10px; float: right; } +.leaflet-container a.leaflet-control-edit-disable, .leaflet-container a.leaflet-control-edit-cancel, .leaflet-container a.leaflet-control-edit-save { color: #f8f8f8; @@ -423,6 +415,7 @@ ul.photon-autocomplete { padding: 0 10px; min-width: 100px; } +.leaflet-container a.leaflet-control-edit-disable:before, .leaflet-container a.leaflet-control-edit-save:before, .leaflet-container a.leaflet-control-edit-cancel:before { display: inline-block; @@ -438,6 +431,9 @@ ul.photon-autocomplete { .leaflet-container a.leaflet-control-edit-save:before { background-position: -4px -25px; } +.leaflet-container a.leaflet-control-edit-disable:before { + background-position: -24px -1px; +} .leaflet-container a.leaflet-control-edit-save { opacity: 0.5; cursor: not-allowed; @@ -531,6 +527,11 @@ a.map-name:after { } .umap-main-edit-toolbox .umap-user { margin-right: 20px; + float: right; +} +.umap-main-edit-toolbox .umap-user:after { + content: '|'; + padding-left: 20px; } .umap-edit-enabled .leaflet-top { top: 48px; @@ -1479,20 +1480,30 @@ a.add-datalayer:hover, @media all and (max-width: 980px) { .leaflet-container a.leaflet-control-edit-save, + .leaflet-container a.leaflet-control-edit-disable, .leaflet-container a.leaflet-control-edit-cancel { text-indent: calc(100% - 20px); width: 35px; min-width: initial; } - .umap-main-edit-toolbox .umap-help-button, - .umap-main-edit-toolbox .share-status { + .umap-main-edit-toolbox .umap-help-button { + display: none; + } + .umap-main-edit-toolbox .umap-user { + margin-right: 10px; + } + .umap-main-edit-toolbox .umap-user:after { display: none; } } @media all and (max-width: 480px) { + .umap-main-edit-toolbox .share-status { + display: none; + } + .umap-main-edit-toolbox .map-name { max-width: 100px; } From 4c8b4c66d08ec3ac6aa62b1af4519842e4400da2 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 29 Aug 2023 18:14:36 +0200 Subject: [PATCH 3/3] Add border around minor button in edit toolbar --- umap/static/umap/map.css | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 561cccbf..a5beae18 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -396,23 +396,17 @@ ul.photon-autocomplete { .leaflet-container a.leaflet-control-edit-cancel, .leaflet-container a.leaflet-control-edit-disable { display: block; - height: 36px; - line-height: 36px; - color: #efefef; border: none; font-size: 11px; margin-left: 10px; float: right; -} -.leaflet-container a.leaflet-control-edit-disable, -.leaflet-container a.leaflet-control-edit-cancel, -.leaflet-container a.leaflet-control-edit-save { + border-radius: 20px; color: #f8f8f8; width: auto; height: 36px; line-height: 36px; min-height: 36px; - padding: 0 10px; + padding: 0 20px; min-width: 100px; } .leaflet-container a.leaflet-control-edit-disable:before, @@ -421,7 +415,6 @@ ul.photon-autocomplete { display: inline-block; width: 24px; height: 24px; - margin-left: 5px; background-position: -50px -122px; background-repeat: no-repeat; background-image: url('./img/16-white.svg'); @@ -429,10 +422,14 @@ ul.photon-autocomplete { content: ' '; } .leaflet-container a.leaflet-control-edit-save:before { - background-position: -4px -25px; + background-position: -2px -25px; } .leaflet-container a.leaflet-control-edit-disable:before { - background-position: -24px -1px; + background-position: -28px -1px; +} +.leaflet-container a.leaflet-control-edit-cancel, +.leaflet-container a.leaflet-control-edit-disable { + border: 1px solid #555; } .leaflet-container a.leaflet-control-edit-save { opacity: 0.5; @@ -1482,7 +1479,7 @@ a.add-datalayer:hover, .leaflet-container a.leaflet-control-edit-save, .leaflet-container a.leaflet-control-edit-disable, .leaflet-container a.leaflet-control-edit-cancel { - text-indent: calc(100% - 20px); + text-indent: calc(100% - 10px); width: 35px; min-width: initial; }