chore: refactore panel header/toolbox

umap/static/umap/base.css

@@ -683,7 +683,6 @@ input[type=hidden].blur + [type="button"] {
     visibility: hidden;
     position: absolute;
     bottom: 0;
-    padding: 10px;
     border-left: 1px solid var(--color-lightGray);
     overflow-x: auto;
     z-index: 1010;
@@ -729,7 +728,8 @@ input[type=hidden].blur + [type="button"] {
 }
 #umap-panel .body {
     clear: both;
-    height: calc(100% - 54px); /* Minus size of toolbox */
+    height: calc(100% - 32px); /* Minus size of toolbox */
+    padding: 10px;
 }
 #umap-panel .toolbox {
     padding: 5px 10px;
@@ -739,27 +739,30 @@ input[type=hidden].blur + [type="button"] {
     font-size: 10px;
     justify-content: flex-start;
     gap: 5px;
+    background-color: var(--color-lightGray);
+    border-bottom: 1px solid #bbb;
+    line-height: 2.2em;
+}
+#umap-panel.dark .toolbox {
+    background-color: var(--color-darkGray);
+    border-bottom: 1px solid #232729;
 }
 #umap-panel .toolbox li {
-    color: #2e3436;
-    line-height: 32px;
     cursor: pointer;
-    float: right;
     display: inline;
-    padding: 0 7px;
+    padding: 0 2px;
     border: 1px solid #b6b6b3;
     border-radius: 2px;
 }
+#umap-panel.dark .toolbox
 #umap-panel.dark .toolbox li {
     color: #d3dfeb;
     border: 1px solid #202425;
 }
 #umap-panel .toolbox li:hover {
-    color: #2e3436;
     background-color: #d4d4d2;
 }
 #umap-panel.dark .toolbox li:hover {
-    color: #eeeeec;
     background-color: #353c3e;
 }
 .dark input, .dark textarea {
@@ -896,28 +899,19 @@ input:invalid {
 .umap-close-icon {
     background-repeat: no-repeat;
     background-image: url('./img/16.svg');
-    background-position: -28px -6px;
+    background-position: -26px -6px;
     display: inline;
     padding: 0 10px;
     vertical-align: middle;
+    line-height: 24px;
 }
 .umap-resize-icon {
-    background-position: -76px -150px;
+    background-position: -74px -150px;
 }
 .dark .umap-resize-icon,
 .dark .umap-close-icon {
     background-image: url('./img/16-white.svg');
 }
-.dark .umap-close-link {
-    border: 1px solid #202425;
-    color: #eeeeec;
-    padding: 0 7px;
-    line-height: 32px;
-    background-color: var(--color-darkGray);
-}
-.dark .umap-close-link:hover {
-    background-color: #2e3436;
-}
 #umap-alert-container .umap-close-link {
     color: #fff;
     float: right;

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

@@ -186,7 +186,9 @@
    </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"/>
+  <g id="g3" 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"/>
+   <path id="path3-5" d="m88 967.36v5h-5v-1.579h3.4211v-3.421z" color="#000000"/>
+   <path id="path4-3" d="m85 964.36v1.579h-3.4211v3.421h-1.5789v-5z" color="#000000"/>
+  </g>
  </g>
 </svg>

umap/static/umap/img/16.svg

@@ -178,7 +178,8 @@
    <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="path3" d="m88 967.36v5h-5v-1.579h3.4211v-3.421z" 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"/>
+  <path id="path4" d="m85 964.36v1.579h-3.4211v3.421h-1.5789v-5z" color="#000000" fill="#4d4d4d" fill-rule="evenodd" style="-inkscape-stroke:none"/>
+  <path id="path1" d="m134 964.36-4 4 4.2888 3.9769" fill="none" stroke="#4d4d4d" stroke-width="2"/>
  </g>
 </svg>

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

@@ -16,7 +16,7 @@
       <path d="M 16.0401,2.3158 H 2.005 v 14.0351 h 14.0351 z" fill="#ffffff" id="path1259" />
     </mask>
   </defs>
-  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="15.215528" inkscape:cx="90.466791" inkscape:cy="146.59366" 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="42.508098" inkscape:cx="85.854229" inkscape:cy="153.8648" 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,96" id="guide3086" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
@@ -208,7 +208,9 @@
       </g>
       <path d="m 24.352274,6.3088036 h 0.03307 V 6.2757306 2.7293857 2.6963127 h -0.03307 -3.713451 -0.03307 v 0.033073 3.5463449 0.033073 h 0.03307 z M 20.373578,2.1497393 h 4.24394 c 0.06157,0 0.120624,0.024461 0.164174,0.068002 0.04355,0.043541 0.068,0.102595 0.068,0.1641723 v 4.2439399 c 0,0.061569 -0.02445,0.1206236 -0.068,0.164174 -0.04355,0.04355 -0.102605,0.067998 -0.164174,0.067998 h -4.24394 c -0.06158,0 -0.120631,-0.024447 -0.164172,-0.067998 -0.04354,-0.04355 -0.068,-0.1026054 -0.068,-0.164174 V 2.3819136 c 0,-0.061577 0.02446,-0.1206315 0.068,-0.1641723 0.04354,-0.043541 0.102595,-0.068002 0.164172,-0.068002 z" fill="#f2f2f2" stroke="#999999" stroke-width="0.0657188" id="path1286" />
     </g>
-    <path style="color:#000000;fill:#f2f2f2;fill-rule:evenodd;stroke:#999999;stroke-opacity:1;fill-opacity:1;stroke-width:0.25;stroke-dasharray:none" d="m 80,967.11218 v 4.75 h 4.75 v -1.5 h -3.25 v -3.25 z" id="path3-5" />
+    <g id="g3">
-    <path style="color:#000000;fill:#f2f2f2;fill-rule:evenodd;stroke:#999999;stroke-opacity:1;fill-opacity:1;stroke-width:0.25;stroke-dasharray:none" d="m 82.75,964.36218 v 1.5 h 3.25 v 3.25 h 1.5 v -4.75 z" id="path4-3" />
+      <path style="color:#000000;fill:#f2f2f2;fill-opacity:1;fill-rule:evenodd;stroke:#999999;stroke-width:0.25;stroke-dasharray:none;stroke-opacity:1" d="m 88.000002,967.3622 v 5 h -5 v -1.57895 h 3.421052 v -3.42105 z" id="path3-5" />
+      <path style="color:#000000;fill:#f2f2f2;fill-opacity:1;fill-rule:evenodd;stroke:#999999;stroke-width:0.25;stroke-dasharray:none;stroke-opacity:1" d="m 85.000002,964.3622 v 1.57895 h -3.421053 v 3.42105 h -1.578947 v -5 z" id="path4-3" />
+    </g>
   </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="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">
+  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="11.384339" inkscape:cx="110.37092" inkscape:cy="153.50035" 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,7 +197,8 @@
       <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;stroke-width:1;-inkscape-stroke:none" d="m 88.000002,967.3622 v 5 h -5 v -1.57895 h 3.421052 v -3.42105 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" />
+    <path style="color:#000000;fill:#4d4d4d;fill-rule:evenodd;stroke-width:1;-inkscape-stroke:none" d="m 85.000002,964.3622 v 1.57895 h -3.421053 v 3.42105 h -1.578947 v -5 z" id="path4" />
+    <path style="fill:none;fill-rule:evenodd;stroke:#4d4d4d;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-dasharray:none" d="m 134,964.36218 -4,4 4.28879,3.97691" id="path1" sodipodi:nodetypes="ccc" />
   </g>
 </svg>

umap/static/umap/js/umap.controls.js

@@ -532,7 +532,7 @@ U.DataLayer.include({
   renderToolbox: function (container) {
     L.DomUtil.element(
       'i',
-      { className: 'drag-handle', title: L._('Drag to reorder') },
+      { className: 'drag-handle show-on-edit', title: L._('Drag to reorder') },
       container
     )
     const toggle = L.DomUtil.create('i', 'layer-toggle', container),
@@ -667,16 +667,7 @@ const ControlsMixin = {
     })
     container.appendChild(builder.build())
 
-    this.ui.openPanel({ data: { html: container }, actions: [this._aboutLink()] })
+    this.ui.openPanel({ data: { html: container } })
-  },
-
-  _aboutLink: function () {
-    const link = L.DomUtil.create('li', '')
-    L.DomUtil.create('i', 'umap-icon-16 umap-caption', link)
-    const label = L.DomUtil.create('span', '', link)
-    label.textContent = label.title = L._('About')
-    L.DomEvent.on(link, 'click', this.displayCaption, this)
-    return link
   },
 
   displayCaption: function () {

umap/static/umap/js/umap.popup.js

@@ -56,9 +56,9 @@ U.Popup.Panel = U.Popup.extend({
 
   allButton: function () {
     const button = L.DomUtil.create('li', '')
-    L.DomUtil.create('i', 'umap-icon-16 umap-list', button)
+    L.DomUtil.create('i', 'umap-icon-16 umap-back', button)
     const label = L.DomUtil.create('span', '', button)
-    label.textContent = label.title = L._('See all')
+    button.title = L._('See all')
     // Fixme: remove me when this is merged and released
     // https://github.com/Leaflet/Leaflet/pull/9052
     L.DomEvent.disableClickPropagation(button)

umap/static/umap/js/umap.ui.js

@@ -39,12 +39,10 @@ U.UI = L.Evented.extend({
     else body.innerHTML = e.data.html
     const closeLink = L.DomUtil.create('li', 'umap-close-link', actionsContainer)
     L.DomUtil.add('i', 'umap-close-icon', closeLink)
-    const label = L.DomUtil.create('span', '', closeLink)
+    closeLink.title = L._('Close')
-    label.title = label.textContent = L._('Close')
     const resizeLink = L.DomUtil.create('li', 'umap-resize-link', actionsContainer)
     L.DomUtil.add('i', 'umap-resize-icon', resizeLink)
-    const resizeLabel = L.DomUtil.create('span', '', resizeLink)
+    resizeLink.title = L._('Toggle size')
-    resizeLabel.title = resizeLabel.textContent = L._('Toggle size')
     if (e.actions) {
       for (let i = 0; i < e.actions.length; i++) {
         actionsContainer.appendChild(e.actions[i])

umap/static/umap/map.css

@@ -835,16 +835,9 @@ ul.photon-autocomplete {
 }
 
 
-.leaflet-inplace-toolbar a {
-    background-image: url('./img/16-white.svg');
-    background-color: var(--color-darkGray)!important;
-}
 .leaflet-toolbar-tip {
     background-color: var(--color-darkGray);
 }
-.leaflet-inplace-toolbar a:hover {
-    background-color: #353c3e!important;
-}
 .layer-toggle {
     background-position: -49px -31px;
 }
@@ -989,14 +982,10 @@ a.add-datalayer:hover {
     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;
@@ -1093,9 +1082,6 @@ i.drag-handle {
     padding-left: 0;
     padding-right: 0;
 }
-#umap-panel.umap-table-editor .toolbox li {
-    float: left;
-}
 
 .umap-table-editor .umap-close-link {
     right: auto;
@@ -1171,11 +1157,14 @@ i.drag-handle {
     vertical-align: middle;
 }
 .umap-add {
-    background-position: -28px -27px;
+    background-position: -27px -27px;
 }
 .umap-list {
     background-position: -28px -99px;
 }
+.umap-back {
+    background-position: -122px -144px;
+}
 .umap-list-white {
     background-position: -92px -168px;
 }
@@ -1726,6 +1715,13 @@ span.popup-icon {
 .leaflet-inplace-toolbar {
   z-index: 10000!important;
 }
+.leaflet-inplace-toolbar a {
+    background-image: url('./img/16-white.svg');
+    background-color: var(--color-darkGray)!important;
+}
+.leaflet-inplace-toolbar a:hover {
+    background-color: #353c3e!important;
+}
 .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
     border-width: 1px;
 }

umap/tests/integration/test_browser.py

@@ -164,7 +164,7 @@ def test_data_browser_bbox_filter_should_be_persistent(
     expect(browser.get_by_text("one line in new zeland")).to_be_hidden()
     expect(browser.get_by_text("one polygon in greenland")).to_be_hidden()
     # Close and reopen the browser to make sure this settings is persistent
-    close = browser.get_by_text("Close")
+    close = browser.get_by_title("Close")
     close.click()
     expect(browser).to_be_hidden()
     sleep(0.5)