Merge branch 'develop' into ci/sync-pre-commit-v3

cms/middleware/toolbar.py

@@ -25,7 +25,7 @@ def __init__(self, get_response):
     def __call__(self, request):
 
         if not self.is_cms_request(request):
-            return
+            return self.get_response(request)
 
         edit_on = get_cms_setting('CMS_TOOLBAR_URL__EDIT_ON')
         edit_off = get_cms_setting('CMS_TOOLBAR_URL__EDIT_OFF')

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

@@ -313,6 +313,31 @@ var PageTree = new Class({
                 $('.jstree-is-dragging').removeClass('jstree-is-dragging-copy');
                 isCopyClassAdded = false;
             }
+
+            // styling the #jstree-marker dynamically on dnd_move.vakata
+            // because jsTree doesn't support RTL on this specific case
+            // and sets the 'left' property without checking document direction
+            var ins = $.jstree.reference(data.event.target);
+
+            // make sure we're hovering over a tree node
+            if (ins) {
+                var marker = $('#jstree-marker');
+                var root = $('#changelist');
+                var column = $(data.data.origin.element);
+
+                var hover = ins.settings.dnd.large_drop_target ?
+                                $(data.event.target)
+                                    .closest('.jstree-node') :
+                                $(data.event.target)
+                                    .closest('.jstree-anchor').parent();
+
+                var width = root.width() - (column.width() - hover.width());
+
+                marker.css({
+                    left: `${root.offset().left}px`,
+                    width: `${width}px`
+                });
+            }
         });
 
         this.ui.document.on('dnd_stop.vakata', function(e, data) {

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

@@ -7,8 +7,8 @@
 .cms-pagetree-dropdown-menu {
     display: none;
     position: absolute;
-    top: 30px;
-    right: -1px;
+    inset-block-start: 30px;
+    inset-inline-end: -1px;
     z-index: z(pagetree, dropdown);
     min-width: $dropdown-width;
     border-radius: $border-radius-normal;
@@ -21,8 +21,9 @@
         display: block;
         color: $gray;
         line-height: 1.5;
-        text-align: left;
-        padding: 10px $pagetree-dropdown-padding-horizontal;
+        text-align: start;
+        padding-block: 10px;
+        padding-inline: $pagetree-dropdown-padding-horizontal;
     }
     a:hover,
     a:active,
@@ -32,12 +33,12 @@
         background: $color-primary;
     }
     li:first-child > a {
-        border-top-left-radius: $border-radius-normal;
-        border-top-right-radius: $border-radius-normal;
+        border-start-start-radius: $border-radius-normal;
+        border-start-end-radius: $border-radius-normal;
     }
     li:last-child > a {
-        border-bottom-left-radius: $border-radius-normal;
-        border-bottom-right-radius: $border-radius-normal;
+        border-end-start-radius: $border-radius-normal;
+        border-end-end-radius: $border-radius-normal;
     }
     .cms-pagetree-dropdown-item-disabled {
         opacity: 0.2;
@@ -52,7 +53,8 @@
     &.cms-pagetree-dropdown-menu-condensed {
         a,
         .cms-pagetree-dropdown-item {
-            padding: 5px $pagetree-dropdown-padding-horizontal;
+            padding-block: 5px;
+            padding-inline: $pagetree-dropdown-padding-horizontal;
         }
     }
     .active {
@@ -65,11 +67,12 @@
         font-size: 90%;
         font-weight: normal;
         line-height: 1.5;
-        text-align: left;
+        text-align: start;
         text-transform: uppercase;
-        padding: 7px $pagetree-dropdown-padding-horizontal 5px;
-        border-bottom: 1px solid $gray-lighter;
-        margin-bottom: 4px;
+        padding-block: 7px 5px;
+        padding-inline: $pagetree-dropdown-padding-horizontal;
+        border-block-end: 1px solid $gray-lighter;
+        margin-block-end: 4px;
     }
 
     li {
@@ -81,24 +84,25 @@
         display: block;
         overflow: hidden;
         font-size: 12px !important;
-        text-align: left;
+        text-align: start;
         text-overflow: ellipsis;
         margin: 0;
-        padding: 5px $pagetree-dropdown-padding-horizontal 3px !important;
+        padding-block: 5px 3px !important;
+        padding-inline: $pagetree-dropdown-padding-horizontal !important;
         strong {
             font-size: 12px !important;
         }
     }
     p + p {
-        margin-top: -2px;
-        padding-top: 0 !important;
+        margin-block-start: -2px;
+        padding-block-start: 0 !important;
     }
     p:last-child {
-        padding-bottom: 7px !important;
+        padding-block-end: 7px !important;
     }
 
     .cms-icon {
-        margin-right: 10px;
+        margin-inline-end: 10px;
     }
 
     span {
@@ -109,11 +113,11 @@
     &:before {
         content: "";
         position: absolute;
-        left: 100%;
+        inset-inline-start: 100%;
         z-index: z(below);
         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);
         background-color: $submenu-dropdown-bgcolor;
         box-shadow: $dropdown-shadow;
         transform: rotate(45deg) translateZ(0);
@@ -131,29 +135,29 @@
     display: block;
 }
 
-.cms-pagetree-dropdown-menu-arrow-top-right {
+.cms-pagetree-dropdown-menu-arrow-block-start-inline-end {
     &:before {
-        margin-top: -5px;
-        margin-left: -24px;
+        margin-block-start: -5px;
+        margin-inline-start: -24px;
     }
 }
 
-.cms-pagetree-dropdown-menu-arrow-right-top {
+.cms-pagetree-dropdown-menu-arrow-inline-end-block-start {
     &:before {
-        top: 16px;
+        inset-block-start: 16px;
     }
 }
-.cms-pagetree-dropdown-menu-arrow-right-bottom {
+.cms-pagetree-dropdown-menu-arrow-inline-end-block-end {
     &:before {
-        bottom: 18px;
+        inset-block-end: 18px;
     }
 }
 
 .cms-pagetree-dropdown-loader {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
     border-radius: $border-radius-normal;
 }

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

@@ -1,34 +1,34 @@
 .cms-pagetree-legend {
     position: relative;
-    text-align: right;
+    text-align: end;
 
     .cms-icon-info {
         color: $color-primary;
         vertical-align: middle;
-        margin-right: 5px;
+        margin-inline-end: 5px;
     }
 
     .cms-pagetree-dropdown {
         display: inline-block;
     }
 
     .cms-pagetree-dropdown-menu {
-        top: auto;
-        right: 100%;
-        bottom: 0;
-        left: auto;
-        margin-right: 10px;
-        margin-bottom: -90px;
+        inset-block-start: auto;
+        inset-inline-end: 100%;
+        inset-block-end: 0;
+        inset-inline-start: auto;
+        margin-inline-end: 10px;
+        margin-block-end: -90px;
         &:before {
-            bottom: 96px;
+            inset-block-end: 96px;
         }
     }
     .cms-pagetree-dropdown-item {
         .cms-pagetree-node-state {
-            margin-right: 10px;
+            margin-inline-end: 10px;
         }
         .cms-icon {
-            margin-right: 8px;
+            margin-inline-end: 8px;
         }
         .cms-icon-home,
         .cms-icon-sitemap,
@@ -40,7 +40,7 @@
     .cms-icon {
         text-align: center;
         width: 20px;
-        margin-left: -2px;
+        margin-inline-start: -2px;
     }
     .cms-icon-check-square {
         color: $color-success;