chore: use umap-icon-16 CSS class in panel toolbox

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

@@ -19,10 +19,10 @@ export default class Browser {
     if (filter && !feature.matchFilter(filter, this.filterKeys)) return
     if (this.options.inBbox && !feature.isOnScreen(this.bounds)) return
     const feature_li = DomUtil.create('li', `${feature.getClassName()} feature`),
-      zoom_to = DomUtil.create('i', 'feature-zoom_to', feature_li),
-      edit = DomUtil.create('i', 'show-on-edit feature-edit', feature_li),
-      del = DomUtil.create('i', 'show-on-edit feature-delete', feature_li),
-      colorBox = DomUtil.create('i', 'feature-color', feature_li),
+      zoom_to = DomUtil.create('i', 'umap-icon-16 feature-zoom_to', feature_li),
+      edit = DomUtil.create('i', 'umap-icon-16 show-on-edit feature-edit', feature_li),
+      del = DomUtil.create('i', 'umap-icon-16 show-on-edit feature-delete', feature_li),
+      colorBox = DomUtil.create('i', 'umap-icon-16 feature-color', feature_li),
       title = DomUtil.create('span', 'feature-title', feature_li),
       symbol = feature._getIconUrl
         ? U.Icon.prototype.formatUrl(feature._getIconUrl(), feature)
@@ -160,23 +160,31 @@ export default class Browser {
     })
     formContainer.appendChild(builder.build())
 
+    const addButton = L.DomUtil.create('li', 'add-datalayer show-on-edit')
+    L.DomUtil.create('i', 'umap-icon-16 umap-add', addButton)
+    const label = L.DomUtil.create('span', '', addButton)
+    label.textContent = label.title = L._('Add a layer')
+    const addProperty = function () {
+      const newName = prompt(L._('Please enter the name of the property'))
+      if (!newName || !this.validateName(newName)) return
+      this.datalayer.indexProperty(newName)
+      this.edit()
+    }
+    L.DomEvent.on(addButton, 'click', this.newDataLayer, this)
+
+
     let className = 'umap-browser'
     if (this.map.editEnabled) className += ' dark'
     this.map.ui.openPanel({
       data: { html: container },
-      className: className
+      className: className,
+      actions: [addButton]
     })
 
     this.map.eachBrowsableDataLayer((datalayer) => {
       this.addDataLayer(datalayer, dataContainer)
     })
-    L.DomUtil.createButton(
-      'show-on-edit block add-datalayer button',
-      container,
-      L._('Add a layer'),
-      this.newDataLayer,
-      this
-    )
+
     // After datalayers have been added.
     const orderable = new Orderable(dataContainer, L.bind(this.onReorder, this))
   }

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

@@ -532,14 +532,14 @@ U.DataLayer.include({
   renderToolbox: function (container) {
     L.DomUtil.element(
       'i',
-      { className: 'drag-handle show-on-edit', title: L._('Drag to reorder') },
+      { className: 'umap-icon-16 drag-handle show-on-edit', title: L._('Drag to reorder') },
       container
     )
-    const toggle = L.DomUtil.create('i', 'layer-toggle', container),
-      zoomTo = L.DomUtil.create('i', 'layer-zoom_to', container),
-      edit = L.DomUtil.create('i', 'layer-edit show-on-edit', container),
-      table = L.DomUtil.create('i', 'layer-table-edit show-on-edit', container),
-      remove = L.DomUtil.create('i', 'layer-delete show-on-edit', container)
+    const toggle = L.DomUtil.create('i', 'umap-icon-16 layer-toggle', container),
+      zoomTo = L.DomUtil.create('i', 'umap-icon-16 layer-zoom_to', container),
+      edit = L.DomUtil.create('i', 'umap-icon-16 layer-edit show-on-edit', container),
+      table = L.DomUtil.create('i', 'umap-icon-16 layer-table-edit show-on-edit', container),
+      remove = L.DomUtil.create('i', 'umap-icon-16 layer-delete show-on-edit', container)
     zoomTo.title = L._('Zoom to layer extent')
     toggle.title = L._('Show/hide layer')
     edit.title = L._('Edit')

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

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

umap/static/umap/map.css

@@ -910,22 +910,6 @@ ul.photon-autocomplete {
     font-size: 12px;
     cursor: pointer;
 }
-a.add-datalayer:before {
-    background-image: url('./img/16.svg');
-    background-repeat: no-repeat;
-    background-position: -45px -96px;
-    width: 24px;
-    height: 24px;
-    content: " ";
-    display: block;
-    float: left;
-}
-a.add-datalayer:before {
-    background-position: -20px -20px;
-}
-a.add-datalayer:hover {
-    background-color: rgb(99, 99, 99);
-}
 .show-on-edit {
     display: none!important;
 }
@@ -960,9 +944,7 @@ a.add-datalayer:hover {
     background-color: var(--color-darkGray);
 }
 .search-result-tools i,
-.leaflet-inplace-toolbar a,
-.umap-browser i,
-.umap-caption i {
+.leaflet-inplace-toolbar a {
     background-repeat: no-repeat;
     background-image: url('./img/16.svg');
     display: inline;
@@ -1083,10 +1065,6 @@ i.drag-handle {
     padding-right: 0;
 }
 
-.umap-table-editor .umap-close-link {
-    right: auto;
-    left: 20px;
-}
 .umap-table-editor .table {
     display: table;
     width: 100%;
@@ -1151,13 +1129,17 @@ i.drag-handle {
 .umap-icon-16 {
     background-repeat: no-repeat;
     background-image: url('./img/16.svg');
-    display: inline-block;
-    height: 20px;
+    display: inline;
+    height: 24px;
+    line-height: 24px;
     padding: 0 10px;
     vertical-align: middle;
 }
+.dark .umap-icon-16 {
+    background-image: url('./img/16-white.svg');
+}
 .umap-add {
-    background-position: -27px -27px;
+    background-position: -26px -30px;
 }
 .umap-list {
     background-position: -28px -99px;