wip: add browser tabs submenu

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 {

umap/static/umap/js/modules/browser.js

@@ -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')
+  }
 }

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)

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({

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()