8000 feat: Add RTL support to modal header and related components by sakhawy · Pull Request #7863 · django-cms/django-cms · GitHub
[go: up one dir, main page]
Skip to content

feat: Add RTL support to modal header and related components #7863

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 23, 2024
Merged

feat: Add RTL support to modal header and related components #7863

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d64a180
feat: Add RTL support to modal header and related components
sakhawy Apr 1, 2024
91cf111
fix: followup fixes
sakhawy Apr 5, 2024
1bf9c6a
fix: Remove dir attribute from div.cms-modal
sakhawy Apr 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion cms/static/cms/sass/components/_clipboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 40px;
margin-inline-end: 40px;
}

.cms-plugins {
Expand Down
19 changes: 10 additions & 9 deletions cms/static/cms/sass/components/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
Expand Down Expand Up @@ -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;
}
}

Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions cms/static/cms/sass/components/_pluginpicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down
53 changes: 26 additions & 27 deletions cms/static/cms/sass/components/_structureboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -234,11 +234,11 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: $submenu-icon-area-size * 3 + $submenu-right * 4;
margin-in 629A line-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;
}
}

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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
Expand All @@ -467,19 +467,18 @@

&.cms-structure-condensed {
width: 416px;
right: 0;
left: 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;
}
}

Expand All @@ -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;
Expand All @@ -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 {
&,
Expand All @@ -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;
Expand Down
18 changes: 9 additions & 9 deletions cms/static/cms/sass/components/_subnav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -45,11 +45,11 @@

.cms-submenu-edit {
@include icon(edit);
right: $submenu-right * 3 + $submenu-icon-area-size * 2;< 10000 /td>
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 {
Expand Down Expand Up @@ -91,19 +91,19 @@
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 {
a {
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 {
Expand All @@ -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
Expand Down Expand Up @@ -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;
Expand Down
6 changes: 5 additions & 1 deletion cms/templates/cms/toolbar/toolbar_with_structure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,11 @@
{% include 'cms/toolbar/clipboard.html' with clipboard_plugin=cms_toolbar.clipboard_plugin %}
{% endif %}

<div class="cms-modal" tabindex="-1" data-touch-action="none">
<div
class="cms-modal"
tabindex="-1"
data-touch-action="none"
>
<div class="cms-modal-head" data-touch-action="none">
<span class="cms-modal-title" data-touch-action="none">
<span class="cms-modal-title-prefix"></span>
Expand Down
0