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

DRY context menu placement algorithms

Browse source
This commit is contained in:
Michael Telatynski 2019-11-12 11:24:14 +00:00
parent 1c4d89f2d7
commit 2eddb6ca01
5 changed files with 36 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/structures/ContextualMenu.js
View file

@ -559,6 +559,14 @@ MenuItemRadio.propTypes = {
onClick: PropTypes.func.isRequired,
};
// Placement method for <ContextMenu /> to position context menu to right of elementRect with chevronOffset
export const toRightOf = (elementRect, chevronOffset=12) => {
const left = elementRect.right + window.pageXOffset + 3;
let top = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
top = top - (chevronOffset + 8); // where 8 is half the height of the chevron
return {left, top};
};
export function createMenu(ElementClass, props, hasBackground=true) {
const closeMenu = function(...args) {
ReactDOM.unmountComponentAtNode(getOrCreateContainer());

11
src/components/views/elements/TagTile.js
View file

@ -29,7 +29,7 @@ import * as FormattingUtils from '../../../utils/FormattingUtils';
import FlairStore from '../../../stores/FlairStore';
import GroupStore from '../../../stores/GroupStore';
import TagOrderStore from '../../../stores/TagOrderStore';
import {ContextMenu} from "../../structures/ContextualMenu";
import {ContextMenu, toRightOf} from "../../structures/ContextualMenu";
// A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
// a thing to click on for the user to filter the visible rooms in the RoomList to:
@ -176,16 +176,9 @@ export default createReactClass({
let contextMenu;
if (this.state.menuDisplayed) {
const elementRect = this._contextMenuButton.current.getBoundingClientRect();
// The window X and Y offsets are to adjust position when zoomed in to page
const left = elementRect.right + window.pageXOffset + 3;
const chevronOffset = 12;
let top = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
top = top - (chevronOffset + 8); // where 8 is half the height of the chevron
const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
contextMenu = (
<ContextMenu props={{ left, top, chevronOffset }} onFinished={this.closeMenu}>
<ContextMenu props={toRightOf(elementRect)} onFinished={this.closeMenu}>
<TagTileContextMenu tag={this.props.tag} onFinished={this.closeMenu} />
</ContextMenu>
);

10
src/components/views/groups/GroupInviteTile.js
View file

@ -24,7 +24,7 @@ import sdk from '../../../index';
import dis from '../../../dispatcher';
import classNames from 'classnames';
import MatrixClientPeg from "../../../MatrixClientPeg";
import {ContextMenu} from "../../structures/ContextualMenu";
import {ContextMenu, toRightOf} from "../../structures/ContextualMenu";
export default createReactClass({
displayName: 'GroupInviteTile',
@ -144,15 +144,9 @@ export default createReactClass({
let contextMenu;
if (this.state.menuDisplayed) {
const elementRect = this._contextMenuButton.current.getBoundingClientRect();
// The window X and Y offsets are to adjust position when zoomed in to page
const left = elementRect.right + window.pageXOffset + 3;
const chevronOffset = 12;
let top = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
top = top - (chevronOffset + 8); // where 8 is half the height of the chevron
const GroupInviteTileContextMenu = sdk.getComponent('context_menus.GroupInviteTileContextMenu');
contextMenu = (
<ContextMenu props={{ left, top, chevronOffset }} onFinished={this.closeMenu}>
<ContextMenu props={toRightOf(elementRect)} onFinished={this.closeMenu}>
<GroupInviteTileContextMenu group={this.props.group} onFinished={this.closeMenu} />
</ContextMenu>
);

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

@ -27,6 +27,26 @@ import {ContextMenu} from '../../structures/ContextualMenu';
import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
import {RoomContext} from "../../structures/RoomView";
const contextMenuProps = (elementRect) => {
const menuOptions = {
chevronFace: "none",
};
const buttonRight = elementRect.right + window.pageXOffset;
const buttonBottom = elementRect.bottom + window.pageYOffset;
const buttonTop = elementRect.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;
}
return menuOptions;
};
const useContextMenu = () => {
const _button = useRef(null);
const [isOpen, setIsOpen] = useState(false);
@ -65,26 +85,8 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo
e2eInfoCallback = onCryptoClick;
}
const menuOptions = {
chevronFace: "none",
};
const buttonRect = _button.current.getBoundingClientRect();
// 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;
}
contextMenu = <ContextMenu props={menuOptions} onFinished={closeMenu}>
contextMenu = <ContextMenu props={contextMenuProps(buttonRect)} onFinished={closeMenu}>
<MessageContextMenu
mxEvent={mxEvent}
permalinkCreator={permalinkCreator}
@ -116,27 +118,9 @@ const ReactButton = ({mxEvent, reactions}) => {
let contextMenu;
if (menuDisplayed) {
const menuOptions = {
chevronFace: "none",
};
const buttonRect = _button.current.getBoundingClientRect();
// 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;
}
const ReactionPicker = sdk.getComponent('emojipicker.ReactionPicker');
contextMenu = <ContextMenu props={menuOptions} onFinished={closeMenu}>
contextMenu = <ContextMenu props={contextMenuProps(buttonRect)} onFinished={closeMenu}>
<ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeMenu} />
</ContextMenu>;
}

10
src/components/views/rooms/RoomTile.js
View file

@ -25,7 +25,7 @@ import dis from '../../../dispatcher';
import MatrixClientPeg from '../../../MatrixClientPeg';
import DMRoomMap from '../../../utils/DMRoomMap';
import sdk from '../../../index';
import {ContextMenu} from '../../structures/ContextualMenu';
import {ContextMenu, toRightOf} from '../../structures/ContextualMenu';
import * as RoomNotifs from '../../../RoomNotifs';
import * as FormattingUtils from '../../../utils/FormattingUtils';
import ActiveRoomObserver from '../../../ActiveRoomObserver';
@ -379,15 +379,9 @@ module.exports = createReactClass({
let contextMenu;
if (this.state.menuDisplayed) {
const elementRect = this._contextMenuButton.current.getBoundingClientRect();
// The window X and Y offsets are to adjust position when zoomed in to page
const left = elementRect.right + window.pageXOffset + 3;
const chevronOffset = 12;
let top = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
top = top - (chevronOffset + 8); // where 8 is half the height of the chevron
const RoomTileContextMenu = sdk.getComponent('context_menus.RoomTileContextMenu');
contextMenu = (
<ContextMenu props={{ left, top, chevronOffset }} onFinished={this.closeMenu}>
<ContextMenu props={toRightOf(elementRect)} onFinished={this.closeMenu}>
<RoomTileContextMenu room={this.props.room} onFinished={this.closeMenu} />
</ContextMenu>
);