almet/umap
1
0
Fork 0
mirror of https://github.com/umap-project/umap.git synced 2025-04-28 11:32:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore: use details/summary for datalayers boxes in browser

Browse source
This commit is contained in:
Yohan Boniface 2025-04-25 12:04:36 +02:00
parent f01a74f19f
commit 8658e7eba7
7 changed files with 23 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
umap/static/umap/js/modules/browser.js
View file

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

23
umap/static/umap/map.css
View file

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

2
umap/tests/integration/test_edit_map.py
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) # By default, features are sorted by name (Third, Second, First)
page.get_by_role("button", name="Open browser").click() 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) first_listed_feature = page.locator(".umap-browser .datalayer ul > li").nth(0)
second_listed_feature = page.locator(".umap-browser .datalayer ul > li").nth(1) second_listed_feature = page.locator(".umap-browser .datalayer ul > li").nth(1)

4
umap/tests/integration/test_facets_browser.py
View file

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

2
umap/tests/integration/test_import.py
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() page.get_by_role("button", name="Import data", exact=True).click()
expect(page.locator(".leaflet-marker-icon")).to_be_visible() expect(page.locator(".leaflet-marker-icon")).to_be_visible()
page.get_by_role("button", name="Open browser").click() 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): def test_import_osm_relation(tilelayer, live_server, page):

15
umap/tests/integration/test_map.py
View file

@ -1,4 +1,3 @@
import os
import re import re
import pytest 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") page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
# Hash is defined, so map is initialized # Hash is defined, so map is initialized
expect(page).to_have_url(re.compile(r".*#7/48\..+/13\..+")) 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) 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") page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
# Hash is defined, so map is initialized # Hash is defined, so map is initialized
expect(page).to_have_url(re.compile(r".*#7/48\..+/13\..+")) 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) 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") page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
# Hash is defined, so map is initialized # Hash is defined, so map is initialized
expect(page).to_have_url(re.compile(r".*#7/48\..+/13\..+")) 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) 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") page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
# Hash is defined, so map is initialized # Hash is defined, so map is initialized
expect(page).to_have_url(re.compile(r".*#7/48\..+/14\..+")) 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(layers).to_have_count(1)
expect(page.locator(".leaflet-popup")).to_be_visible() 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() map.save()
page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers") page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
expect(page).to_have_url(re.compile(r".*#8/48\..+/2\..+")) 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) expect(layers).to_have_count(1)
@ -144,7 +143,7 @@ def test_default_view_latest_with_polygon(map, live_server, page):
map.save() map.save()
page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers") page.goto(f"{live_server.url}{map.get_absolute_url()}?onLoadPanel=datalayers")
expect(page).to_have_url(re.compile(r".*#8/48\..+/2\..+")) 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) 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") toggle = page.get_by_role("button", name="Open browser")
expect(toggle).to_be_visible() expect(toggle).to_be_visible()
toggle.click() toggle.click()
layers = page.locator(".umap-browser .datalayer h5") layers = page.locator(".umap-browser .datalayer summary")
expect(layers).to_have_count(1) expect(layers).to_have_count(1)
map_el = page.locator("#map") map_el = page.locator("#map")
add_marker = page.get_by_title("Draw a marker") add_marker = page.get_by_title("Draw a marker")

4
umap/tests/integration/test_websocket_sync.py
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 # Make sure this new marker is in Layer 2 for peerB
# Show features for this layer in the brower. # 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() 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( peerB.locator(".panel.left").get_by_role("button", name="Show/hide layer").nth(
1 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 # Make sure only one layer has been created on peer B
peerB.get_by_role("button", name="Open browser").click() 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() peerB.get_by_role("button", name="Close").click()
# Save and quit edit mode again # Save and quit edit mode again