imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Migrate all standard Context Menus over to new custom framework

Browse source
This commit is contained in:
Michael Telatynski 2019-11-11 17:53:17 +00:00
parent af396fdf60
commit 1c4d89f2d7
13 changed files with 830 additions and 424 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/components/structures/TopLeftMenuButton.js
View file

@ -17,15 +17,14 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import * as ContextualMenu from './ContextualMenu';
import {TopLeftMenu} from '../views/context_menus/TopLeftMenu';
import AccessibleButton from '../views/elements/AccessibleButton';
import BaseAvatar from '../views/avatars/BaseAvatar';
import MatrixClientPeg from '../../MatrixClientPeg';
import Avatar from '../../Avatar';
import { _t } from '../../languageHandler';
import dis from "../../dispatcher";
import {focusCapturedRef} from "../../utils/Accessibility";
import {ContextMenu} from "./ContextualMenu";
import sdk from "../../index";
const AVATAR_SIZE = 28;
@ -40,11 +39,8 @@ export default class TopLeftMenuButton extends React.Component {
super();
this.state = {
menuDisplayed: false,
menuFunctions: null, // should be { close: fn }
profileInfo: null,
};
this.onToggleMenu = this.onToggleMenu.bind(this);
}
async _getProfileInfo() {
@ -95,7 +91,21 @@ export default class TopLeftMenuButton extends React.Component {
}
}
openMenu = (e) => {
e.preventDefault();
e.stopPropagation();
this.setState({ menuDisplayed: true });
};
closeMenu = () => {
this.setState({
menuDisplayed: false,
});
};
render() {
const cli = MatrixClientPeg.get().getUserId();
const name = this._getDisplayName();
let nameElement;
let chevronElement;
@ -106,10 +116,28 @@ export default class TopLeftMenuButton extends React.Component {
chevronElement = <span className="mx_TopLeftMenuButton_chevron" />;
}
return (
let contextMenu;
if (this.state.menuDisplayed) {
const elementRect = this._buttonRef.getBoundingClientRect();
const x = elementRect.left;
const y = elementRect.top + elementRect.height;
const props = {
chevronFace: "none",
left: x,
top: y,
};
contextMenu = <ContextMenu props={props} onFinished={this.closeMenu}>
<TopLeftMenu displayName={name} userId={cli} onFinished={this.closeMenu} />
</ContextMenu>;
}
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
return <React.Fragment>
<AccessibleButton
className="mx_TopLeftMenuButton"
onClick={this.onToggleMenu}
onClick={this.openMenu}
inputRef={(r) => this._buttonRef = r}
aria-label={_t("Your profile")}
aria-haspopup={true}
@ -126,33 +154,8 @@ export default class TopLeftMenuButton extends React.Component {
{ nameElement }
{ chevronElement }
</AccessibleButton>
);
}
onToggleMenu(e) {
e.preventDefault();
e.stopPropagation();
if (this.state.menuDisplayed && this.state.menuFunctions) {
this.state.menuFunctions.close();
return;
}
const elementRect = e.currentTarget.getBoundingClientRect();
const x = elementRect.left;
const y = elementRect.top + elementRect.height;
const menuFunctions = ContextualMenu.createMenu(TopLeftMenu, {
chevronFace: "none",
left: x,
top: y,
userId: MatrixClientPeg.get().getUserId(),
displayName: this._getDisplayName(),
containerRef: focusCapturedRef, // Focus the TopLeftMenu on first render
onFinished: () => {
this.setState({ menuDisplayed: false, menuFunctions: null });
},
});
this.setState({ menuDisplayed: true, menuFunctions });
{ contextMenu }
</React.Fragment>;
}
}