diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index 8283cb54..09cb6be0 100644 --- a/umap/static/umap/base.css +++ b/umap/static/umap/base.css @@ -897,23 +897,6 @@ input:invalid { /* *********** */ /* Close link */ /* *********** */ -.umap-resize-icon, -.umap-close-icon { - background-repeat: no-repeat; - background-image: url('./img/16.svg'); - background-position: -26px -6px; - display: inline; - padding: 0 10px; - vertical-align: middle; - line-height: 24px; -} -.umap-resize-icon { - background-position: -74px -150px; -} -.dark .umap-resize-icon, -.dark .umap-close-icon { - background-image: url('./img/16-white.svg'); -} #umap-alert-container .umap-close-link { color: #fff; float: right; diff --git a/umap/static/umap/content.css b/umap/static/umap/content.css index f1ebe99a..17bb390c 100644 --- a/umap/static/umap/content.css +++ b/umap/static/umap/content.css @@ -357,22 +357,22 @@ ul.umap-autocomplete { width: 36px; margin: 3px; } -.icon-view { +.content .icon-view { background-image: url('./img/icon-view.svg'); } -.icon-share { +.content .icon-share { background-image: url('./img/icon-share.svg'); } -.icon-edit { +.content .icon-edit { background-image: url('./img/icon-edit.svg'); } -.icon-download { +.content .icon-download { background-image: url('./img/icon-download.svg'); } -.icon-duplicate { +.content .icon-duplicate { background-image: url('./img/icon-duplicate.svg'); } -.icon-delete { +.content .icon-delete { background-image: url('./img/icon-delete.svg'); } .table-header { diff --git a/umap/static/umap/css/icon.css b/umap/static/umap/css/icon.css new file mode 100644 index 00000000..87257be2 --- /dev/null +++ b/umap/static/umap/css/icon.css @@ -0,0 +1,95 @@ +.icon { + background-repeat: no-repeat; + display: inline-block; + padding: 0 10px; + vertical-align: middle; +} +.icon-16 { + background-image: url('../img/16.svg'); + height: 24px; + line-height: 24px; +} +.icon + span { + margin-left: 10px; +} +.dark .icon-16 { + background-image: url('../img/16-white.svg'); +} +.icon-add { + background-position: -26px -30px; +} +.icon-back { + background-position: -122px -144px; +} +.icon-caption { + background-position: -98px -24px; +} +.icon-close { + background-position: -26px 0px; +} +.icon-delete { + background-position: -121px -49px; +} +.icon-drag { + background-position: -72px -73px; + cursor: move; + margin-right: 10px; +} +.icon-eye { + background-position: -49px -26px; +} +.icon-edit { + background-position: -51px -49px; +} +.icon-key { + background-position: -144px -121px; +} +.icon-layers { + background-position: -96px -120px; +} +.icon-list { + background-position: -28px -99px; +} +.icon-marker { + background-position: -72px -120px; +} +.icon-polygon { + background-position: -24px -119px; +} +.icon-polyline { + background-position: 0 -119px; +} +.icon-resize { + background-position: -74px -145px; +} +.icon-search { + background-position: -27px -120px; +} +.icon-settings { + background-position: -27px -93px; +} +.icon-share { + background-position: 0px -120px; +} +.icon-table { + background-position: -50px -1px; +} +.readonly .icon-table, +.off .icon-table { + background-position: -74px -1px; +} +.remotelayer .icon-table { + display: none !important; +} +.icon-tilelayer { + background-position: -98px -141px; +} +.icon-upload { + background-position: -144px -97px; +} +.icon-zoom { + background-position: -1px -49px; +} +.off .icon-zoom { + background-position: -25px -54px; +} diff --git a/umap/static/umap/img/16-white.svg b/umap/static/umap/img/16-white.svg index 1de49bb5..88eb6924 100644 --- a/umap/static/umap/img/16-white.svg +++ b/umap/static/umap/img/16-white.svg @@ -186,10 +186,7 @@ - - - - + diff --git a/umap/static/umap/img/16.svg b/umap/static/umap/img/16.svg index 0367ddfd..bc8233a7 100644 --- a/umap/static/umap/img/16.svg +++ b/umap/static/umap/img/16.svg @@ -178,8 +178,9 @@ - - + + + diff --git a/umap/static/umap/img/24.svg b/umap/static/umap/img/24.svg index b4b8f678..a4fc8d62 100644 --- a/umap/static/umap/img/24.svg +++ b/umap/static/umap/img/24.svg @@ -82,8 +82,8 @@ - - + + diff --git a/umap/static/umap/img/source/16-white.svg b/umap/static/umap/img/source/16-white.svg index 11dabbaf..943a252c 100644 --- a/umap/static/umap/img/source/16-white.svg +++ b/umap/static/umap/img/source/16-white.svg @@ -16,7 +16,7 @@ - + @@ -208,10 +208,7 @@ - - - - + diff --git a/umap/static/umap/img/source/16.svg b/umap/static/umap/img/source/16.svg index 54925b08..ed3d4715 100644 --- a/umap/static/umap/img/source/16.svg +++ b/umap/static/umap/img/source/16.svg @@ -10,7 +10,7 @@ - + @@ -197,8 +197,11 @@ - - + + + + + diff --git a/umap/static/umap/img/source/24.svg b/umap/static/umap/img/source/24.svg index 432831c0..0d463125 100644 --- a/umap/static/umap/img/source/24.svg +++ b/umap/static/umap/img/source/24.svg @@ -2,7 +2,7 @@ - + @@ -102,8 +102,8 @@ - - + + diff --git a/umap/static/umap/js/modules/browser.js b/umap/static/umap/js/modules/browser.js index bbb6cda4..50cc4b11 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', '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), + zoom_to = DomUtil.create('i', 'icon icon-16 icon-zoom', feature_li), + edit = DomUtil.create('i', 'icon icon-16 show-on-edit icon-edit', feature_li), + del = DomUtil.create('i', 'icon icon-16 show-on-edit icon-delete', feature_li), + colorBox = DomUtil.create('i', 'icon icon-16 feature-color', feature_li), title = DomUtil.create('span', 'feature-title', feature_li), symbol = feature._getIconUrl ? U.Icon.prototype.formatUrl(feature._getIconUrl(), feature) @@ -101,7 +101,7 @@ export default class Browser { const headline = parent.querySelector('h5') const toggleList = () => parent.classList.toggle('show-list') headline.innerHTML = '' - const toggle = DomUtil.create('i', 'umap-icon-16 datalayer-toggle-list', headline) + const toggle = DomUtil.create('i', 'icon icon-16 datalayer-toggle-list', headline) DomEvent.on(toggle, 'click', toggleList) datalayer.renderToolbox(headline) const name = DomUtil.create('span', 'datalayer-name', headline) @@ -146,7 +146,7 @@ export default class Browser { // https://github.com/Leaflet/Leaflet/pull/9052 DomEvent.disableClickPropagation(container) - const title = DomUtil.add('h3', '', container, translate('Browse data')) + DomUtil.createTitle(container, translate('Browse data'), 'layers') const formContainer = DomUtil.create('div', '', container) const dataContainer = DomUtil.create('div', '', container) diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 5eafc43c..10c65b14 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -537,27 +537,11 @@ U.DataLayer.include({ }, renderToolbox: function (container) { - L.DomUtil.element( - 'i', - { - className: 'umap-icon-16 drag-handle show-on-edit', - title: L._('Drag to reorder'), - }, - 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 - ) + const toggle = L.DomUtil.create('i', 'icon icon-16 icon-eye', container), + zoomTo = L.DomUtil.create('i', 'icon icon-16 icon-zoom', container), + edit = L.DomUtil.create('i', 'icon icon-16 icon-edit show-on-edit', container), + table = L.DomUtil.create('i', 'icon icon-16 icon-table show-on-edit', container), + remove = L.DomUtil.create('i', 'icon icon-16 icon-delete show-on-edit', container) zoomTo.title = L._('Zoom to layer extent') toggle.title = L._('Show/hide layer') edit.title = L._('Edit') @@ -690,8 +674,7 @@ const ControlsMixin = { displayCaption: function () { const container = L.DomUtil.create('div', 'umap-caption') - let title = L.DomUtil.create('h3', '', container) - title.textContent = this.options.name + L.DomUtil.createTitle(container, this.options.name, 'caption') this.permissions.addOwnerLink('h5', container) if (this.options.description) { const description = L.DomUtil.create('div', 'umap-map-description', container) @@ -985,8 +968,7 @@ U.TileLayerChooser = L.Control.extend({ openSwitcher: function (options) { const container = L.DomUtil.create('div', 'umap-tilelayer-switcher-container') - const title = L.DomUtil.create('h3', '', container) - title.textContent = L._('Change tilelayers') + L.DomUtil.createTitle(container, L._('Change tilelayers'), 'tilelayer') this._tilelayers_container = L.DomUtil.create('ul', '', container) this.buildList(options) this.map.ui.openPanel({ @@ -1179,8 +1161,8 @@ U.Search = L.PhotonSearch.extend({ formatResult: function (feature, el) { const self = this const tools = L.DomUtil.create('span', 'search-result-tools', el), - zoom = L.DomUtil.create('i', 'feature-zoom_to', tools), - edit = L.DomUtil.create('i', 'feature-edit show-on-edit', tools) + zoom = L.DomUtil.create('i', 'icon icon-16 icon-zoom', tools), + edit = L.DomUtil.create('i', 'icon icon-16 icon-edit show-on-edit', tools) zoom.title = L._('Zoom to this place') edit.title = L._('Save this location as new feature') // We need to use "mousedown" because Leaflet.Photon listen to mousedown diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js index 474287dd..c451879f 100644 --- a/umap/static/umap/js/umap.core.js +++ b/umap/static/umap/js/umap.core.js @@ -117,6 +117,17 @@ L.DomUtil.createLink = (className, container, content, url, target, title) => { return el } +L.DomUtil.createIcon = (parent, name) => { + L.DomUtil.create('i', `icon icon-16 icon-${name}`, parent) +} + +L.DomUtil.createTitle = (parent, text, icon, tag = 'h3') => { + const title = L.DomUtil.create(tag, '', parent) + L.DomUtil.createIcon(title, icon) + L.DomUtil.add('span', '', title, text) + return title +} + L.DomUtil.createCopiableInput = (parent, label, value) => { const wrapper = L.DomUtil.add('div', 'copiable-input', parent) const labelEl = L.DomUtil.add('label', '', wrapper, label) diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js index 58a27e41..517f321c 100644 --- a/umap/static/umap/js/umap.features.js +++ b/umap/static/umap/js/umap.features.js @@ -96,12 +96,7 @@ U.FeatureMixin = { edit: function (e) { if (!this.map.editEnabled || this.isReadOnly()) return const container = L.DomUtil.create('div', 'umap-feature-container') - L.DomUtil.add( - 'h3', - `umap-feature-properties ${this.getClassName()}`, - container, - L._('Feature properties') - ) + L.DomUtil.createTitle(container, L._('Feature properties'), this.getClassName()) let builder = new U.FormBuilder( this, diff --git a/umap/static/umap/js/umap.importer.js b/umap/static/umap/js/umap.importer.js index 0f1a1fdb..0400cd1c 100644 --- a/umap/static/umap/js/umap.importer.js +++ b/umap/static/umap/js/umap.importer.js @@ -7,7 +7,7 @@ U.Importer = L.Class.extend({ build: function () { this.container = L.DomUtil.create('div', 'umap-upload') - this.title = L.DomUtil.add('h3', '', this.container, L._('Import data')) + this.title = L.DomUtil.createTitle(this.container, L._('Import data'), 'upload') this.presetBox = L.DomUtil.create('div', 'formbox', this.container) this.presetSelect = L.DomUtil.create('select', '', this.presetBox) this.fileBox = L.DomUtil.create('div', 'formbox', this.container) diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index b1738135..a1b9ef54 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -1532,15 +1532,14 @@ U.Map = L.Map.extend({ ] const creditsBuilder = new U.FormBuilder(this, creditsFields) credits.appendChild(creditsBuilder.build()) - this.ui.openPanel({ data: { html: container }, className: 'dark' }) + this.editPanel.open({ data: { html: container } }) }, edit: function () { if (!this.editEnabled) return if (this.options.editMode !== 'advanced') return - const container = L.DomUtil.create('div', 'umap-edit-container') - const title = L.DomUtil.create('h3', '', container) - title.textContent = L._('Map advanced properties') + const container = L.DomUtil.create('div') + L.DomUtil.createTitle(container, L._('Map advanced properties'), 'settings') this._editControls(container) this._editShapeProperties(container) this._editDefaultProperties(container) diff --git a/umap/static/umap/js/umap.layer.js b/umap/static/umap/js/umap.layer.js index 7012b2d2..1ebc39e0 100644 --- a/umap/static/umap/js/umap.layer.js +++ b/umap/static/umap/js/umap.layer.js @@ -1211,7 +1211,7 @@ U.DataLayer = L.Evented.extend({ }, ], ] - const title = L.DomUtil.add('h3', '', container, L._('Layer properties')) + L.DomUtil.createTitle(container, L._('Layer properties'), 'layers') let builder = new U.FormBuilder(this, metadataFields, { callback: function (e) { if (e.helper.field === 'options.type') { diff --git a/umap/static/umap/js/umap.permissions.js b/umap/static/umap/js/umap.permissions.js index 9d01f668..6200a694 100644 --- a/umap/static/umap/js/umap.permissions.js +++ b/umap/static/umap/js/umap.permissions.js @@ -57,9 +57,9 @@ U.MapPermissions = L.Class.extend({ content: L._('Please save the map first'), level: 'info', }) - const container = L.DomUtil.create('div', 'permissions-panel'), - fields = [], - title = L.DomUtil.create('h3', '', container) + const container = L.DomUtil.create('div', 'permissions-panel') + const fields = [] + L.DomUtil.createTitle(container, L._('Update permissions'), 'key') if (this.isAnonymousMap()) { if (this.options.anonymous_edit_url) { const helpText = `${L._('Secret edit link:')}
${this.options.anonymous_edit_url @@ -103,7 +103,6 @@ U.MapPermissions = L.Class.extend({ { handler: 'ManageEditors', label: L._("Map's editors") }, ]) } - title.textContent = L._('Update permissions') const builder = new U.FormBuilder(this, fields) const form = builder.build() container.appendChild(form) diff --git a/umap/static/umap/js/umap.share.js b/umap/static/umap/js/umap.share.js index 3284df76..88a2d033 100644 --- a/umap/static/umap/js/umap.share.js +++ b/umap/static/umap/js/umap.share.js @@ -44,9 +44,8 @@ U.Share = L.Class.extend({ }, build: function () { - this.container = L.DomUtil.create('div', 'umap-share') - this.title = L.DomUtil.create('h3', '', this.container) - this.title.textContent = L._('Share and download') + this.container = L.DomUtil.create('div', '') + this.title = L.DomUtil.createTitle(this.container, L._('Share and download'), 'share') L.DomUtil.createCopiableInput( this.container, diff --git a/umap/static/umap/js/umap.tableeditor.js b/umap/static/umap/js/umap.tableeditor.js index 2c0a9bf4..d59fa704 100644 --- a/umap/static/umap/js/umap.tableeditor.js +++ b/umap/static/umap/js/umap.tableeditor.js @@ -100,7 +100,7 @@ U.TableEditor = L.Class.extend({ this.body.innerHTML = '' this.datalayer.eachLayer(this.renderRow, this) const addButton = L.DomUtil.create('li', 'add-property') - L.DomUtil.create('i', 'umap-icon-16 umap-add', addButton) + L.DomUtil.create('i', 'icon icon-16 icon-add', addButton) const label = L.DomUtil.create('span', '', addButton) label.textContent = label.title = L._('Add a new property') const addProperty = function () { diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 672392ce..051e6844 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -316,58 +316,6 @@ ul.photon-autocomplete { .manage-datalayers { background-position: -36px -72px; } -.permissions-panel h3:before, -.umap-edit-container h3:before, -.umap-feature-properties:before, -.umap-layer-properties-container h3:before, -.umap-search h3:before, -.umap-share h3:before, -.umap-tilelayer-switcher-container h3:before, -.umap-upload h3:before { - height: 24px; - width: 24px; - background-repeat: no-repeat; - background-image: url('./img/16-white.svg'); - background-size: auto auto; - background-position: -98px -117px; - content: " "; - vertical-align: bottom; - display: inline-block; -} -.umap-edit-container h3:before { - background-position: -27px -93px; -} -.permissions-panel h3:before { - background-position: -144px -117px; -} -.umap-upload h3:before { - background-position: -144px -93px; -} -.umap-search h3:before { - background-image: url('./img/16.svg'); - background-position: -27px -117px; -} -.umap-share h3:before { - background-image: url('./img/16.svg'); - background-position: -4px -119px; -} -.dark .umap-tilelayer-switcher-container h3:before { - background-image: url('./img/16-white.svg'); - background-position: -98px -141px; -} -.umap-tilelayer-switcher-container h3:before { - background-image: url('./img/16.svg'); - background-position: -98px -141px; -} -.umap-feature-properties.marker:before { - background-position: -72px -117px; -} -.umap-feature-properties.polyline:before { - background-position: 0 -117px; -} -.umap-feature-properties.polygon:before { - background-position: -24px -117px; -} .umap-toolbar .update-map-permissions, .update-map-permissions { background-position: -36px -36px; @@ -844,15 +792,6 @@ ul.photon-autocomplete { .off .layer-toggle { background-position: -73px -31px; } -.feature-zoom_to { - background-position: -1px -54px; -} -.layer-zoom_to { - background-position: -1px -54px; -} -.layer-table-edit { - background-position: -50px -1px; -} .feature-delete, .layer-delete { background-position: -122px -49px; @@ -864,17 +803,10 @@ ul.photon-autocomplete { .umap-toggle-edit { background-position: -44px -48px; } -.readonly .layer-table-edit, -.off .layer-table-edit { - background-position: -74px -1px; -} .readonly .layer-edit, .off .layer-edit { background-position: -50px -73px; } -.off .layer-zoom_to { - background-position: -25px -54px; -} .readonly .layer-delete, .off .layer-delete { background-position: -122px -121px; @@ -962,11 +894,6 @@ a.umap-control-caption, .show-list ul { display: block; } -i.drag-handle { - background-position: -72px -73px; - cursor: move; - margin-right: 10px; -} .umap-browser .off .feature { display: none; @@ -1121,40 +1048,6 @@ i.drag-handle { .umap-table-editor .thead .tcell:hover span { display: none; } -.remotelayer .layer-table-edit { - display: none !important; -} - -/* ********************************* */ -/* Icons */ -/* ********************************* */ -.umap-icon-16 { - background-repeat: no-repeat; - background-image: url('./img/16.svg'); - 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: -26px -30px; -} -.umap-list { - background-position: -28px -99px; -} -.umap-back { - background-position: -122px -150px; -} -.umap-list-white { - background-position: -92px -168px; -} -.umap-caption { - background-position: -99px -28px; -} /* ********************************* */ /* Tilelayer switcher */ diff --git a/umap/static/umap/test/TableEditor.js b/umap/static/umap/test/TableEditor.js index 52f82898..88d828bb 100644 --- a/umap/static/umap/test/TableEditor.js +++ b/umap/static/umap/test/TableEditor.js @@ -27,7 +27,7 @@ describe('L.TableEditor', () => { it('should exist table click on edit mode', () => { button = qs( - '#browse_data_toggle_' + L.stamp(datalayer) + ' .layer-table-edit' + '#browse_data_toggle_' + L.stamp(datalayer) + ' .icon-table' ) expect(button).to.be.ok }) diff --git a/umap/templates/umap/css.html b/umap/templates/umap/css.html index 8c1af26d..623d1e6d 100644 --- a/umap/templates/umap/css.html +++ b/umap/templates/umap/css.html @@ -23,6 +23,7 @@ href="{% static 'umap/vendors/iconlayers/iconLayers.css' %}" /> +