[ENHANCEMENT] Add RTL support for the pagetree about django-cms HOT 4 CLOSED

@sakhawy I have not looked into this too much but my expectation would be

1. For the drag bar it is simply a matter of CSS: The drag handle is, in fact, a background image on the bar and positioned at the left. There is a rule missing moving it to the right. See line 833. To be on the right side, it would probably be right center instead of -1px center. (Also, I'd prefer left center to -1px center. If needed, we can crop the GIF by 1px):
   

   django-cms/cms/static/cms/sass/components/pagetree/_tree.scss

   Lines 817 to 835 in 8a0aa59

   	.jstree-anchor {
   	box-sizing: border-box;
   	display: block;
   	cursor: move;
   	outline: none;
   	color: $gray;
   	// we need to add one pixel in to negate the negative margin
   	// value to get the borders to work visually
   	height: $pagetree-cell-height + 1;
   	padding: $pagetree-anchor-padding;
   	margin-top: -1px;
   	border: 1px solid $gray-lighter;
   	border-right: none;
   	background-color: $white;
   	background-image: url('../../img/pagetree/tree-li-drag.gif');
   	background-repeat: no-repeat;
   	background-position: -1px center;;
   	image-rendering: pixelated;
   	white-space: normal;

2. For the dropdown menu, you'll have to think if you can solve it with CSS only. The relevant file is https://github.com/django-cms/django-cms/blob/develop-4/cms/static/cms/sass/components/pagetree/_dropdown.scss. There are two things to do:

   1. Position the little triangle arrow on the other side of the dropdown. Now, there's three not well-named classes: .cms-pagetree-dropdown-menu-arrow-top-right, .cms-pagetree-dropdown-menu-arrow-right-top, and .cms-pagetree-dropdown-menu-arrow-right-bottom. Does it make sense to replace the "right" by "side" and change the CSS that it is right for ltr and left for rtl? This might also require some js changes.
   2. Position the dropdown aligned on the other side of the button:
      

      django-cms/cms/static/cms/sass/components/pagetree/_tree.scss

      Lines 407 to 410 in 8a0aa59

      	.cms-pagetree-dropdown-menu {
      	right: 40px;
      	top: -2px;
      	width: 205px;

3. For the dragging I have not had time to look into it.

from django-cms.

Thanks a lot for your helpful comment @fsbraun! I'm currently working on a PR (I'm at point 3 at the moment)

1. That was fixed. There's another reason why one might crop the GIF: there are a couple of padding pixels on the left -- I was leaving the decision of cropping it to the PR review.
2. I haven't taken a look yet but your approach makes sense. Thanks for the help. I'll get back to this issue if something doesn't make sense.
3. I think I have to do this from cms/static/cms/js/modules/cms.pagetree.js. If you look at the _tree.scss file you can see that right: 3% is a hack(?). For example, try to resize the window and you'll see a slight change in the marker width relative to the tree container. If I have to do it in CSS then I need to hack my way around the width of the marker. The width of the marker isn't straightforward because jstree injects it into the body instead of the tree container for example.

I'll try to do it from check_callback.

On another note, how do you feel about using CSS logical properties (instead of explicitly setting left & right for example)?

from django-cms.

Logical properties are even better. They keep the CSS smaller.

from django-cms.

So far, 1 is fixed. As for 3, I managed to solve the problem by programmatically adding CSS to #jstree-marker on the dnd_move.vakata event -- the only event where this can work:

            // styling the #jstree-marker dynamically on dnd_move
            var marker = $('#jstree-marker');
            var root = $('#changelist');

            marker.css({
                left: `${root.offset().left}px`,
                width: `${root.width()}px`
            });

        });

I also edited the Sass and added logical properties to the classes I edited.

As I was working on this I noticed another part that needs RTL support (I think it's the grid I haven't looked into it yet):

Is it ok to put all of those fixes in the same PR?

from django-cms.