diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index 827fa350..15b3a29b 100644 --- a/umap/static/umap/base.css +++ b/umap/static/umap/base.css @@ -566,6 +566,10 @@ i.info { background-color: #999; text-align: center; margin-bottom: 5px; + display: none; +} +.umap-pictogram-choice.visible { + display: block; } .umap-pictogram-choice img { vertical-align: middle; diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js index 53510ca4..cb8e7589 100644 --- a/umap/static/umap/js/umap.forms.js +++ b/umap/static/umap/js/umap.forms.js @@ -586,7 +586,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ const img = L.DomUtil.create( 'img', '', - L.DomUtil.create('div', 'umap-pictogram-choice', this.buttonsContainer) + L.DomUtil.create('div', 'umap-pictogram-choice visible', this.buttonsContainer) ) img.src = this.value() L.DomEvent.on(img, 'click', this.showSymbols, this) @@ -594,7 +594,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ const el = L.DomUtil.create( 'span', '', - L.DomUtil.create('div', 'umap-pictogram-choice', this.buttonsContainer) + L.DomUtil.create('div', 'umap-pictogram-choice visible', this.buttonsContainer) ) el.textContent = this.value() L.DomEvent.on(el, 'click', this.showSymbols, this) @@ -610,7 +610,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ }, addIconPreview: function (pictogram, parent) { - const baseClass = 'umap-pictogram-choice', + const baseClass = 'umap-pictogram-choice visible', value = pictogram.src, className = value === this.value() ? `${baseClass} selected` : baseClass, container = L.DomUtil.create('div', className, parent), @@ -618,6 +618,8 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ img.src = value if (pictogram.name && pictogram.attribution) { container.title = `${pictogram.name} — © ${pictogram.attribution}` + } else if (pictogram.name) { + container.title = pictogram.name } L.DomEvent.on( container, @@ -644,8 +646,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ const icons = [...this.parentNode.querySelectorAll('.umap-pictogram-choice')], search = this.searchInput.value.toLowerCase() icons.forEach((el) => { - if (el.title.toLowerCase().indexOf(search) != -1) el.style.display = 'block' - else el.style.display = 'none' + L.DomUtil.classIf(el, 'visible', el.title.toLowerCase().indexOf(search) !== -1) }) }, diff --git a/umap/tests/fixtures/circle.svg b/umap/tests/fixtures/circle.svg new file mode 100644 index 00000000..9b579a76 --- /dev/null +++ b/umap/tests/fixtures/circle.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/umap/tests/fixtures/star.svg b/umap/tests/fixtures/star.svg new file mode 100644 index 00000000..2b6f5169 --- /dev/null +++ b/umap/tests/fixtures/star.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/umap/tests/integration/test_picto.py b/umap/tests/integration/test_picto.py new file mode 100644 index 00000000..6a961161 --- /dev/null +++ b/umap/tests/integration/test_picto.py @@ -0,0 +1,68 @@ +from pathlib import Path + +import pytest +from playwright.sync_api import expect +from django.core.files.base import ContentFile + +from umap.models import Map, Pictogram + +from ..base import DataLayerFactory + +pytestmark = pytest.mark.django_db + + +DATALAYER_DATA = { + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [13.68896484375, 48.55297816440071], + }, + "properties": {"_umap_options": {"color": "DarkCyan"}, "name": "Here"}, + } + ], + "_umap_options": {"displayOnLoad": True, "name": "FooBarFoo"}, +} +FIXTURES = Path(__file__).parent.parent / "fixtures" + + +@pytest.fixture +def pictos(): + path = FIXTURES / "star.svg" + Pictogram(name="star", pictogram=ContentFile(path.read_text(), path.name)).save() + path = FIXTURES / "circle.svg" + Pictogram(name="circle", pictogram=ContentFile(path.read_text(), path.name)).save() + + +def test_can_change_picto_at_map_level(map, live_server, page, pictos): + # Faster than doing a login + map.edit_status = Map.ANONYMOUS + map.save() + DataLayerFactory(map=map, data=DATALAYER_DATA) + page.goto(f"{live_server.url}{map.get_absolute_url()}?edit") + marker = page.locator(".umap-div-icon img") + expect(marker).to_have_count(1) + # Should have default img + expect(marker).to_have_attribute("src", "/static/umap/img/marker.png") + edit_settings = page.get_by_title("Edit map settings") + expect(edit_settings).to_be_visible() + edit_settings.click() + shape_settings = page.get_by_text("Default shape properties") + expect(shape_settings).to_be_visible() + shape_settings.click() + define = page.locator(".umap-field-iconUrl .define") + undefine = page.locator(".umap-field-iconUrl .undefine") + expect(define).to_be_visible() + expect(undefine).to_be_hidden() + define.click() + symbols = page.locator(".umap-pictogram-choice.visible") + expect(symbols).to_have_count(2) + search = page.locator(".umap-pictogram-list input") + search.type("star") + expect(symbols).to_have_count(1) + symbols.click() + expect(marker).to_have_attribute("src", "/uploads/pictogram/star.svg") + undefine.click() + expect(marker).to_have_attribute("src", "/static/umap/img/marker.png")