wip: refactor browser related CSS

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 {
+#umap-panel.dark {
-    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 {
     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;
     }

umap/static/umap/img/16-white.svg

@@ -186,5 +186,7 @@
    </g>
    <path id="path1286" d="m24.352 6.3088h0.03307v-3.6125h-3.7796v3.6125h0.03307zm-3.9787-4.1591h4.2439c0.06157 0 0.12062 0.024461 0.16417 0.068002s0.068 0.1026 0.068 0.16417v4.2439c0 0.061569-0.02445 0.12062-0.068 0.16417-0.04355 0.04355-0.1026 0.067998-0.16417 0.067998h-4.2439c-0.06158 0-0.12063-0.024447-0.16417-0.067998-0.04354-0.04355-0.068-0.10261-0.068-0.16417v-4.2439c0-0.061577 0.02446-0.12063 0.068-0.16417 0.04354-0.043541 0.1026-0.068002 0.16417-0.068002z" fill="#f2f2f2" stroke="#999" stroke-width=".065719"/>
   </g>
+  <path id="path3-5" d="m80 967.11v4.75h4.75v-1.5h-3.25v-3.25z" color="#000000" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".25"/>
+  <path id="path4-3" d="m82.75 964.36v1.5h3.25v3.25h1.5v-4.75z" color="#000000" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".25"/>
  </g>
 </svg>

umap/static/umap/img/16.svg

@@ -178,5 +178,7 @@
    <path id="path16669" d="m36 963.88v8.3163" fill="none" marker-end="url(#Arrow1)" stroke="#464646" stroke-width="1.5"/>
   </g>
   <path id="copy" d="m58.25 962.61v3.5h4v4h3.5v-7.5zm-4 4v7.5h7.5v-7.5z" fill="#4d4d4d" style="paint-order:fill markers stroke"/>
+  <path id="path3" d="m80.25 967.36v4.75h4.75v-1.5h-3.25v-3.25z" color="#000000" fill="#4d4d4d" fill-rule="evenodd" style="-inkscape-stroke:none"/>
+  <path id="path4" d="m83 964.61v1.5h3.25v3.25h1.5v-4.75z" color="#000000" fill="#4d4d4d" fill-rule="evenodd" style="-inkscape-stroke:none"/>
  </g>
 </svg>

umap/static/umap/img/source/16.svg

@@ -10,7 +10,7 @@
       <path d="M 16.0401,2.3158 H 2.005 v 14.0351 h 14.0351 z" fill="#ffffff" id="path2351" />
     </mask>
   </defs>
-  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="17.305658" inkscape:cx="54.779771" inkscape:cy="162.69245" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" inkscape:snap-grids="true" inkscape:snap-to-guides="true" inkscape:showpageshadow="2" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1">
+  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="30.569587" inkscape:cx="81.895121" inkscape:cy="155.43226" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" inkscape:snap-grids="true" inkscape:snap-to-guides="true" inkscape:showpageshadow="2" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1">
     <inkscape:grid type="xygrid" id="grid3004" empspacing="4" visible="true" enabled="true" snapvisiblegridlinesonly="true" originx="0" originy="0" spacingy="1" spacingx="1" units="px" />
     <sodipodi:guide orientation="-1,0" position="24,168" id="guide3084" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
     <sodipodi:guide orientation="0,1" position="0,120" id="guide3086" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
@@ -197,5 +197,7 @@
       <path style="fill:none;fill-rule:evenodd;stroke:#464646;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow1)" d="m 36,963.87832 v 8.3163" id="path16669" sodipodi:nodetypes="cc" />
     </g>
     <path id="copy" style="fill:#4d4d4d;paint-order:fill markers stroke" d="m 58.25,962.61218 v 3.5 h 4 v 4 h 3.5 v -7.5 z m -4,4 v 7.5 h 7.5 v -7.5 z" />
+    <path style="color:#000000;fill:#4d4d4d;fill-rule:evenodd;-inkscape-stroke:none" d="m 80.25,967.36133 v 4.75 h 4.75 v -1.5 h -3.25 v -3.25 z" id="path3" />
+    <path style="color:#000000;fill:#4d4d4d;fill-rule:evenodd;-inkscape-stroke:none" d="m 83,964.61133 v 1.5 h 3.25 v 3.25 h 1.5 v -4.75 z" id="path4" />
   </g>
 </svg>

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: className
-      className: 'condensed'
     })
 
     this.map.eachBrowsableDataLayer((datalayer) => {

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'),
   },
 

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)

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;
 }