chore: refactor browser back button

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

@@ -190,5 +190,6 @@
    <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>
+  <path id="path1-67" d="m133.73 963.36-4.7344 4.7344 5.0508 4.6836 1.3594-1.4668-3.5274-3.2695 3.2656-3.2656z" color="#000000" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".25"/>
  </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="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">
+  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="14.240598" inkscape:cx="120.88678" inkscape:cy="138.30177" 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)" />
@@ -212,5 +212,6 @@
       <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>
+    <path style="color:#000000;fill:#f2f2f2;fill-rule:evenodd;fill-opacity:1;stroke:#999999;stroke-opacity:1;stroke-width:0.25;stroke-dasharray:none" d="m 133.73437,963.36133 -4.73437,4.73437 5.05078,4.6836 1.35938,-1.4668 -3.52735,-3.26953 3.26563,-3.26563 z" id="path1-67" />
   </g>
 </svg>

umap/static/umap/js/modules/browser.js

@@ -219,4 +219,17 @@ export default class Browser {
     if (!this.isOpen()) return
     this.map.ui._panel.classList.remove('dark')
   }
+
+  static backButton (map) {
+    const button = L.DomUtil.create('li', '')
+    L.DomUtil.create('i', 'umap-icon-16 umap-back', button)
+    const label = L.DomUtil.create('span', '', button)
+    button.title = L._('Back to browser')
+    // Fixme: remove me when this is merged and released
+    // https://github.com/Leaflet/Leaflet/pull/9052
+    L.DomEvent.disableClickPropagation(button)
+    L.DomEvent.on(button, 'click', map.openBrowser, map)
+    return button
+  }
+
 }

umap/static/umap/js/umap.features.js

@@ -137,7 +137,11 @@ U.FeatureMixin = {
     this.appendEditFieldsets(container)
     const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
     this.getAdvancedEditActions(advancedActions)
-    this.map.ui.openPanel({ data: { html: container }, className: 'dark' })
+    this.map.ui.openPanel({
+      data: { html: container },
+      className: 'dark',
+      actions: [U.Browser.backButton(this.map)],
+    })
     this.map.editedFeature = this
     if (!this.isOnScreen()) this.zoomTo(e)
   },

umap/static/umap/js/umap.layer.js

@@ -1379,7 +1379,11 @@ U.DataLayer = L.Evented.extend({
         '_blank'
       )
     }
-    this.map.ui.openPanel({ data: { html: container }, className: 'dark' })
+    this.map.ui.openPanel({
+      data: { html: container },
+      className: 'dark',
+      actions: [U.Browser.backButton(this.map)],
+    })
   },
 
   getOwnOption: function (option) {

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

@@ -54,22 +54,10 @@ U.Popup.Panel = U.Popup.extend({
     zoomAnimation: false,
   },
 
-  allButton: function () {
-    const button = L.DomUtil.create('li', '')
-    L.DomUtil.create('i', 'umap-icon-16 umap-back', button)
-    const label = L.DomUtil.create('span', '', button)
-    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)
-    L.DomEvent.on(button, 'click', this.feature.map.openBrowser, this.feature.map)
-    return button
-  },
-
   onAdd: function (map) {
     map.ui.openPanel({
       data: { html: this._content },
-      actions: [this.allButton()],
+      actions: [U.Browser.backButton(map)],
     })
 
     // fire events as in base class Popup.js:onAdd

umap/static/umap/js/umap.tableeditor.js

@@ -113,7 +113,7 @@ U.TableEditor = L.Class.extend({
     this.datalayer.map.ui.openPanel({
       data: { html: this.table },
       className: 'umap-table-editor fullwidth dark',
-      actions: [addButton],
+      actions: [addButton, U.Browser.backButton(this.datalayer.map)],
     })
     this.datalayer.map.fire('dataload', { id: id })
   },

umap/static/umap/map.css

@@ -954,8 +954,8 @@ ul.photon-autocomplete {
     line-height: 24px;
     vertical-align: middle;
 }
-.umap-browser.dark .datalayer i {
+.umap-browser .datalayer i {
-    background-image: url('./img/16-white.svg');
+    cursor: pointer;
 }
 .umap-browser ul {
     display: none;
@@ -1145,7 +1145,7 @@ i.drag-handle {
     background-position: -28px -99px;
 }
 .umap-back {
-    background-position: -122px -144px;
+    background-position: -122px -150px;
 }
 .umap-list-white {
     background-position: -92px -168px;