From 69939ec2a38dddec50d9b822c69ca6fa046f470b Mon Sep 17 00:00:00 2001 From: Joachim Schleicher Date: Fri, 8 Dec 2023 20:58:49 +0100 Subject: [PATCH] add title and heading to layer and tilelayer --- umap/static/umap/base.css | 3 +- umap/static/umap/img/16-white.svg | 22 ++- umap/static/umap/img/source/16-white.svg | 173 ++++++++++++++++++----- umap/static/umap/js/umap.controls.js | 19 +-- umap/static/umap/map.css | 8 +- 5 files changed, 175 insertions(+), 50 deletions(-) diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index dc504a30..5a05467e 100644 --- a/umap/static/umap/base.css +++ b/umap/static/umap/base.css @@ -529,7 +529,8 @@ i.info { .umap-layer-properties-container, .umap-browse-data, .umap-facet-search, -.umap-browse-datalayers { +.umap-browse-datalayers, +.umap-tilelayer-switcher-container { padding: 0 10px; } .umap-field-datalist { diff --git a/umap/static/umap/img/16-white.svg b/umap/static/umap/img/16-white.svg index 8dfa888c..7a42f5bf 100644 --- a/umap/static/umap/img/16-white.svg +++ b/umap/static/umap/img/16-white.svg @@ -1,4 +1,4 @@ - + @@ -9,6 +9,9 @@ + + + @@ -166,5 +169,22 @@ + + + + + + + + + + + + + + + + + diff --git a/umap/static/umap/img/source/16-white.svg b/umap/static/umap/img/source/16-white.svg index 0716d4c2..81bf9d91 100644 --- a/umap/static/umap/img/source/16-white.svg +++ b/umap/static/umap/img/source/16-white.svg @@ -3,7 +3,7 @@ + + + + @@ -205,7 +224,7 @@ inkscape:connector-curvature="0" id="path3789" style="font-weight:bold;font-size:12px;-inkscape-font-specification:'Sans Bold';fill:#f2f2f2;fill-opacity:1;stroke:#999999;stroke-width:0.25;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" - d="m 9,1046.0464 h -2.3698034 v -0.3223 c 0,-0.3596 0.072207,-0.6775 0.2166302,-0.9539 0.1444174,-0.2807 0.4485749,-0.636 0.9124728,-1.0658 l 0.4201314,-0.3816 c 0.249449,-0.228 0.4310681,-0.4429 0.5448577,-0.6446 0.1181576,-0.2019 0.1772384,-0.4036 0.177243,-0.6053 -4.6e-6,-0.3071 -0.1050376,-0.5462 -0.3150985,-0.7171 -0.2100697,-0.1756 -0.5032861,-0.2632 -0.87965,-0.2632 -0.3544889,0 -0.7374207,0.075 -1.1487968,0.2237 -0.4113804,0.1446 -0.840264,0.3618 -1.2866522,0.6513 v -2.0659 c 0.5295391,-0.184 1.0131273,-0.32 1.4507661,-0.4077 0.437634,-0.088 0.8599531,-0.1317 1.2669587,-0.1317 1.0678292,0 1.8818328,0.2194 2.442012,0.6579 0.560169,0.4341 0.840256,1.0702 0.840263,1.9078 -7e-6,0.4298 -0.08535,0.8159 -0.256017,1.158 -0.170685,0.3377 -0.461713,0.7017 -0.873085,1.092 l -0.4201313,0.375 c -0.297598,0.272 -0.4923463,0.4913 -0.5842451,0.658 -0.091909,0.1622 -0.1378603,0.342 -0.1378556,0.5394 v 0.296 m -2.3698034,0.9739 h 2.3698034 v 2.342 h -2.3698034 v -2.342" + d="M 9,1046.0464 H 6.6301966 v -0.3223 c 0,-0.3596 0.072207,-0.6775 0.2166302,-0.9539 0.1444174,-0.2807 0.4485749,-0.636 0.9124728,-1.0658 l 0.4201314,-0.3816 c 0.249449,-0.228 0.4310681,-0.4429 0.5448577,-0.6446 0.1181576,-0.2019 0.1772384,-0.4036 0.177243,-0.6053 -4.6e-6,-0.3071 -0.1050376,-0.5462 -0.3150985,-0.7171 -0.2100697,-0.1756 -0.5032861,-0.2632 -0.87965,-0.2632 -0.3544889,0 -0.7374207,0.075 -1.1487968,0.2237 -0.4113804,0.1446 -0.840264,0.3618 -1.2866522,0.6513 v -2.0659 c 0.5295391,-0.184 1.0131273,-0.32 1.4507661,-0.4077 0.437634,-0.088 0.8599531,-0.1317 1.2669587,-0.1317 1.0678292,0 1.8818328,0.2194 2.442012,0.6579 0.560169,0.4341 0.840256,1.0702 0.840263,1.9078 -7e-6,0.4298 -0.08535,0.8159 -0.256017,1.158 -0.170685,0.3377 -0.461713,0.7017 -0.873085,1.092 l -0.4201313,0.375 c -0.297598,0.272 -0.4923463,0.4913 -0.5842451,0.658 -0.091909,0.1622 -0.1378603,0.342 -0.1378556,0.5394 v 0.296 m -2.3698034,0.9739 H 9 v 2.342 H 6.6301966 v -2.342" sodipodi:nodetypes="ccsccccccsccccsccccccccccccc" /> @@ -237,7 +256,7 @@ inkscape:connector-curvature="0" /> @@ -305,11 +324,11 @@ inkscape:connector-curvature="0" id="path4384-2" style="font-variant:normal;font-stretch:normal;font-size:20px;font-family:Arial;-inkscape-font-specification:Arial;fill:#f2f2f2;fill-opacity:1" - d="m 35.742187,999.43835 3.076172,-3.07617 -3.066406,-3.0664 1.191406,-1.19141 3.066407,3.06641 3.05664,-3.05664 1.171875,1.18164 -3.046875,3.05664 3.066406,3.0664 -1.191406,1.19138 -3.066406,-3.06638 -3.076172,3.07618 -1.181641,-1.18165" /> + d="m 35.742187,999.43835 3.076172,-3.07617 -3.066406,-3.0664 1.191406,-1.19141 3.066407,3.06641 3.05664,-3.05664 1.171875,1.18164 -3.046875,3.05664 3.066406,3.0664 -1.191406,1.19138 L 40,997.54382 36.923828,1000.62 35.742187,999.43835" /> @@ -427,7 +446,7 @@ + d="m 7,937.36218 v 2 H 8.8828125 L 15,942.42077 v 0.23438 l -6.7070312,6.70703 H 7 v 2 h 2 v -1.29297 l 6.707031,-6.70703 H 17 v -2 H 15.117188 L 9,938.30359 v -0.94141 z" /> + d="m 29,936.36218 v 2 h 0.927734 l -0.855468,12 H 28 v 2 h 2 v -1.19922 l 8,-1.60156 v 0.80078 h 2 v -2 h -0.777344 l 1.554688,-7 H 42 v -2 h -2 v 0.72656 l -9,-2.45312 v -1.27344 z" /> @@ -766,13 +785,13 @@ transform="matrix(0.71300568,0,0,0.66260978,53.493751,938.13028)" style="fill:none;stroke:#f2f2f2;stroke-width:1.45488;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"> @@ -795,13 +814,13 @@ + d="m 32.353516,820.00866 -0.707032,0.70704 3.646485,3.64648 -3.646485,3.64648 0.707032,0.70704 L 36,825.06921 l 3.646484,3.64649 0.707032,-0.70704 -3.646485,-3.64648 3.646485,-3.64648 -0.707032,-0.70704 L 36,823.65515 Z" /> @@ -875,5 +894,87 @@ fill="#f2f2f2" stroke="#999999" stroke-width="0.164949" /> + + + + + + + + + + + + + + + + + diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 49e3590a..4cd095cc 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -615,6 +615,8 @@ L.U.DataLayersControl = L.Control.extend({ openPanel: function () { if (!this.map.editEnabled) return const container = L.DomUtil.create('ul', 'umap-browse-datalayers') + const title = L.DomUtil.create('h3', '', container) + title.textContent = L._('Manage layers') this.map.eachDataLayerReverse(function (datalayer) { this.addDataLayer(container, datalayer, true) }, this) @@ -1174,7 +1176,6 @@ L.U.Map.include({ ) this.ui.openPanel({ data: { html: container } }) }, - }) L.U.TileLayerControl = L.Control.extend({ @@ -1201,11 +1202,15 @@ L.U.TileLayerControl = L.Control.extend({ }, openSwitcher: function (options) { - this._tilelayers_container = L.DomUtil.create( - 'ul', - 'umap-tilelayer-switcher-container' - ) + const container = L.DomUtil.create('div', 'umap-tilelayer-switcher-container') + const title = L.DomUtil.create('h3', '', container) + title.textContent = L._('Change tilelayers') + this._tilelayers_container = L.DomUtil.create('ul', '', container) this.buildList(options) + this.map.ui.openPanel({ + data: { html: container }, + className: options.className, + }) }, buildList: function (options) { @@ -1217,10 +1222,6 @@ L.U.TileLayerControl = L.Control.extend({ return this.addTileLayerElement(tilelayer, options) }, this) - this.map.ui.openPanel({ - data: { html: this._tilelayers_container }, - className: options.className, - }) }, addTileLayerElement: function (tilelayer, options) { diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 33cd2224..4810bace 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -251,11 +251,13 @@ ul.photon-autocomplete { background-position: -36px -72px; } .permissions-panel h3:before, +.umap-browse-datalayers h3:before, .umap-edit-container h3:before, .umap-feature-properties:before, .umap-layer-properties-container h3:before, .umap-search h3:before, .umap-share h3:before, +.umap-tilelayer-switcher-container h3:before, .umap-upload h3:before { height: 24px; width: 24px; @@ -284,6 +286,9 @@ ul.photon-autocomplete { background-image: url('./img/16.svg'); background-position: 0 -117px; } +.umap-tilelayer-switcher-container h3:before { + background-position: -98px -141px; +} .umap-feature-properties.marker:before { background-position: -72px -117px; } @@ -1116,9 +1121,6 @@ a.add-datalayer:hover, /* Tilelayer switcher */ /* ********************************* */ -.umap-tilelayer-switcher-container { - margin-top: 10px; -} .umap-tilelayer-switcher-container li { border: 1px solid rgb(116, 116, 116); border-radius: 4px 4px 4px 4px;