diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index 048b7602..bd9c7a28 100644 --- a/umap/static/umap/base.css +++ b/umap/static/umap/base.css @@ -119,13 +119,13 @@ dt { margin-bottom: 2rem; } .col { - float: left; + float: inline-start; } .right { float: right; } .col + .col { - padding-left: 20px; + padding-inline-start: 20px; } .half { width: 50%; @@ -143,7 +143,7 @@ dt { width: 100%; } .col + .wide { - padding-left: inherit; + padding-inline-start: inherit; } .mshow, .tshow { display: none; @@ -186,7 +186,7 @@ input[type="range"] { width: 100%; } input[type="radio"] { - margin-right: var(--text-margin); + margin-inline-end: var(--text-margin); } input[type="checkbox"] { margin: 0 var(--text-margin); @@ -272,7 +272,7 @@ button.flat, border: none; background-color: inherit; padding: 0; - text-align: left; + text-align: start; min-height: inherit; width: initial; display: initial; @@ -356,8 +356,8 @@ input:invalid { } details { margin-bottom: 5px; - border-top-left-radius: 4px; - border-top-right-radius: 4px; + border-start-start-radius: 4px; + border-start-end-radius: 4px; } .dark details { border: 1px solid #222; @@ -392,7 +392,7 @@ fieldset legend { } [data-badge]:after { position: absolute; - right: -6px; + inset-inline-end: -6px; top: -6px; min-width: 8px; min-height: 8px; @@ -417,7 +417,7 @@ input.switch:empty { input.switch:empty ~ label { white-space: nowrap; position: relative; - float: left; + float: inline-start; line-height: 2em; height: 2em; text-indent: 6em; @@ -436,7 +436,7 @@ input.switch:empty ~ label:after { display: block; top: 0; bottom: 0; - left: 0; + inset-inline-start: 0; content: ' '; width: 6em; -webkit-transition: all 100ms ease-in; @@ -451,7 +451,7 @@ input.switch:empty ~ label:after { } input.switch:empty ~ label:after { width: 3em; - margin-left: 0.1em; + margin-inline-start: 0.1em; background-color: #ededed; content: "OFF"; text-indent: 3.5em; @@ -472,7 +472,7 @@ input.switch:checked ~ label:before { color: var(--color-darkGray); content: "ON"; text-indent: 0.7em; - text-align: left; + text-align: start; font-weight: bold; } .dark input.switch:checked ~ label:before { @@ -480,7 +480,7 @@ input.switch:checked ~ label:before { background-color: var(--color-accent); } input.switch:checked ~ label:after { - margin-left: 3em; + margin-inline-start: 3em; } .button-bar, .umap-multiplechoice { margin-top: 5px; @@ -552,21 +552,21 @@ input.switch:checked ~ label:after { .umap-field-iconUrl .action-button, .inheritable .define, .inheritable .undefine { - float: right; + float: inline-end; width: initial; min-height: 18px; line-height: 18px; margin-bottom: 0; } .inheritable .quick-actions { - float: right; + float: inline-end; } .inheritable .quick-actions .formbox { margin-bottom: 0; } .inheritable .quick-actions input { width: 100px; - margin-right: 5px; + margin-inline-end: 5px; } .inheritable .define, .inheritable.undefined .undefine, @@ -581,7 +581,7 @@ i.info { background-image: url('./img/16.svg'); background-position: -170px -50px; display: inline-block; - margin-left: 5px; + margin-inline-start: 5px; vertical-align: middle; width: 16px; height: 18px; @@ -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,25 +613,19 @@ i.info { vertical-align: middle; } .umap-to-polygon:before { - background-position: -80px -48px; + background-position: -72px -42px; } .umap-to-polyline:before { - background-position: -110px -42px; + background-position: -106px -42px; } .umap-clone:before { - background-position: -150px -78px; -} -.umap-delete:before { - background-position: -32px -8px; -} -.umap-edit:before { - background-position: -6px -6px; + background-position: -144px -78px; } .umap-empty:before { - background-position: -110px -78px; + background-position: -108px -78px; } .umap-download:before { - background-position: -77px -78px; + background-position: -72px -78px; } .permissions-panel, .umap-upload, @@ -711,7 +704,7 @@ i.info { .umap-pictogram-choice .leaflet-marker-icon { bottom: 0; - left: 30px; + inset-inline-start: 30px; position: absolute; } .umap-color-picker { @@ -727,14 +720,14 @@ i.info { padding: 0; margin: 0; cursor: pointer; - float: left; + float: inline-start; } input.blur { width: calc(100% - 40px); display: inline-block; vertical-align: middle; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } .blur + .button:before, .blur + [type="button"]:before { @@ -747,8 +740,8 @@ input.blur { display: inline-block; vertical-align: middle; line-height: 18px; - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; box-sizing: border-box; } input[type=hidden].blur + .button, @@ -763,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/content.css b/umap/static/umap/content.css index 12122b04..04cc8946 100644 --- a/umap/static/umap/content.css +++ b/umap/static/umap/content.css @@ -50,7 +50,7 @@ body.login header { background-size: 92px 92px; height: 92px; width: 92px; - margin-right: 10px; + margin-inline-end: 10px; } .login-grid .login-github { background-image: url("./github.png"); @@ -107,7 +107,7 @@ body.login header { .umap-features-list li:before { content: "✔"; color: #323E56; - padding-right: 5px; + padding-inline-end: 5px; } .summary { background-color: #eee; @@ -135,7 +135,7 @@ h2.section { h2.tabs { text-transform: uppercase; color: var(--color-darkBlue); - text-align: left; + text-align: start; padding-top: 28px; } h2.tabs a { @@ -144,13 +144,14 @@ h2.tabs a { text-decoration-thickness: 3px; text-decoration-skip-ink: none; text-underline-offset: 7px; - margin-right: 2rem; + margin-inline-end: 2rem; + display: inline-block; } h2.tabs a:not(.selected) { font-weight: normal; color: var(--color-darkBlue); text-decoration: none; - margin-right: 0; + margin-inline-end: 0; } h2.tabs a:hover { text-decoration: underline; @@ -278,7 +279,7 @@ ul.umap-autocomplete { } .umap-singleresult div .close, .umap-multiresult li .close { - float: right; + float: inline-end; cursor: pointer; } @@ -358,6 +359,11 @@ ul.umap-autocomplete { .content .icon-delete { background-image: url('./img/icon-delete.svg'); } +html[dir="rtl"] .content .icon-edit, +html[dir="rtl"] .content .icon-share, +html[dir="rtl"] .content .icon-delete { + background-position: initial; /* this takes precedence over similar selector in icon.css and fixes position */ +} .table-header { display: flex; justify-content: space-between; @@ -427,8 +433,8 @@ ul.umap-autocomplete { .table-wrapper table thead tr th, .table-wrapper table th[scope="row"] { color: var(--color-darkBlue); - text-align: left; - padding-left: 2px; + text-align: start; + padding-inline-start: 2px; } .table-wrapper table thead tr th { line-height: 1.2; @@ -525,7 +531,7 @@ dialog::backdrop { } .twide { width: 100%; - padding-left: 0!important; + padding-inline-start: 0!important; } .tthird { width: 33.3333%; @@ -542,7 +548,7 @@ dialog::backdrop { } @media only screen and (max-width: 639px) { .mwide { - padding-left: 0!important; + padding-inline-start: 0!important; width: 100%; } .mwide + .mwide { diff --git a/umap/static/umap/css/icon.css b/umap/static/umap/css/icon.css index fb22329f..9375b54d 100644 --- a/umap/static/umap/css/icon.css +++ b/umap/static/umap/css/icon.css @@ -2,9 +2,8 @@ .icon { background-repeat: no-repeat; display: inline-block; - padding: 0 10px; vertical-align: middle; - /* Reste default style, in case we apply this class on a button element */ + /* Reset default style, in case we apply this class on a button element */ border: none; background-color: initial; } @@ -12,115 +11,143 @@ background-image: url('../img/16.svg'); height: 24px; line-height: 24px; + 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-left: 10px; + margin-inline-start: 10px; +} +html[dir="rtl"] .icon { + transform: scaleX(-1); } .icon-block { display: block; - float: left; - margin-right: 10px; + float: inline-start; + margin-inline-end: 10px; } .icon-block + span { - margin-left: 0; + margin-inline-start: 0; } .dark .icon-16 { background-image: url('../img/16-white.svg'); } +.dark .icon-24 { + background-image: url('../img/24-white.svg'); +} .icon-add { - background-position: -26px -24px; + background-position: var(--tile) var(--tile); } .icon-back { - background-position: -122px -144px; + background-position: calc(var(--tile) * 5) calc(var(--tile) * 6); +} +.icon-backup { + background-position: var(--tile) calc(var(--tile) * 6); } .icon-caption { - background-position: -98px -24px; + background-position: calc(var(--tile) * 4) var(--tile); } .icon-close { - background-position: -26px 0px; + background-position: var(--tile) 0px; +} +.icon-copy { + background-position: calc(var(--tile) * 2) calc(var(--tile) * 4); } .icon-delete { - background-position: -121px -49px; + background-position: calc(var(--tile) * 5) calc(var(--tile) * 2); } .readonly .icon-delete, .off .icon-delete { - background-position: -121px -122px; + background-position: calc(var(--tile) * 5) calc(var(--tile) * 5); +} +.icon-download { + background-position: 0 calc(var(--tile) * 6); } .icon-drag { - background-position: -72px -73px; + background-position: calc(var(--tile) * 3) calc(var(--tile) * 3); cursor: move; - float: right; + float: inline-end; } .icon-eye { - background-position: -49px -26px; + background-position: calc(var(--tile) * 2) var(--tile); } .off .icon-eye { - background-position: -73px -26px; + background-position: calc(var(--tile) * 3) var(--tile); } .icon-edit { - background-position: -51px -49px; + background-position: calc(var(--tile) * 2) calc(var(--tile) * 2); } .off .icon-edit { - background-position: -51px -73px; + background-position: calc(var(--tile) * 2) calc(var(--tile) * 3); } .icon-filters { - background-position: -4px -24px; + background-position: 0px var(--tile); +} +.icon-forward { + background-position: calc(var(--tile) * 6) calc(var(--tile) * 6); } .icon-key { - background-position: -144px -121px; + background-position: calc(var(--tile) * 6) calc(var(--tile) * 5); } .icon-layers { - background-position: -96px -120px; + background-position: calc(var(--tile) * 4) calc(var(--tile) * 5); } .icon-list { - background-position: -28px -99px; + background-position: var(--tile) calc(var(--tile) * 4); } .icon-marker { - background-position: -72px -120px; + background-position: calc(var(--tile) * 3) calc(var(--tile) * 5); } .icon-polygon { - background-position: -24px -119px; + background-position: var(--tile) calc(var(--tile) * 5); } .icon-polyline { - background-position: 0 -119px; + background-position: 0 calc(var(--tile) * 5); } .icon-resize { - background-position: -74px -144px; + background-position: calc(var(--tile) * 3) calc(var(--tile) * 6); } .icon-restore { - background-position: -121px -74px; + background-position: calc(var(--tile) * 5) calc(var(--tile) * 3); } .expanded .icon-resize { - background-position: -50px -144px; + background-position: calc(var(--tile) * 2) calc(var(--tile) * 6); } .icon-search { - background-position: -27px -120px; + background-position: var(--tile) calc(var(--tile) * 5); } .icon-settings { - background-position: -23px -97px; + background-position: var(--tile) calc(var(--tile) * 4); } .icon-share { - background-position: 0px -120px; + background-position: 0px calc(var(--tile) * 5); } .icon-table { - background-position: -50px -1px; + background-position: calc(var(--tile) * 2) 0px; } .readonly .icon-table, .off .icon-table { - background-position: -74px -1px; + background-position: calc(var(--tile) * 3) 0px; } .remotelayer .icon-table { display: none !important; } .icon-tilelayer { - background-position: -98px -141px; + background-position: calc(var(--tile) * 4) calc(var(--tile) * 6); } .icon-upload { - background-position: -144px -97px; + background-position: calc(var(--tile) * 6) calc(var(--tile) * 4); } .icon-zoom { - background-position: -1px -49px; + background-position: 0px calc(var(--tile) * 2); } .off .icon-zoom { - background-position: -25px -49px; + background-position: var(--tile) calc(var(--tile) * 2); } diff --git a/umap/static/umap/css/importers.css b/umap/static/umap/css/importers.css index f4a265c4..50f7c1b8 100644 --- a/umap/static/umap/css/importers.css +++ b/umap/static/umap/css/importers.css @@ -21,7 +21,7 @@ width: 36px; height: 36px; display: inline-block; - margin-right: 10px; + margin-inline-end: 10px; background-size: 100%; vertical-align: -10px; } diff --git a/umap/static/umap/css/slideshow.css b/umap/static/umap/css/slideshow.css index 795c77da..c5084ccd 100644 --- a/umap/static/umap/css/slideshow.css +++ b/umap/static/umap/css/slideshow.css @@ -1,6 +1,6 @@ .umap-slideshow-toolbox { position: absolute; - right: 0; + inset-inline-end: 0; top: 0; display: none; } @@ -20,7 +20,7 @@ text-align: center; } .umap-slideshow-toolbox li + li { - border-left: 1px solid var(--color-light); + border-inline-start: 1px solid var(--color-light); } .umap-slideshow-toolbox li:hover { background-color: var(--color-mediumGray); @@ -28,8 +28,8 @@ .umap-slideshow-active .umap-slideshow-toolbox .play, .umap-slideshow-toolbox .play { width: calc(var(--footer-height) * 3); - text-align: left; - padding-left: 20px; + text-align: start; + padding-inline-start: 20px; } .umap-slideshow-toolbox .play:after { content: '⏯︎'; @@ -40,9 +40,11 @@ .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, .umap-slideshow-toolbox .prev:before { content: '⏴︎'; } 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/components/alerts/alert.css b/umap/static/umap/js/components/alerts/alert.css index af445e6f..e9926c17 100644 --- a/umap/static/umap/js/components/alerts/alert.css +++ b/umap/static/umap/js/components/alerts/alert.css @@ -14,7 +14,7 @@ display: flex; justify-content: space-between; align-items: flex-start; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, 0); max-width: calc(100% - var(--panel-gutter) * 2); width: max-content; @@ -25,20 +25,29 @@ min-width: 60%; background-size: 20px; background-position: 0 15px; - padding-left: 28px; + padding-inline-start: 28px; } .umap-alert[role="dialog"][data-level="info"] > div { background-image: url('../../../img/alert-icon-info.svg'); background-repeat: no-repeat; } +html[dir="rtl"] .umap-alert[role="dialog"][data-level="info"] > div { + background-position: right; +} .umap-alert[role="dialog"][data-level="success"] > div { background-image: url('../../../img/alert-icon-success.svg'); background-repeat: no-repeat; } +html[dir="rtl"] .umap-alert[role="dialog"][data-level="success"] > div { + background-position: right; +} .umap-alert[role="dialog"][data-level="error"] > div { background-image: url('../../../img/alert-icon-error.svg'); background-repeat: no-repeat; } +html[dir="rtl"] .umap-alert[role="dialog"][data-level="error"] > div { + background-position: right; +} .umap-alert[role="dialog"][data-level="error"] { background-color: var(--color-darkRed); } @@ -51,9 +60,12 @@ } .umap-alert[role="dialog"] a[target="_blank"] { background: url('../../../img/icon-external-link.svg') no-repeat right center; - padding-right: 14px; + padding-inline-end: 14px; background-size: 12px; } +html[dir="rtl"] .umap-alert[role="dialog"] a[target="_blank"] { + background: url('../../../img/icon-external-link.svg') no-repeat left center; +} h3[role="alert"] { margin-bottom: 0; margin-top: 1rem; @@ -74,14 +86,14 @@ h3[role="alert"] + p { } [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="group"] > :not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="group"] > :not(:first-child) { - margin-left: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; + margin-inline-start: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; width: 45%; } [role="group"] input[type="submit"] { 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 363066ae..69a54766 100644 --- a/umap/static/umap/js/modules/share.js +++ b/umap/static/umap/js/modules/share.js @@ -1,4 +1,7 @@ +import { DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js' import { EXPORT_FORMATS } from './formatter.js' +import { translate } from './i18n.js' +import * as Utils from './utils.js' export default class Share { constructor(map) { @@ -6,85 +9,103 @@ export default class Share { } build() { - this.container = L.DomUtil.create('div', '') - this.title = L.DomUtil.createTitle( + this.container = DomUtil.create('div', '') + this.title = DomUtil.createTitle( this.container, - L._('Share and download'), + translate('Share and download'), 'icon-share' ) - L.DomUtil.createCopiableInput( + DomUtil.createCopiableInput( this.container, - L._('Link to view the map'), - window.location.protocol + U.Utils.getBaseUrl() + translate('Link to view the map'), + window.location.protocol + Utils.getBaseUrl() ) if (this.map.options.shortUrl) { - L.DomUtil.createCopiableInput( + DomUtil.createCopiableInput( this.container, - L._('Short link'), + translate('Short link'), this.map.options.shortUrl ) } - L.DomUtil.create('hr', '', this.container) + DomUtil.create('hr', '', this.container) - L.DomUtil.add('h4', '', this.container, L._('Download')) - L.DomUtil.add('small', 'label', this.container, L._("Only visible layers' data")) - for (const format of Object.keys(EXPORT_FORMATS)) { - L.DomUtil.createButton('download-file', this.container, format, () => - this.download(format) - ) - } - L.DomUtil.create('div', 'vspace', this.container) - L.DomUtil.add( + DomUtil.add('h4', '', this.container, translate('Download')) + DomUtil.add( 'small', 'label', this.container, - L._('All data and settings of the map') + translate("Only visible layers' data") ) - const downloadUrl = U.Utils.template(this.map.options.urls.map_download, { + const list = document.createElement('ul') + list.classList.add('downloads') + this.container.appendChild(list) + for (const format of Object.keys(EXPORT_FORMATS)) { + const button = Utils.loadTemplate(` +
  • + +
    • + `) + button.addEventListener('click', () => this.download(format)) + list.appendChild(button) + } + DomUtil.create('div', 'vspace', this.container) + DomUtil.add( + 'small', + 'label', + this.container, + translate('All data and settings of the map') + ) + const downloadUrl = Utils.template(this.map.options.urls.map_download, { map_id: this.map.options.umap_id, }) - const link = L.DomUtil.createLink( - 'download-backup', - this.container, - L._('full backup'), - downloadUrl - ) - let name = this.map.options.name || 'data' - name = name.replace(/[^a-z0-9]/gi, '_').toLowerCase() - link.setAttribute('download', `${name}.umap`) - L.DomUtil.create('hr', '', this.container) + 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 = L.DomUtil.add('h4', '', this.container, L._('Embed the map')) - const iframe = L.DomUtil.create('textarea', 'umap-share-iframe', this.container) - const urlTitle = L.DomUtil.add('h4', '', this.container, L._('Direct link')) - const exportUrl = L.DomUtil.createCopiableInput( + const embedTitle = DomUtil.add('h4', '', this.container, translate('Embed the map')) + const iframe = DomUtil.create('textarea', 'umap-share-iframe', this.container) + const urlTitle = DomUtil.add('h4', '', this.container, translate('Direct link')) + const exportUrl = DomUtil.createCopiableInput( this.container, - L._('Share this link to open a customized map view'), + translate('Share this link to open a customized map view'), '' ) exportUrl.type = 'text' const UIFields = [ - ['dimensions.width', { handler: 'Input', label: L._('width') }], - ['dimensions.height', { handler: 'Input', label: L._('height') }], + ['dimensions.width', { handler: 'Input', label: translate('width') }], + ['dimensions.height', { handler: 'Input', label: translate('height') }], [ 'options.includeFullScreenLink', - { handler: 'Switch', label: L._('Include full screen link?') }, + { handler: 'Switch', label: translate('Include full screen link?') }, ], [ 'options.currentView', - { handler: 'Switch', label: L._('Current view instead of default map view?') }, + { + handler: 'Switch', + label: translate('Current view instead of default map view?'), + }, ], [ 'options.keepCurrentDatalayers', - { handler: 'Switch', label: L._('Keep current visible layers') }, + { handler: 'Switch', label: translate('Keep current visible layers') }, ], [ 'options.viewCurrentFeature', - { handler: 'Switch', label: L._('Open current feature on load') }, + { handler: 'Switch', label: translate('Open current feature on load') }, ], 'queryString.moreControl', 'queryString.scrollWheelZoom', @@ -106,9 +127,9 @@ export default class Share { const builder = new U.FormBuilder(iframeExporter, UIFields, { callback: buildIframeCode, }) - const iframeOptions = L.DomUtil.createFieldset( + const iframeOptions = DomUtil.createFieldset( this.container, - L._('Embed and link options') + translate('Embed and link options') ) iframeOptions.appendChild(builder.build()) } @@ -144,7 +165,7 @@ export default class Share { class IframeExporter { constructor(map) { this.map = map - this.baseUrl = U.Utils.getBaseUrl() + this.baseUrl = Utils.getBaseUrl() this.options = { includeFullScreenLink: true, currentView: false, @@ -199,7 +220,7 @@ class IframeExporter { } const currentView = this.options.currentView ? window.location.hash : '' const queryString = L.extend({}, this.queryString, options) - return `${this.baseUrl}?${U.Utils.buildQueryString(queryString)}${currentView}` + return `${this.baseUrl}?${Utils.buildQueryString(queryString)}${currentView}` } build() { @@ -207,7 +228,7 @@ class IframeExporter { let code = `` if (this.options.includeFullScreenLink) { const fullUrl = this.buildUrl({ scrollWheelZoom: true }) - code += `

    ${L._('See full screen')}

    ` + code += `

    ${translate('See full screen')}

    ` } return code } 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 9632b74d..6db07c63 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -1,3 +1,24 @@ +/* ************* */ +/* temporary fix */ +/* ************* */ +/* https://github.com/umap-project/umap/pull/2046#issuecomment-2278046469 */ +html[dir="rtl"] .leaflet-inplace-toolbar { + direction: ltr; +} +html[dir="rtl"] .leaflet-inplace-toolbar > * { + direction: rtl; +} +html[dir="rtl"] .leaflet-tooltip-pane { + direction: ltr; +} +html[dir="rtl"] .leaflet-tooltip-pane > * { + direction: rtl; +} +.marker-cluster div { /* fix cluster icon for rtl */ + margin-left: unset; + margin-inline-start: 5px; +} + /* *********** */ /* Map details */ /* *********** */ @@ -138,7 +159,7 @@ font-size: 0.8em; } .umap-control-text [type="button"] { - float: right; + float: inline-end; background-color: #666; margin: 0; width: 36px; @@ -150,11 +171,10 @@ width: 24px; height: 24px; display: inline-block; - vertical-align: middle; + vertical-align: -20%; background-image: url('./img/16-white.svg'); - background-position: -52px -49px; + background-position: -48px -48px; } - .leaflet-control-edit-enable [type="button"] { width: initial; padding: 0 20px; @@ -172,7 +192,7 @@ } .umap-permanent-credits-container { max-width: 20rem; - margin-left: 5px!important; + margin-inline-start: 5px!important; margin-bottom: 5px!important; padding: 0.5rem; } @@ -199,7 +219,7 @@ } .leaflet-iconLayers-layerTitleContainer { display: none; - left: 0; + inset-inline-start: 0; overflow: hidden; min-height: 1.5rem; height: 1.5rem; @@ -257,13 +277,13 @@ ul.photon-autocomplete { overflow: hidden; white-space: nowrap; font-size: 1em; - border-left: 4px solid #efefef; + border-inline-start: 4px solid #efefef; } .photon-autocomplete li strong { display: block; } .photon-autocomplete li.on { - border-left: 4px solid #2980b9; + border-inline-start: 4px solid #2980b9; cursor: pointer; } .photon-autocomplete li.photon-no-result { @@ -274,14 +294,14 @@ ul.photon-autocomplete { } .photon-autocomplete .photon-feedback { display: block; - text-align: right; + text-align: end; font-size: 0.8em; padding: 3px; color: #999; border-top: 1px solid #eee; } .search-result-tools { - float: right; + float: inline-end; display: block; } @@ -290,32 +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: left; + 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; -} -.download-backup:before { - background-position: -27px -144px; -} -.leaflet-container .download-backup { - color: black; - display: block; -} .vspace { height: 32px; } @@ -431,7 +431,7 @@ ul.photon-autocomplete { display: inline-block; width: 16px; height: 16px; - margin-left: 5px; + margin-inline-start: 5px; background-position: -4px -4px; background-repeat: no-repeat; background-image: url('./img/16.svg'); @@ -526,7 +526,7 @@ ul.photon-autocomplete { .leaflet-container .leaflet-control-edit-disable span, .leaflet-container .leaflet-control-edit-save span, .leaflet-container .leaflet-control-edit-cancel span { - margin-left: 10px; + margin-inline-start: 10px; } .leaflet-container .leaflet-control-edit-save:before { background-position: -148px -2px; @@ -594,7 +594,7 @@ ul.photon-autocomplete { height: 46px; background-color: var(--color-darkGray); padding: 0 10px; - text-align: left; + text-align: start; line-height: var(--control-size); cursor: auto; border-bottom: 1px solid #222; @@ -633,7 +633,7 @@ ul.photon-autocomplete { white-space: nowrap; text-overflow: ellipsis; font-weight: bold; - text-align: left; + text-align: start; } .umap-main-edit-toolbox .share-status { font-size: 1em; @@ -641,10 +641,9 @@ ul.photon-autocomplete { overflow: hidden; text-overflow: ellipsis; } - .map-name:after { content: '\00a0'; - padding-left: 3px; + padding-inline-start: 3px; width: 1ch; display: inline-block; } @@ -659,11 +658,11 @@ ul.photon-autocomplete { display: inline; } .umap-caption-bar button { - margin-left: 10px; + margin-inline-start: 10px; } .umap-caption-bar button + button:before { content: '|'; - padding-right: 10px; + padding-inline-end: 10px; } .umap-main-edit-toolbox .umap-user { color: #fff; @@ -673,7 +672,7 @@ ul.photon-autocomplete { } .umap-main-edit-toolbox .umap-user:after { content: '|'; - padding-left: 20px; + padding-inline-start: 20px; display: inline-block; /* Prevents underline on hover. */ } .umap-caption-bar-enabled .umap-caption-bar { @@ -686,7 +685,7 @@ ul.photon-autocomplete { bottom: 0; right: 0; padding: var(--gutter); - text-align: left; + text-align: start; line-height: 100%; cursor: auto; border-top: 1px solid var(--color-lightGray); @@ -708,7 +707,7 @@ ul.photon-autocomplete { background-position: -122px -73px; background-repeat: no-repeat; background-image: url('./img/16-white.svg'); - margin-right: 10px; + margin-inline-end: 10px; } .leaflet-toolbar-tip { @@ -764,7 +763,7 @@ ul.photon-autocomplete { .umap-browser .feature-title { width: inherit; cursor: inherit; - padding-left: 6px; + padding-inline-start: 6px; } .umap-browser .feature-title { font-size: 12px; @@ -835,7 +834,7 @@ a.umap-control-caption, .umap-browser h5, .umap-facet-search h5 { margin-bottom: 0; overflow: hidden; - padding-left: 5px; + padding-inline-start: 5px; height: 30px; line-height: 30px; background-color: var(--color-lightGray); @@ -848,7 +847,7 @@ a.umap-control-caption, color: white; } .umap-browser h5 span { - margin-left: 10px; + margin-inline-start: 10px; } .umap-browser li, .umap-facet-search li { padding: 2px 0; @@ -873,7 +872,7 @@ a.umap-control-caption, padding: 0; width: 24px; text-align: center; - margin-left: 5px; + margin-inline-start: 5px; } .umap-browser.dark .datalayer .feature-color { box-shadow: 0 0 2px 0 #999 inset; @@ -898,8 +897,8 @@ a.umap-control-caption, background-position: -48px -25px; } .umap-browser .datalayer-toggle-list { - float: right; - margin-right: 5px; + float: inline-end; + margin-inline-end: 5px; background-position: -145px -70px; } .umap-browser .show-list .datalayer-toggle-list { @@ -924,7 +923,7 @@ a.umap-control-caption, cursor: pointer; } .umap-caption .umap-map-owner { - padding-left: 31px; + padding-inline-start: 31px; } @@ -951,7 +950,7 @@ a.umap-control-caption, height: 56px; line-height: 56px; opacity: 0.9; - padding-left: 10px; + padding-inline-start: 10px; position: absolute; width: 100%; text-align: center; @@ -961,9 +960,9 @@ a.umap-control-caption, content: "✓"; font-size: 1.3em; line-height: 56px; - padding-right: 7px; + padding-inline-end: 7px; position: absolute; - left: 7px; + inset-inline-start: 7px; } .umap-tilelayer-switcher-container li img { display: block; @@ -977,7 +976,7 @@ a.umap-control-caption, display: inline-block; width: 16px; height: 16px; - margin-right: 10px; + margin-inline-end: 10px; border: 1px solid #000; background-color: transparent; vertical-align: middle; @@ -1021,39 +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-left: 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; -} -.umap-popup-footer li[rel="next"]:before { - background-position: -5px -77px; + justify-content: space-around; } .umap-popup a:hover { text-decoration: underline; @@ -1072,11 +1045,11 @@ a[href^='tel']::before { content: '☎︎ '; } address span { - padding-right: 5px; + padding-inline-end: 5px; } .osm-link { margin-top: 10px; - text-align: right; + text-align: end; font-style: italic; } span.popup-icon { @@ -1103,7 +1076,7 @@ span.popup-icon { box-shadow: 7px 10px 10px -1px black; height: 36px; line-height: 36px; - margin-left: -2px; + margin-inline-start: -2px; margin-top: -4px; opacity: 1.0!important; width: 36px; @@ -1118,7 +1091,7 @@ span.popup-icon { border-right: 8px solid transparent; border-top: 8px solid #2270b5; height: 0; - left: 8px; + inset-inline-start: 8px; position: relative; width: 0; opacity: 0.9; @@ -1131,7 +1104,7 @@ span.popup-icon { border-right: 10px solid transparent; border-top: 16px solid #2270B5; height: 0; - left: 6px; + inset-inline-start: 6px; position: relative; top: -4px; width: 0; @@ -1140,7 +1113,7 @@ span.popup-icon { border-left-width: 12px; border-right-width: 12px; border-top-width: 18px; - left: 4px; + inset-inline-start: 4px; opacity: 1.0!important; } .umap-drop-icon .icon_container { @@ -1158,7 +1131,7 @@ span.popup-icon { border-radius: 18px 18px 18px 18px; height: 36px; line-height: 36px; - margin-left: -2px; + margin-inline-start: -2px; margin-top: -6px; opacity: 1.0!important; width: 36px; @@ -1176,14 +1149,14 @@ span.popup-icon { .umap-circle-icon { border: 1px solid white; border-radius: 10px 10px 10px 10px; - margin-left: -6px; + margin-inline-start: -6px; margin-top: -6px; height: 12px; width: 12px; } .umap-circle-icon.umap-icon-active { height: 16px; - margin-left: -8px; + margin-inline-start: -8px; margin-top: -8px; opacity: 1.0!important; width: 16px; @@ -1201,7 +1174,7 @@ span.popup-icon { .umap-ball-icon.umap-icon-active .icon_container { border-radius: 10px 10px 10px 10px; box-shadow: 1px 23px 7px -1px black; - margin-left: -2px; + margin-inline-start: -2px; margin-top: -4px; height: 20px; opacity: 1.0!important; @@ -1210,7 +1183,7 @@ span.popup-icon { .umap-ball-icon .icon_arrow { background-color: black; height: 16px; - left: 7px; + inset-inline-start: 7px; opacity: 0.9; position: relative; top: -1px; @@ -1407,7 +1380,7 @@ span.popup-icon { line-height: var(--control-size); } .leaflet-container .leaflet-control-zoom { - margin-left: 10px; + margin-inline-start: 10px; } .leaflet-top { z-index: calc(var(--zindex-panels) - 1); @@ -1439,7 +1412,7 @@ span.popup-icon { background-color: #f6f6f6; } .umap-popup-content th { - text-align: left; + text-align: start; } .umap-popup-content td { word-break: break-word; @@ -1524,7 +1497,7 @@ span.popup-icon { display: none; } .umap-main-edit-toolbox .umap-user { - margin-right: 10px; + margin-inline-end: 10px; } .umap-main-edit-toolbox .umap-user:after { display: none; @@ -1551,13 +1524,11 @@ span.popup-icon { .leaflet-control-layers-expanded label { display: inline-block; - margin-right: 10px; + margin-inline-end: 10px; } - .leaflet-control-layers-expanded { - margin-left: 10px; + margin-inline-start: 10px; } - .umap-permanent-credits-container { max-width: 100%; } diff --git a/umap/static/umap/nav.css b/umap/static/umap/nav.css index d052e112..33658df9 100644 --- a/umap/static/umap/nav.css +++ b/umap/static/umap/nav.css @@ -22,9 +22,12 @@ footer a.branding { font-size: 30px; font-weight: bold; height: 140px; - padding-left: 70px; + padding-inline-start: 70px; display: inline-block; } +html[dir="rtl"] footer a.branding { + background-position: right center; +} footer .i18n_switch { display: inline-block; @@ -51,10 +54,13 @@ footer .i18n_switch { background-repeat: no-repeat; background-size: 60px auto; line-height: 70px; - padding-left: 80px; + padding-inline-start: 80px; display: block; font-size: 2.5rem; } +html[dir="rtl"] .umap-nav h1 a { + background-position: right center; +} .umap-nav ul { text-align: center; font-weight: bold; @@ -66,7 +72,7 @@ footer .i18n_switch { .umap-nav .button:hover { text-decoration: none; min-width: 150px; - margin-left: 1rem; + margin-inline-start: 1rem; } @media only screen and (min-width: 500px) { diff --git a/umap/static/umap/vendors/markercluster/MarkerCluster.Default.css b/umap/static/umap/vendors/markercluster/MarkerCluster.Default.css index bbc8c9fb..db8a1f2b 100755 --- a/umap/static/umap/vendors/markercluster/MarkerCluster.Default.css +++ b/umap/static/umap/vendors/markercluster/MarkerCluster.Default.css @@ -57,4 +57,4 @@ } .marker-cluster span { line-height: 30px; - } \ No newline at end of file + }