PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Limit formatting bar offset to top of composer (#9365)

Browse source 
* 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
This commit is contained in:
owi92 2022-11-18 14:28:11 +01:00 committed by GitHub
parent 590b845f3f
commit d705c864ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/views/rooms/MessageComposerFormatBar.tsx
View file

@ -66,8 +66,11 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
this.setState({ visible: true }); this.setState({ visible: true });
const parentRect = this.formatBarRef.current.parentElement.getBoundingClientRect(); const parentRect = this.formatBarRef.current.parentElement.getBoundingClientRect();
this.formatBarRef.current.style.left = `${selectionRect.left - parentRect.left}px`; this.formatBarRef.current.style.left = `${selectionRect.left - parentRect.left}px`;
// 16 is half the height of the bar (e.g. to center it) and 18 is an offset that felt ok. const halfBarHeight = this.formatBarRef.current.clientHeight / 2; // used to center the bar
this.formatBarRef.current.style.top = `${selectionRect.top - parentRect.top - 16 - 18}px`; const offset = halfBarHeight + 2; // makes sure the bar won't cover selected text
const offsetLimit = halfBarHeight + offset;
const position = Math.max(selectionRect.top - parentRect.top - offsetLimit, -offsetLimit);
this.formatBarRef.current.style.top = `${position}px`;
} }
public hide(): void { public hide(): void {