From 411271422c9f33e802a167074908037ca02a96e9 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Thu, 25 Jun 2020 19:54:17 -0600
Subject: [PATCH] Make the whole UserMenu a button to open the menu

---
 res/css/structures/_LeftPanel2.scss    |  10 -
 res/css/structures/_UserMenu.scss      |  76 ++++---
 src/components/structures/UserMenu.tsx | 293 +++++++++++++------------
 3 files changed, 193 insertions(+), 186 deletions(-)

diff --git a/res/css/structures/_LeftPanel2.scss b/res/css/structures/_LeftPanel2.scss
index 837a1d1f0d..98f23a058b 100644
--- a/res/css/structures/_LeftPanel2.scss
+++ b/res/css/structures/_LeftPanel2.scss
@@ -132,16 +132,6 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
         .mx_LeftPanel2_roomListContainer {
             width: 68px;
 
-            .mx_LeftPanel2_userHeader {
-                .mx_LeftPanel2_headerRow {
-                    justify-content: center;
-                }
-
-                .mx_LeftPanel2_userAvatarContainer {
-                    margin-right: 0;
-                }
-            }
-
             .mx_LeftPanel2_filterContainer {
                 // Organize the flexbox into a centered column layout
                 flex-direction: column;
diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss
index a15eeb6c81..bbb1e1cc7b 100644
--- a/res/css/structures/_UserMenu.scss
+++ b/res/css/structures/_UserMenu.scss
@@ -15,39 +15,7 @@ limitations under the License.
 */
 
 .mx_UserMenu {
-    // Create a row-based flexbox to ensure items stay aligned correctly.
-    display: flex;
-    align-items: center;
-
-    .mx_UserMenu_userAvatarContainer {
-        position: relative; // to make default avatars work
-        margin-right: 8px;
-        height: 32px; // to remove the unknown 4px gap the browser puts below it
-
-        .mx_UserMenu_userAvatar {
-            border-radius: 32px; // should match avatar size
-        }
-    }
-
-    .mx_UserMenu_userName {
-        font-weight: 600;
-        font-size: $font-15px;
-        line-height: $font-20px;
-        flex: 1;
-
-        // Ellipsize any text overflow
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-    }
-
     .mx_UserMenu_headerButtons {
-        // No special styles: the rest of the layout happens to make it work.
-    }
-}
-
-.mx_UserMenuButton {
-    > span {
         width: 16px;
         height: 16px;
         position: relative;
@@ -67,6 +35,50 @@ limitations under the License.
             mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
         }
     }
+
+    .mx_UserMenu_row {
+        // Create a row-based flexbox to ensure items stay aligned correctly.
+        display: flex;
+        align-items: center;
+
+        .mx_UserMenu_userAvatarContainer {
+            position: relative; // to make default avatars work
+            margin-right: 8px;
+            height: 32px; // to remove the unknown 4px gap the browser puts below it
+
+            .mx_UserMenu_userAvatar {
+                border-radius: 32px; // should match avatar size
+            }
+        }
+
+        .mx_UserMenu_userName {
+            font-weight: 600;
+            font-size: $font-15px;
+            line-height: $font-20px;
+            flex: 1;
+
+            // Ellipsize any text overflow
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        .mx_UserMenu_headerButtons {
+            // No special styles: the rest of the layout happens to make it work.
+        }
+    }
+
+    &.mx_UserMenu_minimized {
+        .mx_UserMenu_userHeader {
+            .mx_UserMenu_row {
+                justify-content: center;
+            }
+
+            .mx_UserMenu_userAvatarContainer {
+                margin-right: 0;
+            }
+        }
+    }
 }
 
 .mx_UserMenu_contextMenu {
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index 89593aa702..6e3670447e 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -36,6 +36,7 @@ import {getHomePageUrl} from "../../utils/pages";
 import { OwnProfileStore } from "../../stores/OwnProfileStore";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import BaseAvatar from '../views/avatars/BaseAvatar';
+import classNames from "classnames";
 
 interface IProps {
     isMinimized: boolean;
@@ -108,7 +109,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
         this.setState({menuDisplayed: true});
     };
 
-    private onCloseMenu = () => {
+    private onCloseMenu = (ev: InputEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
         this.setState({menuDisplayed: false});
     };
 
@@ -160,147 +163,132 @@ export default class UserMenu extends React.Component<IProps, IState> {
         defaultDispatcher.dispatch({action: 'view_home_page'});
     };
 
-    private renderMenuButton(): React.ReactNode {
-        let contextMenu;
-        if (this.state.menuDisplayed) {
-            let hostingLink;
-            const signupLink = getHostingLink("user-context-menu");
-            if (signupLink) {
-                hostingLink = (
-                    <div className="mx_UserMenu_contextMenu_header">
-                        {_t(
-                            "<a>Upgrade</a> to your own domain", {},
-                            {
-                                a: sub => (
-                                    <a
-                                        href={signupLink}
-                                        target="_blank"
-                                        rel="noreferrer noopener"
-                                        tabIndex={-1}
-                                    >{sub}</a>
-                                ),
-                            },
-                        )}
-                    </div>
-                );
-            }
+    private renderContextMenu = (): React.ReactNode => {
+        if (!this.state.menuDisplayed) return null;
 
-            let homeButton = null;
-            if (this.hasHomePage) {
-                homeButton = (
-                    <li>
-                        <AccessibleButton onClick={this.onHomeClick}>
-                            <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconHome" />
-                            <span>{_t("Home")}</span>
-                        </AccessibleButton>
-                    </li>
-                );
-            }
-
-            const elementRect = this.buttonRef.current.getBoundingClientRect();
-            contextMenu = (
-                <ContextMenu
-                    chevronFace="none"
-                    left={elementRect.left}
-                    top={elementRect.top + elementRect.height}
-                    onFinished={this.onCloseMenu}
-                >
-                    <div className="mx_IconizedContextMenu mx_UserMenu_contextMenu">
-                        <div className="mx_UserMenu_contextMenu_header">
-                            <div className="mx_UserMenu_contextMenu_name">
-                                <span className="mx_UserMenu_contextMenu_displayName">
-                                    {OwnProfileStore.instance.displayName}
-                                </span>
-                                <span className="mx_UserMenu_contextMenu_userId">
-                                    {MatrixClientPeg.get().getUserId()}
-                                </span>
-                            </div>
-                            <div
-                                className="mx_UserMenu_contextMenu_themeButton"
-                                onClick={this.onSwitchThemeClick}
-                                title={this.state.isDarkTheme ? _t("Switch to light mode") : _t("Switch to dark mode")}
-                            >
-                                <img
-                                    src={require("../../../res/img/feather-customised/sun.svg")}
-                                    alt={_t("Switch theme")}
-                                    width={16}
-                                />
-                            </div>
-                        </div>
-                        {hostingLink}
-                        <div className="mx_IconizedContextMenu_optionList mx_IconizedContextMenu_optionList_notFirst">
-                            <ul>
-                                {homeButton}
-                                <li>
-                                    <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}>
-                                        <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconBell" />
-                                        <span>{_t("Notification settings")}</span>
-                                    </AccessibleButton>
-                                </li>
-                                <li>
-                                    <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}>
-                                        <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconLock" />
-                                        <span>{_t("Security & privacy")}</span>
-                                    </AccessibleButton>
-                                </li>
-                                <li>
-                                    <AccessibleButton onClick={(e) => this.onSettingsOpen(e, null)}>
-                                        <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconSettings" />
-                                        <span>{_t("All settings")}</span>
-                                    </AccessibleButton>
-                                </li>
-                                <li>
-                                    <AccessibleButton onClick={this.onShowArchived}>
-                                        <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconArchive" />
-                                        <span>{_t("Archived rooms")}</span>
-                                    </AccessibleButton>
-                                </li>
-                                <li>
-                                    <AccessibleButton onClick={this.onProvideFeedback}>
-                                        <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconMessage" />
-                                        <span>{_t("Feedback")}</span>
-                                    </AccessibleButton>
-                                </li>
-                            </ul>
-                        </div>
-                        <div className="mx_IconizedContextMenu_optionList">
-                            <ul>
-                                <li className="mx_UserMenu_contextMenu_redRow">
-                                    <AccessibleButton onClick={this.onSignOutClick}>
-                                        <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconSignOut" />
-                                        <span>{_t("Sign out")}</span>
-                                    </AccessibleButton>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </ContextMenu>
+        let hostingLink;
+        const signupLink = getHostingLink("user-context-menu");
+        if (signupLink) {
+            hostingLink = (
+                <div className="mx_UserMenu_contextMenu_header">
+                    {_t(
+                        "<a>Upgrade</a> to your own domain", {},
+                        {
+                            a: sub => (
+                                <a
+                                    href={signupLink}
+                                    target="_blank"
+                                    rel="noreferrer noopener"
+                                    tabIndex={-1}
+                                >{sub}</a>
+                            ),
+                        },
+                    )}
+                </div>
             );
         }
 
+        let homeButton = null;
+        if (this.hasHomePage) {
+            homeButton = (
+                <li>
+                    <AccessibleButton onClick={this.onHomeClick}>
+                        <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconHome" />
+                        <span>{_t("Home")}</span>
+                    </AccessibleButton>
+                </li>
+            );
+        }
+
+        const elementRect = this.buttonRef.current.getBoundingClientRect();
         return (
-            <React.Fragment>
-                <ContextMenuButton
-                    className="mx_UserMenuButton"
-                    onClick={this.onOpenMenuClick}
-                    inputRef={this.buttonRef}
-                    label={_t("Account settings")}
-                    isExpanded={this.state.menuDisplayed}
-                >
-                    <span>{/* masked image in CSS */}</span>
-                </ContextMenuButton>
-                {contextMenu}
-            </React.Fragment>
+            <ContextMenu
+                chevronFace="none"
+                left={elementRect.left}
+                top={elementRect.top + elementRect.height}
+                onFinished={this.onCloseMenu}
+            >
+                <div className="mx_IconizedContextMenu mx_UserMenu_contextMenu">
+                    <div className="mx_UserMenu_contextMenu_header">
+                        <div className="mx_UserMenu_contextMenu_name">
+                            <span className="mx_UserMenu_contextMenu_displayName">
+                                {OwnProfileStore.instance.displayName}
+                            </span>
+                            <span className="mx_UserMenu_contextMenu_userId">
+                                {MatrixClientPeg.get().getUserId()}
+                            </span>
+                        </div>
+                        <div
+                            className="mx_UserMenu_contextMenu_themeButton"
+                            onClick={this.onSwitchThemeClick}
+                            title={this.state.isDarkTheme ? _t("Switch to light mode") : _t("Switch to dark mode")}
+                        >
+                            <img
+                                src={require("../../../res/img/feather-customised/sun.svg")}
+                                alt={_t("Switch theme")}
+                                width={16}
+                            />
+                        </div>
+                    </div>
+                    {hostingLink}
+                    <div className="mx_IconizedContextMenu_optionList mx_IconizedContextMenu_optionList_notFirst">
+                        <ul>
+                            {homeButton}
+                            <li>
+                                <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}>
+                                    <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconBell" />
+                                    <span>{_t("Notification settings")}</span>
+                                </AccessibleButton>
+                            </li>
+                            <li>
+                                <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}>
+                                    <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconLock" />
+                                    <span>{_t("Security & privacy")}</span>
+                                </AccessibleButton>
+                            </li>
+                            <li>
+                                <AccessibleButton onClick={(e) => this.onSettingsOpen(e, null)}>
+                                    <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconSettings" />
+                                    <span>{_t("All settings")}</span>
+                                </AccessibleButton>
+                            </li>
+                            <li>
+                                <AccessibleButton onClick={this.onShowArchived}>
+                                    <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconArchive" />
+                                    <span>{_t("Archived rooms")}</span>
+                                </AccessibleButton>
+                            </li>
+                            <li>
+                                <AccessibleButton onClick={this.onProvideFeedback}>
+                                    <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconMessage" />
+                                    <span>{_t("Feedback")}</span>
+                                </AccessibleButton>
+                            </li>
+                        </ul>
+                    </div>
+                    <div className="mx_IconizedContextMenu_optionList">
+                        <ul>
+                            <li className="mx_UserMenu_contextMenu_redRow">
+                                <AccessibleButton onClick={this.onSignOutClick}>
+                                    <span className="mx_IconizedContextMenu_icon mx_UserMenu_iconSignOut" />
+                                    <span>{_t("Sign out")}</span>
+                                </AccessibleButton>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </ContextMenu>
         );
-    }
+    };
 
     public render() {
+        console.log(this.state);
         const avatarSize = 32; // should match border-radius of the avatar
 
         let name = <span className="mx_UserMenu_userName">{OwnProfileStore.instance.displayName}</span>;
         let buttons = (
             <span className="mx_UserMenu_headerButtons">
-                {this.renderMenuButton()}
+                {/* masked image in CSS */}
             </span>
         );
         if (this.props.isMinimized) {
@@ -308,22 +296,39 @@ export default class UserMenu extends React.Component<IProps, IState> {
             buttons = null;
         }
 
+        const classes = classNames({
+            'mx_UserMenu': true,
+            'mx_UserMenu_minimized': this.props.isMinimized,
+        });
+
         return (
-            <div className="mx_UserMenu">
-                    <span className="mx_UserMenu_userAvatarContainer">
-                        <BaseAvatar
-                            idName={MatrixClientPeg.get().getUserId()}
-                            name={OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId()}
-                            url={OwnProfileStore.instance.getHttpAvatarUrl(avatarSize)}
-                            width={avatarSize}
-                            height={avatarSize}
-                            resizeMethod="crop"
-                            className="mx_UserMenu_userAvatar"
-                        />
-                    </span>
-                {name}
-                {buttons}
-            </div>
+            <React.Fragment>
+                <ContextMenuButton
+                    className={classes}
+                    onClick={this.onOpenMenuClick}
+                    inputRef={this.buttonRef}
+                    label={_t("Account settings")}
+                    isExpanded={this.state.menuDisplayed}
+                >
+                    <div className="mx_UserMenu_row">
+                        <span className="mx_UserMenu_userAvatarContainer">
+                            <BaseAvatar
+                                idName={MatrixClientPeg.get().getUserId()}
+                                name={OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId()}
+                                url={OwnProfileStore.instance.getHttpAvatarUrl(avatarSize)}
+                                width={avatarSize}
+                                height={avatarSize}
+                                resizeMethod="crop"
+                                className="mx_UserMenu_userAvatar"
+                            />
+                        </span>
+                        {name}
+                        {buttons}
+                    </div>
+                    {this.renderContextMenu()}
+                </ContextMenuButton>
+            </React.Fragment>
+
         );
     }
 }