Rtl Skin

[seyyedhasan6172]

#7883
hi
I change styles of the elastic theme directly to set it RTL.as you say in issue #7883 check the codes and say your opinion about how I change my code to be useful for your needs
I change default styles to rtl styles and add text-align:right and direction:rtl to htm,body tags in style .css

[alecpl]

Sorry but this way I don't see what has changed in styles. You should not modify styles.css, but the less files.

[alecpl]

Thanks. From the changes I see that this probably should be done in the same way we implemented dark mode (see dark.less). I.e. create rtl.less file and put all needed less changes under html.rtl class (or better html[dir=rtl]) and make sure to set the class/attribute with some code in the templates engine (depending on the selected language?).

[seyyedhasan6172]

Hello
I have created rtl.less like the dark.less .I have tested in other skin and its works. I change the html.rtl to html.dark-mode and I have import rtl.less instead of dark.less.
When I was clicked on the dark-mode button the direction changed to RTL and هt worked properly.
so. I want to change the direction according to the language. I see some functions in editor.js for detect language, if I detect the language in ui.js I can change the direction. I think I can implement like dark-mode scenario.
if you have an idea that what can I do please say it to me.
Thanks.

[seyyedhasan6172]

hi
Have you checked the codes?
Were they in your opinion or not?
I put the codes inside the dark.less and the direction changed by pressing the theme button.

[alecpl]

Could you remove changes that are not needed anymore?

[seyyedhasan6172]

hi
what do you mean?
Currently the important file is rtl.less. Which changes should I delete?

[alecpl]

See "Files changed" tab here. To review changes I have to see only these relevant.

[alecpl]

Ok, so now before anyone can test this we need to add at the end of styles.less:

& when (@rtl-mode-enabled = true) {
    @import "rtl";
}

and define the variable in variables.less, where @dark-mode-enabled is.

Next steps:

1. Set rtl class on the html element depending on the UI language of the current user (rcmail_output_html::_write()).
2. Do we need to set dir="rtl" anywhere?
3. Investigate if we need to do anything with TinyMCE. I.e. switch to RTL mode automatically. What if the edited content (e.g. a mail response) is in English, what if it's in Arabic (language detection territory).
4. Investigate what other things need to be fixed/improved.

[seyyedhasan6172]

I define @rtl-mode-enabled in variables.less,
add a condition for check @rtl-mode-enabled at the end of styles.less,
add a function and call that for change direction
if you change the language to Persian, you can see that direction changed.

[alecpl]

This looks better and better. I didn't yet tested this, but do you have any feedback on points 2-4 from my last comment?

[Neustradamus]

@seyyedhasan6172: Have you progressed on your PR?

@alecpl has requested you comment on some points.

[101t]

var lang = rcmail.env.locale;
set var because js is restricted