Replace the avatar next to the composer with a status entry menu

The checkmark might change, and there appears to be some state tracking mishaps that need to be worked out.

Part of https://github.com/vector-im/riot-web/issues/1528

res/css/_components.scss

@@ -24,6 +24,7 @@
 @import "./structures/_ViewSource.scss";
 @import "./structures/login/_Login.scss";
 @import "./views/avatars/_BaseAvatar.scss";
+@import "./views/avatars/_MemberStatusMessageAvatar.scss";
 @import "./views/context_menus/_MessageContextMenu.scss";
 @import "./views/context_menus/_RoomTileContextMenu.scss";
 @import "./views/context_menus/_TagTileContextMenu.scss";

res/css/views/avatars/_MemberStatusMessageAvatar.scss

@@ -0,0 +1,54 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_MemberStatusMessageAvatar {
+}
+
+.mx_MemberStatusMessageAvatar_contextMenu_message {
+    display: inline-block;
+    border-radius: 3px 0 0 3px;
+    border: 1px solid $input-border-color;
+    font-size: 13px;
+    padding: 7px 7px 7px 9px;
+    width: 135px;
+    background-color: $primary-bg-color !important;
+}
+
+.mx_MemberStatusMessageAvatar_contextMenu_submit {
+    display: inline-block;
+}
+
+.mx_MemberStatusMessageAvatar_contextMenu_submit img {
+    vertical-align: middle;
+    margin-left: 8px;
+}
+
+.mx_MemberStatusMessageAvatar_contextMenu hr {
+    border: 0.5px solid $menu-border-color;
+}
+
+.mx_MemberStatusMessageAvatar_contextMenu_clearIcon {
+    margin: 5px 15px 5px 5px;
+    vertical-align: middle;
+}
+
+.mx_MemberStatusMessageAvatar_contextMenu_clear {
+    padding: 2px;
+}
+
+.mx_MemberStatusMessageAvatar_contextMenu_hasStatus .mx_MemberStatusMessageAvatar_contextMenu_clear {
+    color: $warning-color;
+}

res/img/icons-checkmark.svg

@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="-11 13 24 24"
+   xml:space="preserve"
+   sodipodi:docname="icons-checkmark.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
+   id="metadata3753"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs3751">
+			
+		</defs><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1278"
+   inkscape:window-height="1368"
+   id="namedview3749"
+   showgrid="false"
+   inkscape:zoom="25.166667"
+   inkscape:cx="11.698485"
+   inkscape:cy="12.769194"
+   inkscape:window-x="1359"
+   inkscape:window-y="0"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="_x30_3_x5F_4-Uploading" />
+<style
+   type="text/css"
+   id="style3734">
+	.st1{fill:none;stroke-width:2;stroke-linecap:round;}
+</style>
+<title
+   id="title3736">icons_create_room</title>
+<desc
+   id="desc3738">Created with sketchtool.</desc>
+<g
+   id="_x30_3-Input"
+   sketch:type="MSPage">
+	<g
+   id="_x30_3_x5F_4-Uploading"
+   transform="translate(-20.000000, -726.000000)"
+   sketch:type="MSArtboardGroup">
+		<g
+   sketch:type="MSShapeGroup"
+   transform="translate(0,708)"
+   id="Room-list_x2F_Footer">
+				<g
+   transform="translate(20,18)"
+   id="icons_create_room">
+					<circle
+   style="fill:#76cfa6"
+   r="12"
+   cy="25"
+   cx="1"
+   id="Oval-1-Copy-7" />
+					
+					<g
+   id="g3762"><path
+     sodipodi:nodetypes="cc"
+     id="Line"
+     class="st1"
+     d="m -0.75165563,28.062914 7.10000003,-7.1"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round" /><path
+     id="Line_1_"
+     class="st1"
+     d="m -3.0960264,25.175497 2.34437077,2.887417"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round"
+     sodipodi:nodetypes="cc" /></g>
+				</g>
+			</g>
+	</g>
+</g>
+</svg>

src/components/views/avatars/MemberStatusMessageAvatar.js

@@ -0,0 +1,165 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+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";
+
+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() {
+        if (this.props.member.userId !== MatrixClientPeg.get().getUserId()) {
+            throw new Error("Cannot use MemberStatusMessageAvatar on anyone but the logged in user");
+        }
+    }
+
+    componentDidMount() {
+        MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
+
+        if (this.props.member.user) {
+            this.setState({message: this.props.member.user.statusMessage});
+        } else {
+            this.setState({message: ""});
+        }
+    }
+
+    componentWillUnmount() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
+        }
+    }
+
+    _onRoomStateEvents(ev, state) {
+        if (ev.getStateKey() !== MatrixClientPeg.get().getUserId()) return;
+        if (ev.getType() !== "im.vector.user_status") return;
+        // TODO: We should be relying on `this.props.member.user.statusMessage`
+        this.setState({message: ev.getContent()["status"]});
+        this.forceUpdate();
+    }
+
+    _onClick(e) {
+        e.stopPropagation();
+
+        const elementRect = e.target.getBoundingClientRect();
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const x = (elementRect.left + window.pageXOffset) - (elementRect.width / 2) + 3;
+        const chevronOffset = 12;
+        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, {
+            chevronOffset: chevronOffset,
+            chevronFace: 'bottom',
+            left: x,
+            top: y,
+            menuWidth: 190,
+            element: contextMenu,
+        });
+    }
+
+    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;
+
+        const classes = classNames({
+            "mx_MemberStatusMessageAvatar": true,
+            "mx_MemberStatusMessageAvatar_hasStatus": hasStatus,
+        });
+
+        return <AccessibleButton onClick={this._onClick} className={classes} element="div">
+            <MemberAvatar member={this.props.member}
+                          width={this.props.width}
+                          height={this.props.height}
+                          resizeMethod={this.props.resizeMethod}
+            />
+        </AccessibleButton>;
+    }
+}
+
+MemberStatusMessageAvatar.propTypes = {
+    member: PropTypes.object.isRequired,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    resizeMethod: PropTypes.string,
+};
+
+MemberStatusMessageAvatar.defaultProps = {
+    width: 40,
+    height: 40,
+    resizeMethod: 'crop',
+};

src/components/views/rooms/MessageComposer.js

@@ -291,7 +291,7 @@ export default class MessageComposer extends React.Component {
 
     render() {
         const uploadInputStyle = {display: 'none'};
-        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+        const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
 
@@ -300,7 +300,7 @@ export default class MessageComposer extends React.Component {
         if (this.state.me) {
             controls.push(
                 <div key="controls_avatar" className="mx_MessageComposer_avatar">
-                    <MemberAvatar member={this.state.me} width={24} height={24} />
+                    <MemberStatusMessageAvatar member={this.state.me} width={24} height={24} />
                 </div>,
             );
         }

src/i18n/strings/en_EN.json

@@ -1054,6 +1054,8 @@
     "Low Priority": "Low Priority",
     "Direct Chat": "Direct Chat",
     "View Community": "View Community",
+    "Clear status": "Clear status",
+    "Set a new status...": "Set a new status...",
     "Sorry, your browser is <b>not</b> able to run Riot.": "Sorry, your browser is <b>not</b> able to run Riot.",
     "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.": "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.",
     "Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.": "Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.",