From 3126880345c412737525accc728f46f3d85f215d Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 10 Jun 2019 16:07:23 +0100 Subject: [PATCH 1/3] Extend context menu alignment without chevrons For context menus without chevrons, this changes the menu components to still set default styles that align the menu based on the edges used to specify the menu's position. This is not intended to change the positioning of any existing menus. --- res/css/structures/_ContextualMenu.scss | 24 +++++++++++++++++---- src/components/structures/ContextualMenu.js | 13 ++++++----- 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss index fc1538a13d..b6644c1752 100644 --- a/res/css/structures/_ContextualMenu.scss +++ b/res/css/structures/_ContextualMenu.scss @@ -39,7 +39,11 @@ limitations under the License. z-index: 5001; } -.mx_ContextualMenu.mx_ContextualMenu_right { +.mx_ContextualMenu_right { + right: 0; +} + +.mx_ContextualMenu.mx_ContextualMenu_withChevron_right { right: 8px; } @@ -66,7 +70,11 @@ limitations under the License. right: 1px; } -.mx_ContextualMenu.mx_ContextualMenu_left { +.mx_ContextualMenu_left { + left: 0; +} + +.mx_ContextualMenu.mx_ContextualMenu_withChevron_left { left: 8px; } @@ -93,7 +101,11 @@ limitations under the License. left: 1px; } -.mx_ContextualMenu.mx_ContextualMenu_top { +.mx_ContextualMenu_top { + top: 0; +} + +.mx_ContextualMenu.mx_ContextualMenu_withChevron_top { top: 8px; } @@ -120,7 +132,11 @@ limitations under the License. top: 1px; } -.mx_ContextualMenu.mx_ContextualMenu_bottom { +.mx_ContextualMenu_bottom { + bottom: 0; +} + +.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom { bottom: 8px; } diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js index 345eae2b18..edd6f79270 100644 --- a/src/components/structures/ContextualMenu.js +++ b/src/components/structures/ContextualMenu.js @@ -183,11 +183,14 @@ export default class ContextualMenu extends React.Component { const menuClasses = classNames({ 'mx_ContextualMenu': true, - 'mx_ContextualMenu_noChevron': chevronFace === 'none', - 'mx_ContextualMenu_left': chevronFace === 'left', - 'mx_ContextualMenu_right': chevronFace === 'right', - 'mx_ContextualMenu_top': chevronFace === 'top', - 'mx_ContextualMenu_bottom': chevronFace === 'bottom', + 'mx_ContextualMenu_left': !hasChevron && position.left, + 'mx_ContextualMenu_right': !hasChevron && position.right, + 'mx_ContextualMenu_top': !hasChevron && position.top, + 'mx_ContextualMenu_bottom': !hasChevron && position.bottom, + 'mx_ContextualMenu_withChevron_left': chevronFace === 'left', + 'mx_ContextualMenu_withChevron_right': chevronFace === 'right', + 'mx_ContextualMenu_withChevron_top': chevronFace === 'top', + 'mx_ContextualMenu_withChevron_bottom': chevronFace === 'bottom', }); const menuStyle = {}; From 0355c9179771b211af7146aa72ecb4f7f79477d8 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 10 Jun 2019 16:12:23 +0100 Subject: [PATCH 2/3] Align message context menu to right This changes the message context menu to align the right edge of the menu with the right edge of the button that opens it, which should keep all menu options inside the viewport, even if they are very wide. Part of https://github.com/vector-im/riot-web/issues/9624 --- src/components/views/messages/MessageActionBar.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js index 84474710cd..dc579afd4b 100644 --- a/src/components/views/messages/MessageActionBar.js +++ b/src/components/views/messages/MessageActionBar.js @@ -71,7 +71,7 @@ export default class MessageActionBar extends React.PureComponent { // The window X and Y offsets are to adjust position when zoomed in to page const x = buttonRect.right + window.pageXOffset; - const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19; + const y = buttonRect.bottom + window.pageYOffset; const { getTile, getReplyThread } = this.props; const tile = getTile && getTile(); @@ -83,9 +83,10 @@ export default class MessageActionBar extends React.PureComponent { } createMenu(MessageContextMenu, { - chevronOffset: 10, mxEvent: this.props.mxEvent, - left: x, + chevronFace: "none", + // Align the right edge of the menu to the right edge of the button + right: window.innerWidth - x, top: y, permalinkCreator: this.props.permalinkCreator, eventTileOps: tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined, From f89a4b688fbb4f2412973114b932ec5fd3f669ec Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 10 Jun 2019 16:29:20 +0100 Subject: [PATCH 3/3] Align message context menu vertically This aligns the message context menu on either the top or the bottom of the button that triggers, depending on which side has more space available to fit the menu. Fixes https://github.com/vector-im/riot-web/issues/9624 --- .../views/messages/MessageActionBar.js | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js index dc579afd4b..fc146d282d 100644 --- a/src/components/views/messages/MessageActionBar.js +++ b/src/components/views/messages/MessageActionBar.js @@ -69,10 +69,6 @@ export default class MessageActionBar extends React.PureComponent { const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu'); const buttonRect = ev.target.getBoundingClientRect(); - // The window X and Y offsets are to adjust position when zoomed in to page - const x = buttonRect.right + window.pageXOffset; - const y = buttonRect.bottom + window.pageYOffset; - const { getTile, getReplyThread } = this.props; const tile = getTile && getTile(); const replyThread = getReplyThread && getReplyThread(); @@ -82,12 +78,9 @@ export default class MessageActionBar extends React.PureComponent { e2eInfoCallback = () => this.onCryptoClicked(); } - createMenu(MessageContextMenu, { + const menuOptions = { mxEvent: this.props.mxEvent, chevronFace: "none", - // Align the right edge of the menu to the right edge of the button - right: window.innerWidth - x, - top: y, permalinkCreator: this.props.permalinkCreator, eventTileOps: tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined, collapseReplyThread: replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined, @@ -95,7 +88,23 @@ export default class MessageActionBar extends React.PureComponent { onFinished: () => { this.onFocusChange(false); }, - }); + }; + + // The window X and Y offsets are to adjust position when zoomed in to page + const buttonRight = buttonRect.right + window.pageXOffset; + const buttonBottom = buttonRect.bottom + window.pageYOffset; + const buttonTop = buttonRect.top + window.pageYOffset; + // Align the right edge of the menu to the right edge of the button + menuOptions.right = window.innerWidth - buttonRight; + // Align the menu vertically on whichever side of the button has more + // space available. + if (buttonBottom < window.innerHeight / 2) { + menuOptions.top = buttonBottom; + } else { + menuOptions.bottom = window.innerHeight - buttonTop; + } + + createMenu(MessageContextMenu, menuOptions); this.onFocusChange(true); }