diff --git a/umap/static/umap/js/modules/browser.js b/umap/static/umap/js/modules/browser.js index 5e2d38ba..5f93a22a 100644 --- a/umap/static/umap/js/modules/browser.js +++ b/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)) } diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index c4f1bd6d..c2d5d905 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/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') diff --git a/umap/static/umap/js/umap.ui.js b/umap/static/umap/js/umap.ui.js index 0e61caa1..ad881fde 100644 --- a/umap/static/umap/js/umap.ui.js +++ b/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++) { diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index a2d41ddd..7d478fb8 100644 --- a/umap/static/umap/map.css +++ b/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;