diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css
index ccbda217..844ae097 100644
--- a/umap/static/umap/base.css
+++ b/umap/static/umap/base.css
@@ -547,7 +547,6 @@ i.info {
.umap-layer-properties-container,
.umap-browse-data,
.umap-facet-search,
-.umap-browse-datalayers,
.umap-tilelayer-switcher-container {
padding: 0 10px;
}
@@ -678,13 +677,13 @@ input[type=hidden].blur + [type="button"] {
.leaflet-ui-container {
overflow-x: hidden;
}
-#umap-ui-container {
+#umap-panel {
/* Added for playwright to consider the element as non visible */
/* as being out of the visible viewport is not enough */
visibility: hidden;
position: absolute;
bottom: 0;
- padding: 0 10px;
+ padding: 10px;
border-left: 1px solid var(--color-lightGray);
overflow-x: auto;
z-index: 1010;
@@ -692,23 +691,19 @@ input[type=hidden].blur + [type="button"] {
opacity: 0.98;
cursor: initial;
}
-#umap-ui-container.login-panel {
- position: fixed; /* Should not scroll when used in content pages (like home page) */
- z-index: 1011; /* Above a map panel if any */
-}
-#umap-ui-container.dark {
+#umap-panel.dark {
border-left: 1px solid #222;
background-color: var(--color-darkGray);
color: #efefef;
}
-#umap-ui-container.fullwidth {
+#umap-panel.fullwidth {
width: 100%;
right: -100%;
z-index: 10000;
padding-left: 0;
padding-right: 0;
}
-.umap-caption-bar-enabled #umap-ui-container {
+.umap-caption-bar-enabled #umap-panel {
bottom: 46px;
}
.leaflet-top,
@@ -718,25 +713,25 @@ input[type=hidden].blur + [type="button"] {
.umap-ui .leaflet-right {
right: 400px;
}
-#umap-ui-container,
+#umap-panel,
#umap-alert-container,
#umap-tooltip-container {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing: border-box;
}
-#umap-ui-container .umap-popup-content img {
+#umap-panel .umap-popup-content img {
/* See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847 */
max-width: 99% !important;
}
-#umap-ui-container .umap-popup-content {
+#umap-panel .umap-popup-content {
max-height: inherit;
}
-#umap-ui-container .body {
+#umap-panel .body {
clear: both;
height: calc(100% - 54px); /* Minus size of toolbox */
}
-#umap-ui-container .toolbox {
+#umap-panel .toolbox {
padding: 5px 10px;
overflow: hidden;
display: flex;
@@ -745,7 +740,7 @@ input[type=hidden].blur + [type="button"] {
justify-content: flex-start;
gap: 5px;
}
-#umap-ui-container .toolbox li {
+#umap-panel .toolbox li {
color: #2e3436;
line-height: 32px;
cursor: pointer;
@@ -755,15 +750,15 @@ input[type=hidden].blur + [type="button"] {
border: 1px solid #b6b6b3;
border-radius: 2px;
}
-#umap-ui-container.dark .toolbox li {
+#umap-panel.dark .toolbox li {
color: #d3dfeb;
border: 1px solid #202425;
}
-#umap-ui-container .toolbox li:hover {
+#umap-panel .toolbox li:hover {
color: #2e3436;
background-color: #d4d4d2;
}
-#umap-ui-container.dark .toolbox li:hover {
+#umap-panel.dark .toolbox li:hover {
color: #eeeeec;
background-color: #353c3e;
}
@@ -897,6 +892,7 @@ input:invalid {
/* *********** */
/* Close link */
/* *********** */
+.umap-resize-icon,
.umap-close-icon {
background-repeat: no-repeat;
background-image: url('./img/16.svg');
@@ -905,6 +901,10 @@ input:invalid {
padding: 0 10px;
vertical-align: middle;
}
+.umap-resize-icon {
+ background-position: -76px -150px;
+}
+.dark .umap-resize-icon,
.dark .umap-close-icon {
background-image: url('./img/16-white.svg');
}
@@ -963,35 +963,36 @@ input:invalid {
/* Mobile */
/* *********** */
@media all and (orientation:landscape) {
- .umap-edit-enabled #umap-ui-container {
+ .umap-edit-enabled #umap-panel {
top: 46px;
}
- #umap-ui-container {
+ #umap-panel {
width: 400px;
right: -400px;
top: 0;
}
- .umap-ui #umap-ui-container {
+ .umap-ui #umap-panel {
right: 0;
visibility: visible;
}
- #umap-ui-container.condensed {
+ #umap-panel.condensed {
margin-top: 10px;
margin-right: 10px;
- max-height: 300px;
+ max-height: 500px;
+ bottom: initial;
width: 390px;
- border-radius: 10px;
+ border-radius: 5px;
}
}
@media all and (orientation:portrait) {
- #umap-ui-container {
+ #umap-panel {
height: 50%;
max-height: 400px;
width: 100%;
bottom: 0;
right: -100%;
}
- .umap-ui #umap-ui-container {
+ .umap-ui #umap-panel {
right: 0;
visibility: visible;
}
diff --git a/umap/static/umap/img/16-white.svg b/umap/static/umap/img/16-white.svg
index 7a42f5bf..022e413f 100644
--- a/umap/static/umap/img/16-white.svg
+++ b/umap/static/umap/img/16-white.svg
@@ -186,5 +186,7 @@
+
+
diff --git a/umap/static/umap/img/16.svg b/umap/static/umap/img/16.svg
index 10d76ca4..e046e342 100644
--- a/umap/static/umap/img/16.svg
+++ b/umap/static/umap/img/16.svg
@@ -178,5 +178,7 @@
+
+
diff --git a/umap/static/umap/img/source/16-white.svg b/umap/static/umap/img/source/16-white.svg
index 81bf9d91..11ab2c03 100644
--- a/umap/static/umap/img/source/16-white.svg
+++ b/umap/static/umap/img/source/16-white.svg
@@ -1,980 +1,214 @@
-
diff --git a/umap/static/umap/js/modules/browser.js b/umap/static/umap/js/modules/browser.js
index 474183b1..288b7a35 100644
--- a/umap/static/umap/js/modules/browser.js
+++ b/umap/static/umap/js/modules/browser.js
@@ -72,9 +72,10 @@ export default class Browser {
}
addDataLayer(datalayer, parent) {
+ let className = `orderable datalayer ${datalayer.getHidableClass()}`
const container = DomUtil.create(
'div',
- `orderable ${datalayer.getHidableClass()}`,
+ className,
parent
),
headline = DomUtil.create('h5', '', container)
@@ -133,15 +134,14 @@ export default class Browser {
open() {
// Get once but use it for each feature later
this.filterKeys = this.map.getFilterKeys()
- const container = DomUtil.create('div', 'umap-browse-data')
+ const container = DomUtil.create('div')
// HOTFIX. Remove when this is released:
// https://github.com/Leaflet/Leaflet/pull/9052
DomEvent.disableClickPropagation(container)
- const title = DomUtil.add('h3', 'umap-browse-title', container, translate('Browse data'))
-
+ const title = DomUtil.add('h3', '', container, translate('Browse data'))
const formContainer = DomUtil.create('div', '', container)
- const dataContainer = DomUtil.create('div', 'umap-browse-features', container)
+ const dataContainer = DomUtil.create('div', '', container)
const fields = [
['options.filter', { handler: 'Input', placeholder: translate('Filter') }],
@@ -153,10 +153,11 @@ export default class Browser {
})
formContainer.appendChild(builder.build())
+ let className = 'umap-browser'
+ if (this.map.editEnabled) className += ' dark'
this.map.ui.openPanel({
data: { html: container },
- actions: [this.map._aboutLink()],
- className: 'condensed'
+ className: className
})
this.map.eachBrowsableDataLayer((datalayer) => {
diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
index d461c3a1..31732576 100644
--- a/umap/static/umap/js/umap.controls.js
+++ b/umap/static/umap/js/umap.controls.js
@@ -500,7 +500,7 @@ L.Control.Button = L.Control.extend({
U.DataLayersControl = L.Control.Button.extend({
options: {
position: 'topright',
- className: 'leaflet-control-browse',
+ className: 'umap-control-browse',
title: L._('Show datalayers'),
},
@@ -512,7 +512,7 @@ U.DataLayersControl = L.Control.Button.extend({
U.CaptionControl = L.Control.Button.extend({
options: {
position: 'topright',
- className: 'leaflet-control-caption',
+ className: 'umap-control-caption',
title: L._('About'),
},
diff --git a/umap/static/umap/js/umap.ui.js b/umap/static/umap/js/umap.ui.js
index 7434b38f..06f9d0dd 100644
--- a/umap/static/umap/js/umap.ui.js
+++ b/umap/static/umap/js/umap.ui.js
@@ -14,7 +14,7 @@ U.UI = L.Evented.extend({
L.DomEvent.on(this.container, 'wheel', L.DomEvent.stopPropagation)
L.DomEvent.on(this.container, 'MozMousePixelScroll', L.DomEvent.stopPropagation)
this._panel = L.DomUtil.create('div', '', this.container)
- this._panel.id = 'umap-ui-container'
+ this._panel.id = 'umap-panel'
this._alert = L.DomUtil.create('div', 'with-transition', this.container)
this._alert.id = 'umap-alert-container'
this._tooltip = L.DomUtil.create('div', '', this.container)
diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index b74f89b0..7d39e2d4 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -317,7 +317,6 @@ 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,
@@ -836,59 +835,6 @@ ul.photon-autocomplete {
}
-
-/* ********************************* */
-/* Datalayers Control */
-/* ********************************* */
-
-.leaflet-control-caption [type="button"],
-.leaflet-control-browse [type="button"] {
- background-image: url('./img/24.svg');
- width: 40px;
- height: 40px;
- background-position: -34px -70px;
- background-size: 180px;
-}
-.leaflet-control-caption [type="button"] {
- background-position: -70px -70px;
-}
-.umap-edit-enabled .leaflet-control-caption [type="button"],
-.umap-edit-enabled .leaflet-control-browse [type="button"] {
- background-image: url('./img/24-white.svg');
- background-color: var(--color-darkGray);
-}
-.search-result-tools i,
-.leaflet-inplace-toolbar a,
-.umap-browse-features i,
-.umap-caption i,
-.umap-browse-datalayers i {
- background-repeat: no-repeat;
- background-image: url('./img/16.svg');
- display: inline;
- padding: 0 10px;
- cursor: pointer;
- height: 24px;
- line-height: 24px;
- vertical-align: middle;
-}
-.dark .umap-browse-datalayers i {
- background-image: url('./img/16-white.svg');
-}
-.umap-browse-features ul {
- display: none;
-}
-.show-list ul {
- display: initial;
-}
-[draggable] .drag-handle {
- display: none;
-}
-.umap-edit-enabled [draggable] .drag-handle {
- background-position: -72px -72px;
- margin-right: 5px;
- cursor: move;
- display: initial;
-}
.leaflet-inplace-toolbar a {
background-image: url('./img/16-white.svg');
background-color: var(--color-darkGray)!important;
@@ -962,12 +908,12 @@ ul.photon-autocomplete {
.umap-extract-shape-from-multi{
background-position: -119px 2px;
}
-.umap-browse-features .feature-title {
+.umap-browser .feature-title {
width: inherit;
cursor: inherit;
padding-left: 6px;
}
-.umap-browse-features .feature-title {
+.umap-browser .feature-title {
font-size: 12px;
cursor: pointer;
}
@@ -987,79 +933,6 @@ a.add-datalayer:before {
a.add-datalayer:hover {
background-color: rgb(99, 99, 99);
}
-.umap-browse-data .off .feature {
- display: none;
-}
-
-
-/* ********************************* */
-/* Features browser panel */
-/* ********************************* */
-
-.umap-facet-search .formbox,
-.umap-browse-features > div {
- border: 1px solid #d3d3d3;
- margin-bottom: 14px;
- border-radius: 2px;
-}
-.umap-browse-features h5, .umap-facet-search h5 {
- margin-bottom: 0;
- overflow: hidden;
- padding-left: 5px;
- height: 30px;
- line-height: 30px;
- background-color: var(--color-lightGray);
- color: #666;
-}
-.dark .umap-browse-features h5 {
- background-color: initial;
- color: white;
-}
-.umap-browse-features h5 span {
- margin-left: 10px;
-}
-.umap-browse-features li, .umap-facet-search li {
- padding: 2px 0;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-.umap-facet-search li:nth-child(even),
-.umap-browse-features li:nth-child(even) {
- background-color: #f8f8f3;
-}
-.umap-browse-features .feature-color {
- box-shadow: 0 0 2px 0 black inset;
- cursor: inherit;
- -moz-box-sizing:border-box;
- -webkit-box-sizing:border-box;
- box-sizing: border-box;
- background: none;
- display: inline-block;
- padding: 0;
- width: 24px;
- text-align: center;
- margin-left: 5px;
-}
-.umap-browse-features .feature-color img {
- width: 24px;
-}
-.umap-browse-features .feature-color span {
- font-style: normal;
- font-weight: bold;
-}
-.umap-browse-features .polygon .feature-color,
-.umap-browse-features .polyline .feature-color {
- box-shadow: 0 0 2px 0 black inset;
- background-image: url('./img/24.svg');
- background-size: 500%;
-}
-.umap-browse-features .polyline .feature-color {
- background-position: -72px -23px;
-}
-.umap-browse-features .polygon .feature-color {
- background-position: -48px -25px;
-}
.show-on-edit {
display: none!important;
}
@@ -1072,16 +945,140 @@ a.add-datalayer:hover {
.umap-edit-enabled .show-on-edit.block {
display: block!important;
}
-.umap-browse-description {
- font-size: 0.9em;
- margin-bottom: 14px;
+
+
+/* ********************************* */
+/* Browser panel */
+/* ********************************* */
+.umap-control-caption [type="button"],
+.umap-control-browse [type="button"] {
+ background-image: url('./img/24.svg');
+ width: 40px;
+ height: 40px;
+ background-position: -34px -70px;
+ background-size: 180px;
}
-.datalayer-toggle-list {
+.umap-control-caption [type="button"] {
+ background-position: -70px -70px;
+}
+.umap-edit-enabled .umap-control-caption [type="button"],
+.umap-edit-enabled .umap-control-browse [type="button"] {
+ background-image: url('./img/24-white.svg');
+ background-color: var(--color-darkGray);
+}
+.search-result-tools i,
+.leaflet-inplace-toolbar a,
+.umap-browser i,
+.umap-caption i {
+ background-repeat: no-repeat;
+ background-image: url('./img/16.svg');
+ display: inline;
+ padding: 0 10px;
+ cursor: pointer;
+ height: 24px;
+ line-height: 24px;
+ vertical-align: middle;
+}
+.umap-browser.dark .datalayer i {
+ background-image: url('./img/16-white.svg');
+}
+.umap-browser ul {
+ display: none;
+}
+.show-list ul {
+ display: block;
+}
+i.drag-handle {
+ display: none;
+ background-position: -72px -73px;
+ cursor: move;
+ margin-right: 10px;
+}
+.umap-edit-enabled [draggable] .drag-handle {
+ display: inline-block;
+}
+
+.umap-browser .off .feature {
+ display: none;
+}
+.umap-facet-search .formbox,
+.umap-browser .datalayer {
+ margin-bottom: 2px;
+ border-radius: 2px;
+}
+.umap-browser .datalayer ul {
+ border: 1px solid #d3d3d3;
+}
+.umap-browser.dark .datalayer ul {
+ border: 1px solid #2c3233;
+}
+.umap-browser h5, .umap-facet-search h5 {
+ margin-bottom: 0;
+ overflow: hidden;
+ padding-left: 5px;
+ height: 30px;
+ line-height: 30px;
+ background-color: var(--color-lightGray);
+ color: #666;
+}
+.umap-browser.dark h5 {
+ background-color: #2c3233;
+ color: white;
+}
+.umap-browser h5 span {
+ margin-left: 10px;
+}
+.umap-browser li, .umap-facet-search li {
+ padding: 2px 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.umap-facet-search li:nth-child(even),
+.umap-browser .datalayer li:nth-child(even) {
+ background-color: #efefef;
+}
+.umap-browser.dark .datalayer li:nth-child(even) {
+ background-color: #2c3233;
+}
+.umap-browser .datalayer i.feature-color {
+ box-shadow: 0 0 2px 0 black inset;
+ cursor: inherit;
+ -moz-box-sizing:border-box;
+ -webkit-box-sizing:border-box;
+ box-sizing: border-box;
+ background: none;
+ display: inline-block;
+ padding: 0;
+ width: 24px;
+ text-align: center;
+ margin-left: 5px;
+}
+.umap-browser .datalayer .feature-color img {
+ width: 24px;
+}
+.umap-browser .datalayer .feature-color span {
+ font-style: normal;
+ font-weight: bold;
+}
+.umap-browser .polygon .feature-color,
+.umap-browser .polyline .feature-color {
+ box-shadow: 0 0 2px 0 black inset;
+ background-image: url('./img/24.svg');
+ background-size: 500%;
+}
+.umap-browser .polyline .feature-color {
+ background-position: -72px -23px;
+}
+.umap-browser .polygon .feature-color {
+ background-position: -48px -25px;
+}
+.umap-browser .datalayer-toggle-list {
float: right;
margin-right: 5px;
background-position: -145px -70px;
}
-.show-list .datalayer-toggle-list {
+.umap-browser .show-list .datalayer-toggle-list {
background-position: -145px -45px;
}
.datalayer-name {
@@ -1092,11 +1089,11 @@ a.add-datalayer:hover {
/* ********************************* */
/* Table Editor */
/* ********************************* */
-#umap-ui-container.umap-table-editor {
+#umap-panel.umap-table-editor {
padding-left: 0;
padding-right: 0;
}
-#umap-ui-container.umap-table-editor .toolbox li {
+#umap-panel.umap-table-editor .toolbox li {
float: left;
}