From c99892b51e0175616564462269c0b56d42dd5e1c Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Thu, 16 Nov 2023 11:40:18 +0100
Subject: [PATCH] Picto field: fix clicking on preview to open the form

---
 umap/static/umap/js/umap.forms.js    | 18 ++++++------------
 umap/static/umap/map.css             |  1 +
 umap/tests/integration/test_picto.py |  6 +++---
 3 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js
index 73802d15..2aa84e76 100644
--- a/umap/static/umap/js/umap.forms.js
+++ b/umap/static/umap/js/umap.forms.js
@@ -535,6 +535,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
 
   onDefine: function () {
     this.buttons.innerHTML = ''
+    this.footer.innerHTML = ''
     this.buildTabs()
     const value = this.value()
     if (!value || value.startsWith('/')) this.showSymbolsTab()
@@ -556,6 +557,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
   },
 
   buildTabs: function () {
+    this.tabs.innerHTML = ''
     const symbol = L.DomUtil.add(
         'button',
         'flat tab-symbols',
@@ -613,22 +615,14 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
     if (this.isDefault()) return
     if (!L.Util.hasVar(this.value())) {
       // Do not try to render URL with variables
+      const box = L.DomUtil.create('div', 'umap-pictogram-choice', this.buttons)
+      L.DomEvent.on(box, 'click', this.onDefine, this)
       if (this.isImg()) {
-        const img = L.DomUtil.create(
-          'img',
-          '',
-          L.DomUtil.create('div', 'umap-pictogram-choice', this.buttons)
-        )
+        const img = L.DomUtil.create('img', '', box)
         img.src = this.value()
-        L.DomEvent.on(img, 'click', this.showSymbolsTab, this)
       } else {
-        const el = L.DomUtil.create(
-          'span',
-          '',
-          L.DomUtil.create('div', 'umap-pictogram-choice', this.buttons)
-        )
+        const el = L.DomUtil.create('span', '', box)
         el.textContent = this.value()
-        L.DomEvent.on(el, 'click', this.showSymbolsTab, this)
       }
     }
     this.button = L.DomUtil.createButton(
diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index 1a1d1d19..d32e1d87 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -1269,6 +1269,7 @@ a.add-datalayer:hover,
     vertical-align: middle;
     color: white;
     font-weight: bold;
+    font-size: 1.2rem;
 }
 .umap-circle-icon {
     border: 1px solid white;
diff --git a/umap/tests/integration/test_picto.py b/umap/tests/integration/test_picto.py
index f36d462a..5a960f20 100644
--- a/umap/tests/integration/test_picto.py
+++ b/umap/tests/integration/test_picto.py
@@ -210,8 +210,8 @@ def test_can_use_char_as_picto(map, live_server, page, pictos):
     close.click()
     edit_settings.click()
     shape_settings.click()
-    modify = page.locator(".umap-field-iconUrl").get_by_text("Change")
-    expect(modify).to_be_visible()
-    modify.click()
+    preview = page.locator(".umap-pictogram-choice")
+    expect(preview).to_be_visible()
+    preview.click()
     # Should be on URL tab
     expect(input_el).to_be_visible()