diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index a7dabd4d..bd9c7a28 100644 --- a/umap/static/umap/base.css +++ b/umap/static/umap/base.css @@ -592,7 +592,6 @@ i.info { .with-transition { transition: all .7s; } - .umap-delete:before, .umap-empty:before, .umap-to-polygon:before, .umap-clone:before, .umap-edit:before, .umap-download:before, .umap-to-polyline:before { @@ -614,43 +613,19 @@ i.info { vertical-align: middle; } .umap-to-polygon:before { - background-position: -80px -48px; -} -html[dir="rtl"] .umap-to-polygon:before { - background-position: -69px -41px; + background-position: -72px -42px; } .umap-to-polyline:before { - background-position: -110px -42px; -} -html[dir="rtl"] .umap-to-polyline:before { - background-position: -105px -42px; + background-position: -106px -42px; } .umap-clone:before { - background-position: -150px -78px; -} -html[dir="rtl"] .umap-clone:before { - background-position: -139px -78px; -} -.umap-delete:before { - background-position: -32px -8px; -} -html[dir="rtl"] .umap-delete:before { - background-position: -34px -8px; -} -.umap-edit:before { - background-position: -6px -6px; + background-position: -144px -78px; } .umap-empty:before { - background-position: -110px -78px; -} -html[dir="rtl"] .umap-empty:before { - background-position: -104px -78px; + background-position: -108px -78px; } .umap-download:before { - background-position: -77px -78px; -} -html[dir="rtl"] .umap-download:before { - background-position: -68px -78px; + background-position: -72px -78px; } .permissions-panel, .umap-upload, @@ -781,9 +756,7 @@ input[type=hidden].blur + [type="button"] { border-radius: initial; } .copiable-input button { - background-repeat: no-repeat; - background-image: url('./img/16.svg'); - background-position: -141px -140px; + background-position: -46px -92px; display: inline; padding: 0 10px; height: 32px; diff --git a/umap/static/umap/css/icon.css b/umap/static/umap/css/icon.css index 75bd3c60..9375b54d 100644 --- a/umap/static/umap/css/icon.css +++ b/umap/static/umap/css/icon.css @@ -14,6 +14,14 @@ width: 24px; --tile: -24px; } +.icon-24 { + background-image: url('../img/24.svg'); + --tile: -36px; + margin-inline-start: -6px; + height: 36px; + line-height: 36px; + width: 36px; +} .icon + span { margin-inline-start: 10px; } @@ -31,18 +39,27 @@ html[dir="rtl"] .icon { .dark .icon-16 { background-image: url('../img/16-white.svg'); } +.dark .icon-24 { + background-image: url('../img/24-white.svg'); +} .icon-add { background-position: var(--tile) var(--tile); } .icon-back { background-position: calc(var(--tile) * 5) calc(var(--tile) * 6); } +.icon-backup { + background-position: var(--tile) calc(var(--tile) * 6); +} .icon-caption { background-position: calc(var(--tile) * 4) var(--tile); } .icon-close { background-position: var(--tile) 0px; } +.icon-copy { + background-position: calc(var(--tile) * 2) calc(var(--tile) * 4); +} .icon-delete { background-position: calc(var(--tile) * 5) calc(var(--tile) * 2); } @@ -50,6 +67,9 @@ html[dir="rtl"] .icon { .off .icon-delete { background-position: calc(var(--tile) * 5) calc(var(--tile) * 5); } +.icon-download { + background-position: 0 calc(var(--tile) * 6); +} .icon-drag { background-position: calc(var(--tile) * 3) calc(var(--tile) * 3); cursor: move; @@ -70,6 +90,9 @@ html[dir="rtl"] .icon { .icon-filters { background-position: 0px var(--tile); } +.icon-forward { + background-position: calc(var(--tile) * 6) calc(var(--tile) * 6); +} .icon-key { background-position: calc(var(--tile) * 6) calc(var(--tile) * 5); } diff --git a/umap/static/umap/css/slideshow.css b/umap/static/umap/css/slideshow.css index 1877cc87..c5084ccd 100644 --- a/umap/static/umap/css/slideshow.css +++ b/umap/static/umap/css/slideshow.css @@ -40,18 +40,14 @@ .umap-slideshow-toolbox .stop:before { content: '⏹'; } +html[dir="rtl"] .umap-slideshow-toolbox .prev:before, .umap-slideshow-toolbox .next:before { content: '⏵︎'; } -html[dir="rtl"] .umap-slideshow-toolbox .next:before { - content: '⏴︎'; -} +html[dir="rtl"] .umap-slideshow-toolbox .next:before, .umap-slideshow-toolbox .prev:before { content: '⏴︎'; } -html[dir="rtl"] .umap-slideshow-toolbox .prev:before { - content: '⏵︎'; -} .umap-slideshow-toolbox .play div { height: 20px; width: 20px; diff --git a/umap/static/umap/img/16-white.svg b/umap/static/umap/img/16-white.svg index 927c7028..8c60cbc3 100644 --- a/umap/static/umap/img/16-white.svg +++ b/umap/static/umap/img/16-white.svg @@ -34,9 +34,6 @@ - - -   @@ -44,7 +41,6 @@ - @@ -192,5 +188,6 @@ + diff --git a/umap/static/umap/img/16.svg b/umap/static/umap/img/16.svg index d30369be..7662fcc6 100644 --- a/umap/static/umap/img/16.svg +++ b/umap/static/umap/img/16.svg @@ -30,9 +30,6 @@ - - - @@ -43,7 +40,6 @@ - @@ -52,7 +48,6 @@ - @@ -175,8 +170,9 @@ - + + diff --git a/umap/static/umap/img/source/16-white.svg b/umap/static/umap/img/source/16-white.svg index 3d10b375..d678d3b9 100644 --- a/umap/static/umap/img/source/16-white.svg +++ b/umap/static/umap/img/source/16-white.svg @@ -16,7 +16,7 @@ - + @@ -52,9 +52,6 @@ - - - @@ -63,7 +60,6 @@ - @@ -214,5 +210,6 @@ + diff --git a/umap/static/umap/img/source/16.svg b/umap/static/umap/img/source/16.svg index c7569e88..5fd14d89 100644 --- a/umap/static/umap/img/source/16.svg +++ b/umap/static/umap/img/source/16.svg @@ -10,7 +10,7 @@ - + @@ -48,9 +48,6 @@ - - - @@ -62,7 +59,6 @@ - @@ -71,7 +67,6 @@ - @@ -194,8 +189,9 @@ - + + diff --git a/umap/static/umap/js/modules/rendering/template.js b/umap/static/umap/js/modules/rendering/template.js index a90ae6ce..e972d662 100644 --- a/umap/static/umap/js/modules/rendering/template.js +++ b/umap/static/umap/js/modules/rendering/template.js @@ -43,10 +43,10 @@ class PopupTemplate { renderFooter(feature, container) { if (feature.hasPopupFooter()) { const template = ` -
    - -
  • - +
      + +
      • +
    ` const [footer, { previous, zoom, next }] = Utils.loadTemplateWithRefs(template) const nextFeature = feature.getNext() diff --git a/umap/static/umap/js/modules/share.js b/umap/static/umap/js/modules/share.js index 786a16f4..69a54766 100644 --- a/umap/static/umap/js/modules/share.js +++ b/umap/static/umap/js/modules/share.js @@ -39,10 +39,19 @@ export default class Share { this.container, translate("Only visible layers' data") ) + const list = document.createElement('ul') + list.classList.add('downloads') + this.container.appendChild(list) for (const format of Object.keys(EXPORT_FORMATS)) { - DomUtil.createButton('download-file', this.container, format, () => - this.download(format) - ) + const button = Utils.loadTemplate(` +
  • + +
    • + `) + button.addEventListener('click', () => this.download(format)) + list.appendChild(button) } DomUtil.create('div', 'vspace', this.container) DomUtil.add( @@ -54,15 +63,16 @@ export default class Share { const downloadUrl = Utils.template(this.map.options.urls.map_download, { map_id: this.map.options.umap_id, }) - const link = DomUtil.createLink( - 'download-backup', - this.container, - translate('full backup'), - downloadUrl - ) - let name = this.map.options.name || 'data' - name = name.replace(/[^a-z0-9]/gi, '_').toLowerCase() - link.setAttribute('download', `${name}.umap`) + const link = Utils.loadTemplate(` + + `) + this.container.appendChild(link) + // File will be named by back-office + link.setAttribute('download', 'backup.umap') DomUtil.create('hr', '', this.container) const embedTitle = DomUtil.add('h4', '', this.container, translate('Embed the map')) diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js index 187c5830..9b785f86 100644 --- a/umap/static/umap/js/umap.core.js +++ b/umap/static/umap/js/umap.core.js @@ -128,13 +128,17 @@ L.DomUtil.createIcon = (parent, className, title, size = 16) => { }) } -L.DomUtil.createButtonIcon = (parent, className, title, size = 16) => { - return L.DomUtil.element({ +L.DomUtil.createButtonIcon = (parent, className, title, callback, size = 16) => { + const el = L.DomUtil.element({ tagName: 'button', parent: parent, className: `icon icon-${size} ${className}`, title: title || '', }) + if (callback) { + L.DomEvent.on(el, 'click', L.DomEvent.stop).on(el, 'click', callback) + } + return el } L.DomUtil.createTitle = (parent, text, className, tag = 'h3') => { @@ -151,14 +155,10 @@ L.DomUtil.createCopiableInput = (parent, label, value) => { input.type = 'text' input.readOnly = true input.value = value - const button = L.DomUtil.createButton( - '', - wrapper, - '', - () => L.Util.copyToClipboard(input.value), - this + const button = L.DomUtil.createButtonIcon(wrapper, 'icon-copy', L._('copy'), () => + L.Util.copyToClipboard(input.value) ) - button.title = L._('copy') + button.type = 'button' return input } diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 3a8b4435..6db07c63 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -171,12 +171,9 @@ html[dir="rtl"] .leaflet-tooltip-pane > * { width: 24px; height: 24px; display: inline-block; - vertical-align: middle; + vertical-align: -20%; background-image: url('./img/16-white.svg'); - background-position: -52px -49px; -} -html[dir="rtl"] .leaflet-control-edit-enable [type="button"]:before { - background-position: -43px -49px; + background-position: -48px -48px; } .leaflet-control-edit-enable [type="button"] { width: initial; @@ -313,39 +310,12 @@ ul.photon-autocomplete { /* ***************************** */ /* Share and download panel */ /* ***************************** */ -.download-file { - height: 1.2em; - min-height: 1.2em; +.downloads li { + height: 1.7em; padding: 0; text-align: start; vertical-align: bottom; } -.download-file:before, -.download-backup:before { - height: 24px; - width: 24px; - background-repeat: no-repeat; - background-image: url('./img/16.svg'); - background-size: auto auto; - background-position: -4px -145px; - content: " "; - vertical-align: bottom; - display: inline-block; -} -html[dir="rtl"] .download-file:before, -html[dir="rtl"] .download-backup:before { - background-position: 2px -145px; -} -.download-backup:before { - background-position: -27px -144px; -} -html[dir="rtl"] .download-backup:before { - background-position: -22px -144px; -} -.leaflet-container .download-backup { - color: black; - display: block; -} .vspace { height: 32px; } @@ -657,9 +627,6 @@ html[dir="rtl"] .download-backup:before { vertical-align: middle; text-indent: -9999px; } -html[dir="rtl"] .umap-main-edit-toolbox .logo a { - text-indent: +9999px; -} .umap-main-edit-toolbox .map-name { display: inline-block; overflow: hidden; @@ -1053,45 +1020,13 @@ a.umap-control-caption, position: relative; background-color: rgb(68, 68, 68); color: white; - display: table; + display: flex; width: 100%; margin-top: auto; min-width: 99px; border-radius: 2px; max-height: 24px; -} -.umap-popup-footer li { - line-height: 24px; - height: 24px; - display: table-cell; - width: 33.3%; - cursor: pointer; - text-align: center; -} -.umap-popup-footer li:before { - display: inline-block; - width: 16px; - height: 16px; - margin-inline-start: 5px; - background-repeat: no-repeat; - background-image: url('./img/16.svg'); - vertical-align: middle; - content: " "; -} -.umap-popup-footer li.zoom:before { - background-position: -5px -101px; -} -.umap-popup-footer li[rel="prev"]:before { - background-position: -28px -77px; -} -html[dir="rtl"] .umap-popup-footer li[rel="prev"]:before { - background-position: -5px -77px; -} -.umap-popup-footer li[rel="next"]:before { - background-position: -5px -77px; -} -html[dir="rtl"] .umap-popup-footer li[rel="next"]:before { - background-position: -28px -77px; + justify-content: space-around; } .umap-popup a:hover { text-decoration: underline;