mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-28 12:28:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Position sticker picker correctly

Browse source
This commit is contained in:
Germain Souquet 2021-08-25 17:59:06 +01:00
parent 31b3b2e2ed
commit 9018973f15
2 changed files with 13 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/views/rooms/MessageComposer.tsx
View file

@ -33,7 +33,6 @@ import {
ContextMenuTooltipButton,
useContextMenu,
MenuItem,
alwaysAboveRightOf,
} from "../../structures/ContextMenu";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import ReplyPreview from "./ReplyPreview";
@ -407,15 +406,9 @@ export default class MessageComposer extends React.Component<IProps, IState> {
});
};
private renderButtons(): JSX.Element | JSX.Element[] {
private renderButtons(menuPosition): JSX.Element | JSX.Element[] {
const buttons = [];
let menuPosition;
if (this.ref.current) {
const contentRect = this.ref.current.getBoundingClientRect();
menuPosition = alwaysAboveRightOf(contentRect);
}
if (!this.state.haveRecording) {
buttons.push(
<UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
@ -466,7 +459,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
menuWidth={50}
>
{ buttons.slice(1).map((button, index) => (
<MenuItem className="mx_CallContextMenu_item" key={index} onClick={() => setTimeout(this.toggleButtonMenu, 500)}>
<MenuItem className="mx_CallContextMenu_item" key={index} onClick={this.toggleButtonMenu}>
{ button }
</MenuItem>
)) }
@ -484,6 +477,12 @@ export default class MessageComposer extends React.Component<IProps, IState> {
null,
];
let menuPosition;
if (this.ref.current) {
const contentRect = this.ref.current.getBoundingClientRect();
menuPosition = aboveLeftOf(contentRect);
}
if (!this.state.tombstone && this.state.canSendMessages) {
controls.push(
<SendMessageComposer
@ -547,7 +546,8 @@ export default class MessageComposer extends React.Component<IProps, IState> {
<Stickerpicker
room={this.props.room}
showStickers={this.state.showStickers}
setShowStickers={this.showStickers} />,
setShowStickers={this.showStickers}
menuPosition={menuPosition} />,
);
const showSendButton = !this.state.isComposerEmpty || this.state.haveRecording;
@ -559,7 +559,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
<ReplyPreview permalinkCreator={this.props.permalinkCreator} />
<div className="mx_MessageComposer_row">
{ controls }
{ this.renderButtons() }
{ this.renderButtons(menuPosition) }
{ showSendButton && (
<SendButton
key="controls_send"

2
src/components/views/rooms/Stickerpicker.tsx
View file

@ -43,6 +43,7 @@ const PERSISTED_ELEMENT_KEY = "stickerPicker";
interface IProps {
room: Room;
showStickers: boolean;
menuPosition?: any;
setShowStickers: (showStickers: boolean) => void;
}
@ -407,6 +408,7 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
menuPaddingLeft={0}
menuPaddingRight={0}
zIndex={STICKERPICKER_Z_INDEX}
{...this.props.menuPosition}
>
<GenericElementContextMenu element={this.getStickerpickerContent()} onResize={this.onFinished} />
</ContextMenu>;