Skip to content

Commit 7769db2

Browse files
fsbraunfsbraun
authored
Merge branch 'develop-4' into dependabot/npm_and_yarn/axios-and-browser-sync--removed
2 parents 21e06c7 + 21d6a6d commit 7769db2

File tree

10 files changed

+293
-183
lines changed

10 files changed

+293
-183
lines changed

‎cms/static/cms/img/pagetree/tree-li-drag.gif‎

-1.04 KB
Loading

‎cms/static/cms/js/modules/cms.pagetree.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -328,6 +328,31 @@ var PageTree = new Class({
328328
$('.jstree-is-dragging').removeClass('jstree-is-dragging-copy');
329329
isCopyClassAdded = false;
330330
}
331+
332+
// styling the #jstree-marker dynamically on dnd_move.vakata
333+
// because jsTree doesn't support RTL on this specific case
334+
// and sets the 'left' property without checking document direction
335+
var ins = $.jstree.reference(data.event.target);
336+
337+
// make sure we're hovering over a tree node
338+
if (ins) {
339+
var marker = $('#jstree-marker');
340+
var root = $('#changelist');
341+
var column = $(data.data.origin.element);
342+
343+
var hover = ins.settings.dnd.large_drop_target ?
344+
$(data.event.target)
345+
.closest('.jstree-node') :
346+
$(data.event.target)
347+
.closest('.jstree-anchor').parent();
348+
349+
var width = root.width() - (column.width() - hover.width());
350+
351+
marker.css({
352+
left: `${root.offset().left}px`,
353+
width: `${width}px`
354+
});
355+
}
331356
});
332357

333358
this.ui.document.on('dnd_stop.vakata', function(e, data) {

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

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
.cms-pagetree-dropdown-menu {
88
display: none;
99
position: absolute;
10-
top: 30px;
11-
right: -1px;
10+
inset-block-start: 30px;
11+
inset-inline-end: -1px;
1212
z-index: z(pagetree, dropdown);
1313
min-width: $dropdown-width;
1414
border-radius: $border-radius-normal;
@@ -21,8 +21,9 @@
2121
display: block;
2222
color: $dropdown-link-color;
2323
line-height: 1.5;
24-
text-align: left;
25-
padding: 10px $pagetree-dropdown-padding-horizontal;
24+
text-align: start;
25+
padding-block: 10px;
26+
padding-inline: $pagetree-dropdown-padding-horizontal;
2627
}
2728
a:hover,
2829
a:active,
@@ -32,12 +33,12 @@
3233
background: $dropdown-link-active-bg;
3334
}
3435
li:first-child > a {
35-
border-top-left-radius: $border-radius-normal;
36-
border-top-right-radius: $border-radius-normal;
36+
border-start-start-radius: $border-radius-normal;
37+
border-start-end-radius: $border-radius-normal;
3738
}
3839
li:last-child > a {
39-
border-bottom-left-radius: $border-radius-normal;
40-
border-bottom-right-radius: $border-radius-normal;
40+
border-end-start-radius: $border-radius-normal;
41+
border-end-end-radius: $border-radius-normal;
4142
}
4243
.cms-pagetree-dropdown-item-disabled {
4344
opacity: 0.2;
@@ -52,7 +53,8 @@
5253
&.cms-pagetree-dropdown-menu-condensed {
5354
a,
5455
.cms-pagetree-dropdown-item {
55-
padding: 5px $pagetree-dropdown-padding-horizontal;
56+
padding-block: 5px;
57+
padding-inline: $pagetree-dropdown-padding-horizontal;
5658
}
5759
}
5860
.active {
@@ -65,11 +67,12 @@
6567
font-size: 90%;
6668
font-weight: normal;
6769
line-height: 1.5;
68-
text-align: left;
70+
text-align: start;
6971
text-transform: uppercase;
70-
padding: 7px $pagetree-dropdown-padding-horizontal 5px;
71-
border-bottom: 1px solid $gray-lighter;
72-
margin-bottom: 4px;
72+
padding-block: 7px 5px;
73+
padding-inline: $pagetree-dropdown-padding-horizontal;
74+
border-block-end: 1px solid $gray-lighter;
75+
margin-block-end: 4px;
7376
}
7477

7578
li {
@@ -81,24 +84,25 @@
8184
display: block;
8285
overflow: hidden;
8386
font-size: 12px !important;
84-
text-align: left;
87+
text-align: start;
8588
text-overflow: ellipsis;
8689
margin: 0;
87-
padding: 5px $pagetree-dropdown-padding-horizontal 3px !important;
90+
padding-block: 5px 3px !important;
91+
padding-inline: $pagetree-dropdown-padding-horizontal !important;
8892
strong {
8993
font-size: 12px !important;
9094
}
9195
}
9296
p + p {
93-
margin-top: -2px;
94-
padding-top: 0 !important;
97+
margin-block-start: -2px;
98+
padding-block-start: 0 !important;
9599
}
96100
p:last-child {
97-
padding-bottom: 7px !important;
101+
padding-block-end: 7px !important;
98102
}
99103

100104
.cms-icon {
101-
margin-right: 10px;
105+
margin-inline-end: 10px;
102106
}
103107

104108
span {
@@ -109,11 +113,11 @@
109113
&:before {
110114
content: "";
111115
position: absolute;
112-
left: 100%;
116+
inset-inline-start: 100%;
113117
z-index: z(below);
114118
width: $dropdown-arrow-side;
115119
height: $dropdown-arrow-side;
116-
margin-left: math.div(-$dropdown-arrow-side, 2);
120+
margin-inline-start: math.div(-$dropdown-arrow-side, 2);
117121
background-color: $submenu-dropdown-bgcolor;
118122
box-shadow: $dropdown-shadow;
119123
transform: rotate(45deg) translateZ(0);
@@ -131,29 +135,29 @@
131135
display: block;
132136
}
133137

134-
.cms-pagetree-dropdown-menu-arrow-top-right {
138+
.cms-pagetree-dropdown-menu-arrow-block-start-inline-end {
135139
&:before {
136-
margin-top: -5px;
137-
margin-left: -24px;
140+
margin-block-start: -5px;
141+
margin-inline-start: -24px;
138142
}
139143
}
140144

141-
.cms-pagetree-dropdown-menu-arrow-right-top {
145+
.cms-pagetree-dropdown-menu-arrow-inline-end-block-start {
142146
&:before {
143-
top: 16px;
147+
inset-block-start: 16px;
144148
}
145149
}
146-
.cms-pagetree-dropdown-menu-arrow-right-bottom {
150+
.cms-pagetree-dropdown-menu-arrow-inline-end-block-end {
147151
&:before {
148-
bottom: 18px;
152+
inset-block-end: 18px;
149153
}
150154
}
151155

152156
.cms-pagetree-dropdown-loader {
153157
position: absolute;
154-
top: 0;
155-
left: 0;
156-
right: 0;
157-
bottom: 0;
158+
inset-block-start: 0;
159+
inset-inline-start: 0;
160+
inset-inline-end: 0;
161+
inset-block-end: 0;
158162
border-radius: $border-radius-normal;
159163
}

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
11
.cms-pagetree-legend {
22
position: relative;
3-
text-align: right;
3+
text-align: end;
44

55
.cms-icon-info {
66
color: $color-primary;
77
vertical-align: middle;
8-
margin-right: 5px;
8+
margin-inline-end: 5px;
99
}
1010

1111
.cms-pagetree-dropdown {
1212
display: inline-block;
1313
}
1414

1515
.cms-pagetree-dropdown-menu {
16-
top: auto;
17-
right: 100%;
18-
bottom: 0;
19-
left: auto;
20-
margin-right: 10px;
21-
margin-bottom: -90px;
16+
inset-block-start: auto;
17+
inset-inline-end: 100%;
18+
inset-block-end: 0;
19+
inset-inline-start: auto;
20+
margin-inline-end: 10px;
21+
margin-block-end: -90px;
2222
&:before {
23-
bottom: 96px;
23+
inset-block-end: 96px;
2424
}
2525
}
2626
.cms-pagetree-dropdown-item {
2727
.cms-pagetree-node-state {
28-
margin-right: 10px;
28+
margin-inline-end: 10px;
2929
}
3030
.cms-icon {
31-
margin-right: 8px;
31+
margin-inline-end: 8px;
3232
}
3333
.cms-icon-home,
3434
.cms-icon-sitemap,
@@ -40,7 +40,7 @@
4040
.cms-icon {
4141
text-align: center;
4242
width: 20px;
43-
margin-left: -2px;
43+
margin-inline-start: -2px;
4444
}
4545
.cms-icon-check-square {
4646
color: $color-success;

0 commit comments

Comments
 (0)