From d013d6b0e37dfd3abf5041412eef28e3d9773cfb Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Thu, 25 Apr 2024 10:32:44 +0200 Subject: [PATCH 1/6] 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() From b550c93b8795a665fcc7777a778ef946be853908 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 30 Apr 2024 20:11:34 +0200 Subject: [PATCH 2/6] wip: move owner link above tabs in caption --- umap/static/umap/js/umap.controls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 14dafa6e..30e58fef 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -667,8 +667,8 @@ 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) + this.browser.tabsMenu(container, 'info') if (this.options.description) { const description = L.DomUtil.element({ tagName: 'div', From 00a3c2fe340ba121d23df11d4e3d7bd6b9cc4621 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 30 Apr 2024 21:34:14 +0200 Subject: [PATCH 3/6] wip: change tabs rendering in browser and iconUrl form field --- umap/static/umap/base.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index 352d97cc..fa3db2e4 100644 --- a/umap/static/umap/base.css +++ b/umap/static/umap/base.css @@ -584,7 +584,8 @@ i.info { display: flex; justify-content: space-around; font-size: 1.2em; - padding-bottom: 20px; + margin-bottom: 20px; + border-bottom: 1px solid #444; } .flat-tabs button { padding: 10px; @@ -593,7 +594,7 @@ i.info { } .flat-tabs .on { font-weight: bold; - border-bottom: 1px solid #444; + border-bottom: 2px solid #444; } .dark .flat-tabs button { color: #fff; From 4e7f1e43c0ce40def20627ca7f4e2b64191349b5 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Wed, 1 May 2024 17:35:05 +0200 Subject: [PATCH 4/6] wip: make owner closer to title in caption box --- umap/static/umap/map.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 553f6047..36c51cff 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -979,7 +979,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 */ From 6cc34d1f973d073d6ec2cc5ac038b6e8e7435907 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Wed, 1 May 2024 17:35:28 +0200 Subject: [PATCH 5/6] wip: change flat tags colors (in browser/caption/iconUrl field) --- umap/static/umap/base.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index fa3db2e4..b7f11b0e 100644 --- a/umap/static/umap/base.css +++ b/umap/static/umap/base.css @@ -585,20 +585,23 @@ i.info { justify-content: space-around; font-size: 1.2em; margin-bottom: 20px; - border-bottom: 1px solid #444; + border-bottom: 1px solid #bebebe; } .flat-tabs button { padding: 10px; text-decoration: none; cursor: pointer; + border-bottom: 1px solid transparent; } +.flat-tabs button:hover, .flat-tabs .on { font-weight: bold; - border-bottom: 2px solid #444; + 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; } From 5bfc65167af67404f2cc149addd1c406237c5f00 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Wed, 1 May 2024 17:41:31 +0200 Subject: [PATCH 6/6] wip: refactor credits css in caption --- umap/static/umap/js/umap.controls.js | 2 -- umap/static/umap/map.css | 6 ++++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 30e58fef..9b2358a6 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -722,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) @@ -736,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/map.css b/umap/static/umap/map.css index 36c51cff..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;