chore: use details/summary for datalayers boxes in browser (#2680)

![image](https://github.com/user-attachments/assets/978e2f05-b7f3-4648-afec-92a24a88226a)
This commit is contained in:
Yohan Boniface 2025-04-25 16:29:06 +02:00 committed by GitHub
commit 1ecddc1c02
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 23 additions and 45 deletions

View file

@ -63,25 +63,19 @@ export default class Browser {
}
addDataLayer(datalayer, parent) {
let className = `datalayer ${datalayer.getHidableClass()}`
if (this.mode !== 'layers') className += ' show-list'
const [container, { headline, toolbox, toggle, label }] =
Utils.loadTemplateWithRefs(`
<div class="${className}" id="${this.datalayerId(datalayer)}">
<h5 data-ref=headline>
<i class="icon icon-16 datalayer-toggle-list" data-ref=toggle></i>
const open = this.mode !== 'layers' ? ' open' : ''
const [container, { headline, toolbox, label }] = Utils.loadTemplateWithRefs(`
<details class="datalayer ${datalayer.getHidableClass()}" id="${this.datalayerId(datalayer)}"${open}>
<summary data-ref=headline>
<span data-ref=toolbox></span>
<span class="datalayer-name" data-id="${datalayer.id}" data-ref=label></span>
<span class="datalayer-counter"></span>
</h5>
</summary>
<ul></ul>
</div>
</details>
`)
datalayer.renderToolbox(toolbox)
parent.appendChild(container)
const toggleList = () => parent.classList.toggle('show-list')
toggle.addEventListener('click', toggleList)
label.addEventListener('click', toggleList)
this.updateDatalayer(datalayer)
}

View file

@ -547,12 +547,6 @@ a.umap-control-caption,
.umap-browser .datalayer i {
cursor: pointer;
}
.umap-browser .datalayer ul {
display: none;
}
.umap-browser .show-list ul {
display: block;
}
.umap-browser .off .feature {
display: none;
@ -567,7 +561,7 @@ a.umap-control-caption,
.umap-browser.dark .datalayer ul {
border: 1px solid #232729;
}
.umap-browser h5 {
.umap-browser summary {
margin-bottom: 0;
overflow: hidden;
padding-inline-start: 5px;
@ -575,16 +569,10 @@ a.umap-control-caption,
line-height: 30px;
background-color: var(--color-lightGray);
}
.umap-browser .off h5 {
.umap-browser .off summary {
color: #b3b3b3;
}
.umap-browser.dark h5 {
background-color: #232729;
color: white;
}
.umap-browser h5 span {
margin-inline-start: 10px;
}
.umap-browser li {
padding: 2px 0;
white-space: nowrap;
@ -627,9 +615,6 @@ a.umap-control-caption,
margin-inline-end: 5px;
background-position: -145px -70px;
}
.umap-browser .show-list .datalayer-toggle-list {
background-position: -145px -45px;
}
.umap-browser .filters summary {
background: none;
border: 1px solid var(--color-lightGray);
@ -662,7 +647,7 @@ a.umap-control-caption,
color: var(--text-color);
}
.umap-browser .main-toolbox {
padding-left: 4px; /* Align with toolbox below */
padding-left: 1.3rem; /* Align with toolbox below */
border-top: 1px solid var(--color-mediumGray);
margin-top: var(--box-margin);
padding-top: 3px;

View file

@ -175,7 +175,7 @@ def test_sortkey_impacts_datalayerindex(map, live_server, page):
# By default, features are sorted by name (Third, Second, First)
page.get_by_role("button", name="Open browser").click()
page.get_by_role("heading", name="Show/hide layer").locator("i").click()
page.locator(".umap-browser .datalayer-name").click()
first_listed_feature = page.locator(".umap-browser .datalayer ul > li").nth(0)
second_listed_feature = page.locator(".umap-browser .datalayer ul > li").nth(1)

View file

@ -243,7 +243,7 @@ def test_facets_search_are_persistent_when_closing_panel(live_server, page, map)
# Now let's filter
odd.click()
expect(page.locator("summary")).to_have_attribute("data-badge", " ")
expect(page.locator(".filters summary")).to_have_attribute("data-badge", " ")
expect(page.locator(".umap-control-browse")).to_have_attribute("data-badge", " ")
expect(markers).to_have_count(2)
expect(panel.get_by_text("Point 2")).to_be_hidden()
@ -264,7 +264,7 @@ def test_facets_search_are_persistent_when_closing_panel(live_server, page, map)
expect(panel.get_by_text("Point 3")).to_be_visible()
# Close panel
expect(panel.locator("summary")).to_have_attribute("data-badge", " ")
expect(panel.locator(".filters summary")).to_have_attribute("data-badge", " ")
expect(page.locator(".umap-control-browse")).to_have_attribute("data-badge", " ")
panel.get_by_role("button", name="Close").click()
page.get_by_role("button", name="Open browser").click()

View file

@ -904,7 +904,7 @@ def test_import_from_datasets(page, live_server, tilelayer, settings):
page.get_by_role("button", name="Import data", exact=True).click()
expect(page.locator(".leaflet-marker-icon")).to_be_visible()
page.get_by_role("button", name="Open browser").click()
expect(page.locator("h5").get_by_text("Good data")).to_be_visible()
expect(page.locator("summary").get_by_text("Good data")).to_be_visible()
def test_import_osm_relation(tilelayer, live_server, page):

View file

@ -1,4 +1,3 @@
import os
import re
import pytest
@ -46,7 +45,7 @@ def test_default_view_without_datalayer_should_use_default_center(
page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
# Hash is defined, so map is initialized
expect(page).to_have_url(re.compile(r".*#7/48\..+/13\..+"))
layers = page.locator(".umap-browser .datalayer h5")
layers = page.locator(".umap-browser .datalayer summary")
expect(layers).to_have_count(1)
@ -60,7 +59,7 @@ def test_default_view_latest_without_datalayer_should_use_default_center(
page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
# Hash is defined, so map is initialized
expect(page).to_have_url(re.compile(r".*#7/48\..+/13\..+"))
layers = page.locator(".umap-browser .datalayer h5")
layers = page.locator(".umap-browser .datalayer summary")
expect(layers).to_have_count(1)
@ -74,7 +73,7 @@ def test_default_view_data_without_datalayer_should_use_default_center(
page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
# Hash is defined, so map is initialized
expect(page).to_have_url(re.compile(r".*#7/48\..+/13\..+"))
layers = page.locator(".umap-browser .datalayer h5")
layers = page.locator(".umap-browser .datalayer summary")
expect(layers).to_have_count(1)
@ -84,7 +83,7 @@ def test_default_view_latest_with_marker(map, live_server, datalayer, page):
page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
# Hash is defined, so map is initialized
expect(page).to_have_url(re.compile(r".*#7/48\..+/14\..+"))
layers = page.locator(".umap-browser .datalayer h5")
layers = page.locator(".umap-browser .datalayer summary")
expect(layers).to_have_count(1)
expect(page.locator(".leaflet-popup")).to_be_visible()
@ -113,7 +112,7 @@ def test_default_view_latest_with_line(map, live_server, page):
map.save()
page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
expect(page).to_have_url(re.compile(r".*#8/48\..+/2\..+"))
layers = page.locator(".umap-browser .datalayer h5")
layers = page.locator(".umap-browser .datalayer summary")
expect(layers).to_have_count(1)
@ -144,7 +143,7 @@ def test_default_view_latest_with_polygon(map, live_server, page):
map.save()
page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
expect(page).to_have_url(re.compile(r".*#8/48\..+/2\..+"))
layers = page.locator(".umap-browser .datalayer h5")
layers = page.locator(".umap-browser .datalayer summary")
expect(layers).to_have_count(1)
@ -173,7 +172,7 @@ def test_remote_layer_should_not_be_used_as_datalayer_for_created_features(
toggle = page.get_by_role("button", name="Open browser")
expect(toggle).to_be_visible()
toggle.click()
layers = page.locator(".umap-browser .datalayer h5")
layers = page.locator(".umap-browser .datalayer summary")
expect(layers).to_have_count(1)
map_el = page.locator("#map")
add_marker = page.get_by_title("Draw a marker")

View file

@ -397,7 +397,7 @@ def test_should_sync_datalayers(new_page, asgi_live_server, tilelayer):
# Make sure this new marker is in Layer 2 for peerB
# Show features for this layer in the brower.
peerB.get_by_role("heading", name="Layer 2").locator(".datalayer-name").click()
peerB.locator("summary").filter(has_text="Layer 2").click()
expect(peerB.locator("li").filter(has_text="Layer 2")).to_be_visible()
peerB.locator(".panel.left").get_by_role("button", name="Show/hide layer").nth(
1
@ -534,7 +534,7 @@ def test_create_and_sync_map(new_page, asgi_live_server, tilelayer, login, user)
# Make sure only one layer has been created on peer B
peerB.get_by_role("button", name="Open browser").click()
expect(peerB.locator("h5").get_by_text("Layer 1")).to_be_visible()
expect(peerB.locator("summary").get_by_text("Layer 1")).to_be_visible()
peerB.get_by_role("button", name="Close").click()
# Save and quit edit mode again