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

Align message context menu vertically

Browse source 
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
This commit is contained in:
J. Ryan Stinnett 2019-06-10 16:29:20 +01:00
parent 0355c91797
commit f89a4b688f
1 changed files with 18 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/components/views/messages/MessageActionBar.js
View file

@ -69,10 +69,6 @@ export default class MessageActionBar extends React.PureComponent {
const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu'); const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
const buttonRect = ev.target.getBoundingClientRect(); 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 { getTile, getReplyThread } = this.props;
const tile = getTile && getTile(); const tile = getTile && getTile();
const replyThread = getReplyThread && getReplyThread(); const replyThread = getReplyThread && getReplyThread();
@ -82,12 +78,9 @@ export default class MessageActionBar extends React.PureComponent {
e2eInfoCallback = () => this.onCryptoClicked(); e2eInfoCallback = () => this.onCryptoClicked();
} }
createMenu(MessageContextMenu, { const menuOptions = {
mxEvent: this.props.mxEvent, mxEvent: this.props.mxEvent,
chevronFace: "none", 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, permalinkCreator: this.props.permalinkCreator,
eventTileOps: tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined, eventTileOps: tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined,
collapseReplyThread: replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined, collapseReplyThread: replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined,
@ -95,7 +88,23 @@ export default class MessageActionBar extends React.PureComponent {
onFinished: () => { onFinished: () => {
this.onFocusChange(false); 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); this.onFocusChange(true);
} }