feat: show recent picto in a separate tab

umap/static/umap/js/umap.forms.js

@@ -546,7 +546,8 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
     if (!error) this.pictogram_list = pictogram_list
     this.buildTabs()
     const value = this.value()
-    if (!value || L.Util.isPath(value)) this.showSymbolsTab()
+    if (U.Icon.RECENT.length) this.showRecentTab()
+    else if (!value || L.Util.isPath(value)) this.showSymbolsTab()
     else if (L.Util.isRemoteUrl(value) || L.Util.isDataImage(value)) this.showURLTab()
     else this.showCharsTab()
     const closeButton = L.DomUtil.createButton(
@@ -566,6 +567,20 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
 
   buildTabs: function () {
     this.tabs.innerHTML = ''
+    if (U.Icon.RECENT.length) {
+      const recent = L.DomUtil.add(
+        'button',
+        'flat tab-recent',
+        this.tabs,
+        L._('Recent')
+      )
+      L.DomEvent.on(recent, 'click', L.DomEvent.stop).on(
+        recent,
+        'click',
+        this.showRecentTab,
+        this
+      )
+    }
     const symbol = L.DomUtil.add(
         'button',
         'flat tab-symbols',
@@ -656,10 +671,10 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
     this.updatePreview()
   },
 
-  addCategory: function (category, items) {
+  addCategory: function (items, name) {
     const parent = L.DomUtil.create('div', 'umap-pictogram-category'),
-      title = L.DomUtil.add('h6', '', parent, category),
       grid = L.DomUtil.create('div', 'umap-pictogram-grid', parent)
+    if (name) L.DomUtil.add('h6', '', parent, name)
     let status = false
     for (let item of items) {
       status = this.addIconPreview(item, grid) || status
@@ -667,15 +682,6 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
     if (status) this.grid.appendChild(parent)
   },
 
-  showLastUsed: function () {
-    if (U.Icon.LAST_USED.length) {
-      const items = U.Icon.LAST_USED.map((src) => ({
-        src,
-      }))
-      this.addCategory(L._('Used in this map'), items)
-    }
-  },
-
   buildSymbolsList: function () {
     this.grid.innerHTML = ''
     const categories = {}
@@ -688,23 +694,41 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
     const sorted = Object.entries(categories).toSorted(([a], [b]) =>
       L.Util.naturalSort(a, b)
     )
-    this.showLastUsed()
+    for (let [name, items] of sorted) {
-    for (let [category, items] of sorted) {
+      this.addCategory(items, name)
-      this.addCategory(category, items)
     }
   },
 
+  buildRecentList: function () {
+    this.grid.innerHTML = ''
+    const items = U.Icon.RECENT.map((src) => ({
+      src,
+    }))
+    this.addCategory(items)
+  },
+
   isDefault: function () {
     return !this.value() || this.value() === U.DEFAULT_ICON_URL
   },
 
-  showSymbolsTab: async function () {
+  addGrid: function (onSearch) {
-    this.openTab('symbols')
     this.searchInput = L.DomUtil.create('input', '', this.body)
     this.searchInput.type = 'search'
     this.searchInput.placeholder = L._('Search')
     this.grid = L.DomUtil.create('div', '', this.body)
-    L.DomEvent.on(this.searchInput, 'input', this.buildSymbolsList, this)
+    L.DomEvent.on(this.searchInput, 'input', onSearch, this)
+  },
+
+  showRecentTab: function () {
+    if (!U.Icon.RECENT.length) return
+    this.openTab('recent')
+    this.addGrid(this.buildRecentList)
+    this.buildRecentList()
+  },
+
+  showSymbolsTab: function () {
+    this.openTab('symbols')
+    this.addGrid(this.buildSymbolsList)
     this.buildSymbolsList()
   },
 

umap/static/umap/js/umap.icon.js

@@ -1,6 +1,6 @@
 U.Icon = L.DivIcon.extend({
   statics: {
-    LAST_USED: [],
+    RECENT: [],
   },
   initialize: function (map, options) {
     this.map = map
@@ -17,11 +17,11 @@ U.Icon = L.DivIcon.extend({
     }
   },
 
-  _setLastUsed: function (url) {
+  _setRecent: function (url) {
     if (L.Util.hasVar(url)) return
-    if (url === this.map.options.default_iconUrl) return
+    if (url === U.DEFAULT_ICON_URL) return
-    if (U.Icon.LAST_USED.indexOf(url) === -1) {
+    if (U.Icon.RECENT.indexOf(url) === -1) {
-      U.Icon.LAST_USED.push(url)
+      U.Icon.RECENT.push(url)
     }
   },
 
@@ -29,7 +29,7 @@ U.Icon = L.DivIcon.extend({
     let url
     if (this.feature && this.feature._getIconUrl(name)) {
       url = this.feature._getIconUrl(name)
-      this._setLastUsed(url)
+      this._setRecent(url)
     } else {
       url = this.options[`${name}Url`]
     }

umap/tests/integration/test_picto.py

@@ -58,6 +58,8 @@ def test_can_change_picto_at_map_level(map, live_server, page, pictos):
     expect(define).to_be_visible()
     expect(undefine).to_be_hidden()
     define.click()
+    # No picto defined yet, so recent should not be visible
+    expect(page.get_by_text("Recent")).to_be_hidden()
     symbols = page.locator(".umap-pictogram-choice")
     expect(symbols).to_have_count(2)
     search = page.locator(".umap-pictogram-body input")
@@ -93,8 +95,14 @@ def test_can_change_picto_at_datalayer_level(map, live_server, page, pictos):
     expect(define).to_be_visible()
     expect(undefine).to_be_hidden()
     define.click()
+    # Map has an icon defined, so it shold open on Recent tab
     symbols = page.locator(".umap-pictogram-choice")
-    expect(symbols).to_have_count(3)
+    expect(page.get_by_text("Recent")).to_be_visible()
+    expect(symbols).to_have_count(1)
+    symbol_tab = page.get_by_role("button", name="Symbol")
+    expect(symbol_tab).to_be_visible()
+    symbol_tab.click()
+    expect(symbols).to_have_count(2)
     search = page.locator(".umap-pictogram-body input")
     search.type("circle")
     expect(symbols).to_have_count(1)
@@ -127,8 +135,14 @@ def test_can_change_picto_at_marker_level(map, live_server, page, pictos):
     expect(define).to_be_visible()
     expect(undefine).to_be_hidden()
     define.click()
+    # Map has an icon defined, so it shold open on Recent tab
     symbols = page.locator(".umap-pictogram-choice")
-    expect(symbols).to_have_count(3)  # Include "Last used" picto
+    expect(page.get_by_text("Recent")).to_be_visible()
+    expect(symbols).to_have_count(1)
+    symbol_tab = page.get_by_role("button", name="Symbol")
+    expect(symbol_tab).to_be_visible()
+    symbol_tab.click()
+    expect(symbols).to_have_count(2)
     search = page.locator(".umap-pictogram-body input")
     search.type("circle")
     expect(symbols).to_have_count(1)
@@ -157,10 +171,6 @@ def test_can_use_remote_url_as_picto(map, live_server, page, pictos):
     define = page.locator(".umap-field-iconUrl .define")
     expect(define).to_be_visible()
     define.click()
-    expect(page.get_by_text("Used in this map")).to_be_hidden()
-    # Only default symbols
-    symbols = page.locator(".umap-pictogram-choice")
-    expect(symbols).to_have_count(2)
     url_tab = page.get_by_role("button", name="URL")
     input_el = page.get_by_placeholder("Add image URL")
     expect(input_el).to_be_hidden()
@@ -179,13 +189,10 @@ def test_can_use_remote_url_as_picto(map, live_server, page, pictos):
     modify = page.locator(".umap-field-iconUrl").get_by_text("Change")
     expect(modify).to_be_visible()
     modify.click()
-    # Should be on URL tab
+    # Should be on Recent tab
-    expect(input_el).to_be_visible()
+    symbols = page.locator(".umap-pictogram-choice")
-    # Symbol should be visible in symbols b
+    expect(page.get_by_text("Recent")).to_be_visible()
-    symbols_tab = page.get_by_role("button", name="Symbol")
+    expect(symbols).to_have_count(1)
-    symbols_tab.click()
-    expect(page.get_by_text("Used in this map")).to_be_visible()
-    expect(symbols).to_have_count(3)
 
 
 def test_can_use_char_as_picto(map, live_server, page, pictos):
@@ -225,4 +232,6 @@ def test_can_use_char_as_picto(map, live_server, page, pictos):
     expect(preview).to_be_visible()
     preview.click()
     # Should be on URL tab
-    expect(input_el).to_be_visible()
+    symbols = page.locator(".umap-pictogram-choice")
+    expect(page.get_by_text("Recent")).to_be_visible()
+    expect(symbols).to_have_count(1)