Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.x] RTL support in the Control Panel #9447

Merged
merged 23 commits into from
Mar 11, 2024
Merged

[4.x] RTL support in the Control Panel #9447

merged 23 commits into from
Mar 11, 2024

Conversation

peimn
Copy link
Contributor

@peimn peimn commented Feb 1, 2024

This PR will add rtl styles for RTL languages like Arabic, Persian, Hebrew...

@jasonvarga
Copy link
Member

Amazing. We were about to do this ourselves.

@jackmcdade
Copy link
Member

Dude!

Standing Ovation

@peimn
Copy link
Contributor Author

peimn commented Feb 1, 2024

You're welcome 🤗. I like Statamic and would suggest it to whole world in any language and any region...

@jackmcdade
Copy link
Member

Blush

@peimn peimn marked this pull request as ready for review February 1, 2024 20:16
@ebeauchamps
Copy link
Contributor

ebeauchamps commented Feb 17, 2024

Make me think about at least one fieldtype (range) where you can prepend and append a text and I think RTL language can have a hard time with this, doesn't it?

Capture d’écran 2024-02-17 à 13 46 09

@jasonvarga
Copy link
Member

Maybe the translation can be changed if it's a RTL language. e.g. instead of saying beginning (left-side) it would be translated to beginning (right-side).

# Conflicts:
#	resources/css/components/items.css
#	resources/css/elements/tables.css
#	resources/js/components/blueprints/Listing.vue
#	resources/js/components/blueprints/RegularField.vue
#	resources/js/components/blueprints/Section.vue
#	resources/js/components/data-list/ColumnPicker.vue
#	resources/js/components/data-list/Table.vue
#	resources/js/components/entries/PublishForm.vue
#	resources/js/components/field-validation/Builder.vue
#	resources/js/components/fields/Settings.vue
#	resources/js/components/fieldtypes/bard/Set.vue
#	resources/js/components/fieldtypes/date/RangePopover.vue
#	resources/js/components/fieldtypes/date/SinglePopover.vue
#	resources/js/components/fieldtypes/replicator/Set.vue
#	resources/js/components/globals/Sites.vue
#	resources/js/components/nav/Builder.vue
#	resources/js/components/structures/Branch.vue
#	resources/js/components/terms/PublishForm.vue
#	resources/js/components/users/Listing.vue
#	resources/views/blueprints/index.blade.php
#	resources/views/nav/updates.blade.php
#	resources/views/usergroups/show.blade.php
#	resources/views/utilities/partials/email-l6.blade.php
#	resources/views/utilities/partials/email-l7.blade.php
#	resources/views/utilities/phpinfo.blade.php
@jasonvarga
Copy link
Member

Hey @peimn why did slug fields need to be ltr?

@peimn
Copy link
Contributor Author

peimn commented Mar 8, 2024

@jasonvarga It is common for slugs to be written in Latin words, and we prefer to write it in Latin words as non-Latin writers. It is easy to remember and write. Furthermore, Statamic itself converts non-latin words to Latin. Therefore, I decided to make it a ltr.

@jasonvarga
Copy link
Member

Okay I will leave it how you had it then. Thanks!

@jasonvarga jasonvarga changed the title [4.x] add rtl styles for control panel [4.x] Add RTL styles in the Control Panel Mar 8, 2024
@jasonvarga
Copy link
Member

I've made a change to how the text direction of the CP is decided.

You had it so that it depends on the selected site. I've changed it so that it's based on the configured locale or preference. If you have configured a language that should be RTL (like Arabic or Hebrew), it will be RTL.

Similar to #9452, I didn't feel it was right that the whole control panel changed depending on what site you were targeting. If I speak one language, and I've set my preference to a specific language, I don't want the whole CP to change.

However I do think it's a good idea to change the direction of the fields inside the publish forms when you're editing an entry in a specific site. This behavior is consistent with how Craft CMS works, and they do a great job with localization and RTL support. See in this screenshot, everything is in English/LTR (my preferred language) except the field (I only configured one) which is RTL because the current entry is Arabic.

CleanShot 2024-03-08 at 16 52 59

We can adjust that behavior in another PR though. There's so much in this one already. (It's fantastic!)

@peimn
Copy link
Contributor Author

peimn commented Mar 9, 2024

I haven't work with Craft CMS though I get the idea from your words. in #9452 we first had a look for prefered language and if user hadn't set any then switch would be done. But you are right, if we could apply language prefered direction to input fields and editors, it will suit to user needs.

@jasonvarga
Copy link
Member

@peimn Do you have translation files for Persian?

Everything seems to be ready to merge but I'm just curious what you are actually using since we don't include any RTL languages.

@jasonvarga jasonvarga changed the title [4.x] Add RTL styles in the Control Panel [4.x] RTL support in the Control Panel Mar 11, 2024
@jasonvarga jasonvarga merged commit 478a665 into statamic:4.x Mar 11, 2024
19 checks passed
@peimn
Copy link
Contributor Author

peimn commented Mar 11, 2024

@jasonvarga yes I've, and I was waiting for this request to be merged then request to merge Persian language. I will send it in a minute.

@peimn
Copy link
Contributor Author

peimn commented Mar 11, 2024

@jasonvarga #9707 now has Persian translation. Sorry it took a time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants