[WIP] Make layout compatible with RTL languages

[luixxiul]

Addresses https://github.com/vector-im/element-web/issues/14520

Requires #8230 #8231 #8243

This PR intends to make the current style rules written for the LTR (Left-To-Right) layout compatible with the RTL (Right-To-Left) layout, in order to make it possible to display UI in RTL languages such as Hebrew properly. Currently, UI in these languages are displayed in the LTR layout, but it should display not only translated strings but also other elements such as icons, buttons, the sidebar, the panel etc. from right to left, according to its layout.

Currently I don't plan to implement a function to enable the RTL layout as it is beyond my capability. The layout should be able to be switched by changing the value of dir specified to the top html tag. Any help to implement it is greatly appreciated!

• Replace existing padding/margin with logical properties
• Remove relative values to place elements where it is possible
• Replace float: right and float: left used to align elements with flex/grid, which takes care of the flow of the elements automatically

Todo:

• Rename elements whose name includes Right* and Left* eg. mx_RightPanel
• Add a section to the style guideline to explain that styling with right and left (with margin, padding, float, etc.) should be avoided to maintain the RTL compatibility
• Rewrite styles/code to display context menus of a space, message composer, etc. properly

Steps to test locally:

1. Set up the development environment
2. Add dir="rtl" to html tag of src/vector/index.html inside element-web
3. Run yarn start
4. Open Element at http://localhost:8080
5. Change the language setting into RTL language such as Hebrew

https://user-images.githubusercontent.com/3362943/161420463-545264df-f75d-44f4-b01b-81b46dcd9eab.mp4

Signed-off-by: Suguru Hirahara [email protected]

---

Here's what your changelog entry will look like:

✨ Features

• [WIP] Make layout compatible with RTL languages (#8217). Contributed by @luixxiul.

Preview: https://pr8217--matrix-react-sdk.netlify.app ⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

[codecov[bot]]

Codecov Report

Merging #8217 (a00a6e4) into develop (35c49a8) will not change coverage. The diff coverage is 0.00%.

:exclamation: Current head a00a6e4 differs from pull request most recent head d7b8902. Consider uploading reports for the commit d7b8902 to get more accurate results

@@           Coverage Diff            @@
##           develop    #8217   +/-   ##
========================================
  Coverage    28.27%   28.27%           
========================================
  Files          861      861           
  Lines        49800    49800           
  Branches     12688    12688           
========================================
  Hits         14083    14083           
  Misses       35717    35717           

Impacted Files	Coverage Δ
...rc/components/structures/auth/CompleteSecurity.tsx	0.00% <ø> (ø)
src/components/views/dialogs/DevtoolsDialog.tsx	14.28% <ø> (ø)
...c/components/views/right_panel/RoomSummaryCard.tsx	15.38% <ø> (ø)
src/components/views/right_panel/UserInfo.tsx	29.76% <ø> (ø)
src/components/views/rooms/LinkPreviewWidget.tsx	0.00% <ø> (ø)
src/components/views/rooms/ReplyPreview.tsx	42.85% <ø> (ø)
...omponents/views/settings/SetIntegrationManager.tsx	0.00% <ø> (ø)
src/components/views/toasts/GenericToast.tsx	16.66% <0.00%> (ø)

[luixxiul]

The commit above fixes the issue that close button is covered by the title.

The footer of the dialog is mess; it should be possible to get a clear view once https://github.com/matrix-org/matrix-react-sdk/pull/8160 is landed.

[luixxiul]

Closed as RTL design will never land at least until Element X