From d013d6b0e37dfd3abf5041412eef28e3d9773cfb Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Thu, 25 Apr 2024 10:32:44 +0200
Subject: [PATCH] wip: add browser tabs submenu

---
 umap/static/umap/base.css              | 13 +++++++++----
 umap/static/umap/js/modules/browser.js | 17 ++++++++++++++++-
 umap/static/umap/js/modules/facets.js  |  1 +
 umap/static/umap/js/umap.controls.js   |  1 +
 umap/static/umap/js/umap.forms.js      |  2 +-
 5 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css
index c47bd062..352d97cc 100644
--- a/umap/static/umap/base.css
+++ b/umap/static/umap/base.css
@@ -580,20 +580,25 @@ i.info {
     margin-top: -8px;
     padding: 0 5px;
 }
-.pictogram-tabs {
+.flat-tabs {
     display: flex;
     justify-content: space-around;
     font-size: 1.2em;
     padding-bottom: 20px;
 }
-.pictogram-tabs button {
+.flat-tabs button {
     padding: 10px;
-    color: #fff;
     text-decoration: none;
     cursor: pointer;
 }
-.pictogram-tabs .on {
+.flat-tabs .on {
     font-weight: bold;
+    border-bottom: 1px solid #444;
+}
+.dark .flat-tabs button {
+    color: #fff;
+}
+.dark .flat-tabs .on {
     border-bottom: 1px solid #fff;
 }
 .umap-pictogram-category h6 {
diff --git a/umap/static/umap/js/modules/browser.js b/umap/static/umap/js/modules/browser.js
index 046324bb..f68dc457 100644
--- a/umap/static/umap/js/modules/browser.js
+++ b/umap/static/umap/js/modules/browser.js
@@ -44,7 +44,7 @@ export default class Browser {
       U.Icon.setIconContrast(icon, colorBox, symbol, bgcolor)
     }
     const viewFeature = (e) => {
-      feature.zoomTo({...e, callback: feature.view})
+      feature.zoomTo({ ...e, callback: feature.view })
     }
     DomEvent.on(zoom_to, 'click', viewFeature)
     DomEvent.on(title, 'click', viewFeature)
@@ -135,6 +135,7 @@ export default class Browser {
     DomEvent.disableClickPropagation(container)
 
     DomUtil.createTitle(container, translate('Browse data'), 'icon-layers')
+    this.tabsMenu(container, 'browse')
     const formContainer = DomUtil.create('div', '', container)
     this.dataContainer = DomUtil.create('div', '', container)
 
@@ -165,4 +166,18 @@ export default class Browser {
     DomEvent.on(button, 'click', map.openBrowser, map)
     return button
   }
+
+  tabsMenu(container, active) {
+    const tabs = L.DomUtil.create('div', 'flat-tabs', container)
+    const browse = L.DomUtil.add('button', 'flat tab-browse', tabs, L._('Data'))
+    DomEvent.on(browse, 'click', this.open, this)
+    if (this.map.options.facetKey) {
+      const facets = L.DomUtil.add('button', 'flat tab-facets', tabs, L._('Filters'))
+      DomEvent.on(facets, 'click', this.map.facets.open, this.map.facets)
+    }
+    const info = L.DomUtil.add('button', 'flat tab-info', tabs, L._('About'))
+    DomEvent.on(info, 'click', this.map.displayCaption, this.map)
+    let el = tabs.querySelector(`.tab-${active}`)
+    L.DomUtil.addClass(el, 'on')
+  }
 }
diff --git a/umap/static/umap/js/modules/facets.js b/umap/static/umap/js/modules/facets.js
index 2d0c6e62..00900b7b 100644
--- a/umap/static/umap/js/modules/facets.js
+++ b/umap/static/umap/js/modules/facets.js
@@ -69,6 +69,7 @@ export default class Facets {
       container,
       translate('Facet search')
     )
+    this.map.browser.tabsMenu(container, 'facets')
     const defined = this.getDefined()
     const names = Object.keys(defined)
     const facetProperties = this.compute(names, defined)
diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
index 2b349c7e..14dafa6e 100644
--- a/umap/static/umap/js/umap.controls.js
+++ b/umap/static/umap/js/umap.controls.js
@@ -667,6 +667,7 @@ const ControlsMixin = {
   displayCaption: function () {
     const container = L.DomUtil.create('div', 'umap-caption')
     L.DomUtil.createTitle(container, this.options.name, 'icon-caption')
+    this.browser.tabsMenu(container, 'info')
     this.permissions.addOwnerLink('h5', container)
     if (this.options.description) {
       const description = L.DomUtil.element({
diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js
index 4039f2d9..4098e0ec 100644
--- a/umap/static/umap/js/umap.forms.js
+++ b/umap/static/umap/js/umap.forms.js
@@ -475,7 +475,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
   build: function () {
     L.FormBuilder.BlurInput.prototype.build.call(this)
     this.buttons = L.DomUtil.create('div', '', this.parentNode)
-    this.tabs = L.DomUtil.create('div', 'pictogram-tabs', this.parentNode)
+    this.tabs = L.DomUtil.create('div', 'flat-tabs', this.parentNode)
     this.body = L.DomUtil.create('div', 'umap-pictogram-body', this.parentNode)
     this.footer = L.DomUtil.create('div', '', this.parentNode)
     this.updatePreview()