From 3b89c22c23c76f93a13efb5f3db9745519a318f3 Mon Sep 17 00:00:00 2001 From: Joachim Schleicher Date: Tue, 28 Nov 2023 22:05:44 +0100 Subject: [PATCH] add title and icon to buttons * search and share icons on the left get an `title` attribute * all panels start with an `h3` headline including the corresponding icon * thus add smaller versions of the 24px-icons to 16.svg or 16-white.svg * unify strings for button and headline to match --- umap/static/umap/img/16-white.svg | 2 + umap/static/umap/img/16.svg | 8 + umap/static/umap/img/source/16-white.svg | 978 +++++++++++++++--- umap/static/umap/img/source/16.svg | 845 ++++++++++++--- umap/static/umap/js/umap.controls.js | 11 +- umap/static/umap/js/umap.core.js | 1 + .../umap/js/umap.datalayer.permissions.js | 4 +- umap/static/umap/js/umap.importer.js | 2 +- umap/static/umap/js/umap.permissions.js | 4 +- umap/static/umap/map.css | 20 +- 10 files changed, 1603 insertions(+), 272 deletions(-) diff --git a/umap/static/umap/img/16-white.svg b/umap/static/umap/img/16-white.svg index 96e30d4f..8dfa888c 100644 --- a/umap/static/umap/img/16-white.svg +++ b/umap/static/umap/img/16-white.svg @@ -164,5 +164,7 @@ + + diff --git a/umap/static/umap/img/16.svg b/umap/static/umap/img/16.svg index 0c9fccc1..9aaa84c1 100644 --- a/umap/static/umap/img/16.svg +++ b/umap/static/umap/img/16.svg @@ -39,6 +39,14 @@ + + + + + + + + diff --git a/umap/static/umap/img/source/16-white.svg b/umap/static/umap/img/source/16-white.svg index 1ee9b790..0716d4c2 100644 --- a/umap/static/umap/img/source/16-white.svg +++ b/umap/static/umap/img/source/16-white.svg @@ -1,189 +1,879 @@ - - - - + + + + - - + + - - + + - - - - - - - - - - - - - + + + + + + + + + + + + + - + - + image/svg+xml - + - -   - - - - + +   + + + + - - - - - - - - - - -   - - + + + + + + + + + + +   + + - - - - - - + + + + + + - - - - - - - + + + + + + + - - - - - - - - + + + + + + + + - - + + - - - + + + - - - - + + + + - - - + + + - - - - + + + + - - + + - - - - + + + + - - + + - - - - + + + + - - + + - - - - + + + + - - + + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - + + + - - - - + + + + - - - - - + + + + + - - - + + + - - + + + + diff --git a/umap/static/umap/img/source/16.svg b/umap/static/umap/img/source/16.svg index 5009bbcc..95a76cf8 100644 --- a/umap/static/umap/img/source/16.svg +++ b/umap/static/umap/img/source/16.svg @@ -1,160 +1,767 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + - + image/svg+xml - + - -   - - - - + +   + + + + - - - - + + + + - - - - - - - - - - - + + + + + + + + + + + - - -   - - + + +   + + - - - - - - - + + + + + + + + - - - + + + + + + - - - - - - - - + + + + + + + + + + + + - - - + + + - - - - - - - + + + + + + + - - - + + + - - - - + + + + - - - + + + - - - - - - + + + + + + - - - + + + - - - - - - - - + + + + + + + + - - - + + + - - - + + + - - - - - + + + + + - - - - - - + + + + + + - - - + + + - + diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index ad6cff9f..49e3590a 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -27,7 +27,7 @@ L.U.EditPropertiesAction = L.U.BaseAction.extend({ options: { helpMenu: true, className: 'update-map-settings dark', - tooltip: L._('Edit map settings'), + tooltip: L._('Edit map properties'), }, addHooks: function () { @@ -403,7 +403,7 @@ L.Control.Embed = L.Control.extend({ const shareButton = L.DomUtil.createButton( '', container, - L._('Embed and share this map'), + L._('Share, download and embed this map'), map.renderShareBox, map ) @@ -1076,6 +1076,9 @@ L.U.Map.include({ renderShareBox: function () { const container = L.DomUtil.create('div', 'umap-share') + const title = L.DomUtil.create('h3', '', container) + title.textContent = L._('Share, download and embed this map') + const embedTitle = L.DomUtil.add('h4', '', container, L._('Embed the map')) const iframe = L.DomUtil.create('textarea', 'umap-share-iframe', container) const urlTitle = L.DomUtil.add('h4', '', container, L._('Direct link')) @@ -1369,7 +1372,7 @@ L.U.SearchControl = L.Control.extend({ L.DomUtil.createButton( '', container, - L._('Search a place name'), + L._('Search location'), (e) => { L.DomEvent.stop(e) this.openPanel(map) @@ -1385,7 +1388,7 @@ L.U.SearchControl = L.Control.extend({ noResultLabel: L._('No results'), } if (map.options.photonUrl) options.url = map.options.photonUrl - const container = L.DomUtil.create('div', '') + const container = L.DomUtil.create('div', 'umap-search') const title = L.DomUtil.create('h3', '', container) title.textContent = L._('Search location') diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js index 7b0fbb10..6631f6ad 100644 --- a/umap/static/umap/js/umap.core.js +++ b/umap/static/umap/js/umap.core.js @@ -325,6 +325,7 @@ L.DomUtil.createFieldset = (container, legend, options) => { L.DomUtil.createButton = (className, container, content, callback, context) => { const el = L.DomUtil.add('button', className, container, content) el.type = 'button' + el.title = content if (callback) { L.DomEvent.on(el, 'click', L.DomEvent.stop).on(el, 'click', callback, context) } diff --git a/umap/static/umap/js/umap.datalayer.permissions.js b/umap/static/umap/js/umap.datalayer.permissions.js index 9e3e6211..f77e086f 100644 --- a/umap/static/umap/js/umap.datalayer.permissions.js +++ b/umap/static/umap/js/umap.datalayer.permissions.js @@ -38,7 +38,9 @@ L.U.DataLayerPermissions = L.Class.extend({ }, ], ], - builder = new L.U.FormBuilder(this, fields, {className: 'umap-form datalayer-permissions'}), + builder = new L.U.FormBuilder(this, fields, { + className: 'umap-form datalayer-permissions', + }), form = builder.build() container.appendChild(form) }, diff --git a/umap/static/umap/js/umap.importer.js b/umap/static/umap/js/umap.importer.js index 9cd96c76..83b37699 100644 --- a/umap/static/umap/js/umap.importer.js +++ b/umap/static/umap/js/umap.importer.js @@ -7,7 +7,7 @@ L.U.Importer = L.Class.extend({ build: function () { this.container = L.DomUtil.create('div', 'umap-upload') - this.title = L.DomUtil.add('h4', '', this.container, L._('Import data')) + this.title = L.DomUtil.add('h3', '', this.container, L._('Import data')) this.presetBox = L.DomUtil.create('div', 'formbox', this.container) this.presetSelect = L.DomUtil.create('select', '', this.presetBox) this.fileBox = L.DomUtil.create('div', 'formbox', this.container) diff --git a/umap/static/umap/js/umap.permissions.js b/umap/static/umap/js/umap.permissions.js index 1687e142..8945e18e 100644 --- a/umap/static/umap/js/umap.permissions.js +++ b/umap/static/umap/js/umap.permissions.js @@ -59,7 +59,7 @@ L.U.MapPermissions = L.Class.extend({ }) const container = L.DomUtil.create('div', 'permissions-panel'), fields = [], - title = L.DomUtil.create('h4', '', container) + title = L.DomUtil.create('h3', '', container) if (this.isAnonymousMap()) { if (this.options.anonymous_edit_url) { const helpText = `${L._('Secret edit link:')}
${ @@ -124,7 +124,7 @@ L.U.MapPermissions = L.Class.extend({ this ) } - L.DomUtil.add('h3', '', container, L._('Datalayers')) + L.DomUtil.add('h4', '', container, L._('Datalayers')) this.map.eachDataLayer((datalayer) => { datalayer.permissions.edit(container) }) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 87f8b8e0..33cd2224 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -250,9 +250,13 @@ ul.photon-autocomplete { .manage-datalayers { background-position: -36px -72px; } +.permissions-panel h3:before, .umap-edit-container h3:before, .umap-feature-properties:before, -.umap-layer-properties-container h3:before { +.umap-layer-properties-container h3:before, +.umap-search h3:before, +.umap-share h3:before, +.umap-upload h3:before { height: 24px; width: 24px; background-repeat: no-repeat; @@ -266,6 +270,20 @@ ul.photon-autocomplete { .umap-edit-container h3:before { background-position: -27px -93px; } +.permissions-panel h3:before { + background-position: -144px -117px; +} +.umap-upload h3:before { + background-position: -144px -93px; +} +.umap-search h3:before { + background-image: url('./img/16.svg'); + background-position: -27px -117px; +} +.umap-share h3:before { + background-image: url('./img/16.svg'); + background-position: 0 -117px; +} .umap-feature-properties.marker:before { background-position: -72px -117px; }