umap/static/umap/css/bar.css

@@ -221,13 +221,6 @@
 }
 .umap-edit-bar button {
     padding: 0;
-    border-radius: 0;
-}
-.umap-edit-bar li:first-of-type button {
-    border-radius: var(--border-radius) var(--border-radius) 0 0;
-}
-.umap-edit-bar li:last-of-type button {
-    border-radius: 0 0 var(--border-radius) var(--border-radius);
 }
 .umap-edit-bar hr {
     padding: 0;

umap/static/umap/css/form.css

@@ -476,6 +476,15 @@ i.info {
 .umap-download:before {
     background-position: -72px -78px;
 }
+.permissions-panel,
+.umap-upload,
+.umap-share,
+.umap-datalayer-container,
+.umap-layer-properties-container,
+.umap-browse-data,
+.umap-tilelayer-switcher-container {
+    padding: 0 10px;
+}
 .umap-field-datalist {
     display: flex;
     justify-content: space-between;
@@ -606,6 +615,6 @@ input[type=hidden].blur + [type="button"] {
 input.highlightable:not(:placeholder-shown) {
     border: 1px solid var(--color-brightCyan);
 }
-.umap-import [type=url] {
+.umap-upload [type=url] {
     margin-bottom: 0;
 }

umap/static/umap/css/panel.css

@@ -107,20 +107,3 @@
         border-bottom-right-radius: 0;
     }
 }
-
-:has(.right[data-highlight="caption"]) li[data-ref="caption"] button,
-:has(.right[data-highlight="caption"]) li[data-ref="caption"] button:hover,
-:has(.right[data-highlight="import"]) li[data-ref="import"] button,
-:has(.right[data-highlight="import"]) li[data-ref="import"] button:hover,
-:has(.right[data-highlight="layers"]) li[data-ref="layers"] button,
-:has(.right[data-highlight="layers"]) li[data-ref="layers"] button:hover,
-:has(.right[data-highlight="tilelayers"]) li[data-ref="tilelayers"] button,
-:has(.right[data-highlight="tilelayers"]) li[data-ref="tilelayers"] button:hover,
-:has(.right[data-highlight="center"]) li[data-ref="center"] button,
-:has(.right[data-highlight="center"]) li[data-ref="center"] button:hover,
-:has(.right[data-highlight="permissions"]) li[data-ref="permissions"] button,
-:has(.right[data-highlight="permissions"]) li[data-ref="permissions"] button:hover,
-:has(.right[data-highlight="settings"]) li[data-ref="settings"] button,
-:has(.right[data-highlight="settings"]) li[data-ref="settings"] button:hover {
-    background-color: var(--color-mediumGray);
-}

umap/static/umap/js/modules/data/layer.js

@@ -897,7 +897,6 @@ export class DataLayer extends ServerStored {
 
     this._umap.editPanel.open({
       content: container,
-      highlight: 'layers',
       actions: [backButton],
     })
   }

umap/static/umap/js/modules/help.js

@@ -193,14 +193,6 @@ export default class Help {
   show(entries) {
     const container = DomUtil.add('div')
     DomUtil.createTitle(container, translate('Help'))
-    for (const name of entries) {
-      DomUtil.element({
-        tagName: 'div',
-        className: 'umap-help-entry',
-        parent: container,
-        innerHTML: ENTRIES[name],
-      })
-    }
     this.dialog.open({ template: container })
   }
 

umap/static/umap/js/modules/importer.js

@@ -10,7 +10,7 @@ import Dialog from './ui/dialog.js'
 import * as Utils from './utils.js'
 
 const TEMPLATE = `
-  <div class="umap-import">
+  <div class="umap-upload">
     <h3><i class="icon icon-16 icon-upload"></i><span>${translate('Import data')}</span></h3>
     <fieldset class="formbox">
       <legend class="counter">${translate('Choose data')}</legend>
@@ -261,10 +261,7 @@ export default class Importer extends Utils.WithTemplate {
 
   open() {
     if (!this.container) this.build()
-    const onLoad = this._umap.editPanel.open({
-      content: this.container,
-      highlight: 'import',
-    })
+    const onLoad = this._umap.editPanel.open({ content: this.container })
     onLoad.then(() => this.onLoad())
   }
 

umap/static/umap/js/modules/permissions.js

@@ -166,16 +166,12 @@ export class MapPermissions extends ServerStored {
       Alert.info(translate('Please save the map first'))
       return
     }
-    const container = DomUtil.create('div', 'umap-edit-permissions')
+    const container = DomUtil.create('div', 'permissions-panel')
     DomUtil.createTitle(container, translate('Update permissions'), 'icon-key')
     if (this.isAnonymousMap()) this._editAnonymous(container)
     else this._editWithOwner(container)
     this._editDatalayers(container)
-    this._umap.editPanel.open({
-      content: container,
-      className: 'dark',
-      highlight: 'permissions',
-    })
+    this._umap.editPanel.open({ content: container, className: 'dark' })
   }
 
   async attach() {

umap/static/umap/js/modules/rendering/map.js

@@ -217,7 +217,7 @@ const ManageTilelayerMixin = {
     }
   },
 
-  editTileLayers: function () {
+  updateTileLayers: function () {
     if (this._controls.tilelayersChooser) {
       this._controls.tilelayersChooser.openSwitcher({ edit: true })
     }

umap/static/umap/js/modules/rules.js

@@ -147,7 +147,7 @@ class Rule {
           .map((str) => `${value}${str || ''}`)
       }
     })
-    this._umap.editPanel.open({ content: container, highlight: 'settings' })
+    this._umap.editPanel.open({ content: container })
   }
 
   renderToolbox(row) {

umap/static/umap/js/modules/ui/bar.js

@@ -219,9 +219,9 @@ const EDIT_BAR_TEMPLATE = `
     <li data-ref="caption" hidden><button data-getstarted type="button" title="${translate('Edit map name and caption')}"><i class="icon icon-24 icon-caption"></i></button></li>
     <li data-ref="import" hidden><button type="button"><i class="icon icon-24 icon-upload"></i></button></li>
     <li data-ref="layers" hidden><button type="button" title="${translate('Manage layers')}"><i class="icon icon-24 icon-layers"></i></button></li>
-    <li data-ref="tilelayers" hidden><button type="button" title="${translate('Change tilelayers')}"><i class="icon icon-24 icon-tilelayer"></i></button></li>
+    <li data-ref="tiles" hidden><button type="button" title="${translate('Change tilelayers')}"><i class="icon icon-24 icon-tilelayer"></i></button></li>
     <li data-ref="center" hidden><button type="button"><i class="icon icon-24 icon-center"></i></button></li>
-    <li data-ref="permissions" hidden><button type="button" title="${translate('Update permissions and editors')}"><i class="icon icon-24 icon-key"></i></button></li>
+    <li data-ref="key" hidden><button type="button" title="${translate('Update permissions and editors')}"><i class="icon icon-24 icon-key"></i></button></li>
     <li data-ref="settings" hidden><button data-getstarted type="button" title="${translate('Map advanced properties')}"><i class="icon icon-24 icon-settings"></i></button></li>
   </ul>
 `
@@ -249,9 +249,9 @@ export class EditBar extends WithTemplate {
     this._onClick('caption', () => this._umap.editCaption())
     this._onClick('import', () => this._umap.importer.open())
     this._onClick('layers', () => this._umap.editDatalayers())
-    this._onClick('tilelayers', () => this._leafletMap.editTileLayers())
+    this._onClick('tiles', () => this._leafletMap.updateTileLayers())
     this._onClick('center', () => this._umap.editCenter())
-    this._onClick('permissions', () => this._umap.permissions.edit())
+    this._onClick('key', () => this._umap.permissions.edit())
     this._onClick('settings', () => this._umap.edit())
     this._addTitle('import', 'IMPORT_PANEL')
     this._addTitle('marker', 'DRAW_MARKER')
@@ -267,9 +267,9 @@ export class EditBar extends WithTemplate {
     this.elements.caption.hidden = this._umap.properties.editMode !== 'advanced'
     this.elements.import.hidden = this._umap.properties.editMode !== 'advanced'
     this.elements.layers.hidden = this._umap.properties.editMode !== 'advanced'
-    this.elements.tilelayers.hidden = this._umap.properties.editMode !== 'advanced'
+    this.elements.tiles.hidden = this._umap.properties.editMode !== 'advanced'
     this.elements.center.hidden = this._umap.properties.editMode !== 'advanced'
-    this.elements.permissions.hidden = this._umap.properties.editMode !== 'advanced'
+    this.elements.key.hidden = this._umap.properties.editMode !== 'advanced'
     this.elements.settings.hidden = this._umap.properties.editMode !== 'advanced'
   }
 

umap/static/umap/js/modules/ui/panel.js

@@ -25,16 +25,13 @@ export class Panel {
     return this.container.classList.contains('on')
   }
 
-  open({ content, className, highlight, actions = [] } = {}) {
+  open({ content, className, actions = [] } = {}) {
     if (this.isOpen()) {
       this.onClose()
     }
     this.container.className = `with-transition panel window ${this.className} ${
       this.mode || ''
     }`
-    if (highlight) {
-      this.container.dataset.highlight = highlight
-    }
     document.body.classList.add(`panel-${this.className.split(' ')[0]}-on`)
     this.container.innerHTML = ''
     const actionsContainer = DomUtil.create('ul', 'buttons', this.container)
@@ -78,7 +75,6 @@ export class Panel {
 
   close() {
     document.body.classList.remove(`panel-${this.className.split(' ')[0]}-on`)
-    this.container.dataset.highlight = null
     this.onClose()
   }
 

umap/static/umap/js/modules/umap.js

@@ -744,7 +744,7 @@ export default class Umap extends ServerStored {
   editCaption() {
     if (!this.editEnabled) return
     if (this.properties.editMode !== 'advanced') return
-    const container = DomUtil.create('div')
+    const container = DomUtil.create('div', 'umap-edit-container')
     const metadataFields = ['properties.name', 'properties.description']
 
     DomUtil.createTitle(container, translate('Edit map details'), 'icon-caption')
@@ -765,13 +765,13 @@ export default class Umap extends ServerStored {
     ]
     const creditsBuilder = new MutatingForm(this, creditsFields, { umap: this })
     credits.appendChild(creditsBuilder.build())
-    this.editPanel.open({ content: container, highlight: 'caption' })
+    this.editPanel.open({ content: container })
   }
 
   editCenter() {
     if (!this.editEnabled) return
     if (this.properties.editMode !== 'advanced') return
-    const container = DomUtil.create('div')
+    const container = DomUtil.create('div', 'umap-edit-container')
     const metadataFields = [
       ['properties.zoom', { handler: 'IntInput', label: translate('Default zoom') }],
       [
@@ -800,7 +800,7 @@ export default class Umap extends ServerStored {
     })
     container.appendChild(form)
     container.appendChild(button)
-    this.editPanel.open({ content: container, highlight: 'center' })
+    this.editPanel.open({ content: container })
   }
 
   _editControls(container) {
@@ -1157,11 +1157,7 @@ export default class Umap extends ServerStored {
     }
     this._advancedActions(container)
 
-    this.editPanel.open({
-      content: container,
-      className: 'dark',
-      highlight: 'settings',
-    })
+    this.editPanel.open({ content: container, className: 'dark' })
   }
 
   reset() {
@@ -1550,7 +1546,7 @@ export default class Umap extends ServerStored {
       this
     )
 
-    this.editPanel.open({ content: container, highlight: 'layers' })
+    this.editPanel.open({ content: container })
   }
 
   getDataLayerByUmapId(id) {

umap/static/umap/js/umap.controls.js

@@ -432,12 +432,12 @@ U.TileLayerChooser = L.Control.extend({
   },
 
   openSwitcher: function (options = {}) {
-    const container = L.DomUtil.create('div', 'umap-edit-tilelayers')
+    const container = L.DomUtil.create('div', 'umap-tilelayer-switcher-container')
     L.DomUtil.createTitle(container, L._('Change tilelayers'), 'icon-tilelayer')
     this._tilelayers_container = L.DomUtil.create('ul', '', container)
     this.buildList(options)
     const panel = options.edit ? this.map._umap.editPanel : this.map._umap.panel
-    panel.open({ content: container, highlight: 'tilelayers' })
+    panel.open({ content: container })
   },
 
   buildList: function (options) {

umap/static/umap/map.css

@@ -417,10 +417,10 @@ ul.photon-autocomplete {
     width: 16px;
     height: 16px;
     margin-inline-start: 5px;
-    background-position: 2px -4px;
+    background-position: -4px -4px;
     background-repeat: no-repeat;
     background-image: url('./img/16.svg');
-    background-color: transparent !important;
+    background-color: var(--color-darkGray) !important;
     vertical-align: middle;
     text-indent: -9999px;
     min-height: inherit;
@@ -688,7 +688,7 @@ a.umap-control-caption,
 /*      Tilelayer switcher           */
 /* ********************************* */
 
-.umap-edit-tilelayers li {
+.umap-tilelayer-switcher-container li {
     border: 1px solid rgb(116, 116, 116);
     border-radius: 4px 4px 4px 4px;
     margin-bottom: 14px;
@@ -700,7 +700,7 @@ a.umap-control-caption,
     margin-left: auto;
     margin-right: auto;
 }
-.umap-edit-tilelayers li div {
+.umap-tilelayer-switcher-container li div {
     background-color: rgb(116, 116, 116);
     bottom: 0;
     color: rgb(247, 246, 241);
@@ -712,8 +712,8 @@ a.umap-control-caption,
     width: 100%;
     text-align: center;
 }
-.umap-edit-tilelayers li:hover div:before,
-.umap-edit-tilelayers .selected div:before {
+.umap-tilelayer-switcher-container li:hover div:before,
+.umap-tilelayer-switcher-container .selected div:before {
     content: "✓";
     font-size: 1.3em;
     line-height: 56px;
@@ -721,7 +721,7 @@ a.umap-control-caption,
     position: absolute;
     inset-inline-start: 7px;
 }
-.umap-edit-tilelayers li img {
+.umap-tilelayer-switcher-container li img {
     display: block;
     max-width: 100%;
 }

umap/tests/integration/test_draw_polygon.py

@@ -471,7 +471,7 @@ def test_vertexmarker_not_shown_if_too_many(live_server, map, page, settings):
     settings.UMAP_ALLOW_ANONYMOUS = True
     page.goto(f"{live_server.url}/en/map/new/#15/48.4395/3.3189")
     page.get_by_title("Import data").click()
-    page.locator(".umap-import textarea").fill(geojson)
+    page.locator(".umap-upload textarea").fill(geojson)
     page.locator('select[name="format"]').select_option("geojson")
     page.get_by_role("button", name="Import data", exact=True).click()
     page.locator("path").click()

umap/tests/integration/test_edit_map.py

@@ -21,16 +21,6 @@ def test_can_edit_name(page, live_server, tilelayer):
     )
 
 
-def test_can_display_help(page, live_server, tilelayer):
-    page.goto(f"{live_server.url}/en/map/new/")
-
-    page.get_by_title("Edit map name and caption").click()
-    help_button = page.locator(".panel .umap-field-description .umap-help-button")
-    expect(help_button).to_be_visible()
-    help_button.click()
-    expect(page.locator("dialog").first).to_contain_text("Text formatting")
-
-
 def test_can_edit_name_on_click_on_toolbar(page, live_server, tilelayer):
     page.goto(f"{live_server.url}/en/map/new/")
     page.locator(".umap-main-edit-toolbox .map-name").click()

umap/tests/integration/test_import.py

@@ -76,7 +76,7 @@ def test_umap_import_from_textarea(live_server, tilelayer, page, settings):
     page.goto(f"{live_server.url}/map/new/")
     page.get_by_role("button", name="Open browser").click()
     page.get_by_title("Import data").click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     path = Path(__file__).parent.parent / "fixtures/test_upload_data.umap"
     textarea.fill(path.read_text())
     page.locator('select[name="format"]').select_option("umap")
@@ -111,7 +111,7 @@ def test_import_geojson_from_textarea(tilelayer, live_server, page):
     button = page.get_by_title("Import data")
     expect(button).to_be_visible()
     button.click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     path = Path(__file__).parent.parent / "fixtures/test_upload_data.json"
     textarea.fill(path.read_text())
     page.locator('select[name="format"]').select_option("geojson")
@@ -136,7 +136,7 @@ def test_import_invalid_data(tilelayer, live_server, page):
     button = page.get_by_title("Import data")
     expect(button).to_be_visible()
     button.click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     textarea.fill("invalid data")
     for format in ["geojson", "csv", "gpx", "kml", "georss", "osm", "umap"]:
         page.locator('select[name="format"]').select_option(format)
@@ -156,7 +156,7 @@ def test_import_kml_from_textarea(tilelayer, live_server, page):
     button = page.get_by_title("Import data")
     expect(button).to_be_visible()
     button.click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     path = Path(__file__).parent.parent / "fixtures/test_upload_data.kml"
     textarea.fill(path.read_text())
     page.locator('select[name="format"]').select_option("kml")
@@ -180,7 +180,7 @@ def test_import_gpx_from_textarea(tilelayer, live_server, page, settings):
     button = page.get_by_title("Import data")
     expect(button).to_be_visible()
     button.click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     path = Path(__file__).parent.parent / "fixtures/test_upload_data.gpx"
     textarea.fill(path.read_text())
     page.locator('select[name="format"]').select_option("gpx")
@@ -237,7 +237,7 @@ def test_import_osm_from_textarea(tilelayer, live_server, page):
     button = page.get_by_title("Import data")
     expect(button).to_be_visible()
     button.click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     path = Path(__file__).parent.parent / "fixtures/test_upload_data_osm.json"
     textarea.fill(path.read_text())
     page.locator('select[name="format"]').select_option("osm")
@@ -257,7 +257,7 @@ def test_import_csv_from_textarea(tilelayer, live_server, page):
     button = page.get_by_title("Import data")
     expect(button).to_be_visible()
     button.click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     path = Path(__file__).parent.parent / "fixtures/test_upload_data.csv"
     textarea.fill(path.read_text())
     page.locator('select[name="format"]').select_option("csv")
@@ -276,7 +276,7 @@ def test_can_import_in_existing_datalayer(live_server, datalayer, page, openmap)
     expect(layers).to_have_count(1)
     page.get_by_role("button", name="Edit").click()
     page.get_by_title("Import data").click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     path = Path(__file__).parent.parent / "fixtures/test_upload_data.csv"
     textarea.fill(path.read_text())
     page.locator('select[name="format"]').select_option("csv")
@@ -297,7 +297,7 @@ def test_can_replace_datalayer_data(live_server, datalayer, page, openmap):
     expect(layers).to_have_count(1)
     page.get_by_role("button", name="Edit").click()
     page.get_by_title("Import data").click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     path = Path(__file__).parent.parent / "fixtures/test_upload_data.csv"
     textarea.fill(path.read_text())
     page.locator('select[name="format"]').select_option("csv")
@@ -318,7 +318,7 @@ def test_can_import_in_new_datalayer(live_server, datalayer, page, openmap):
     expect(layers).to_have_count(1)
     page.get_by_role("button", name="Edit").click()
     page.get_by_title("Import data").click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     path = Path(__file__).parent.parent / "fixtures/test_upload_data.csv"
     textarea.fill(path.read_text())
     page.locator("select[name=format]").select_option("csv")
@@ -364,7 +364,7 @@ def test_should_remove_dot_in_property_names(live_server, page, settings, tilela
     }
     page.goto(f"{live_server.url}/map/new/")
     page.get_by_title("Import data").click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     textarea.fill(json.dumps(data))
     page.locator('select[name="format"]').select_option("geojson")
     page.get_by_role("button", name="Import data", exact=True).click()
@@ -425,7 +425,7 @@ def test_import_geometry_collection(live_server, page, tilelayer):
     button = page.get_by_title("Import data")
     expect(button).to_be_visible()
     button.click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     textarea.fill(json.dumps(data))
     page.locator('select[name="format"]').select_option("geojson")
     page.get_by_role("button", name="Import data", exact=True).click()
@@ -459,7 +459,7 @@ def test_import_multipolygon(live_server, page, tilelayer):
     button = page.get_by_title("Import data")
     expect(button).to_be_visible()
     button.click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     textarea.fill(json.dumps(data))
     page.locator('select[name="format"]').select_option("geojson")
     page.get_by_role("button", name="Import data", exact=True).click()
@@ -491,7 +491,7 @@ def test_import_multipolyline(live_server, page, tilelayer):
     button = page.get_by_title("Import data")
     expect(button).to_be_visible()
     button.click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     textarea.fill(json.dumps(data))
     page.locator('select[name="format"]').select_option("geojson")
     page.get_by_role("button", name="Import data", exact=True).click()
@@ -506,7 +506,7 @@ def test_import_csv_without_valid_latlon_headers(tilelayer, live_server, page):
     layers = page.locator(".umap-browser .datalayer")
     markers = page.locator(".leaflet-marker-icon")
     page.get_by_title("Import data").click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     textarea.fill("a,b,c\n12.23,48.34,mypoint\n12.23,48.34,mypoint2")
     page.locator('select[name="format"]').select_option("csv")
     page.get_by_role("button", name="Import data", exact=True).click()
@@ -523,7 +523,7 @@ def test_import_csv_with_commas_in_latlon(tilelayer, live_server, page, settings
     layers = page.locator(".umap-browser .datalayer")
     markers = page.locator(".leaflet-marker-icon")
     page.get_by_title("Import data").click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     textarea.fill("lat;lon;foobar\n12,24;48,34;mypoint\n12,23;48,35;mypoint2")
     page.locator('select[name="format"]').select_option("csv")
     page.get_by_role("button", name="Import data", exact=True).click()
@@ -758,7 +758,7 @@ def test_import_osm_relation(tilelayer, live_server, page):
     button = page.get_by_title("Import data")
     expect(button).to_be_visible()
     button.click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     file_path = Path(__file__).parent.parent / "fixtures/test_import_osm_relation.json"
     textarea.fill(file_path.read_text())
     page.locator('select[name="format"]').select_option("osm")
@@ -778,7 +778,7 @@ def test_import_georss_from_textarea(tilelayer, live_server, page):
     button = page.get_by_title("Import data")
     expect(button).to_be_visible()
     button.click()
-    textarea = page.locator(".umap-import textarea")
+    textarea = page.locator(".umap-upload textarea")
     path = Path(__file__).parent.parent / "fixtures/test_upload_georss.xml"
     textarea.fill(path.read_text())
     page.locator('select[name="format"]').select_option("georss")