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

Fixes call tiles overflow #8096

Merged
merged 12 commits into from
Apr 14, 2022
Merged

Fixes call tiles overflow #8096

merged 12 commits into from
Apr 14, 2022

Conversation

luixxiul
Copy link
Contributor

@luixxiul luixxiul commented Mar 21, 2022 •
edited by github-actions bot
Loading

Fixes element-hq/element-web#20254

Signed-off-by: Suguru Hirahara luixxiul@users.noreply.github.com

This PR fixes the issue that buttons and time string overflow the rectangle by making makes call tiles semi-responsive.

Note this achieves the responsiveness incompletely as the minimum width is fixed.

Please see below to check how strings which can be long according to translations are going to be treated.

Image 1: On bubble message layout
after1

Image 2: On modern layout
after2

Image 3
after3

(Button style inconsistency was addressed with another PR: #8129)

Image 4 (extreme case)

To demonstrate the elements would not overflow in an extreme case such as below:

after4

Image 5 (IRC)
after5

Image 6 (with E2E icon on bubble message layout on LTR UI)
after

after.mp4

type: defect

Here's what your changelog entry will look like:

🐛 Bug Fixes

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

@luixxiul luixxiul requested a review from a team as a code owner March 21, 2022 08:24
@codecov
Copy link

codecov bot commented Mar 21, 2022 •
edited
Loading

Codecov Report

Merging #8096 (35f22cf) into develop (7a1a2c4) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           develop    #8096   +/-   ##
========================================
  Coverage    29.82%   29.82%           
========================================
  Files          875      875           
  Lines        50024    50024           
  Branches     12727    12727           
========================================
  Hits         14918    14918           
  Misses       35106    35106

@luixxiul
Copy link
Contributor Author

Also if the button size seems too small, the padding setting can be reverted to the default one in order to maintain a11y and style consistency.

@github-actions github-actions bot added the T-Defect Bugs, crashes, hangs, vulnerabilities, or other reported problems label Mar 26, 2022
@luixxiul luixxiul changed the title Makes call tiles semi-responsive Fixes call tiles overflow Mar 31, 2022
turt2live
turt2live reviewed Apr 4, 2022
View reviewed changes
Copy link
Member

@turt2live turt2live left a comment

Choose a reason for hiding this comment

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

generally seems fine, though I think we should be using our $spacing variables where possible

res/css/views/messages/_CallEvent.scss Outdated
Comment on lines 30 to 31
margin: 4px 0;
padding: 12px 24px;
Copy link
Member

Choose a reason for hiding this comment

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

we should probably use our spacing variables now that we have them

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I see. I am wondering what the policy on using and applying those variables is. Will they be applied gradually and incrementally to see how they should work, or at one time globally?

@luixxiul
Responsive call tiles
7a80f36 
Fixes element-hq/element-web#20254

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
@luixxiul
Take e2e icon into consideration on Bubble message layout
38cd480 
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
@luixxiul
Use spacing variables
8aa2d02 
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
@turt2live turt2live self-requested a review April 4, 2022 08:48
@turt2live
Copy link
Member

(please avoid force pushing after review has been given, as it means we need to re-review the whole thing again)

@luixxiul
Copy link
Contributor Author

luixxiul commented Apr 4, 2022 •
edited
Loading

I haven't been sure of another way of fixing the conflict... Sorry for disturbing!

turt2live
turt2live suggested changes Apr 9, 2022
View reviewed changes
Copy link
Member

@turt2live turt2live left a comment

Choose a reason for hiding this comment

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

This PR still isn't using the spacing variables throughout like we'd expect for new/modified code.

@luixxiul
spacing variables
cb1c2ef 
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
@luixxiul luixxiul requested a review from turt2live April 9, 2022 05:34
luixxiul
luixxiul commented Apr 9, 2022
View reviewed changes
res/css/views/messages/_CallEvent.scss
margin-left: 10px; // To match mx_CallEvent
margin-right: 10px;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is the same value as margin-left: 10px; just above.

turt2live
turt2live approved these changes Apr 14, 2022
View reviewed changes
Copy link
Member

@turt2live turt2live left a comment

Choose a reason for hiding this comment

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

Thanks!

@turt2live turt2live merged commit af3eac2 into matrix-org:develop Apr 14, 2022
@luixxiul luixxiul deleted the CallEvent branch April 14, 2022 21:40
su-ex added a commit to SchildiChat/element-desktop that referenced this pull request Apr 30, 2022
@su-ex
Merge tag 'v1.10.11' into sc
f7b7ded 
* 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
@su-ex
Merge tag 'v1.10.11' into sc
f1edcac 
* 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
@su-ex
Merge tag 'v3.43.0' into sc
bca1c88 
* 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.
Reviewers

@turt2live turt2live turt2live approved these changes

Assignees
No one assigned
Labels
T-Defect Bugs, crashes, hangs, vulnerabilities, or other reported problems
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Localized missed call tile not responsive
2 participants
@luixxiul @turt2live