From d64a180ed5db6ae7470112061b488105c7659f4e Mon Sep 17 00:00:00 2001 From: Mohammad Alsakhawy Date: Mon, 1 Apr 2024 10:44:04 +0200 Subject: [PATCH 1/3] feat: Add RTL support to modal header and related components --- .../cms/sass/components/_clipboard.scss | 2 +- cms/static/cms/sass/components/_modal.scss | 19 ++++---- .../cms/sass/components/_pluginpicker.scss | 4 +- .../cms/sass/components/_structureboard.scss | 43 +++++++++---------- cms/static/cms/sass/components/_subnav.scss | 18 ++++---- 5 files changed, 43 insertions(+), 43 deletions(-) diff --git a/cms/static/cms/sass/components/_clipboard.scss b/cms/static/cms/sass/components/_clipboard.scss index bbe14914d6b..fed7499634f 100644 --- a/cms/static/cms/sass/components/_clipboard.scss +++ b/cms/static/cms/sass/components/_clipboard.scss @@ -32,7 +32,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - margin-right: 40px; + margin-inline-end: 40px; } .cms-plugins { diff --git a/cms/static/cms/sass/components/_modal.scss b/cms/static/cms/sass/components/_modal.scss index e2adf1e24cc..e9093180f05 100644 --- a/cms/static/cms/sass/components/_modal.scss +++ b/cms/static/cms/sass/components/_modal.scss @@ -53,13 +53,13 @@ .cms-modal-title { // set correct cursor when maximized #3111 cursor: default; - padding-right: $modal-header-button-area-size * 3; + padding-inline-end: $modal-header-button-area-size * 3; } .cms-modal-title-suffix { display: none; } .cms-modal-minimize { - right: $modal-header-button-area-size + $padding-base; + inset-inline-end: $modal-header-button-area-size + $padding-base; } } } @@ -140,10 +140,10 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - margin-right: $modal-header-button-area-size * 3 + $padding-normal; + margin-inline-end: $modal-header-button-area-size * 3 + $padding-normal; .cms-modal-title-suffix { font-weight: normal; - padding-left: $padding-normal; + padding-inline-start: $padding-normal; } } @@ -154,7 +154,7 @@ position: absolute; top: 50%; margin-top: math.div(-$modal-header-button-area-size, 2); - right: $padding-normal; + inset-inline-end: $padding-normal; color: $gray-light; text-align: center; width: $modal-header-button-area-size; @@ -169,7 +169,7 @@ } } .cms-modal-minimize { - right: 2 * $modal-header-button-area-size + $padding-normal; + inset-inline-end: 2 * $modal-header-button-area-size + $padding-normal; .cms-modal-minimized & { @include icon(plus); color: $color-primary; @@ -180,7 +180,7 @@ } } .cms-modal-maximize { - right: $modal-header-button-area-size + $padding-normal; + inset-inline-end: $modal-header-button-area-size + $padding-normal; // ensure maximize element is hidden #3111 .cms-modal-minimized & { display: none !important; @@ -249,13 +249,14 @@ right: 0; left: 0; z-index: z(modal, buttons); - padding: 0 $modal-resize-size 0 $padding-normal; + padding-block: 0; + padding-inline: $padding-normal $modal-resize-size; } .cms-modal-item-buttons { $margin: math.div($toolbar-height - $toolbar-button-height, 2); @extend .cms-toolbar-item-buttons; float: right; - margin-left: $margin; + margin-inline-start: $margin; .cancel-link { display: none; diff --git a/cms/static/cms/sass/components/_pluginpicker.scss b/cms/static/cms/sass/components/_pluginpicker.scss index 912bfb17571..8217dfc41a2 100644 --- a/cms/static/cms/sass/components/_pluginpicker.scss +++ b/cms/static/cms/sass/components/_pluginpicker.scss @@ -20,7 +20,7 @@ white-space: nowrap; font-size: $submenu-item-font-size; line-height: $submenu-item-height + 6px; - text-align: left; + text-align: start; min-height: $submenu-item-height + 6px; padding: 0 $submenu-item-padding-horizontal; } @@ -88,7 +88,7 @@ z-index: z(structure, content, empty, addplugin); color: $color-primary; line-height: 44px; - padding-left: 20px; + padding-inline-start: 20px; border: 2px solid $color-primary; border-radius: $border-radius-base; background-color: $white; diff --git a/cms/static/cms/sass/components/_structureboard.scss b/cms/static/cms/sass/components/_structureboard.scss index 54de19134f2..19d66c8c270 100644 --- a/cms/static/cms/sass/components/_structureboard.scss +++ b/cms/static/cms/sass/components/_structureboard.scss @@ -107,7 +107,7 @@ left: 0; font-size: $font-size-normal; line-height: $line-height-normal; - padding-left: $border-radius-normal + 2px; + padding-inline-start: $border-radius-normal + 2px; border-radius: $border-radius-base; .cms-dragbar-title { @@ -121,16 +121,16 @@ font-weight: bold; line-height: $structure-dragbar-height; height: $structure-dragbar-height; - margin-right: $submenu-icon-area-size * 2 + 25px; + margin-inline-end: $submenu-icon-area-size * 2 + 25px; } .cms-dragbar-toggler { position: absolute; - right: 0; + inset-inline-end: 0; background-image: linear-gradient(to right, rgba($structure-bgcolor, 0) 0, $structure-bgcolor 40px); - padding-left: 50px; + padding-inline-start: 50px; font-weight: normal; text-transform: uppercase; - margin-left: 30px; + margin-inline-start: 30px; cursor: pointer; a { color: $btn-default-color !important; @@ -234,11 +234,11 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - margin-right: $submenu-icon-area-size * 3 + $submenu-right * 4; + margin-inline-end: $submenu-icon-area-size * 3 + $submenu-right * 4; padding: $structure-dragarea-padding $structure-dragarea-padding-horizontal; } .cms-dragitem-collapsable .cms-dragitem-text { - padding-left: $structure-dragitem-icon-space; + padding-inline-start: $structure-dragitem-icon-space; } } @@ -288,7 +288,7 @@ z-index: z(structure, content, empty, empty); color: $gray; line-height: 44px; - padding-left: 20px; + padding-inline-start: 20px; } > .cms-draggables-root > .cms-add-plugin-placeholder { position: absolute; @@ -323,14 +323,14 @@ display: none; } .cms-dragitem-text { - padding-left: $structure-dragarea-padding-horizontal; + padding-inline-start: $structure-dragarea-padding-horizontal; } } .cms-dragitem-text { - margin-right: 0; + margin-inline-end: 0; } &.cms-draggable-from-clipboard .cms-dragitem-text { - margin-right: $padding-large; + margin-inline-end: $padding-large; } &.cms-draggable-disabled > .cms-draggable { display: none !important; @@ -364,11 +364,11 @@ @extend %icon; position: absolute; top: 50%; - left: $structure-dragitem-icon-space - $structure-dragarea-padding-horizontal - 10px; + inset-inline-start: $structure-dragitem-icon-space - $structure-dragarea-padding-horizontal - 10px; color: $submenu-icon-color; font-size: $structure-dragitem-icon-size; margin-top: math.div(-$structure-dragitem-icon-size, 2); - margin-left: $structure-dragarea-padding-horizontal - 10px; + margin-inline-start: $structure-dragarea-padding-horizontal - 10px; cursor: pointer; transform: rotate(180deg); } @@ -470,16 +470,15 @@ right: 0; box-shadow: 0 0 5px 0 rgba(0,0,0,.2); .cms-structure-content { - padding-left: 15px; - padding-right: 15px; + padding-inline: 15px; overflow-x: hidden; } .cms-draggables .cms-draggables { - padding-left: 15px; + padding-inline-start: 15px; } .cms-draggable-disabled { .cms-draggable { - margin-left: 15px !important; + margin-inline-start: 15px !important; } } @@ -490,8 +489,8 @@ .cms-dragitem-text { padding-top: 8px; padding-bottom: 8px; - margin-right: 110px; - padding-right: 5px; + margin-inline-end: 110px; + padding-inline-end: 5px; } .cms-dragarea-empty .cms-draggables-root { min-height: 43px; @@ -511,10 +510,10 @@ margin-top: -16px; } .cms-submenu-add { - right: 39px; + inset-inline-end: 39px; } .cms-submenu-edit { - right: 39px + 32px + 4px; + inset-inline-end: 39px + 32px + 4px; } .cms-submenu-dropdown-settings .cms-submenu-item a { &, @@ -528,7 +527,7 @@ padding: 0; } .cms-dragbar-title { - margin-right: $submenu-icon-area-size * 2 + 10px; + margin-inline-end: $submenu-icon-area-size * 2 + 10px; } .cms-draggable-stack { height: $structure-dragitem-fullheight - 6px !important; diff --git a/cms/static/cms/sass/components/_subnav.scss b/cms/static/cms/sass/components/_subnav.scss index 381285bdcfd..1deea625cb9 100644 --- a/cms/static/cms/sass/components/_subnav.scss +++ b/cms/static/cms/sass/components/_subnav.scss @@ -6,7 +6,7 @@ @include icon(menu); display: block; position: absolute; - right: $submenu-right; + inset-inline-end: $submenu-right; width: $submenu-icon-area-size; height: $submenu-icon-area-size; cursor: pointer; @@ -45,11 +45,11 @@ .cms-submenu-edit { @include icon(edit); - right: $submenu-right * 3 + $submenu-icon-area-size * 2; + inset-inline-end: $submenu-right * 3 + $submenu-icon-area-size * 2; } .cms-submenu-add { @include icon(plus); - right: $submenu-right * 2 + $submenu-icon-area-size; + inset-inline-end: $submenu-right * 2 + $submenu-icon-area-size; } .cms-submenu-edit, .cms-submenu-add { @@ -91,7 +91,7 @@ background: $submenu-dropdown-bgcolor; border-radius: $border-radius-normal; box-shadow: $dropdown-shadow; - right: $submenu-right * 2 + $submenu-icon-area-size; + inset-inline-end: $submenu-right * 2 + $submenu-icon-area-size; transform: translateZ(0); .cms-submenu-item { @@ -99,11 +99,11 @@ position: relative; display: block; font-size: $submenu-item-font-size; - text-align: left; + text-align: start; padding: 0 $submenu-item-padding-horizontal; line-height: $dropdown-item-height; min-height: $dropdown-item-height; - padding-left: $dropdown-item-icon-space; + padding-inline-start: $dropdown-item-icon-space; color: $submenu-item-color; &:hover, &:focus { @@ -115,7 +115,7 @@ &:before { @extend %icon; position: absolute; - left: $dropdown-item-icon-position; + inset-inline-start: $dropdown-item-icon-position; top: 0; height: $dropdown-item-height; line-height: $dropdown-item-height @@ -178,10 +178,10 @@ z-index: z(below); position: absolute; content: ''; - left: 100%; + inset-inline-start: 100%; width: $dropdown-arrow-side; height: $dropdown-arrow-side; - margin-left: math.div(-$dropdown-arrow-side, 2); + margin-inline-start: math.div(-$dropdown-arrow-side, 2); transform: rotate(45deg); background-color: $submenu-dropdown-bgcolor; box-shadow: $dropdown-shadow; From 91cf111472bece4e01d6a85abebdcba0f3f9fefa Mon Sep 17 00:00:00 2001 From: Mohammad Alsakhawy Date: Fri, 5 Apr 2024 15:11:14 +0200 Subject: [PATCH 2/3] fix: followup fixes --- cms/static/cms/sass/components/_structureboard.scss | 10 +++++----- cms/templates/cms/toolbar/toolbar_with_structure.html | 9 ++++++++- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/cms/static/cms/sass/components/_structureboard.scss b/cms/static/cms/sass/components/_structureboard.scss index 19d66c8c270..1ca58619435 100644 --- a/cms/static/cms/sass/components/_structureboard.scss +++ b/cms/static/cms/sass/components/_structureboard.scss @@ -185,7 +185,7 @@ display: none !important; } .cms-draggables .cms-draggables { - padding-left: $structure-draggable-inner-padding; + padding-inline-start: $structure-draggable-inner-padding; } .cms-dragarea-empty .cms-draggables-root { position: relative; @@ -426,8 +426,8 @@ } .cms-draggable { - margin-left: $structure-draggable-inner-padding !important; - margin-left: 15px; + margin-inline-start: $structure-draggable-inner-padding !important; + margin-inline-start: 15px; .cms-dragitem { background-image: none; &:hover { @@ -456,7 +456,7 @@ color: $submenu-icon-color; font-size: $submenu-icon-size; margin-top: -(math.div($submenu-icon-size, 2)); - margin-left: -(math.div($submenu-icon-size, 2)); } + margin-inline-start: -(math.div($submenu-icon-size, 2)); } } // end of dragarea @@ -467,7 +467,7 @@ &.cms-structure-condensed { width: 416px; - right: 0; + left: 0; box-shadow: 0 0 5px 0 rgba(0,0,0,.2); .cms-structure-content { padding-inline: 15px; diff --git a/cms/templates/cms/toolbar/toolbar_with_structure.html b/cms/templates/cms/toolbar/toolbar_with_structure.html index d6edff778b2..8adc128b8f7 100644 --- a/cms/templates/cms/toolbar/toolbar_with_structure.html +++ b/cms/templates/cms/toolbar/toolbar_with_structure.html @@ -34,7 +34,14 @@ {% include 'cms/toolbar/clipboard.html' with clipboard_plugin=cms_toolbar.clipboard_plugin %} {% endif %} -
+ +
From 1bf9c6a531ac84580eff19c8de8eb4ea6dbd20a1 Mon Sep 17 00:00:00 2001 From: Mohammad Alsakhawy Date: Tue, 23 Apr 2024 14:56:31 +0200 Subject: [PATCH 3/3] fix: Remove dir attribute from div.cms-modal --- cms/templates/cms/toolbar/toolbar_with_structure.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/cms/templates/cms/toolbar/toolbar_with_structure.html b/cms/templates/cms/toolbar/toolbar_with_structure.html index 8adc128b8f7..7103c966de8 100644 --- a/cms/templates/cms/toolbar/toolbar_with_structure.html +++ b/cms/templates/cms/toolbar/toolbar_with_structure.html @@ -34,13 +34,10 @@ {% include 'cms/toolbar/clipboard.html' with clipboard_plugin=cms_toolbar.clipboard_plugin %} {% endif %} -