diff --git a/umap/static/umap/js/modules/browser.js b/umap/static/umap/js/modules/browser.js index c5262413..7ace49b2 100644 --- a/umap/static/umap/js/modules/browser.js +++ b/umap/static/umap/js/modules/browser.js @@ -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(` -
-
- + const open = this.mode !== 'layers' ? ' open' : '' + const [container, { headline, toolbox, label }] = Utils.loadTemplateWithRefs(` +
+ -
+ -
+ `) datalayer.renderToolbox(toolbox) parent.appendChild(container) - const toggleList = () => parent.classList.toggle('show-list') - toggle.addEventListener('click', toggleList) - label.addEventListener('click', toggleList) this.updateDatalayer(datalayer) } diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 77b89a51..39af6f3b 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -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; diff --git a/umap/tests/integration/test_edit_map.py b/umap/tests/integration/test_edit_map.py index 71eaffda..40ceaa96 100644 --- a/umap/tests/integration/test_edit_map.py +++ b/umap/tests/integration/test_edit_map.py @@ -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) diff --git a/umap/tests/integration/test_facets_browser.py b/umap/tests/integration/test_facets_browser.py index 695afccc..f708eae4 100644 --- a/umap/tests/integration/test_facets_browser.py +++ b/umap/tests/integration/test_facets_browser.py @@ -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() diff --git a/umap/tests/integration/test_import.py b/umap/tests/integration/test_import.py index 424762ae..f3eb280a 100644 --- a/umap/tests/integration/test_import.py +++ b/umap/tests/integration/test_import.py @@ -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): diff --git a/umap/tests/integration/test_map.py b/umap/tests/integration/test_map.py index f2308d80..8113107b 100644 --- a/umap/tests/integration/test_map.py +++ b/umap/tests/integration/test_map.py @@ -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") diff --git a/umap/tests/integration/test_websocket_sync.py b/umap/tests/integration/test_websocket_sync.py index 2699eaf1..27e12284 100644 --- a/umap/tests/integration/test_websocket_sync.py +++ b/umap/tests/integration/test_websocket_sync.py @@ -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