Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Use a consistent alignment for all text items in a list #8276

Merged
merged 5 commits into from
Apr 11, 2022
Merged

Use a consistent alignment for all text items in a list #8276

merged 5 commits into from
Apr 11, 2022

Conversation

luixxiul
Copy link
Contributor

@luixxiul luixxiul commented Apr 10, 2022

Closes element-hq/element-web#21731

This PR fixes issues that:

  • (1) text items in a list are not aligned if the item starts / consists of words in RTL (Right to Left) language such as Hebrew
  • (2) user name is not always displayed in RTL format on right and left panel correctly

Basically the solution is to add dir="auto" to the element which wraps the user / room name directly. This way the parent elements which consist of that element are treated as elements of the LTR layout, and aligned according to it.

When it comes to RTL there are other issues, such as input forms on a room setting dialog, but it is not the scope of this PR.

Current implementation:

Image 1: room list on the right panel
before1

The item in Hebrew should be aligned to the left side.

Image 2: user list on the left panel
before2

The user name should be aligned to the left side.

Also, the user name on each panel is not always displayed in RTL format. These two cases the user name should start with the hyphen from right to left.

before before3

Steps to confirm the fixes

  1. Create a test user
  2. Specify the user name in RTL language such as Hebrew
  3. Add the user as your friend
  4. Create a room with the user and specify its name in RTL language
  5. Open the rooms list on the left panel
  6. Check that the user name aligned to the left side
  7. Change a room's name to - ڪيـﯛتـَـۿۃ
  8. Check that the room name starts with the hyphen from the right
  9. Check that the room name is displayed in the same way as on Element for Android

after3

  1. Go to https://matrix.to/#/#edgarabic:matrix.org
  2. Join the room
  3. Open the user list on the right panel
  4. Check all items inside the user list are aligned to the left side
  5. Check that the user name which has an icon as a prefix has the icon on the right side
    • For example, King ... • (not the user with the dash icon as it is the suffix for a RTL language)

after2

  1. Select a user, whose name starts with hyphen and includes alphabet of RTL languages, such as - ڪيـﯛتـَـۿۃ peacockcupid.
  2. Open the browser's devtool
  3. Select Inspector
  4. Select the user name
  5. Check that the user name starts with the hyphen on the left
  6. Select the user on the user panel
  7. Check the user name starts with the hyphen on the right

after

type: defect


Here's what your changelog entry will look like:

🐛 Bug Fixes

Preview: https://pr8276--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.

- Rooms list on the left panel

Signed-off-by: Suguru Hirahara <[email protected]>
- Users list on the right panel

Signed-off-by: Suguru Hirahara <[email protected]>
- User name on the user info on the right panel

Signed-off-by: Suguru Hirahara <[email protected]>
@luixxiul luixxiul requested a review from a team as a code owner April 10, 2022 19:29
Signed-off-by: Suguru Hirahara <[email protected]>
@codecov
Copy link

codecov bot commented Apr 10, 2022

Codecov Report

Merging #8276 (c6fb80a) into develop (b760ec9) will decrease coverage by 0.17%.
The diff coverage is n/a.

❗ Current head c6fb80a differs from pull request most recent head 0dacf7a. Consider uploading reports for the commit 0dacf7a to get more accurate results

@@             Coverage Diff             @@
##           develop    #8276      +/-   ##
===========================================
- Coverage    29.43%   29.25%   -0.18%     
===========================================
  Files          867      863       -4     
  Lines        49953    49876      -77     
  Branches     12708    12696      -12     
===========================================
- Hits         14702    14592     -110     
- Misses       35251    35284      +33     
Impacted Files Coverage Δ
...components/views/messages/DisambiguatedProfile.tsx 90.00% <ø> (ø)
src/components/views/right_panel/UserInfo.tsx 29.76% <ø> (ø)
src/components/views/rooms/EntityTile.tsx 68.00% <ø> (ø)
src/components/views/rooms/RoomTile.tsx 47.49% <ø> (ø)
src/components/views/messages/MBeaconBody.tsx 7.14% <0.00%> (-92.86%) ⬇️
src/TextForEvent.tsx 35.73% <0.00%> (-8.12%) ⬇️
src/stores/OwnBeaconStore.ts 96.73% <0.00%> (-1.12%) ⬇️
src/languageHandler.tsx 72.35% <0.00%> (-0.82%) ⬇️
src/components/views/location/Marker.tsx 100.00% <0.00%> (ø)
src/components/views/location/SmartMarker.tsx
... and 5 more

@@ -133,7 +133,7 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
}
nameEl = (
<div className="mx_EntityTile_details">
<div className="mx_EntityTile_name" dir="auto">
<div className="mx_EntityTile_name">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Specifying the direction on this level forces child elements to be moved to the right side even on the LTR layout, if the user name includes characters in a RTL language. DisambiguatedProfile should take care of the direction.

@github-actions github-actions bot added the T-Defect Bugs, crashes, hangs, vulnerabilities, or other reported problems label Apr 11, 2022
Copy link
Member

@t3chguy t3chguy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks sane to me, thanks!!

@t3chguy t3chguy enabled auto-merge (squash) April 11, 2022 12:33
@t3chguy t3chguy merged commit f648140 into matrix-org:develop Apr 11, 2022
@luixxiul luixxiul deleted the rtl-2 branch April 11, 2022 13:06
@luixxiul
Copy link
Contributor Author

Thanks for reviewing. I'll fix a regression if any (hopefully this change looks natural for native RTL language speakers)

su-ex added a commit to SchildiChat/element-desktop that referenced this pull request Apr 30, 2022
* Handle forced disconnects from Jitsi ([\#21697](element-hq/element-web#21697)). Fixes element-hq/element-web#21517.
* Improve performance of switching to rooms with lots of servers and ACLs ([\#8347](matrix-org/matrix-react-sdk#8347)).
* Avoid a reflow when setting caret position on an empty composer ([\#8348](matrix-org/matrix-react-sdk#8348)).
* Add message right-click context menu as a labs feature ([\#5672](matrix-org/matrix-react-sdk#5672)).
* Live location sharing - basic maximised beacon map ([\#8310](matrix-org/matrix-react-sdk#8310)).
* Live location sharing - render users own beacons in timeline ([\#8296](matrix-org/matrix-react-sdk#8296)).
* Improve Threads beta around degraded mode ([\#8318](matrix-org/matrix-react-sdk#8318)).
* Live location sharing -  beacon in timeline happy path ([\#8285](matrix-org/matrix-react-sdk#8285)).
* Add copy button to View Source screen ([\#8278](matrix-org/matrix-react-sdk#8278)). Fixes element-hq/element-web#21482. Contributed by @olivialivia.
* Add heart effect ([\#6188](matrix-org/matrix-react-sdk#6188)). Contributed by @CicadaCinema.
* Update new room icon ([\#8239](matrix-org/matrix-react-sdk#8239)).
* Prevent packing of native modules ([\element-hq#337](element-hq#337)). Fixes element-hq/element-web#17188. Contributed by @PF4Public.
* Fix: "Code formatting button does not escape backticks" ([\#8181](matrix-org/matrix-react-sdk#8181)). Contributed by @yaya-usman.
* Fix beta indicator dot causing excessive CPU usage ([\#8340](matrix-org/matrix-react-sdk#8340)). Fixes element-hq/element-web#21793.
* Fix overlapping timestamps on empty messages ([\#8205](matrix-org/matrix-react-sdk#8205)). Fixes element-hq/element-web#21381. Contributed by @goelesha.
* Fix power selector not showing up in user info when state_default undefined ([\#8297](matrix-org/matrix-react-sdk#8297)). Fixes element-hq/element-web#21669.
* Avoid looking up settings during timeline rendering ([\#8313](matrix-org/matrix-react-sdk#8313)). Fixes element-hq/element-web#21740.
* Fix a soft crash with video rooms ([\#8333](matrix-org/matrix-react-sdk#8333)).
* Fixes call tiles overflow ([\#8096](matrix-org/matrix-react-sdk#8096)). Fixes element-hq/element-web#20254. Contributed by @luixxiul.
* Fix a bug with emoji autocomplete sorting where adding the final "&element-hq#58;" would cause the emoji with the typed shortcode to no longer be at the top of the autocomplete list. ([\#8086](matrix-org/matrix-react-sdk#8086)). Fixes element-hq/element-web#19302. Contributed by @commonlawfeature.
* Fix image preview sizing for edge cases ([\#8322](matrix-org/matrix-react-sdk#8322)). Fixes element-hq/element-web#20088.
* Refactor SecurityRoomSettingsTab and remove unused state ([\#8306](matrix-org/matrix-react-sdk#8306)). Fixes matrix-org/element-web-rageshakes#12002.
* Don't show the prompt to enable desktop notifications immediately after registration ([\#8274](matrix-org/matrix-react-sdk#8274)).
* Stop tracking threads if threads support is disabled ([\#8308](matrix-org/matrix-react-sdk#8308)). Fixes element-hq/element-web#21766.
* Fix some issues with threads rendering ([\#8305](matrix-org/matrix-react-sdk#8305)). Fixes element-hq/element-web#21670.
* Fix threads rendering issue in Safari ([\#8298](matrix-org/matrix-react-sdk#8298)). Fixes element-hq/element-web#21757.
* Fix space panel width change on hovering over space item ([\#8299](matrix-org/matrix-react-sdk#8299)). Fixes element-hq/element-web#19891.
* Hide the reply in thread button in deployments where beta is forcibly disabled ([\#8294](matrix-org/matrix-react-sdk#8294)). Fixes element-hq/element-web#21753.
* Prevent soft crash around room list header context menu when space changes ([\#8289](matrix-org/matrix-react-sdk#8289)). Fixes matrix-org/element-web-rageshakes#11416, matrix-org/element-web-rageshakes#11692, matrix-org/element-web-rageshakes#11739, matrix-org/element-web-rageshakes#11772, matrix-org/element-web-rageshakes#11891 matrix-org/element-web-rageshakes#11858 and matrix-org/element-web-rageshakes#11456.
* When selecting reply in thread on a thread response open existing thread ([\#8291](matrix-org/matrix-react-sdk#8291)). Fixes element-hq/element-web#21743.
* Handle thread bundled relationships coming from the server via MSC3666 ([\#8292](matrix-org/matrix-react-sdk#8292)). Fixes element-hq/element-web#21450.
* Fix: Avatar preview does not update when same file is selected repeatedly ([\#8288](matrix-org/matrix-react-sdk#8288)). Fixes element-hq/element-web#20098.
* Fix a bug where user gets a warning when changing powerlevel from **Admin** to **custom level (100)** ([\#8248](matrix-org/matrix-react-sdk#8248)). Fixes element-hq/element-web#21682. Contributed by @Jumeb.
* Use a consistent alignment for all text items in a list ([\#8276](matrix-org/matrix-react-sdk#8276)). Fixes element-hq/element-web#21731. Contributed by @luixxiul.
* Fixes button labels being collapsed per a character in CJK languages ([\#8212](matrix-org/matrix-react-sdk#8212)). Fixes element-hq/element-web#21287. Contributed by @luixxiul.
* Fix: Remove jittery timeline scrolling after jumping to an event ([\#8263](matrix-org/matrix-react-sdk#8263)).
* Fix regression of edits showing up in the timeline with hidden events shown ([\#8260](matrix-org/matrix-react-sdk#8260)). Fixes element-hq/element-web#21694.
* Fix reporting events not working ([\#8257](matrix-org/matrix-react-sdk#8257)). Fixes element-hq/element-web#21713.
* Make Jitsi widgets in video rooms immutable ([\#8244](matrix-org/matrix-react-sdk#8244)). Fixes element-hq/element-web#21647.
* Fix: Ensure links to events scroll the correct events into view ([\#8250](matrix-org/matrix-react-sdk#8250)). Fixes element-hq/element-web#19934.
su-ex added a commit to SchildiChat/element-web that referenced this pull request Apr 30, 2022
* Handle forced disconnects from Jitsi ([\element-hq#21697](element-hq#21697)). Fixes element-hq#21517.
* Improve performance of switching to rooms with lots of servers and ACLs ([\element-hq#8347](matrix-org/matrix-react-sdk#8347)).
* Avoid a reflow when setting caret position on an empty composer ([\element-hq#8348](matrix-org/matrix-react-sdk#8348)).
* Add message right-click context menu as a labs feature ([\element-hq#5672](matrix-org/matrix-react-sdk#5672)).
* Live location sharing - basic maximised beacon map ([\element-hq#8310](matrix-org/matrix-react-sdk#8310)).
* Live location sharing - render users own beacons in timeline ([\element-hq#8296](matrix-org/matrix-react-sdk#8296)).
* Improve Threads beta around degraded mode ([\element-hq#8318](matrix-org/matrix-react-sdk#8318)).
* Live location sharing -  beacon in timeline happy path ([\element-hq#8285](matrix-org/matrix-react-sdk#8285)).
* Add copy button to View Source screen ([\element-hq#8278](matrix-org/matrix-react-sdk#8278)). Fixes element-hq#21482. Contributed by @olivialivia.
* Add heart effect ([\element-hq#6188](matrix-org/matrix-react-sdk#6188)). Contributed by @CicadaCinema.
* Update new room icon ([\element-hq#8239](matrix-org/matrix-react-sdk#8239)).
* Fix: "Code formatting button does not escape backticks" ([\element-hq#8181](matrix-org/matrix-react-sdk#8181)). Contributed by @yaya-usman.
* Fix beta indicator dot causing excessive CPU usage ([\element-hq#8340](matrix-org/matrix-react-sdk#8340)). Fixes element-hq#21793.
* Fix overlapping timestamps on empty messages ([\element-hq#8205](matrix-org/matrix-react-sdk#8205)). Fixes element-hq#21381. Contributed by @goelesha.
* Fix power selector not showing up in user info when state_default undefined ([\element-hq#8297](matrix-org/matrix-react-sdk#8297)). Fixes element-hq#21669.
* Avoid looking up settings during timeline rendering ([\element-hq#8313](matrix-org/matrix-react-sdk#8313)). Fixes element-hq#21740.
* Fix a soft crash with video rooms ([\element-hq#8333](matrix-org/matrix-react-sdk#8333)).
* Fixes call tiles overflow ([\#8096](matrix-org/matrix-react-sdk#8096)). Fixes element-hq#20254. Contributed by @luixxiul.
* Fix a bug with emoji autocomplete sorting where adding the final "&element-hq#58;" would cause the emoji with the typed shortcode to no longer be at the top of the autocomplete list. ([\element-hq#8086](matrix-org/matrix-react-sdk#8086)). Fixes element-hq#19302. Contributed by @commonlawfeature.
* Fix image preview sizing for edge cases ([\element-hq#8322](matrix-org/matrix-react-sdk#8322)). Fixes element-hq#20088.
* Refactor SecurityRoomSettingsTab and remove unused state ([\element-hq#8306](matrix-org/matrix-react-sdk#8306)). Fixes matrix-org/element-web-rageshakes#12002.
* Don't show the prompt to enable desktop notifications immediately after registration ([\element-hq#8274](matrix-org/matrix-react-sdk#8274)).
* Stop tracking threads if threads support is disabled ([\element-hq#8308](matrix-org/matrix-react-sdk#8308)). Fixes element-hq#21766.
* Fix some issues with threads rendering ([\element-hq#8305](matrix-org/matrix-react-sdk#8305)). Fixes element-hq#21670.
* Fix threads rendering issue in Safari ([\element-hq#8298](matrix-org/matrix-react-sdk#8298)). Fixes element-hq#21757.
* Fix space panel width change on hovering over space item ([\element-hq#8299](matrix-org/matrix-react-sdk#8299)). Fixes element-hq#19891.
* Hide the reply in thread button in deployments where beta is forcibly disabled ([\element-hq#8294](matrix-org/matrix-react-sdk#8294)). Fixes element-hq#21753.
* Prevent soft crash around room list header context menu when space changes ([\element-hq#8289](matrix-org/matrix-react-sdk#8289)). Fixes matrix-org/element-web-rageshakes#11416, matrix-org/element-web-rageshakes#11692, matrix-org/element-web-rageshakes#11739, matrix-org/element-web-rageshakes#11772, matrix-org/element-web-rageshakes#11891 matrix-org/element-web-rageshakes#11858 and matrix-org/element-web-rageshakes#11456.
* When selecting reply in thread on a thread response open existing thread ([\#8291](matrix-org/matrix-react-sdk#8291)). Fixes element-hq#21743.
* Handle thread bundled relationships coming from the server via MSC3666 ([\element-hq#8292](matrix-org/matrix-react-sdk#8292)). Fixes element-hq#21450.
* Fix: Avatar preview does not update when same file is selected repeatedly ([\element-hq#8288](matrix-org/matrix-react-sdk#8288)). Fixes element-hq#20098.
* Fix a bug where user gets a warning when changing powerlevel from **Admin** to **custom level (100)** ([\element-hq#8248](matrix-org/matrix-react-sdk#8248)). Fixes element-hq#21682. Contributed by @Jumeb.
* Use a consistent alignment for all text items in a list ([\#8276](matrix-org/matrix-react-sdk#8276)). Fixes element-hq#21731. Contributed by @luixxiul.
* Fixes button labels being collapsed per a character in CJK languages ([\element-hq#8212](matrix-org/matrix-react-sdk#8212)). Fixes element-hq#21287. Contributed by @luixxiul.
* Fix: Remove jittery timeline scrolling after jumping to an event ([\element-hq#8263](matrix-org/matrix-react-sdk#8263)).
* Fix regression of edits showing up in the timeline with hidden events shown ([\element-hq#8260](matrix-org/matrix-react-sdk#8260)). Fixes element-hq#21694.
* Fix reporting events not working ([\element-hq#8257](matrix-org/matrix-react-sdk#8257)). Fixes element-hq#21713.
* Make Jitsi widgets in video rooms immutable ([\element-hq#8244](matrix-org/matrix-react-sdk#8244)). Fixes element-hq#21647.
* Fix: Ensure links to events scroll the correct events into view ([\element-hq#8250](matrix-org/matrix-react-sdk#8250)). Fixes element-hq#19934.
su-ex added a commit to SchildiChat/matrix-react-sdk that referenced this pull request Apr 30, 2022
* Improve performance of switching to rooms with lots of servers and ACLs ([\matrix-org#8347](matrix-org#8347)).
* Avoid a reflow when setting caret position on an empty composer ([\matrix-org#8348](matrix-org#8348)).
* Add message right-click context menu as a labs feature ([\matrix-org#5672](matrix-org#5672)).
* Live location sharing - basic maximised beacon map ([\matrix-org#8310](matrix-org#8310)).
* Live location sharing - render users own beacons in timeline ([\matrix-org#8296](matrix-org#8296)).
* Improve Threads beta around degraded mode ([\matrix-org#8318](matrix-org#8318)).
* Live location sharing -  beacon in timeline happy path ([\matrix-org#8285](matrix-org#8285)).
* Add copy button to View Source screen ([\matrix-org#8278](matrix-org#8278)). Fixes element-hq/element-web#21482. Contributed by @olivialivia.
* Add heart effect ([\matrix-org#6188](matrix-org#6188)). Contributed by @CicadaCinema.
* Update new room icon ([\matrix-org#8239](matrix-org#8239)).
* Fix: "Code formatting button does not escape backticks" ([\matrix-org#8181](matrix-org#8181)). Contributed by @yaya-usman.
* Fix beta indicator dot causing excessive CPU usage ([\matrix-org#8340](matrix-org#8340)). Fixes element-hq/element-web#21793.
* Fix overlapping timestamps on empty messages ([\matrix-org#8205](matrix-org#8205)). Fixes element-hq/element-web#21381. Contributed by @goelesha.
* Fix power selector not showing up in user info when state_default undefined ([\matrix-org#8297](matrix-org#8297)). Fixes element-hq/element-web#21669.
* Avoid looking up settings during timeline rendering ([\matrix-org#8313](matrix-org#8313)). Fixes element-hq/element-web#21740.
* Fix a soft crash with video rooms ([\matrix-org#8333](matrix-org#8333)).
* Fixes call tiles overflow ([\matrix-org#8096](matrix-org#8096)). Fixes element-hq/element-web#20254. Contributed by @luixxiul.
* Fix a bug with emoji autocomplete sorting where adding the final "&matrix-org#58;" would cause the emoji with the typed shortcode to no longer be at the top of the autocomplete list. ([\matrix-org#8086](matrix-org#8086)). Fixes element-hq/element-web#19302. Contributed by @commonlawfeature.
* Fix image preview sizing for edge cases ([\matrix-org#8322](matrix-org#8322)). Fixes element-hq/element-web#20088.
* Refactor SecurityRoomSettingsTab and remove unused state ([\matrix-org#8306](matrix-org#8306)). Fixes matrix-org/element-web-rageshakes#12002.
* Don't show the prompt to enable desktop notifications immediately after registration ([\matrix-org#8274](matrix-org#8274)).
* Stop tracking threads if threads support is disabled ([\matrix-org#8308](matrix-org#8308)). Fixes element-hq/element-web#21766.
* Fix some issues with threads rendering ([\matrix-org#8305](matrix-org#8305)). Fixes element-hq/element-web#21670.
* Fix threads rendering issue in Safari ([\matrix-org#8298](matrix-org#8298)). Fixes element-hq/element-web#21757.
* Fix space panel width change on hovering over space item ([\matrix-org#8299](matrix-org#8299)). Fixes element-hq/element-web#19891.
* Hide the reply in thread button in deployments where beta is forcibly disabled ([\matrix-org#8294](matrix-org#8294)). Fixes element-hq/element-web#21753.
* Prevent soft crash around room list header context menu when space changes ([\matrix-org#8289](matrix-org#8289)). Fixes matrix-org/element-web-rageshakes#11416, matrix-org/element-web-rageshakes#11692, matrix-org/element-web-rageshakes#11739, matrix-org/element-web-rageshakes#11772, matrix-org/element-web-rageshakes#11891 matrix-org/element-web-rageshakes#11858 and matrix-org/element-web-rageshakes#11456.
* When selecting reply in thread on a thread response open existing thread ([\matrix-org#8291](matrix-org#8291)). Fixes element-hq/element-web#21743.
* Handle thread bundled relationships coming from the server via MSC3666 ([\matrix-org#8292](matrix-org#8292)). Fixes element-hq/element-web#21450.
* Fix: Avatar preview does not update when same file is selected repeatedly ([\matrix-org#8288](matrix-org#8288)). Fixes element-hq/element-web#20098.
* Fix a bug where user gets a warning when changing powerlevel from **Admin** to **custom level (100)** ([\matrix-org#8248](matrix-org#8248)). Fixes element-hq/element-web#21682. Contributed by @Jumeb.
* Use a consistent alignment for all text items in a list ([\matrix-org#8276](matrix-org#8276)). Fixes element-hq/element-web#21731. Contributed by @luixxiul.
* Fixes button labels being collapsed per a character in CJK languages ([\matrix-org#8212](matrix-org#8212)). Fixes element-hq/element-web#21287. Contributed by @luixxiul.
* Fix: Remove jittery timeline scrolling after jumping to an event ([\matrix-org#8263](matrix-org#8263)).
* Fix regression of edits showing up in the timeline with hidden events shown ([\matrix-org#8260](matrix-org#8260)). Fixes element-hq/element-web#21694.
* Fix reporting events not working ([\matrix-org#8257](matrix-org#8257)). Fixes element-hq/element-web#21713.
* Make Jitsi widgets in video rooms immutable ([\matrix-org#8244](matrix-org#8244)). Fixes element-hq/element-web#21647.
* Fix: Ensure links to events scroll the correct events into view ([\matrix-org#8250](matrix-org#8250)). Fixes element-hq/element-web#19934.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
T-Defect Bugs, crashes, hangs, vulnerabilities, or other reported problems
Projects
None yet
Development

Successfully merging this pull request may close these issues.

RTL: Text items in a list are not aligned
2 participants