Skip to content

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

Merged
jasonvarga merged 23 commits into
statamic:4.xfrom
peimn:rtl
Mar 11, 2024
Merged

[4.x] RTL support in the Control Panel#9447
jasonvarga merged 23 commits into
statamic:4.xfrom
peimn:rtl

Conversation

@peimn

@peimn peimn commented Feb 1, 2024

Copy link
Copy Markdown
Contributor

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

@jasonvarga

Copy link
Copy Markdown
Member

Amazing. We were about to do this ourselves.

@jackmcdade

Copy link
Copy Markdown
Member

Dude!

Standing Ovation

@peimn

peimn commented Feb 1, 2024

Copy link
Copy Markdown
Contributor Author

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

@jackmcdade

Copy link
Copy Markdown
Member

Blush

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

ebeauchamps commented Feb 17, 2024

Copy link
Copy Markdown
Contributor

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
Copy Markdown
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
Copy Markdown
Member

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

@peimn

peimn commented Mar 8, 2024

Copy link
Copy Markdown
Contributor Author

@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
Copy Markdown
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
Copy Markdown
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

peimn commented Mar 9, 2024

Copy link
Copy Markdown
Contributor Author

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
Copy Markdown
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
@peimn

peimn commented Mar 11, 2024

Copy link
Copy Markdown
Contributor Author

@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

peimn commented Mar 11, 2024

Copy link
Copy Markdown
Contributor Author

@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.

4 participants