diff --git a/umap/static/umap/img/16-white.svg b/umap/static/umap/img/16-white.svg
index c1417e5b..8cf99581 100644
--- a/umap/static/umap/img/16-white.svg
+++ b/umap/static/umap/img/16-white.svg
@@ -1,4 +1,9 @@
diff --git a/umap/static/umap/img/logo_small.svg b/umap/static/umap/img/logo_small.svg
new file mode 100644
index 00000000..40d44b7e
--- /dev/null
+++ b/umap/static/umap/img/logo_small.svg
@@ -0,0 +1,14 @@
+
+
diff --git a/umap/static/umap/img/source/16-white.svg b/umap/static/umap/img/source/16-white.svg
index 82cb9904..1daaa9ea 100644
--- a/umap/static/umap/img/source/16-white.svg
+++ b/umap/static/umap/img/source/16-white.svg
@@ -2,8 +2,12 @@
diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
index 43260c1f..fd03a6c0 100644
--- a/umap/static/umap/js/umap.controls.js
+++ b/umap/static/umap/js/umap.controls.js
@@ -314,13 +314,11 @@ L.U.EditControl = L.Control.extend({
},
onAdd: function (map) {
- const container = L.DomUtil.create(
- 'div',
- 'leaflet-control-edit-enable umap-control'
- ),
+ const container = L.DomUtil.create('div', 'leaflet-control-edit-enable'),
edit = L.DomUtil.create('a', '', container)
edit.href = '#'
edit.title = `${L._('Enable editing')} (Ctrl+E)`
+ edit.textContent = L._('Edit')
L.DomEvent.addListener(edit, 'click', L.DomEvent.stop).addListener(
edit,
@@ -975,6 +973,76 @@ L.U.Map.include({
},
},
+ renderEditToolbar: function () {
+ const container = L.DomUtil.create(
+ 'div',
+ 'umap-main-edit-toolbox with-transition dark',
+ this._controlContainer
+ ),
+ logo = L.DomUtil.add('a', 'logo', container),
+ name = L.DomUtil.create('a', 'map-name', container),
+ share_status = L.DomUtil.create('a', 'share-status', container),
+ update = () => {
+ name.textContent = this.getDisplayName()
+ share_status.textContent = L._('Visibility: {status}', {
+ status: this.permissions.getShareStatusDisplay(),
+ })
+ }
+ update()
+ name.href = '#'
+ share_status.href = '#'
+ logo.href = '/'
+ if (this.options.user) {
+ const userLabel = L.DomUtil.add(
+ 'a',
+ 'umap-user',
+ container,
+ L._(`My maps ({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))
+ const save = L.DomUtil.create('a', 'leaflet-control-edit-save button', container)
+ save.href = '#'
+ save.title = `${L._('Save current edits')} (Ctrl+S)`
+ save.textContent = L._('Save')
+ const cancel = L.DomUtil.create('a', 'leaflet-control-edit-cancel', container)
+ cancel.href = '#'
+ cancel.title = `${L._('Cancel edits')} (Ctrl+Z)`
+ cancel.textContent = L._('Cancel all')
+ const disable = L.DomUtil.create('a', 'leaflet-control-edit-disable', container)
+ disable.href = '#'
+ disable.textContent = L._('Disable editing')
+ disable.title = `${disable.textContent} (Ctrl+E)`
+
+ L.DomEvent.addListener(disable, 'click', L.DomEvent.stop).addListener(
+ disable,
+ 'click',
+ function (e) {
+ this.disableEdit(e)
+ this.ui.closePanel()
+ },
+ this
+ )
+
+ L.DomEvent.addListener(save, 'click', L.DomEvent.stop).addListener(
+ save,
+ 'click',
+ this.save,
+ this
+ )
+
+ L.DomEvent.addListener(cancel, 'click', L.DomEvent.stop).addListener(
+ cancel,
+ 'click',
+ this.askForReset,
+ this
+ )
+ },
+
renderShareBox: function () {
const container = L.DomUtil.create('div', 'umap-share')
const embedTitle = L.DomUtil.add('h4', '', container, L._('Embed the map'))
diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js
index 184e33e9..c924753f 100644
--- a/umap/static/umap/js/umap.js
+++ b/umap/static/umap/js/umap.js
@@ -67,13 +67,11 @@ L.U.Map.include({
initialize: function (el, geojson) {
// Locale name (pt_PT, en_US…)
// To be used for Django localization
- if (geojson.properties.locale)
- L.setLocale(geojson.properties.locale)
+ if (geojson.properties.locale) L.setLocale(geojson.properties.locale)
// Language code (pt-pt, en-us…)
// To be used in javascript APIs
- if (geojson.properties.lang)
- L.lang = geojson.properties.lang
+ if (geojson.properties.lang) L.lang = geojson.properties.lang
// Don't let default autocreation of controls
const zoomControl =
@@ -91,7 +89,7 @@ L.U.Map.include({
this.ui = new L.U.UI(this._container)
this.xhr = new L.U.Xhr(this.ui)
- this.xhr.on('dataloading', (e) => this.fire('dataloading', e))
+ this.xhr.on('dataloading', (e) => this.fire('dataloading', e))
this.xhr.on('dataload', (e) => this.fire('dataload', e))
this.initLoader()
@@ -245,7 +243,7 @@ L.U.Map.include({
},
this
)
- this.initEditBar()
+ this.renderEditToolbar()
}
this.initShortcuts()
this.onceDatalayersLoaded(function () {
@@ -1812,66 +1810,6 @@ L.U.Map.include({
})
},
- initEditBar: function () {
- const container = L.DomUtil.create(
- 'div',
- 'umap-main-edit-toolbox with-transition dark',
- this._controlContainer
- ),
- title = L.DomUtil.add('h3', '', container, `${L._('Editing')} `),
- name = L.DomUtil.create('a', 'umap-click-to-edit', title),
- setName = function () {
- name.textContent = this.getDisplayName()
- }
- if (this.options.user) {
- const userLabel = L.DomUtil.add('a', 'umap-user', title, this.options.user.name)
- userLabel.href = this.options.user.url
- }
- L.bind(setName, this)()
- L.DomEvent.on(name, 'click', this.edit, this)
- this.on('postsync', L.bind(setName, this))
- this.help.button(name, 'edit')
- const save = L.DomUtil.create('a', 'leaflet-control-edit-save button', container)
- save.href = '#'
- save.title = `${L._('Save current edits')} (Ctrl+S)`
- save.textContent = L._('Save')
- const cancel = L.DomUtil.create(
- 'a',
- 'leaflet-control-edit-cancel button',
- container
- )
- cancel.href = '#'
- cancel.title = L._('Cancel edits')
- cancel.textContent = L._('Cancel')
- const disable = L.DomUtil.create('a', 'leaflet-control-edit-disable', container)
- disable.href = '#'
- disable.title = disable.textContent = L._('Disable editing')
-
- L.DomEvent.addListener(disable, 'click', L.DomEvent.stop).addListener(
- disable,
- 'click',
- function (e) {
- this.disableEdit(e)
- this.ui.closePanel()
- },
- this
- )
-
- L.DomEvent.addListener(save, 'click', L.DomEvent.stop).addListener(
- save,
- 'click',
- this.save,
- this
- )
-
- L.DomEvent.addListener(cancel, 'click', L.DomEvent.stop).addListener(
- cancel,
- 'click',
- this.askForReset,
- this
- )
- },
-
askForReset: function (e) {
if (!confirm(L._('Are you sure you want to cancel your changes?'))) return
this.reset()
diff --git a/umap/static/umap/js/umap.permissions.js b/umap/static/umap/js/umap.permissions.js
index 612faea4..0454855d 100644
--- a/umap/static/umap/js/umap.permissions.js
+++ b/umap/static/umap/js/umap.permissions.js
@@ -160,6 +160,7 @@ L.U.MapPermissions = L.Class.extend({
this.commit()
this.isDirty = false
this.map.continueSaving()
+ this.map.fire('postsync')
},
})
},
@@ -194,4 +195,8 @@ L.U.MapPermissions = L.Class.extend({
commit: function () {
L.Util.extend(this.map.options.permissions, this.options)
},
+
+ getShareStatusDisplay: function () {
+ return Object.fromEntries(this.map.options.share_statuses)[this.options.share_status]
+ }
})
diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index 852e4bdc..bf75ec03 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -116,9 +116,26 @@ a.umap-control-less {
height: 23px;
line-height: 23px;
}
+.leaflet-control-edit-enable a:before {
+ content: ' ';
+ width: 24px;
+ height: 24px;
+ display: inline-block;
+ vertical-align: middle;
+ background-image: url('./img/16-white.svg');
+ background-position: -52px -49px;
+}
+
.leaflet-control-edit-enable a {
- background-position: 0 0;
+ width: initial;
+ padding: 0 20px;
background-color: #353c3e;
+ color: #fff;
+ background-image: none;
+ border-radius: 20px;
+ height: 36px;
+ line-height: 36px;
+ display: block;
}
.leaflet-control-toolbar .leaflet-toolbar-icon.dark:hover,
.leaflet-control-edit-enable a:hover {
@@ -203,7 +220,6 @@ ul.photon-autocomplete {
background-image: url('./img/24.svg');
background-size: auto auto;
}
-.leaflet-control-edit-enable a,
.leaflet-control-toolbar li .leaflet-toolbar-icon.dark {
background-image: url('./img/24-white.svg');
}
@@ -407,8 +423,20 @@ ul.photon-autocomplete {
padding: 0 10px;
min-width: 100px;
}
-.leaflet-container a.leaflet-control-edit-cancel {
- background-color: #C60F13;
+.leaflet-container a.leaflet-control-edit-save:before,
+.leaflet-container a.leaflet-control-edit-cancel:before {
+ 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');
+ vertical-align: middle;
+ content: ' ';
+}
+.leaflet-container a.leaflet-control-edit-save:before {
+ background-position: -4px -25px;
}
.leaflet-container a.leaflet-control-edit-save {
opacity: 0.5;
@@ -433,26 +461,6 @@ ul.photon-autocomplete {
.umap-is-dirty a.leaflet-control-edit-disable {
display: none;
}
-.umap-click-to-edit {
- color: #4a90d9;
- font-weight: bold;
-}
-.umap-click-to-edit:after {
- content: "\00a0";
- background-repeat: no-repeat;
- background-position: center center;
- cursor: pointer;
- width: 26px;
- height: 100%;
- display: inline-block;
- background-position: -46px -41px;
-}
-.umap-click-to-edit:hover:after {
- background-image: url('./img/16.svg');
-}
-.dark .umap-click-to-edit:hover:after {
- background-image: url('./img/16-white.svg');
-}
.umap-caption-bar {
display: none;
}
@@ -464,14 +472,43 @@ ul.photon-autocomplete {
right: 0;
height: 46px;
background-color: #323737;
- padding: 5px;
+ padding: 5px 10px;
text-align: left;
line-height: 36px;
cursor: auto;
border-bottom: 1px solid #222;
z-index: 1000;
opacity: 0.98;
- color: #efefef;
+ color: #fff;
+}
+.umap-main-edit-toolbox .logo {
+ background-image: url('./img/logo_small.svg');
+ background-position: 0 center;
+ background-repeat: no-repeat;
+ width: 60px;
+ display: inline-block;
+ height: 100%;
+ vertical-align: middle;
+}
+.umap-main-edit-toolbox a {
+ color: #fff;
+ font-size: 1.2em;
+ vertical-align: middle;
+}
+.umap-main-edit-toolbox a:hover {
+ text-decoration: underline;
+}
+.umap-main-edit-toolbox .map-name {
+ display: inline-block;
+ max-width: 200px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ margin-right: 5px;
+ font-weight: bold;
+}
+.umap-main-edit-toolbox .share-status {
+ margin: 0 20px;
}
.umap-edit-enabled .umap-main-edit-toolbox {
top: 0;
@@ -483,15 +520,8 @@ ul.photon-autocomplete {
.umap-main-edit-toolbox h3 {
display: inline;
}
-.umap-main-edit-toolbox .umap-user:before {
- content: '|';
- color: #fff;
- padding-right: 10px;
- background-image: url('./img/16-white.svg');
- background-repeat: no-repeat;
- display: inline-block;
- background-position: -40px -115px;
- width: 20px;
+.umap-main-edit-toolbox .umap-user {
+ margin-right: 20px;
}
.umap-edit-enabled .leaflet-top {
top: 48px;
@@ -1437,8 +1467,27 @@ a.add-datalayer:hover,
/* Mobile */
/* ****** */
+@media all and (max-width: 980px) {
+
+ .leaflet-container a.leaflet-control-edit-save,
+ .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 {
+ display: none;
+ }
+
+}
@media all and (max-width: 480px) {
+ .umap-main-edit-toolbox .map-name {
+ max-width: 100px;
+ }
+
.leaflet-control-layers-expanded label {
display: inline-block;
margin-right: 10px;