8000 feat: Add RTL support to modal header and related components (#7863) · fsbraun/django-cms@67b98d6 · GitHub
[go: up one dir, main page]
Skip to content

Commit 67b98d6

Browse files
sakhawyfsbraun
sakhawy
authored and
fsbraun
committed
feat: Add RTL support to modal header and related components (django-cms#7863)
1 parent ddebf48 commit 67b98d6

File tree

6 files changed

+58
-50
lines changed

6 files changed

+58
-50
lines changed

‎cms/static/cms/sass/components/_clipboard.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
overflow: hidden;
3333
text-overflow: ellipsis;
3434
white-space: nowrap;
35-
margin-right: 40px;
35+
margin-inline-end: 40px;
3636
}
3737

3838
.cms-plugins {

‎cms/static/cms/sass/components/_modal.scss

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,13 @@
5353
.cms-modal-title {
5454
// set correct cursor when maximized #3111
5555
cursor: default;
56-
padding-right: $modal-header-button-area-size * 3;
56+
padding-inline-end: $modal-header-button-area-size * 3;
5757
}
5858
.cms-modal-title-suffix {
5959
display: none;
6060
}
6161
.cms-modal-minimize {
62-
right: $modal-header-button-area-size + $padding-base;
62+
inset-inline-end: $modal-header-button-area-size + $padding-base;
6363
}
6464
}
6565
}
@@ -140,10 +140,10 @@
140140
white-space: nowrap;
141141
overflow: hidden;
142142
text-overflow: ellipsis;
143-
margin-right: $modal-header-button-area-size * 3 + $padding-normal;
143+
margin-inline-end: $modal-header-button-area-size * 3 + $padding-normal;
144144
.cms-modal-title-suffix {
145145
font-weight: normal;
146-
padding-left: $padding-normal;
146+
padding-inline-start: $padding-normal;
147147
}
148148
}
149149

@@ -153,8 +153,8 @@
153153
display: block;
154154
position: absolute;
155155
top: 50%;
156-
margin-top: math.div(-$modal-header-button-area-size, 2);
157-
right: $padding-normal;
156+
margin-top: math.div(-$modal-header-button-area-size, 2);
157+
inset-inline-end: $padding-normal;
158158
color: $gray-light;
159159
text-align: center;
160160
width: $modal-header-button-area-size;
@@ -169,7 +169,7 @@
169169
}
170170
}
171171
.cms-modal-minimize {
172-
right: 2 * $modal-header-button-area-size + $padding-normal;
172+
inset-inline-end: 2 * $modal-header-button-area-size + $padding-normal;
173173
.cms-modal-minimized & {
174174
@include icon(plus);
175175
color: $color-primary;
@@ -180,7 +180,7 @@
180180
}
181181
}
182182
.cms-modal-maximize {
183-
right: $modal-header-button-area-size + $padding-normal;
183+
inset-inline-end: $modal-header-button-area-size + $padding-normal;
184184
// ensure maximize element is hidden #3111
185185
.cms-modal-minimized & {
186186
display: none !important;
@@ -249,13 +249,18 @@
249249
right: 0;
250250
left: 0;
251251
z-index: z(modal, buttons);
252-
padding: 0 $modal-resize-size 0 $padding-normal;
252+
padding-block: 0;
253+
padding-inline: $padding-normal $modal-resize-size;
253254
}
254255
.cms-modal-item-buttons {
255256
$margin: math.div($toolbar-height - $toolbar-button-height, 2);
256257
@extend .cms-toolbar-item-buttons;
257258
float: right;
258-
margin-left: $margin;
259+
margin-inline-start: $margin;
260+
261+
.cancel-link {
262+
display: none;
263+
}
259264
}
260265
.cms-modal-item-buttons-left {
261266
float: left;

‎cms/static/cms/sass/components/_pluginpicker.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
white-space: nowrap;
2121
font-size: $submenu-item-font-size;
2222
line-height: $submenu-item-height + 6px;
23-
text-align: left;
23+
text-align: start;
2424
min-height: $submenu-item-height + 6px;
2525
padding: 0 $submenu-item-padding-horizontal;
2626
}
@@ -88,7 +88,7 @@
8888
z-index: z(structure, content, empty, addplugin);
8989
color: $color-primary;
9090
line-height: 44px;
91-
padding-left: 20px;
91+
padding-inline-start: 20px;
9292
border: 2px solid $color-primary;
9393
border-radius: $border-radius-base;
9494
background-color: $white;

‎cms/static/cms/sass/components/_structureboard.scss

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
left: 0;
108108
font-size: $font-size-normal;
109109
line-height: $line-height-normal;
110-
padding-left: $border-radius-normal + 2px;
110+
padding-inline-start: $border-radius-normal + 2px;
111111
border-radius: $border-radius-base;
112112

113113
.cms-dragbar-title {
@@ -121,16 +121,16 @@
121121
font-weight: bold;
122122
line-height: $structure-dragbar-height;
123123
height: $structure-dragbar-height;
124-
margin-right: $submenu-icon-area-size * 2 + 25px;
124+
margin-inline-end: $submenu-icon-area-size * 2 + 25px;
125125
}
126126
.cms-dragbar-toggler {
127127
position: absolute;
128-
right: 0;
128+
inset-inline-end: 0;
129129
background-image: linear-gradient(to right, rgba($structure-bgcolor, 0) 0, $structure-bgcolor 40px);
130-
padding-left: 50px;
130+
padding-inline-start: 50px;
131131
font-weight: normal;
132132
text-transform: uppercase;
133-
margin-left: 30px;
133+
margin-inline-start: 30px;
134134
cursor: pointer;
135135
a {
136136
color: $btn-default-color !important;
@@ -185,7 +185,7 @@
185185
display: none !important;
186186
}
187187
.cms-draggables .cms-draggables {
188-
padding-left: $structure-draggable-inner-padding;
188+
padding-inline-start: $structure-draggable-inner-padding;
189189
}
190190
.cms-dragarea-empty .cms-draggables-root {
191191
position: relative;
@@ -234,11 +234,11 @@
234234
overflow: hidden;
235235
white-space: nowrap;
236236
text-overflow: ellipsis;
237-
margin-right: $submenu-icon-area-size * 3 + $submenu-right * 4;
237+
margin-inline-end: $submenu-icon-area-size * 3 + $submenu-right * 4;
238238
padding: $structure-dragarea-padding $structure-dragarea-padding-horizontal;
239239
}
240240
.cms-dragitem-collapsable .cms-dragitem-text {
241-
padding-left: $structure-dragitem-icon-space;
241+
padding-inline-start: $structure-dragitem-icon-space;
242242
}
243243
}
244244

@@ -288,7 +288,7 @@
288288
z-index: z(structure, content, empty, empty);
289289
color: $gray;
290290
line-height: 44px;
291-
padding-left: 20px;
291+
padding-inline-start: 20px;
292292
}
293293
> .cms-draggables-root > .cms-add-plugin-placeholder {
294294
position: absolute;
@@ -323,14 +323,14 @@
323323
display: none;
324324
}
325325
.cms-dragitem-text {
326-
padding-left: $structure-dragarea-padding-horizontal;
326+
padding-inline-start: $structure-dragarea-padding-horizontal;
327327
}
328328
}
329329
.cms-dragitem-text {
330-
margin-right: 0;
330+
margin-inline-end: 0;
331331
}
332332
&.cms-draggable-from-clipboard .cms-dragitem-text {
333-
margin-right: $padding-large;
333+
margin-inline-end: $padding-large;
334334
}
335335
&.cms-draggable-disabled > .cms-draggable {
336336
display: none !important;
@@ -364,11 +364,11 @@
364364
@extend %icon;
365365
position: absolute;
366366
top: 50%;
367-
left: $structure-dragitem-icon-space - $structure-dragarea-padding-horizontal - 10px;
367+
inset-inline-start: $structure-dragitem-icon-space - $structure-dragarea-padding-horizontal - 10px;
368368
color: $submenu-icon-color;
369369
font-size: $structure-dragitem-icon-size;
370370
margin-top: math.div(-$structure-dragitem-icon-size, 2);
371-
margin-left: $structure-dragarea-padding-horizontal - 10px;
371+
margin-inline-start: $structure-dragarea-padding-horizontal - 10px;
372372
cursor: pointer;
373373
transform: rotate(180deg);
374374
}
@@ -426,8 +426,8 @@
426426
}
427427

428428
.cms-draggable {
429-
margin-left: $structure-draggable-inner-padding !important;
430-
margin-left: 15px;
429+
margin-inline-start: $structure-draggable-inner-padding !important;
430+
margin-inline-start: 15px;
431431
.cms-dragitem {
432432
background-image: none;
433433
&:hover {
@@ -456,7 +456,7 @@
456456
color: $submenu-icon-color;
457457
font-size: $submenu-icon-size;
458458
margin-top: -(math.div($submenu-icon-size, 2));
459-
margin-left: -(math.div($submenu-icon-size, 2));
459+
margin-inline-start: -(math.div($submenu-icon-size, 2));
460460
}
461461
}
462462

@@ -468,19 +468,18 @@
468468

469469
&.cms-structure-condensed {
470470
width: 416px;
471-
right: 0;
471+
left: 0;
472472
box-shadow: 0 0 5px 0 rgba(0,0,0,.2);
473473
.cms-structure-content {
474-
padding-left: 15px;
475-
padding-right: 15px;
474+
padding-inline: 15px;
476475
overflow-x: hidden;
477476
}
478477
.cms-draggables .cms-draggables {
479-
padding-left: 15px;
478+
padding-inline-start: 15px;
480479
}
481480
.cms-draggable-disabled {
482481
.cms-draggable {
483-
margin-left: 15px !important;
482+
margin-inline-start: 15px !important;
484483
}
485484
}
486485

@@ -491,8 +490,8 @@
491490
.cms-dragitem-text {
492491
padding-top: 8px;
493492
padding-bottom: 8px;
494-
margin-right: 110px;
495-
padding-right: 5px;
493+
margin-inline-end: 110px;
494+
padding-inline-end: 5px;
496495
}
497496
.cms-dragarea-empty .cms-draggables-root {
498497
min-height: 43px;
@@ -512,10 +511,10 @@
512511
margin-top: -16px;
513512
}
514513
.cms-submenu-add {
515-
right: 39px;
514+
inset-inline-end: 39px;
516515
}
517516
.cms-submenu-edit {
518-
right: 39px + 32px + 4px;
517+
inset-inline-end: 39px + 32px + 4px;
519518
}
520519
.cms-submenu-dropdown-settings .cms-submenu-item a {
521520
&,
@@ -529,7 +528,7 @@
529528
padding: 0;
530529
}
531530
.cms-dragbar-title {
532-
margin-right: $submenu-icon-area-size * 2 + 10px;
531+
margin-inline-end: $submenu-icon-area-size * 2 + 10px;
533532
}
534533
.cms-draggable-stack {
535534
height: $structure-dragitem-fullheight - 6px !important;

‎cms/static/cms/sass/components/_subnav.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
@include icon(menu);
88
display: block;
99
position: absolute;
10-
right: $submenu-right;
10+
inset-inline-end: $submenu-right;
1111
width: $submenu-icon-area-size;
1212
height: $submenu-icon-area-size;
1313
cursor: pointer;
@@ -46,11 +46,11 @@
4646

4747
.cms-submenu-edit {
4848
@include icon(pencil);
49-
right: $submenu-right * 3 + $submenu-icon-area-size * 2;
49+
inset-inline-end: $submenu-right * 3 + $submenu-icon-area-size * 2;
5050
}
5151
.cms-submenu-add {
5252
@include icon(plus);
53-
right: $submenu-right * 2 + $submenu-icon-area-size;
53+
inset-inline-end: $submenu-right * 2 + $submenu-icon-area-size;
5454
}
5555
.cms-submenu-edit,
5656
.cms-submenu-add {
@@ -92,19 +92,19 @@
9292
background: $submenu-dropdown-bgcolor;
9393
border-radius: $border-radius-normal;
9494
box-shadow: $dropdown-shadow;
95-
right: $submenu-right * 2 + $submenu-icon-area-size;
95+
inset-inline-end: $submenu-right * 2 + $submenu-icon-area-size;
9696
transform: translateZ(0);
9797

9898
.cms-submenu-item {
9999
a {
100100
position: relative;
101101
display: block;
102102
font-size: $submenu-item-font-size;
103-
text-align: left;
103+
text-align: start;
104104
padding: 0 $submenu-item-padding-horizontal;
105105
line-height: $dropdown-item-height;
106106
min-height: $dropdown-item-height;
107-
padding-left: $dropdown-item-icon-space;
107+
padding-inline-start: $dropdown-item-icon-space;
108108
color: $submenu-item-color;
109109
&:hover,
110110
&:focus {
@@ -116,7 +116,7 @@
116116
&:before {
117117
@extend %icon;
118118
position: absolute;
119-
left: $dropdown-item-icon-position;
119+
inset-inline-start: $dropdown-item-icon-position;
120120
top: 0;
121121
height: $dropdown-item-height;
122122
line-height: $dropdown-item-height
@@ -179,10 +179,10 @@
179179
z-index: z(below);
180180
position: absolute;
181181
content: '';
182-
left: 100%;
182+
inset-inline-start: 100%;
183183
width: $dropdown-arrow-side;
184184
height: $dropdown-arrow-side;
185-
margin-left: -(math.div($dropdown-arrow-side, 2));
185+
margin-inline-start: math.div(-$dropdown-arrow-side, 2);
186186
transform: rotate(45deg);
187187
background-color: $submenu-dropdown-bgcolor;
188188
box-shadow: $dropdown-shadow;

‎cms/templates/cms/toolbar/toolbar_with_structure.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,11 @@
3434
{% include 'cms/toolbar/clipboard.html' with clipboard_plugin=cms_toolbar.clipboard_plugin %}
3535
{% endif %}
3636

37-
<div class="cms-modal" tabindex="-1" data-touch-action="none">
37+
<div
38+
class="cms-modal"
39+
tabindex="-1"
40+
data-touch-action="none"
41+
>
3842
<div class="cms-modal-head" data-touch-action="none">
3943
<span class="cms-modal-title" data-touch-action="none">
4044
<span class="cms-modal-title-prefix"></span>

0 commit comments

Comments
 (0)
0