10000 fix: Set toolbar direction based on toolbar language (#7902) · django-cms/django-cms@650f31a · GitHub
[go: up one dir, main page]
Skip to content

Commit 650f31a

Browse files
fsbraunfsbraun
authored
fix: Set toolbar direction based on toolbar language (#7902)
1 parent 0b3ad4f commit 650f31a

File tree

13 files changed

+146
-41
lines changed

13 files changed

+146
-41
lines changed

‎cms/static/cms/js/modules/cms.modal.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -576,6 +576,7 @@ class Modal {
576576
var height = this.ui.modal.height();
577577
var modalLeft = this.ui.modal.position().left;
578578
var modalTop = this.ui.modal.position().top;
579+
var resizeDir = this.ui.resize.css('direction') === 'rtl' ? -1 : +1;
579580

580581
// create event for stopping
581582
this.ui.body.on(this.pointerUp, function(e) {
@@ -588,11 +589,11 @@ class Modal {
588589
.on(this.pointerMove, function(e) {
589590
var mvX = pointerEvent.originalEvent.pageX - e.originalEvent.pageX;
590591
var mvY = pointerEvent.originalEvent.pageY - e.originalEvent.pageY;
591-
var w = width - mvX * 2;
592+
var w = width - resizeDir * mvX * 2;
592593
var h = height - mvY * 2;
593594
var wMin = that.options.minWidth;
594595
var hMin = that.options.minHeight;
595-
var left = mvX + modalLeft;
596+
var left = resizeDir * mvX + modalLeft;
596597
var top = mvY + modalTop;
597598

598599
// add some limits

‎cms/static/cms/sass/cms.base.scss

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,7 @@ div.cms {
5454
@import "components/pagetree/node-state";
5555
}
5656

57-
//##############################################################################
58-
// DJANGO DEBUG TOOLBAR FIX
59-
// removed as of: //github.com/divio/django-cms/issues/2476
60-
// #djDebug #djDebugToolbarHandle {
61-
// top:35px !important; border-right:none !important;
62-
// }
57+
// Can be removed once suffucently many users have browsers the support `:dir()`
58+
div.cms[dir=rtl] {
59+
@import "libs/rtl_patch";
60+
}

‎cms/static/cms/sass/cms.wizard.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,9 @@ $wizard-input-size: 16px;
4545
// tablet and up
4646
@media (min-width: $screen-tablet) {
4747
float: left !important;
48+
&:dir(rtl) {
49+
float: right !important;
50+
}
4851
width: 48% !important;
4952
}
5053

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,19 +193,25 @@
193193

194194
.cms-modal-resize {
195195
position: absolute;
196-
right: 0;
196+
inset-inline-end: 0;
197197
bottom: 0;
198198
z-index: z(modal, resize);
199199
font-size: 10px;
200200
color: $gray-light;
201201
width: $modal-resize-size;
202202
height: $modal-resize-size;
203203
cursor: nw-resize;
204+
&:dir(rtl) {
205+
cursor: ne-resize;
206+
}
204207
span {
205208
position: absolute;
206209
bottom: 5px;
207210
right: 5px;
208211
font-size: $font-size-small;
212+
&:dir(rtl) {
213+
transform: scale(-1,1) translate(2px, 0); // flip drag triangle
214+
}
209215
}
210216
}
211217

@@ -256,6 +262,9 @@
256262
$margin: math.div($toolbar-height - $toolbar-button-height, 2);
257263
@extend .cms-toolbar-item-buttons;
258264
float: right;
265+
&:dir(rtl) {
266+
float: left;
267+
}
259268
margin-inline-start: $margin;
260269

261270
.cancel-link {
@@ -264,6 +273,9 @@
264273
}
265274
.cms-modal-item-buttons-left {
266275
float: left;
276+
&:dir(rtl) {
277+
float: right;
278+
}
267279
}
268280

269281
// alter footer when html markup is loaded

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
display: none;
99
position: fixed;
1010
top: 0;
11-
left: 0;
11+
inline-start: 0;
1212
width: 0;
1313
bottom: 0;
1414
z-index: z(sideframe, base);
@@ -60,7 +60,7 @@
6060
.cms-sideframe-controls {
6161
position: absolute;
6262
top: $sideframe-buttons-position-top + $sideframe-buttons-offset;
63-
right: $sideframe-buttons-position-right;
63+
inset-inline-end: $sideframe-buttons-position-right;
6464
z-index: z(sideframe, buttons);
6565
box-shadow: $toolbar-shadow;
6666
background-color: $white;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@
1717
content: "";
1818
position: absolute;
1919
top: -8px;
20-
left: -4px;
20+
inset-inline-start: -4px;
2121
width: 0;
2222
height: 0;
2323
border-top: 8px solid transparent;
2424
border-bottom: 8px solid transparent;
25-
border-left: 8px solid $color-primary;
25+
border-inline-start: 8px solid $color-primary;
2626
}
2727
}
2828
.cms-draggables > .cms-droppable:first-child {
@@ -371,7 +371,7 @@
371371
margin-inline-start: $structure-dragarea-padding-horizontal - 10px;
372372
cursor: pointer;
373373
transform: rotate(180deg);
374-
[dir="rtl"] & {
374+
&:dir(rtl) {
375375
transform: rotate(0deg);
376376
}
377377
}
@@ -381,7 +381,7 @@
381381
}
382382
.cms-dragitem-expanded:before {
383383
transform: rotate(-90deg);
384-
[dir="rtl"] & {
384+
&:dir(rtl) {
385385
transform: rotate(-90deg);
386386
}
387387
}

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
// items
5757
.cms-toolbar-item {
5858
float: left;
59-
[dir=rtl] & {
59+
&:dir(rtl) {
6060
float: right;
6161
}
6262
}
@@ -85,7 +85,7 @@
8585
z-index: 30;
8686

8787
@at-root .cms-structure-mode-structure & {
88-
right: $toolbar-height;
88+
inset-inline-end: $toolbar-height;
8989
}
9090
}
9191
.cms-toolbar .cms-btn-action {
@@ -107,13 +107,13 @@
107107
li {
108108
position: relative;
109109
float: left;
110-
[dir=rtl] & {
110+
&:dir(rtl) {
111111
float: right;
112112
}
113113
}
114114
li a {
115115
float: left;
116-
[dir=rtl] & {
116+
&:dir(rtl) {
117117
float: right;
118118
}
119119
color: $toolbar-menu-item-color;
@@ -184,7 +184,7 @@
184184
display: block;
185185
.cms-icon {
186186
display: block;
187-
[dir="rtl"] & {
187+
&:dir(rtl) {
188188
// undo arrow rotation for RTL
189189
transform: rotate(0deg);
190190
}
@@ -241,7 +241,7 @@
241241

242242
.cms-toolbar-item {
243243
float: none;
244-
[dir=rtl] & {
244+
[dir="rtl"] & {
245245
// a bit weird, but if removed, it will best match
246246
// with [dir="rtl"] div.cms .cms-toolbar .cms-toolbar-item
247247
// and will float to the right
@@ -254,7 +254,7 @@
254254
}
255255
.cms-toolbar-item-cms-mode-switcher a {
256256
float: left !important;
257-
[dir=rtl] & {
257+
&:dir(rtl) {
258258
float: right !important;
259259
}
260260
width: 50%;
@@ -415,7 +415,7 @@
415415
cursor: pointer;
416416
display: none;
417417
float: right;
418-
[dir=rtl] & {
418+
&:dir(rtl) {
419419
float: left;
420420
}
421421
position: relative;
@@ -570,7 +570,7 @@
570570

571571
a {
572572
float: left;
573-
[dir=rtl] & {
573+
&:dir(rtl) {
574574
float: right;
575575
}
576576
line-height: $toolbar-button-height;

‎cms/static/cms/sass/components/pagetree/_tree.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -390,7 +390,7 @@
390390
color: $gray-darkest;
391391
background: none;
392392

393-
[dir=rtl] & {
393+
&:dir(rtl) {
394394
// inline-start & inline-end are not widely supported
395395
float: right;
396396
}
@@ -451,7 +451,7 @@
451451
min-width: $pagetree-cell-inner-height;
452452
height: $pagetree-cell-inner-height;
453453

454-
[dir=rtl] & {
454+
&:dir(rtl) {
455455
// inline-start & inline-end are not widely supported
456456
float: left;
457457
}
@@ -501,7 +501,7 @@
501501
.cms-tree-reload {
502502
float: right;
503503

504-
[dir=rtl] & {
504+
&:dir(rtl) {
505505
// inline-start & inline-end are not widely supported
506506
float: left;
507507
}
@@ -652,7 +652,7 @@
652652
float: left;
653653
margin-inline-end: 5px;
654654

655-
[dir=rtl] & {
655+
&:dir(rtl) {
656656
// inline-start & inline-end are not widely supported
657657
float: right;
658658
}
@@ -676,7 +676,7 @@
676676
.cms-tree-filters {
677677
float: right;
678678

679-
[dir=rtl] & {
679+
&:dir(rtl) {
680680
// inline-start & inline-end are not widely supported
681681
float: left;
682682
}
@@ -822,7 +822,7 @@
822822
margin-inline-start: -1px;
823823
}
824824
.jstree-ocl {
825-
float: left;
825+
float: left;
826826
position: relative;
827827
inset-inline-start: $pagetree-nesting-padding;
828828
font-size: 12px;
@@ -832,7 +832,7 @@
832832
padding-block-end: 10px;
833833
padding-inline-start: 0px;
834834

835-
[dir=rtl] & {
835+
&:dir(rtl) {
836836
// inline-start & inline-end are not widely supported
837837
float: right;
838838
}
@@ -892,7 +892,7 @@
892892
color: $gray !important;
893893
}
894894

895-
[dir=rtl] & {
895+
&:dir(rtl) {
896896
// no direct logical property for background-position
897897
background-position: calc(100% - 2px) center;
898898
}

‎cms/static/cms/sass/libs/_rtl_patch.scss

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/* This patch file contains all :dir(rtl) selectors for browsers that do not support it yet */
2+
/* Once, sufficiently many users have browsers that support `:dir()`, this file can be removed */
3+
4+
/* component: toolbar */
5+
6+
.cms-toolbar {
7+
.cms-toolbar-item {
8+
float: right;
9+
}
10+
}
11+
12+
.cms-toolbar-item-navigation {
13+
li, li a {
14+
float: right;
15+
}
16+
.cms-toolbar-item-navigation-children > a span .cms-icon {
17+
transform: rotate(0deg);
18+
}
19+
}
20+
21+
.cms-toolbar-more .cms-toolbar-item-cms-mode-switcher a {
22+
float: right !important;
23+
}
24+
25+
.cms-messages .cms-messages-close {
26+
float: left;
27+
}
28+
29+
.cms-toolbar-item-buttons a {
30+
float: right;
31+
}
32+
33+
34+
/* component: modal */
35+
36+
.cms-modal-item-buttons {
37+
float: left;
38+
}
39+
40+
.cms-modal-item-buttons-left {
41+
float: right;
42+
}
43+
44+
.cms-modal-resize {
45+
cursor: ne-resize;
46+
span {
47+
transform: scale(-1,1) translate(2px, 0); // flip drag triangle
48+
}
49+
}
50+
51+
52+
/* component: structureboard */
53+
54+
.cms-structure {
55+
.cms-dragitem-collapsable:before {
56+
transform: rotate(0deg);
57+
}
58+
.cms-dragitem-expanded:before {
59+
transform: rotate(-90deg);
60+
}
61+
}
62+
63+
64+
/* component: tree */
65+
66+
.cms-pagetree-section {
67+
h2 {
68+
float: right;
69+
}
70+
71+
}
72+
73+
.cms-tree-col, .cms-tree-reload, .cms-tree-filters {
74+
float: left;
75+
}
76+
77+
.cms-tree-search {
78+
float: right;
79+
}
80+
81+
.jstree-django-cms .jstree-ocl {
82+
float: right;
83+
}
84+
85+
.jstree-anchor {
86+
background-position: calc(100% - 2px) center;
87+
}

‎cms/static/cms/sass/settings/_cms.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -137,8 +137,8 @@ $z-layers: (
137137
"messages": 999999,
138138
"toolbar": (
139139
"base": 9999999,
140-
"left": 10,
141-
"right": 10,
140+
"inset-inline-start": 10,
141+
"inset-inline-end": 10,
142142
),
143143
"sideframe": (
144144
"base": 999999,

0 commit comments

Comments
 (0)
0