From 16197fd69d09e4fe46d43e5c5dce9c94370a1220 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 28 Feb 2022 16:50:29 +0000 Subject: [PATCH 1/6] Remove unused RovingThreadListContextMenu --- .../views/context_menus/ThreadListContextMenu.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/components/views/context_menus/ThreadListContextMenu.tsx b/src/components/views/context_menus/ThreadListContextMenu.tsx index 67d03965326..db9c2de29cc 100644 --- a/src/components/views/context_menus/ThreadListContextMenu.tsx +++ b/src/components/views/context_menus/ThreadListContextMenu.tsx @@ -27,7 +27,6 @@ import { _t } from "../../../languageHandler"; import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from "./IconizedContextMenu"; import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; -import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; interface IProps { @@ -51,17 +50,6 @@ const contextMenuBelow = (elementRect: DOMRect) => { return { left, top, chevronFace }; }; -export const RovingThreadListContextMenu: React.FC = (props) => { - const [onFocus, isActive, ref] = useRovingTabIndex(); - - return ; -}; - const ThreadListContextMenu: React.FC = ({ mxEvent, permalinkCreator, From 83604a2200a6e7bee6f5adcebe467a985745fea4 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 28 Feb 2022 16:52:52 +0000 Subject: [PATCH 2/6] Remove redundant inputRef prop --- src/components/views/context_menus/ThreadListContextMenu.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/views/context_menus/ThreadListContextMenu.tsx b/src/components/views/context_menus/ThreadListContextMenu.tsx index db9c2de29cc..974f052ec6c 100644 --- a/src/components/views/context_menus/ThreadListContextMenu.tsx +++ b/src/components/views/context_menus/ThreadListContextMenu.tsx @@ -38,7 +38,6 @@ interface IProps { interface IExtendedProps extends IProps { // Props for making the button into a roving one tabIndex?: number; - inputRef?: RefObject; onFocus?(): void; } @@ -55,11 +54,9 @@ const ThreadListContextMenu: React.FC = ({ permalinkCreator, onMenuToggle, onFocus, - inputRef, ...props }) => { - const [menuDisplayed, _ref, openMenu, closeThreadOptions] = useContextMenu(); - const button = inputRef ?? _ref; // prefer the ref we receive via props in case we are being controlled + const [menuDisplayed, button, openMenu, closeThreadOptions] = useContextMenu(); const viewInRoom = useCallback((evt: ButtonEvent): void => { evt.preventDefault(); From 0beaa4eaaec1efe9cf31ee728fcda68c3fa6eee9 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 28 Feb 2022 17:07:29 +0000 Subject: [PATCH 3/6] Fix edge cases in ContextMenu edge case positioning --- src/components/structures/ContextMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx index 27e9240b206..6da969f1f61 100644 --- a/src/components/structures/ContextMenu.tsx +++ b/src/components/structures/ContextMenu.tsx @@ -271,7 +271,7 @@ export default class ContextMenu extends React.PureComponent { } else if (position.bottom !== undefined) { position.bottom = Math.min( position.bottom, - windowHeight - contextMenuRect.height - WINDOW_PADDING, + windowHeight - WINDOW_PADDING, // positioning is based on top-right corner so width is irrelevant ); if (chevronOffset.top !== undefined) { chevronOffset.top = props.chevronOffset + position.bottom - props.bottom; @@ -280,7 +280,7 @@ export default class ContextMenu extends React.PureComponent { if (position.left !== undefined) { position.left = Math.min( position.left, - windowWidth - contextMenuRect.width - WINDOW_PADDING, + windowWidth - WINDOW_PADDING, // positioning is based on top-right corner so width is irrelevant ); if (chevronOffset.left !== undefined) { chevronOffset.left = props.chevronOffset + props.left - position.left; From 5f0267f33aed80fdb28b2503bbee3d668ad2ef11 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 28 Feb 2022 17:08:40 +0000 Subject: [PATCH 4/6] Position ThreadListContextMenu from the right instead of left --- .../context_menus/ThreadListContextMenu.tsx | 23 ++++++------------- 1 file changed, 7 insertions(+), 16 deletions(-) diff --git a/src/components/views/context_menus/ThreadListContextMenu.tsx b/src/components/views/context_menus/ThreadListContextMenu.tsx index 974f052ec6c..067d60d2991 100644 --- a/src/components/views/context_menus/ThreadListContextMenu.tsx +++ b/src/components/views/context_menus/ThreadListContextMenu.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { RefObject, useCallback, useEffect } from "react"; +import React, { useCallback, useEffect } from "react"; import { MatrixEvent } from "matrix-js-sdk/src"; import { ButtonEvent } from "../elements/AccessibleButton"; @@ -28,6 +28,7 @@ import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOpti import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; +import UIStore from "../../../stores/UIStore"; interface IProps { mxEvent: MatrixEvent; @@ -35,25 +36,18 @@ interface IProps { onMenuToggle?: (open: boolean) => void; } -interface IExtendedProps extends IProps { - // Props for making the button into a roving one - tabIndex?: number; - onFocus?(): void; -} - const contextMenuBelow = (elementRect: DOMRect) => { // align the context menu's icons with the icon which opened the context menu - const left = elementRect.left + window.pageXOffset + elementRect.width; + const right = UIStore.instance.windowWidth - elementRect.right + window.pageXOffset; const top = elementRect.bottom + window.pageYOffset; const chevronFace = ChevronFace.None; - return { left, top, chevronFace }; + return { right, top, chevronFace }; }; -const ThreadListContextMenu: React.FC = ({ +const ThreadListContextMenu: React.FC = ({ mxEvent, permalinkCreator, onMenuToggle, - onFocus, ...props }) => { const [menuDisplayed, button, openMenu, closeThreadOptions] = useContextMenu(); @@ -80,11 +74,8 @@ const ThreadListContextMenu: React.FC = ({ }, [mxEvent, closeThreadOptions, permalinkCreator]); useEffect(() => { - if (onMenuToggle) { - onMenuToggle(menuDisplayed); - } - onFocus?.(); - }, [menuDisplayed, onMenuToggle, onFocus]); + onMenuToggle?.(menuDisplayed); + }, [menuDisplayed, onMenuToggle]); const isMainSplitTimelineShown = !WidgetLayoutStore.instance.hasMaximisedWidget( MatrixClientPeg.get().getRoom(mxEvent.getRoomId()), From 68d4c78fa06857a5c0d4b96be483023429e0f1e2 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 28 Feb 2022 17:14:47 +0000 Subject: [PATCH 5/6] Fix positioning for rightAligned ctx menu --- src/components/views/context_menus/ThreadListContextMenu.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/views/context_menus/ThreadListContextMenu.tsx b/src/components/views/context_menus/ThreadListContextMenu.tsx index 067d60d2991..c2d560c0f70 100644 --- a/src/components/views/context_menus/ThreadListContextMenu.tsx +++ b/src/components/views/context_menus/ThreadListContextMenu.tsx @@ -28,7 +28,6 @@ import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOpti import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; -import UIStore from "../../../stores/UIStore"; interface IProps { mxEvent: MatrixEvent; @@ -38,10 +37,10 @@ interface IProps { const contextMenuBelow = (elementRect: DOMRect) => { // align the context menu's icons with the icon which opened the context menu - const right = UIStore.instance.windowWidth - elementRect.right + window.pageXOffset; + const left = elementRect.left + window.pageXOffset + elementRect.width; const top = elementRect.bottom + window.pageYOffset; const chevronFace = ChevronFace.None; - return { right, top, chevronFace }; + return { left, top, chevronFace }; }; const ThreadListContextMenu: React.FC = ({ From 9f9b88a87298669a72aeb4f69f614bf885495895 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 28 Feb 2022 17:19:45 +0000 Subject: [PATCH 6/6] Fix ContextMenu edge case positioning tweaks --- src/components/structures/ContextMenu.tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx index 6da969f1f61..22316189940 100644 --- a/src/components/structures/ContextMenu.tsx +++ b/src/components/structures/ContextMenu.tsx @@ -260,10 +260,11 @@ export default class ContextMenu extends React.PureComponent { const { windowWidth, windowHeight } = UIStore.instance; if (contextMenuRect) { if (position.top !== undefined) { - position.top = Math.min( - position.top, - windowHeight - contextMenuRect.height - WINDOW_PADDING, - ); + let maxTop = windowHeight - WINDOW_PADDING; + if (!this.props.bottomAligned) { + maxTop -= contextMenuRect.height; + } + position.top = Math.min(position.top, maxTop); // Adjust the chevron if necessary if (chevronOffset.top !== undefined) { chevronOffset.top = props.chevronOffset + props.top - position.top; @@ -271,17 +272,18 @@ export default class ContextMenu extends React.PureComponent { } else if (position.bottom !== undefined) { position.bottom = Math.min( position.bottom, - windowHeight - WINDOW_PADDING, // positioning is based on top-right corner so width is irrelevant + windowHeight - contextMenuRect.height - WINDOW_PADDING, ); if (chevronOffset.top !== undefined) { chevronOffset.top = props.chevronOffset + position.bottom - props.bottom; } } if (position.left !== undefined) { - position.left = Math.min( - position.left, - windowWidth - WINDOW_PADDING, // positioning is based on top-right corner so width is irrelevant - ); + let maxLeft = windowWidth - WINDOW_PADDING; + if (!this.props.rightAligned) { + maxLeft -= contextMenuRect.width; + } + position.left = Math.min(position.left, maxLeft); if (chevronOffset.left !== undefined) { chevronOffset.left = props.chevronOffset + props.left - position.left; }