From ec790ad296d1a091e7f7aeddd82ea8b642b058d7 Mon Sep 17 00:00:00 2001 From: fim100 <107080649+fim100@users.noreply.github.com> Date: Mon, 5 Aug 2024 12:31:10 +0330 Subject: [PATCH 01/18] making MarkerCluster.Default.css rtl-friendly --- .../umap/vendors/markercluster/MarkerCluster.Default.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/umap/static/umap/vendors/markercluster/MarkerCluster.Default.css b/umap/static/umap/vendors/markercluster/MarkerCluster.Default.css index bbc8c9fb..a453b206 100755 --- a/umap/static/umap/vendors/markercluster/MarkerCluster.Default.css +++ b/umap/static/umap/vendors/markercluster/MarkerCluster.Default.css @@ -48,7 +48,7 @@ .marker-cluster div { width: 30px; height: 30px; - margin-left: 5px; + margin-inline-start: 5px; margin-top: 5px; text-align: center; @@ -57,4 +57,4 @@ } .marker-cluster span { line-height: 30px; - } \ No newline at end of file + } From d65c48a88aa0ccb59b624e951ca737070cebc7aa Mon Sep 17 00:00:00 2001 From: fim100 <107080649+fim100@users.noreply.github.com> Date: Mon, 5 Aug 2024 12:32:00 +0330 Subject: [PATCH 02/18] making Update leaflet.css rtl-friendly --- umap/static/umap/vendors/leaflet/leaflet.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/umap/static/umap/vendors/leaflet/leaflet.css b/umap/static/umap/vendors/leaflet/leaflet.css index 2961b761..3f5c2013 100644 --- a/umap/static/umap/vendors/leaflet/leaflet.css +++ b/umap/static/umap/vendors/leaflet/leaflet.css @@ -481,7 +481,7 @@ svg.leaflet-image-layer.leaflet-interactive path { } .leaflet-popup-content-wrapper { padding: 1px; - text-align: left; + text-align: start; border-radius: 12px; } .leaflet-popup-content { From 1671a0bef1cd5d64c0fd3e56997c693456dbd921 Mon Sep 17 00:00:00 2001 From: fim100 <107080649+fim100@users.noreply.github.com> Date: Mon, 5 Aug 2024 12:35:30 +0330 Subject: [PATCH 03/18] making Update icon.css rtl-friendly --- umap/static/umap/css/icon.css | 38 ++++++++++++++++++++++++++++++----- 1 file changed, 33 insertions(+), 5 deletions(-) diff --git a/umap/static/umap/css/icon.css b/umap/static/umap/css/icon.css index fb22329f..d658f804 100644 --- a/umap/static/umap/css/icon.css +++ b/umap/static/umap/css/icon.css @@ -14,15 +14,15 @@ line-height: 24px; } .icon + span { - margin-left: 10px; + margin-inline-start: 10px; } .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'); @@ -30,9 +30,15 @@ .icon-add { background-position: -26px -24px; } +html[dir="rtl"] .icon-add { + background-position: -25px -24px; +} .icon-back { background-position: -122px -144px; } +html[dir="rtl"] .icon-back { + transform: scaleX(-1); +} .icon-caption { background-position: -98px -24px; } @@ -42,14 +48,21 @@ .icon-delete { background-position: -121px -49px; } +html[dir="rtl"] .icon-delete { + background-position: -124px -49px; +} .readonly .icon-delete, .off .icon-delete { background-position: -121px -122px; } +html[dir="rtl"] .readonly .icon-delete, +html[dir="rtl"] .off .icon-delete { + background-position: -124px -122px; +} .icon-drag { background-position: -72px -73px; cursor: move; - float: right; + float: inline-end; } .icon-eye { background-position: -49px -26px; @@ -60,12 +73,21 @@ .icon-edit { background-position: -51px -49px; } +html[dir="rtl"] .icon-edit { + background-position: -49px -49px; +} .off .icon-edit { background-position: -51px -73px; } +html[dir="rtl"] .off .icon-edit { + background-position: -49px -73px; +} .icon-filters { background-position: -4px -24px; } +html[dir="rtl"] .icon-filters { + background-position: -1px -24px; +} .icon-key { background-position: -144px -121px; } @@ -99,9 +121,15 @@ .icon-settings { background-position: -23px -97px; } +html[dir="rtl"] .icon-settings { + background-position: -27px -97px; +} .icon-share { background-position: 0px -120px; } +html[dir="rtl"] .icon-share { + background-position: -3px -120px; +} .icon-table { background-position: -50px -1px; } From a39d89295c2ecf71b6864ab9d90c92df2b6ce75a Mon Sep 17 00:00:00 2001 From: fim100 <107080649+fim100@users.noreply.github.com> Date: Mon, 5 Aug 2024 12:38:01 +0330 Subject: [PATCH 04/18] making slideshow.css rtl-friendly --- umap/static/umap/css/slideshow.css | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/umap/static/umap/css/slideshow.css b/umap/static/umap/css/slideshow.css index 795c77da..1877cc87 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: '⏯︎'; @@ -43,9 +43,15 @@ .umap-slideshow-toolbox .next:before { content: '⏵︎'; } +html[dir="rtl"] .umap-slideshow-toolbox .next:before { + content: '⏴︎'; +} .umap-slideshow-toolbox .prev:before { content: '⏴︎'; } +html[dir="rtl"] .umap-slideshow-toolbox .prev:before { + content: '⏵︎'; +} .umap-slideshow-toolbox .play div { height: 20px; width: 20px; From 26b1369a3c2f238bbb997e5f053d570b12712955 Mon Sep 17 00:00:00 2001 From: fim100 <107080649+fim100@users.noreply.github.com> Date: Mon, 5 Aug 2024 12:41:49 +0330 Subject: [PATCH 05/18] make base.css rtl-friendly --- umap/static/umap/base.css | 64 +++++++++++++++++++++++++-------------- 1 file changed, 41 insertions(+), 23 deletions(-) diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index 048b7602..a7dabd4d 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; @@ -616,24 +616,42 @@ i.info { .umap-to-polygon:before { background-position: -80px -48px; } +html[dir="rtl"] .umap-to-polygon:before { + background-position: -69px -41px; +} .umap-to-polyline:before { background-position: -110px -42px; } +html[dir="rtl"] .umap-to-polyline:before { + background-position: -105px -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; } .umap-empty:before { background-position: -110px -78px; } +html[dir="rtl"] .umap-empty:before { + background-position: -104px -78px; +} .umap-download:before { background-position: -77px -78px; } +html[dir="rtl"] .umap-download:before { + background-position: -68px -78px; +} .permissions-panel, .umap-upload, .umap-share, @@ -711,7 +729,7 @@ i.info { .umap-pictogram-choice .leaflet-marker-icon { bottom: 0; - left: 30px; + inset-inline-start: 30px; position: absolute; } .umap-color-picker { @@ -727,14 +745,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 +765,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, From b886dbac3c8589c73be186fde7cf7cbb5439d4db Mon Sep 17 00:00:00 2001 From: fim100 <107080649+fim100@users.noreply.github.com> Date: Mon, 5 Aug 2024 12:44:06 +0330 Subject: [PATCH 06/18] make content.css rtl-friendly --- umap/static/umap/content.css | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/umap/static/umap/content.css b/umap/static/umap/content.css index 12122b04..1ddf6067 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,13 @@ h2.tabs a { text-decoration-thickness: 3px; text-decoration-skip-ink: none; text-underline-offset: 7px; - margin-right: 2rem; + margin-inline-end: 2rem; } 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 +278,7 @@ ul.umap-autocomplete { } .umap-singleresult div .close, .umap-multiresult li .close { - float: right; + float: inline-end; cursor: pointer; } @@ -427,8 +427,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 +525,7 @@ dialog::backdrop { } .twide { width: 100%; - padding-left: 0!important; + padding-inline-start: 0!important; } .tthird { width: 33.3333%; @@ -542,7 +542,7 @@ dialog::backdrop { } @media only screen and (max-width: 639px) { .mwide { - padding-left: 0!important; + padding-inline-start: 0!important; width: 100%; } .mwide + .mwide { From 3d7ca9c6f964c34e96bde88717711284794fbb1c Mon Sep 17 00:00:00 2001 From: fim100 <107080649+fim100@users.noreply.github.com> Date: Mon, 5 Aug 2024 12:44:42 +0330 Subject: [PATCH 07/18] make importers.css rtl-friendly --- umap/static/umap/css/importers.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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; } From ed2a91330f989653982072bdcc674ae24beed893 Mon Sep 17 00:00:00 2001 From: fim100 <107080649+fim100@users.noreply.github.com> Date: Mon, 5 Aug 2024 12:45:26 +0330 Subject: [PATCH 08/18] make nav.css rtl-friendly --- umap/static/umap/nav.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) 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) { From c554427fa8d3bcdb71275e19eac55a0bda29af2f Mon Sep 17 00:00:00 2001 From: fim100 <107080649+fim100@users.noreply.github.com> Date: Mon, 5 Aug 2024 12:47:08 +0330 Subject: [PATCH 09/18] make alert.css rtl-friendly --- .../umap/js/components/alerts/alert.css | 28 +++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) 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"] { From c52207ee0f263c50296e8898fb770494feab30c5 Mon Sep 17 00:00:00 2001 From: fim100 <107080649+fim100@users.noreply.github.com> Date: Mon, 5 Aug 2024 12:54:41 +0330 Subject: [PATCH 10/18] make map.css rtl-friendly --- umap/static/umap/map.css | 115 ++++++++++++++++++++++----------------- 1 file changed, 65 insertions(+), 50 deletions(-) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 9632b74d..14f7c539 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -138,7 +138,7 @@ font-size: 0.8em; } .umap-control-text [type="button"] { - float: right; + float: inline-end; background-color: #666; margin: 0; width: 36px; @@ -154,7 +154,9 @@ 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; +} .leaflet-control-edit-enable [type="button"] { width: initial; padding: 0 20px; @@ -172,7 +174,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 +201,7 @@ } .leaflet-iconLayers-layerTitleContainer { display: none; - left: 0; + inset-inline-start: 0; overflow: hidden; min-height: 1.5rem; height: 1.5rem; @@ -257,13 +259,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 +276,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; } @@ -294,7 +296,7 @@ ul.photon-autocomplete { height: 1.2em; min-height: 1.2em; padding: 0; - text-align: left; + text-align: start; vertical-align: bottom; } .download-file:before, @@ -309,9 +311,16 @@ ul.photon-autocomplete { 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; @@ -431,7 +440,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 +535,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 +603,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; @@ -627,13 +636,16 @@ ul.photon-autocomplete { 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; 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 +653,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 +670,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 +684,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 +697,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 +719,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 +775,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 +846,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 +859,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 +884,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 +909,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 +935,7 @@ a.umap-control-caption, cursor: pointer; } .umap-caption .umap-map-owner { - padding-left: 31px; + padding-inline-start: 31px; } @@ -951,7 +962,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 +972,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 +988,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; @@ -1040,7 +1051,7 @@ a.umap-control-caption, display: inline-block; width: 16px; height: 16px; - margin-left: 5px; + margin-inline-start: 5px; background-repeat: no-repeat; background-image: url('./img/16.svg'); vertical-align: middle; @@ -1052,9 +1063,15 @@ a.umap-control-caption, .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; +} .umap-popup a:hover { text-decoration: underline; } @@ -1072,11 +1089,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 +1120,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 +1135,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 +1148,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 +1157,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 +1175,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 +1193,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 +1218,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 +1227,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 +1424,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 +1456,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 +1541,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 +1568,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%; } From 80a842bd32ae427e628c14592e6ddf1f5e7327af Mon Sep 17 00:00:00 2001 From: fim100 <107080649+fim100@users.noreply.github.com> Date: Fri, 9 Aug 2024 08:12:42 +0330 Subject: [PATCH 11/18] fix icon position in dashboard --- umap/static/umap/content.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/umap/static/umap/content.css b/umap/static/umap/content.css index 1ddf6067..1d1a3a7d 100644 --- a/umap/static/umap/content.css +++ b/umap/static/umap/content.css @@ -358,6 +358,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; From e74ca192d669916f1248af1913e0b1de3d7dc969 Mon Sep 17 00:00:00 2001 From: fim100 <107080649+fim100@users.noreply.github.com> Date: Fri, 9 Aug 2024 08:26:36 +0330 Subject: [PATCH 12/18] fix placement of navigation links in dashboard My Map and My Profile --- umap/static/umap/content.css | 1 + 1 file changed, 1 insertion(+) diff --git a/umap/static/umap/content.css b/umap/static/umap/content.css index 1d1a3a7d..04cc8946 100644 --- a/umap/static/umap/content.css +++ b/umap/static/umap/content.css @@ -145,6 +145,7 @@ h2.tabs a { text-decoration-skip-ink: none; text-underline-offset: 7px; margin-inline-end: 2rem; + display: inline-block; } h2.tabs a:not(.selected) { font-weight: normal; From f9ba7f3c50a4dd430122903469877b61b6610b85 Mon Sep 17 00:00:00 2001 From: fim100 <107080649+fim100@users.noreply.github.com> Date: Fri, 9 Aug 2024 18:02:09 +0330 Subject: [PATCH 13/18] Update map.css --- umap/static/umap/map.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 14f7c539..3a8b4435 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 */ /* *********** */ From 431cd91d4cbf399054a772d2a9ea97f923f04dbd Mon Sep 17 00:00:00 2001 From: fim100 <107080649+fim100@users.noreply.github.com> Date: Fri, 9 Aug 2024 19:45:29 +0330 Subject: [PATCH 14/18] revert leaflet.css --- umap/static/umap/vendors/leaflet/leaflet.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/umap/static/umap/vendors/leaflet/leaflet.css b/umap/static/umap/vendors/leaflet/leaflet.css index 3f5c2013..2961b761 100644 --- a/umap/static/umap/vendors/leaflet/leaflet.css +++ b/umap/static/umap/vendors/leaflet/leaflet.css @@ -481,7 +481,7 @@ svg.leaflet-image-layer.leaflet-interactive path { } .leaflet-popup-content-wrapper { padding: 1px; - text-align: start; + text-align: left; border-radius: 12px; } .leaflet-popup-content { From ca86721b89d2dbe3cb128255dad019cc1c40b46c Mon Sep 17 00:00:00 2001 From: fim100 <107080649+fim100@users.noreply.github.com> Date: Fri, 9 Aug 2024 19:48:13 +0330 Subject: [PATCH 15/18] revert MarkerCluster.Default.css --- .../static/umap/vendors/markercluster/MarkerCluster.Default.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/umap/static/umap/vendors/markercluster/MarkerCluster.Default.css b/umap/static/umap/vendors/markercluster/MarkerCluster.Default.css index a453b206..db8a1f2b 100755 --- a/umap/static/umap/vendors/markercluster/MarkerCluster.Default.css +++ b/umap/static/umap/vendors/markercluster/MarkerCluster.Default.css @@ -48,7 +48,7 @@ .marker-cluster div { width: 30px; height: 30px; - margin-inline-start: 5px; + margin-left: 5px; margin-top: 5px; text-align: center; From d0c1a55b2fa9ed3203b42c77554eeea4910d51aa Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Wed, 28 Aug 2024 17:31:09 +0200 Subject: [PATCH 16/18] chore: make icon.css more logical and working in rtl --- umap/static/umap/css/icon.css | 96 +++++++++++++---------------------- 1 file changed, 36 insertions(+), 60 deletions(-) diff --git a/umap/static/umap/css/icon.css b/umap/static/umap/css/icon.css index d658f804..75bd3c60 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,10 +11,15 @@ background-image: url('../img/16.svg'); height: 24px; line-height: 24px; + width: 24px; + --tile: -24px; } .icon + span { margin-inline-start: 10px; } +html[dir="rtl"] .icon { + transform: scaleX(-1); +} .icon-block { display: block; float: inline-start; @@ -28,127 +32,99 @@ background-image: url('../img/16-white.svg'); } .icon-add { - background-position: -26px -24px; -} -html[dir="rtl"] .icon-add { - background-position: -25px -24px; + background-position: var(--tile) var(--tile); } .icon-back { - background-position: -122px -144px; -} -html[dir="rtl"] .icon-back { - transform: scaleX(-1); + background-position: calc(var(--tile) * 5) 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-delete { - background-position: -121px -49px; -} -html[dir="rtl"] .icon-delete { - background-position: -124px -49px; + background-position: calc(var(--tile) * 5) calc(var(--tile) * 2); } .readonly .icon-delete, .off .icon-delete { - background-position: -121px -122px; -} -html[dir="rtl"] .readonly .icon-delete, -html[dir="rtl"] .off .icon-delete { - background-position: -124px -122px; + background-position: calc(var(--tile) * 5) calc(var(--tile) * 5); } .icon-drag { - background-position: -72px -73px; + background-position: calc(var(--tile) * 3) calc(var(--tile) * 3); cursor: move; 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; -} -html[dir="rtl"] .icon-edit { - background-position: -49px -49px; + background-position: calc(var(--tile) * 2) calc(var(--tile) * 2); } .off .icon-edit { - background-position: -51px -73px; -} -html[dir="rtl"] .off .icon-edit { - background-position: -49px -73px; + background-position: calc(var(--tile) * 2) calc(var(--tile) * 3); } .icon-filters { - background-position: -4px -24px; -} -html[dir="rtl"] .icon-filters { - background-position: -1px -24px; + background-position: 0px var(--tile); } .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; -} -html[dir="rtl"] .icon-settings { - background-position: -27px -97px; + background-position: var(--tile) calc(var(--tile) * 4); } .icon-share { - background-position: 0px -120px; -} -html[dir="rtl"] .icon-share { - background-position: -3px -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); } From 7a7553c52f4466ff355f301cc121fc45ca15e959 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Wed, 28 Aug 2024 21:22:22 +0200 Subject: [PATCH 17/18] chore: use imports instead of globals in share.js --- umap/static/umap/js/modules/share.js | 89 ++++++++++++++++------------ 1 file changed, 50 insertions(+), 39 deletions(-) diff --git a/umap/static/umap/js/modules/share.js b/umap/static/umap/js/modules/share.js index 363066ae..786a16f4 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,93 @@ 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, { + for (const format of Object.keys(EXPORT_FORMATS)) { + DomUtil.createButton('download-file', this.container, format, () => + this.download(format) + ) + } + 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( + const link = DomUtil.createLink( 'download-backup', this.container, - L._('full backup'), + translate('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) + 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 +117,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 +155,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 +210,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 +218,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 } From 5314fcc13be71dc0f966cd5de097dc9ed4e1c158 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Wed, 28 Aug 2024 22:38:39 +0200 Subject: [PATCH 18/18] chore: better icon css default so to work in RTL too --- umap/static/umap/base.css | 39 ++-------- umap/static/umap/css/icon.css | 23 ++++++ umap/static/umap/css/slideshow.css | 8 +- umap/static/umap/img/16-white.svg | 5 +- umap/static/umap/img/16.svg | 8 +- umap/static/umap/img/source/16-white.svg | 7 +- umap/static/umap/img/source/16.svg | 10 +-- .../umap/js/modules/rendering/template.js | 8 +- umap/static/umap/js/modules/share.js | 34 +++++--- umap/static/umap/js/umap.core.js | 18 ++--- umap/static/umap/map.css | 77 ++----------------- 11 files changed, 80 insertions(+), 157 deletions(-) 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;