diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index c47bd062..b7f11b0e 100644 --- a/umap/static/umap/base.css +++ b/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 { 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 8bee0ff9..8948489d 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/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', 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() diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 553f6047..666694f1 100644 --- a/umap/static/umap/map.css +++ b/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 */