diff --git a/res/css/views/messages/_MessageActionBar.pcss b/res/css/views/messages/_MessageActionBar.pcss index e2a19be265..d858533aa0 100644 --- a/res/css/views/messages/_MessageActionBar.pcss +++ b/res/css/views/messages/_MessageActionBar.pcss @@ -136,10 +136,10 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageActionBar_deleteButton { - color: var(--cpd-color-red-800); + color: var(--cpd-color-red-600); &:hover { - color: var(--cpd-color-red-600); + color: var(--cpd-color-red-800); } } } \ No newline at end of file diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index d62065c067..f534758f7b 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.tsx @@ -425,14 +425,6 @@ export default class MessageActionBar extends React.PureComponent { - this.props.setupShiftKeyListener?.(); - }; - - private onMouseLeave = (): void => { - this.props.removeShiftKeyListener?.(); - }; - public render(): React.ReactNode { const isRedacted = this.props.mxEvent.isRedacted(); @@ -637,8 +629,6 @@ export default class MessageActionBar extends React.PureComponent {toolbarOpts} diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index c45ce36490..1fa2dab9a8 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -34,6 +34,7 @@ import { type UserVerificationStatus, } from "matrix-js-sdk/src/crypto-api"; import { Tooltip } from "@vector-im/compound-web"; +import { throttle } from "lodash"; import ReplyChain from "../elements/ReplyChain"; import { _t } from "../../../languageHandler"; @@ -406,6 +407,10 @@ export class UnwrappedEventTile extends React.Component } } + // Add shift key listener + document.addEventListener("keydown", this.checkShiftKey); + document.addEventListener("keyup", this.checkShiftKey); + this.props.mxEvent.on(ThreadEvent.Update, this.updateThread); client.decryptEventIfNeeded(this.props.mxEvent); @@ -416,18 +421,6 @@ export class UnwrappedEventTile extends React.Component this.verifyEvent(); } - private updateThread = (thread: Thread): void => { - this.setState({ thread }); - }; - - public shouldComponentUpdate(nextProps: EventTileProps, nextState: IState): boolean { - if (objectHasDiff(this.state, nextState)) { - return true; - } - - return !this.propsEqual(this.props, nextProps); - } - public componentWillUnmount(): void { const client = MatrixClientPeg.get(); if (client) { @@ -445,7 +438,10 @@ export class UnwrappedEventTile extends React.Component this.props.mxEvent.off(ThreadEvent.Update, this.updateThread); this.unmounted = false; if (this.props.resizeObserver && this.ref.current) this.props.resizeObserver.unobserve(this.ref.current); - this.removeShiftKeyListener(); + + // Remove shift key listener + document.removeEventListener("keydown", this.checkShiftKey); + document.removeEventListener("keyup", this.checkShiftKey); } public componentDidUpdate(prevProps: Readonly, prevState: Readonly): void { @@ -462,6 +458,10 @@ export class UnwrappedEventTile extends React.Component if (this.props.resizeObserver && this.ref.current) this.props.resizeObserver.observe(this.ref.current); } + private updateThread = (thread: Thread): void => { + this.setState({ thread }); + }; + private onNewThread = (thread: Thread): void => { if (thread.id === this.props.mxEvent.getId()) { this.updateThread(thread); @@ -803,32 +803,16 @@ export class UnwrappedEventTile extends React.Component this.setState({ actionBarFocused }); }; - private checkShiftKey = (): void => { - if (window.event instanceof MouseEvent) { - this.setState({ isShiftHeld: (window.event as unknown as MouseEvent).shiftKey }); - } - }; - - private setupShiftKeyListener = (): void => { - document.addEventListener("keydown", this.checkShiftKey); - document.addEventListener("keyup", this.checkShiftKey); - this.checkShiftKey(); - }; - - private removeShiftKeyListener = (): void => { - document.removeEventListener("keydown", this.checkShiftKey); - document.removeEventListener("keyup", this.checkShiftKey); - this.setState({ isShiftHeld: false }); - }; + private checkShiftKey = throttle((ev: KeyboardEvent): void => { + this.setState({ isShiftHeld: ev.shiftKey }); + }, 200); // Update at most every 200ms private onMouseEnter = (): void => { this.setState({ hover: true }); - this.setupShiftKeyListener(); }; private onMouseLeave = (): void => { this.setState({ hover: false }); - this.removeShiftKeyListener(); }; private getTile: () => IEventTileType | null = () => this.tile.current;