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

Limit formatting bar offset to top of composer #9365

Merged
merged 4 commits into from
Nov 18, 2022
Merged

Limit formatting bar offset to top of composer #9365

merged 4 commits into from
Nov 18, 2022

Conversation

owi92
Copy link
Contributor

@owi92 owi92 commented Oct 6, 2022 •
edited by github-actions bot
Loading

When highlighting larger sections in the composer where you need to scroll down, the formatting bar would scroll up and cover a previous post. This commit makes sure the bar's offset will be limited to the top of the composer.

It should also make the code slightly more maintainable by getting the bar height from the DOMrect and basing the offset on that height instead of hardcoding it. This way you won't need to make any additional changes in this file in case the height should be changed in the css file in the future.
Any other behaviour related to this should remain the same.

Before:

before.mov

After:

after.mov

To test this, highlight any text in the composer that is larger than ~10 lines either manually from top to bottom or with ctrl + A when a scrollbar is shown.

Resolves: element-hq/element-web#12359

Type: enhancement

Signed-off-by: Ole Wieners olewieners@yahoo.com

Checklist

  • Tests written for new code (and old code if feasible)
  • Linter and other CI checks pass
  • Sign-off given on the changes (see CONTRIBUTING.md)

Here's what your changelog entry will look like:

✨ Features

@owi92
Limit formatting bar offset to top of composer
27376f3 
When highlighting larger sections in the composer, the formatting bar
would scroll up and cover a previous post. This commit makes sure
the bar's offset will be limited to the top of the composer.

It should also make the code slightly more maintainable by getting the bar height
from the DOMrect and basing the offset on that height instead of hardcoding it.

Resolves: matrix-org#12359
@owi92 owi92 requested a review from a team as a code owner October 6, 2022 12:18
@github-actions github-actions bot added the Z-Community-PR Issue is solved by a community member's PR label Oct 6, 2022
@owi92 @justjanne
Update src/components/views/rooms/MessageComposerFormatBar.tsx
c298d00 
Co-authored-by: Janne Mareike Koschinski <janne@kuschku.de>
@weeman1337
Copy link
Contributor

@owi92 did you already solve the comments? If yes can you please mark them as resolved and re-request review? Tanks 🙂

@owi92
Copy link
Contributor Author

owi92 commented Nov 10, 2022

Oh whoops yeah, I totally forgot to re-request a review. Thanks for the reminder!

@owi92 owi92 requested review from justjanne and removed request for kerryarchibald and weeman1337 November 10, 2022 11:07
@justjanne
Copy link
Contributor

(Sorry for the late reply, I was sick with Covid-19)

Could you make sure that tests & CI passes, so we can get this merged?

@github-actions github-actions bot added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Nov 16, 2022
@owi92
Copy link
Contributor Author

owi92 commented Nov 16, 2022 •
edited
Loading

I have merged develop into this and added the enhancement type - I believe this should be mergeable now :)
(don't think I can or rather should do anything about the Typescript Strict Error Checker, but please correct me if I'm wrong)

@justjanne justjanne merged commit d705c86 into matrix-org:develop Nov 18, 2022
amywalkerdev pushed a commit that referenced this pull request Nov 28, 2022
@owi92
Limit formatting bar offset to top of composer (#9365)
30f4760 
* Limit formatting bar offset to top of composer

When highlighting larger sections in the composer, the formatting bar
would scroll up and cover a previous post. This commit makes sure
the bar's offset will be limited to the top of the composer.

It should also make the code slightly more maintainable by getting the bar height
from the DOMrect and basing the offset on that height instead of hardcoding it.

Resolves: #12359
su-ex added a commit to SchildiChat/element-desktop that referenced this pull request Dec 6, 2022
@su-ex
Merge tag 'v1.11.16' into sc
51ae703 
* Update to Electron 21 ([\element-hq#458](element-hq#458)). Fixes element-hq/element-web#23783.
* Further improve replies ([\#6396](matrix-org/matrix-react-sdk#6396)). Fixes element-hq/element-web#19074, element-hq/element-web#18194 element-hq/element-web#18027 and element-hq/element-web#19179.
* Enable users to join group calls from multiple devices ([\#9625](matrix-org/matrix-react-sdk#9625)).
* fix(visual): make cursor a pointer for summaries ([\#9419](matrix-org/matrix-react-sdk#9419)). Contributed by @r00ster91.
* Add placeholder for rich text editor ([\#9613](matrix-org/matrix-react-sdk#9613)).
* Consolidate public room search experience ([\#9605](matrix-org/matrix-react-sdk#9605)). Fixes element-hq/element-web#22846.
* New password reset flow ([\#9581](matrix-org/matrix-react-sdk#9581)). Fixes element-hq/element-web#23131.
* Device manager - add tooltip to device details toggle ([\#9594](matrix-org/matrix-react-sdk#9594)).
* sliding sync: add lazy-loading member support ([\#9530](matrix-org/matrix-react-sdk#9530)).
* Limit formatting bar offset to top of composer ([\#9365](matrix-org/matrix-react-sdk#9365)). Fixes element-hq/element-web#12359. Contributed by @owi92.
* Fix issues around up arrow event edit shortcut ([\#9645](matrix-org/matrix-react-sdk#9645)). Fixes element-hq/element-web#18497 and element-hq/element-web#18964.
* Fix search not being cleared when clicking on a result ([\#9635](matrix-org/matrix-react-sdk#9635)). Fixes element-hq/element-web#23845.
* Fix screensharing in 1:1 calls ([\#9612](matrix-org/matrix-react-sdk#9612)). Fixes element-hq/element-web#23808.
* Fix the background color flashing when joining a call ([\#9640](matrix-org/matrix-react-sdk#9640)).
* Fix the size of the 'Private space' icon ([\#9638](matrix-org/matrix-react-sdk#9638)).
* Fix reply editing in rich text editor (https ([\#9615](matrix-org/matrix-react-sdk#9615)).
* Fix thread list jumping back down while scrolling ([\#9606](matrix-org/matrix-react-sdk#9606)). Fixes element-hq/element-web#23727.
* Fix regression with TimelinePanel props updates not taking effect ([\#9608](matrix-org/matrix-react-sdk#9608)). Fixes element-hq/element-web#23794.
* Fix form tooltip positioning ([\#9598](matrix-org/matrix-react-sdk#9598)). Fixes element-hq/element-web#22861.
* Extract Search handling from RoomView into its own Component ([\#9574](matrix-org/matrix-react-sdk#9574)). Fixes element-hq/element-web#498.
* Fix call splitbrains when switching between rooms ([\#9692](matrix-org/matrix-react-sdk#9692)).
su-ex added a commit to SchildiChat/element-web that referenced this pull request Dec 6, 2022
@su-ex
Merge tag 'v1.11.16' into sc
58d68a5 
* Further improve replies ([\element-hq#6396](matrix-org/matrix-react-sdk#6396)). Fixes element-hq#19074, element-hq#18194 element-hq#18027 and element-hq#19179.
* Enable users to join group calls from multiple devices ([\element-hq#9625](matrix-org/matrix-react-sdk#9625)).
* fix(visual): make cursor a pointer for summaries ([\element-hq#9419](matrix-org/matrix-react-sdk#9419)). Contributed by @r00ster91.
* Add placeholder for rich text editor ([\element-hq#9613](matrix-org/matrix-react-sdk#9613)).
* Consolidate public room search experience ([\element-hq#9605](matrix-org/matrix-react-sdk#9605)). Fixes element-hq#22846.
* New password reset flow ([\element-hq#9581](matrix-org/matrix-react-sdk#9581)). Fixes element-hq#23131.
* Device manager - add tooltip to device details toggle ([\#9594](matrix-org/matrix-react-sdk#9594)).
* sliding sync: add lazy-loading member support ([\element-hq#9530](matrix-org/matrix-react-sdk#9530)).
* Limit formatting bar offset to top of composer ([\element-hq#9365](matrix-org/matrix-react-sdk#9365)). Fixes element-hq#12359. Contributed by @owi92.
* Fix issues around up arrow event edit shortcut ([\element-hq#9645](matrix-org/matrix-react-sdk#9645)). Fixes element-hq#18497 and element-hq#18964.
* Fix search not being cleared when clicking on a result ([\element-hq#9635](matrix-org/matrix-react-sdk#9635)). Fixes element-hq#23845.
* Fix screensharing in 1:1 calls ([\element-hq#9612](matrix-org/matrix-react-sdk#9612)). Fixes element-hq#23808.
* Fix the background color flashing when joining a call ([\element-hq#9640](matrix-org/matrix-react-sdk#9640)).
* Fix the size of the 'Private space' icon ([\element-hq#9638](matrix-org/matrix-react-sdk#9638)).
* Fix reply editing in rich text editor (https ([\element-hq#9615](matrix-org/matrix-react-sdk#9615)).
* Fix thread list jumping back down while scrolling ([\element-hq#9606](matrix-org/matrix-react-sdk#9606)). Fixes element-hq#23727.
* Fix regression with TimelinePanel props updates not taking effect ([\element-hq#9608](matrix-org/matrix-react-sdk#9608)). Fixes element-hq#23794.
* Fix form tooltip positioning ([\element-hq#9598](matrix-org/matrix-react-sdk#9598)). Fixes element-hq#22861.
* Extract Search handling from RoomView into its own Component ([\element-hq#9574](matrix-org/matrix-react-sdk#9574)). Fixes element-hq#498.
* Fix call splitbrains when switching between rooms ([\element-hq#9692](matrix-org/matrix-react-sdk#9692)).
* [Backport staging] Fix replies to emotes not showing as inline ([\element-hq#9708](matrix-org/matrix-react-sdk#9708)).
su-ex added a commit to SchildiChat/matrix-react-sdk that referenced this pull request Dec 6, 2022
@su-ex
Merge tag 'v3.62.0' into sc
f78012d 
* Further improve replies ([\matrix-org#6396](matrix-org#6396)). Fixes element-hq/element-web#19074, element-hq/element-web#18194 element-hq/element-web#18027 and element-hq/element-web#19179.
* Enable users to join group calls from multiple devices ([\matrix-org#9625](matrix-org#9625)).
* fix(visual): make cursor a pointer for summaries ([\matrix-org#9419](matrix-org#9419)). Contributed by @r00ster91.
* Add placeholder for rich text editor ([\matrix-org#9613](matrix-org#9613)).
* Consolidate public room search experience ([\matrix-org#9605](matrix-org#9605)). Fixes element-hq/element-web#22846.
* New password reset flow ([\matrix-org#9581](matrix-org#9581)). Fixes element-hq/element-web#23131.
* Device manager - add tooltip to device details toggle ([\matrix-org#9594](matrix-org#9594)).
* sliding sync: add lazy-loading member support ([\matrix-org#9530](matrix-org#9530)).
* Limit formatting bar offset to top of composer ([\matrix-org#9365](matrix-org#9365)). Fixes element-hq/element-web#12359. Contributed by @owi92.
* Fix issues around up arrow event edit shortcut ([\matrix-org#9645](matrix-org#9645)). Fixes element-hq/element-web#18497 and element-hq/element-web#18964.
* Fix search not being cleared when clicking on a result ([\matrix-org#9635](matrix-org#9635)). Fixes element-hq/element-web#23845.
* Fix screensharing in 1:1 calls ([\matrix-org#9612](matrix-org#9612)). Fixes element-hq/element-web#23808.
* Fix the background color flashing when joining a call ([\matrix-org#9640](matrix-org#9640)).
* Fix the size of the 'Private space' icon ([\matrix-org#9638](matrix-org#9638)).
* Fix reply editing in rich text editor (https ([\matrix-org#9615](matrix-org#9615)).
* Fix thread list jumping back down while scrolling ([\matrix-org#9606](matrix-org#9606)). Fixes element-hq/element-web#23727.
* Fix regression with TimelinePanel props updates not taking effect ([\matrix-org#9608](matrix-org#9608)). Fixes element-hq/element-web#23794.
* Fix form tooltip positioning ([\matrix-org#9598](matrix-org#9598)). Fixes element-hq/element-web#22861.
* Extract Search handling from RoomView into its own Component ([\matrix-org#9574](matrix-org#9574)). Fixes element-hq/element-web#498.
* Fix call splitbrains when switching between rooms ([\matrix-org#9692](matrix-org#9692)).
* Fix replies to emotes not showing as inline ([\matrix-org#9707](matrix-org#9707)). Fixes element-hq/element-web#23903.
netbsd-srcmastr pushed a commit to NetBSD/pkgsrc that referenced this pull request Dec 10, 2022
@Midar
Update chat/element-web to 1.11.16
a0d1b16 
# Changes in [1.11.16](https://github.com/vector-im/element-web/releases/tag/v1.11.16) (2022-12-06)

## ✨ Features

-   Further improve replies ([\#6396](matrix-org/matrix-react-sdk#6396)). Fixes #19074, #18194 #18027 and #19179.
-   Enable users to join group calls from multiple devices ([\#9625](matrix-org/matrix-react-sdk#9625)).
-   fix(visual): make cursor a pointer for summaries ([\#9419](matrix-org/matrix-react-sdk#9419)). Contributed by @r00ster91.
-   Add placeholder for rich text editor ([\#9613](matrix-org/matrix-react-sdk#9613)).
-   Consolidate public room search experience ([\#9605](matrix-org/matrix-react-sdk#9605)). Fixes #22846.
-   New password reset flow ([\#9581](matrix-org/matrix-react-sdk#9581)). Fixes #23131.
-   Device manager - add tooltip to device details toggle ([\#9594](matrix-org/matrix-react-sdk#9594)).
-   sliding sync: add lazy-loading member support ([\#9530](matrix-org/matrix-react-sdk#9530)).
-   Limit formatting bar offset to top of composer ([\#9365](matrix-org/matrix-react-sdk#9365)). Fixes #12359. Contributed by @owi92.

## 🐛 Bug Fixes

-   Fix issues around up arrow event edit shortcut ([\#9645](matrix-org/matrix-react-sdk#9645)). Fixes #18497 and #18964.
-   Fix search not being cleared when clicking on a result ([\#9635](matrix-org/matrix-react-sdk#9635)). Fixes #23845.
-   Fix screensharing in 1:1 calls ([\#9612](matrix-org/matrix-react-sdk#9612)). Fixes #23808.
-   Fix the background color flashing when joining a call ([\#9640](matrix-org/matrix-react-sdk#9640)).
-   Fix the size of the 'Private space' icon ([\#9638](matrix-org/matrix-react-sdk#9638)).
-   Fix reply editing in rich text editor (https ([\#9615](matrix-org/matrix-react-sdk#9615)).
-   Fix thread list jumping back down while scrolling ([\#9606](matrix-org/matrix-react-sdk#9606)). Fixes #23727.
-   Fix regression with TimelinePanel props updates not taking effect ([\#9608](matrix-org/matrix-react-sdk#9608)). Fixes #23794.
-   Fix form tooltip positioning ([\#9598](matrix-org/matrix-react-sdk#9598)). Fixes #22861.
-   Extract Search handling from RoomView into its own Component ([\#9574](matrix-org/matrix-react-sdk#9574)). Fixes #498.
-   Fix call splitbrains when switching between rooms ([\#9692](matrix-org/matrix-react-sdk#9692)).
-   [Backport staging] Fix replies to emotes not showing as inline ([\#9708](matrix-org/matrix-react-sdk#9708)).

# Changes in [1.11.15](https://github.com/vector-im/element-web/releases/tag/v1.11.15) (2022-11-22)

## ✨ Features

-   Make clear notifications work with threads ([\#9575](matrix-org/matrix-react-sdk#9575)). Fixes #23751.
-   Change "None" to "Off" in notification options ([\#9539](matrix-org/matrix-react-sdk#9539)). Contributed by @Arnei.
-   Advanced audio processing settings ([\#8759](matrix-org/matrix-react-sdk#8759)). Fixes #6278. Contributed by @MrAnno.
-   Add way to create a user notice via config.json ([\#9559](matrix-org/matrix-react-sdk#9559)).
-   Improve design of the rich text editor ([\#9533](matrix-org/matrix-react-sdk#9533)). Contributed by @florianduros.
-   Enable user to zoom beyond image size ([\#5949](matrix-org/matrix-react-sdk#5949)). Contributed by @jaiwanth-v.
-   Fix: Move "Leave Space" option to the bottom of space context menu ([\#9535](matrix-org/matrix-react-sdk#9535)). Contributed by @hanadi92.

## 🐛 Bug Fixes

-   Make build scripts work on NixOS ([\#23740](element-hq/element-web#23740)).
-   Fix integration manager `get_open_id_token` action and add E2E tests ([\#9520](matrix-org/matrix-react-sdk#9520)).
-   Fix links being mangled by markdown processing ([\#9570](matrix-org/matrix-react-sdk#9570)). Fixes #23743.
-   Fix: inline links selecting radio button ([\#9543](matrix-org/matrix-react-sdk#9543)). Contributed by @hanadi92.
-   Fix wrong error message in registration when phone number threepid is in use. ([\#9571](matrix-org/matrix-react-sdk#9571)). Contributed by @bagvand.
-   Fix missing avatar for show current profiles ([\#9563](matrix-org/matrix-react-sdk#9563)). Fixes #23733.
-   Fix read receipts trickling down correctly ([\#9567](matrix-org/matrix-react-sdk#9567)). Fixes #23746.
-   Resilience fix for homeserver without thread notification support ([\#9565](matrix-org/matrix-react-sdk#9565)).
-   Don't switch to the home page needlessly after leaving a room ([\#9477](matrix-org/matrix-react-sdk#9477)).
-   Differentiate download and decryption errors when showing images ([\#9562](matrix-org/matrix-react-sdk#9562)). Fixes #3892.
-   Close context menu when a modal is opened to prevent user getting stuck ([\#9560](matrix-org/matrix-react-sdk#9560)). Fixes #15610 and #10781.
-   Fix TimelineReset handling when no room associated ([\#9553](matrix-org/matrix-react-sdk#9553)).
-   Always use current profile on thread events ([\#9524](matrix-org/matrix-react-sdk#9524)). Fixes #23648.
-   Fix `ThreadView` tests not using thread flag ([\#9547](matrix-org/matrix-react-sdk#9547)). Contributed by @MadLittleMods.
-   Handle deletion of `m.call` events ([\#9540](matrix-org/matrix-react-sdk#9540)). Fixes #23663.
-   Fix incorrect notification count after leaving a room with notifications ([\#9518](matrix-org/matrix-react-sdk#9518)). Contributed by @Arnei.

# Changes in [1.11.14](https://github.com/vector-im/element-web/releases/tag/v1.11.14) (2022-11-08)

## ✨ Features

-   Loading threads with server-side assistance ([\#9356](matrix-org/matrix-react-sdk#9356)). Fixes #21807, #21799, #21911, #22141, #22157, #22641, #22501 #22438 and #21678. Contributed by @justjanne.
-   Make thread replies trigger a room list re-ordering ([\#9510](matrix-org/matrix-react-sdk#9510)). Fixes #21700.
-   Device manager - add extra details to device security and renaming ([\#9501](matrix-org/matrix-react-sdk#9501)). Contributed by @kerryarchibald.
-   Add plain text mode to the wysiwyg composer ([\#9503](matrix-org/matrix-react-sdk#9503)). Contributed by @florianduros.
-   Sliding Sync: improve sort order, show subspace rooms, better tombstoned room handling ([\#9484](matrix-org/matrix-react-sdk#9484)).
-   Device manager - add learn more popups to filtered sessions section ([\#9497](matrix-org/matrix-react-sdk#9497)). Contributed by @kerryarchibald.
-   Show thread notification if thread timeline is closed ([\#9495](matrix-org/matrix-react-sdk#9495)). Fixes #23589.
-   Add message editing to wysiwyg composer ([\#9488](matrix-org/matrix-react-sdk#9488)). Contributed by @florianduros.
-   Device manager - confirm sign out of other sessions ([\#9487](matrix-org/matrix-react-sdk#9487)). Contributed by @kerryarchibald.
-   Automatically request logs from other users in a call when submitting logs ([\#9492](matrix-org/matrix-react-sdk#9492)).
-   Add thread notification with server assistance (MSC3773) ([\#9400](matrix-org/matrix-react-sdk#9400)). Fixes #21114, #21413, #21416, #21433, #21481, #21798, #21823 #23192 and #21765.
-   Support for login + E2EE set up with QR ([\#9403](matrix-org/matrix-react-sdk#9403)). Contributed by @hughns.
-   Allow pressing Enter to send messages in new composer ([\#9451](matrix-org/matrix-react-sdk#9451)). Contributed by @andybalaam.

## 🐛 Bug Fixes

-   Fix regressions around media uploads failing and causing soft crashes ([\#9549](matrix-org/matrix-react-sdk#9549)). Fixes matrix-org/element-web-rageshakes#16831, matrix-org/element-web-rageshakes#16824 matrix-org/element-web-rageshakes#16810 and element-hq/element-web#23641.
-   Fix /myroomavatar slash command ([\#9536](matrix-org/matrix-react-sdk#9536)). Fixes matrix-org/synapse#14321.
-   Fix config.json failing to load for Jitsi wrapper in non-root deployment ([\#23577](element-hq/element-web#23577)).
-   Fix NotificationBadge unsent color ([\#9522](matrix-org/matrix-react-sdk#9522)). Fixes #23646.
-   Fix room list sorted by recent on app startup ([\#9515](matrix-org/matrix-react-sdk#9515)). Fixes #23635.
-   Reset custom power selector when blurred on empty ([\#9508](matrix-org/matrix-react-sdk#9508)). Fixes #23481.
-   Reinstate timeline/redaction callbacks when updating notification state ([\#9494](matrix-org/matrix-react-sdk#9494)). Fixes #23554.
-   Only render NotificationBadge when needed ([\#9493](matrix-org/matrix-react-sdk#9493)). Fixes #23584.
-   Fix embedded Element Call screen sharing ([\#9485](matrix-org/matrix-react-sdk#9485)). Fixes #23571.
-   Send Content-Type: application/json header for integration manager /register API ([\#9490](matrix-org/matrix-react-sdk#9490)). Fixes #23580.
-   Fix joining calls without audio or video inputs ([\#9486](matrix-org/matrix-react-sdk#9486)). Fixes #23511.
-   Ensure spaces in the spotlight dialog have rounded square avatars ([\#9480](matrix-org/matrix-react-sdk#9480)). Fixes #23515.
-   Only show mini avatar uploader in room intro when no avatar yet exists ([\#9479](matrix-org/matrix-react-sdk#9479)). Fixes #23552.
-   Fix threads fallback incorrectly targets root event ([\#9229](matrix-org/matrix-react-sdk#9229)). Fixes #23147.
-   Align video call icon with banner text ([\#9460](matrix-org/matrix-react-sdk#9460)).
-   Set relations helper when creating event tile context menu ([\#9253](matrix-org/matrix-react-sdk#9253)). Fixes #22018.
-   Device manager - put client/browser device metadata in correct section ([\#9447](matrix-org/matrix-react-sdk#9447)). Contributed by @kerryarchibald.
-   Update the room unread notification counter when the server changes the value without any related read receipt ([\#9438](matrix-org/matrix-react-sdk#9438)).
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@justjanne justjanne justjanne approved these changes

Assignees
No one assigned
Labels
T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements Z-Community-PR Issue is solved by a community member's PR
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Formatting bar doesn't understand where the top of the composer is
3 participants
@owi92 @weeman1337 @justjanne