From a044bfd6725e5f580d3119a1a3e6de994c9b37fe Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Thu, 6 Mar 2025 15:48:51 +0100 Subject: [PATCH] chore: refactor search UX cf #419 --- umap/static/umap/img/16.svg | 2 +- umap/static/umap/img/24.svg | 8 ++--- umap/static/umap/img/source/16.svg | 2 +- umap/static/umap/img/source/24.svg | 10 +++--- umap/static/umap/js/umap.controls.js | 53 +++++++++++----------------- umap/static/umap/map.css | 17 +++++++-- 6 files changed, 45 insertions(+), 47 deletions(-) diff --git a/umap/static/umap/img/16.svg b/umap/static/umap/img/16.svg index 3c1eb12c..6950d1f7 100644 --- a/umap/static/umap/img/16.svg +++ b/umap/static/umap/img/16.svg @@ -1 +1 @@ -image/svg+xml   +image/svg+xml   diff --git a/umap/static/umap/img/24.svg b/umap/static/umap/img/24.svg index a1f6f6fd..8ae40765 100644 --- a/umap/static/umap/img/24.svg +++ b/umap/static/umap/img/24.svg @@ -13,10 +13,10 @@ 1 - - + + - + @@ -47,7 +47,7 @@ - + diff --git a/umap/static/umap/img/source/16.svg b/umap/static/umap/img/source/16.svg index fb7d31ef..aad5d758 100644 --- a/umap/static/umap/img/source/16.svg +++ b/umap/static/umap/img/source/16.svg @@ -1,4 +1,4 @@ -image/svg+xml   +image/svg+xml   diff --git a/umap/static/umap/img/source/24.svg b/umap/static/umap/img/source/24.svg index c6eaab05..72eddd1b 100644 --- a/umap/static/umap/img/source/24.svg +++ b/umap/static/umap/img/source/24.svg @@ -2,7 +2,7 @@ - + @@ -26,10 +26,10 @@ 1 - - + + - + @@ -60,7 +60,7 @@ - + diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 287ca885..438f2235 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -430,44 +430,31 @@ U.Search = L.PhotonSearch.extend({ }, formatResult: function (feature, el) { - const tools = L.DomUtil.create('span', 'search-result-tools', el) - const zoom = L.DomUtil.createButtonIcon( - tools, - 'icon-zoom', - L._('Zoom to this place') - ) - const edit = L.DomUtil.createButtonIcon( - tools, - 'icon-edit', - L._('Save this location as new feature') - ) - // We need to use "mousedown" because Leaflet.Photon listen to mousedown - // on el. - L.DomEvent.on(zoom, 'mousedown', (e) => { - L.DomEvent.stop(e) - this.zoomToFeature(feature) - }) - L.DomEvent.on(edit, 'mousedown', (e) => { - L.DomEvent.stop(e) + const [tools, { button }] = U.Utils.loadTemplateWithRefs(` + + `) + button.addEventListener('mousedown', (event) => { + event.stopPropagation() const datalayer = this.map._umap.defaultEditDataLayer() - const layer = datalayer.makeFeature(feature) - layer.isDirty = true - layer.edit() + const marker = datalayer.makeFeature(feature) + marker.isDirty = true + marker.edit() + this.map._umap.panel.close() }) + el.appendChild(tools) this._formatResult(feature, el) }, - zoomToFeature: function (feature) { - const zoom = Math.max(this.map.getZoom(), 16) // Never unzoom. - this.map.setView( - [feature.geometry.coordinates[1], feature.geometry.coordinates[0]], - zoom - ) - }, - - onSelected: function (feature) { - this.zoomToFeature(feature) - this.map.panel.close() + setChoice: function (choice) { + choice = choice || this.RESULTS[this.CURRENT] + if (choice) { + const feature = choice.feature + const zoom = Math.max(this.map.getZoom(), 14) // Never unzoom. + this.map.setView( + [feature.geometry.coordinates[1], feature.geometry.coordinates[0]], + zoom + ) + } }, }) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index fd61b9b6..84d2d9e9 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -263,18 +263,26 @@ ul.photon-autocomplete { .photon-autocomplete li { min-height: 40px; line-height: 1em; - padding: 5px 10px; + padding-inline-start: 10px; overflow: hidden; white-space: nowrap; font-size: 1em; - border-inline-start: 4px solid #efefef; + border-inline-start: 4px solid var(--color-lightGray); } .photon-autocomplete li strong { display: block; + margin-top: 5px; +} +.photon-autocomplete button { + margin: 0; +} +.photon-autocomplete button:hover { + background-color: var(--color-brightCyan); } .photon-autocomplete li.on { - border-inline-start: 4px solid #2980b9; + border-inline-start: 4px solid var(--color-brightCyan); cursor: pointer; + background-color: var(--color-lightCyan); } .photon-autocomplete li.photon-no-result { text-align: center; @@ -292,6 +300,9 @@ ul.photon-autocomplete { } .search-result-tools { float: inline-end; + display: none; +} +.photon-autocomplete li.on .search-result-tools { display: block; }