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

Move status context menu to its own component

Browse source 
This fixes a lot of the state bugs such as buttons not updating, etc. 

This commit also adds the border around the avatar to indicate a status is set.
This commit is contained in:
Travis Ralston 2018-12-12 22:26:39 -07:00
parent 99f5b9e39b
commit b0b7932f5f
5 changed files with 143 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/components/views/avatars/MemberStatusMessageAvatar.js
View file

@ -16,22 +16,18 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler';
import MatrixClientPeg from '../../../MatrixClientPeg';
import AccessibleButton from '../elements/AccessibleButton';
import MemberAvatar from '../avatars/MemberAvatar';
import classNames from 'classnames';
import * as ContextualMenu from "../../structures/ContextualMenu";
import GenericElementContextMenu from "../context_menus/GenericElementContextMenu";
import StatusMessageContextMenu from "../context_menus/StatusMessageContextMenu";
export default class MemberStatusMessageAvatar extends React.Component {
constructor(props, context) {
super(props, context);
this._onRoomStateEvents = this._onRoomStateEvents.bind(this);
this._onClick = this._onClick.bind(this);
this._onClearClick = this._onClearClick.bind(this);
this._onSubmit = this._onSubmit.bind(this);
this._onStatusChange = this._onStatusChange.bind(this);
}
componentWillMount() {
@ -75,64 +71,16 @@ export default class MemberStatusMessageAvatar extends React.Component {
let y = elementRect.top + (elementRect.height / 2) + window.pageYOffset;
y = y - (chevronOffset + 4); // where 4 is 1/4 the height of the chevron
const contextMenu = this._renderContextMenu();
ContextualMenu.createMenu(GenericElementContextMenu, {
ContextualMenu.createMenu(StatusMessageContextMenu, {
chevronOffset: chevronOffset,
chevronFace: 'bottom',
left: x,
top: y,
menuWidth: 190,
element: contextMenu,
user: this.props.member.user,
});
}
async _onClearClick(e) {
await MatrixClientPeg.get().setStatusMessage("");
this.setState({message: ""});
}
_onSubmit(e) {
e.preventDefault();
MatrixClientPeg.get().setStatusMessage(this.state.message);
}
_onStatusChange(e) {
this.setState({message: e.target.value});
}
_renderContextMenu() {
const form = <form className="mx_MemberStatusMessageAvatar_contextMenu_form" onSubmit={this._onSubmit}>
<input type="text" key="message" placeholder={_t("Set a new status...")}
className="mx_MemberStatusMessageAvatar_contextMenu_message"
defaultValue={this.state.message} onChange={this._onStatusChange} maxLength="60"
/>
<AccessibleButton onClick={this._onSubmit} element="div" className="mx_MemberStatusMessageAvatar_contextMenu_submit">
<img src="img/icons-checkmark.svg" width="22" height="22" />
</AccessibleButton>
</form>;
const clearIcon = this.state.message ? "img/cancel-red.svg" : "img/cancel.svg";
const clearButton = <AccessibleButton onClick={this._onClearClick} disabled={!this.state.message}
className="mx_MemberStatusMessageAvatar_contextMenu_clear">
<img src={clearIcon} alt={_t('Clear status')} width="12" height="12"
className="mx_filterFlipColor mx_MemberStatusMessageAvatar_contextMenu_clearIcon"
/>
<span>{_t("Clear status")}</span>
</AccessibleButton>;
const menuClasses = classNames({
"mx_MemberStatusMessageAvatar_contextMenu": true,
"mx_MemberStatusMessageAvatar_contextMenu_hasStatus": this.state.message,
});
return <div className={menuClasses}>
{ form }
<hr />
{ clearButton }
</div>;
}
render() {
const hasStatus = this.props.member.user ? !!this.props.member.user.statusMessage : false;
@ -145,8 +93,7 @@ export default class MemberStatusMessageAvatar extends React.Component {
<MemberAvatar member={this.props.member}
width={this.props.width}
height={this.props.height}
resizeMethod={this.props.resizeMethod}
/>
resizeMethod={this.props.resizeMethod} />
</AccessibleButton>;
}
}