Merge pull request #1774 from umap-project/browser-tabs

feat: add browser tabs submenu

umap/static/umap/base.css

@@ -580,20 +580,29 @@ 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;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #bebebe;
 }
-.pictogram-tabs button {
+.flat-tabs button {
     padding: 10px;
-    color: #fff;
     text-decoration: none;
     cursor: pointer;
+    border-bottom: 1px solid transparent;
 }
-.pictogram-tabs .on {
+.flat-tabs button:hover,
+.flat-tabs .on {
     font-weight: bold;
+    border-bottom: 1px solid #444;
+}
+.dark .flat-tabs button {
+    color: #fff;
+}
+.dark .flat-tabs button:hover,
+.dark .flat-tabs .on {
     border-bottom: 1px solid #fff;
 }
 .umap-pictogram-category h6 {

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

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

@@ -668,6 +668,7 @@ const ControlsMixin = {
     const container = L.DomUtil.create('div', 'umap-caption')
     L.DomUtil.createTitle(container, this.options.name, 'icon-caption')
     this.permissions.addOwnerLink('h5', container)
+    this.browser.tabsMenu(container, 'info')
     if (this.options.description) {
       const description = L.DomUtil.element({
         tagName: 'div',
@@ -721,7 +722,6 @@ const ControlsMixin = {
     } else {
       L.DomUtil.add('p', '', credits, L._('No licence has been set'))
     }
-    L.DomUtil.create('hr', '', credits)
     title = L.DomUtil.create('h5', '', credits)
     title.textContent = L._('Map background credits')
     const tilelayerCredit = L.DomUtil.create('p', '', credits)
@@ -735,7 +735,6 @@ const ControlsMixin = {
       parent: tilelayerCredit,
       safeHTML: this.selected_tilelayer.getAttribution(),
     })
-    L.DomUtil.create('hr', '', credits)
     const urls = {
       leaflet: 'http://leafletjs.com',
       django: 'https://www.djangoproject.com',

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

umap/static/umap/map.css

@@ -158,6 +158,12 @@
     margin-bottom: 5px!important;
     padding: 0.5rem;
 }
+.credits-container h5 {
+    margin-bottom: 5px;
+}
+.credits-container p {
+    margin-top: 5px;
+}
 .attribution-toggle {
     display: none;
     width: 24px;
@@ -979,7 +985,12 @@ a.umap-control-caption,
 .datalayer-name {
     cursor: pointer;
 }
-
+.umap-caption h3 {
+    margin-bottom: 0;
+}
+.umap-caption .umap-map-owner {
+    padding-left: 31px;
+}
 
 /* ********************************* */
 /*          Table Editor             */