Merge pull request #4843 from matrix-org/travis/room-list/user-menu

Make the whole user row clickable in the new room list

res/css/_components.scss

@@ -30,7 +30,7 @@
 @import "./structures/_ToastContainer.scss";
 @import "./structures/_TopLeftMenuButton.scss";
 @import "./structures/_UploadBar.scss";
-@import "./structures/_UserMenuButton.scss";
+@import "./structures/_UserMenu.scss";
 @import "./structures/_ViewSource.scss";
 @import "./structures/auth/_CompleteSecurity.scss";
 @import "./structures/auth/_Login.scss";

res/css/structures/_LeftPanel2.scss

@@ -54,7 +54,7 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
             display: flex;
             flex-direction: column;
 
-            // There's 2 rows when breadcrumbs are present: the top bit and the breadcrumbs
+            // This is basically just breadcrumbs. The row above that is handled by the UserMenu
             .mx_LeftPanel2_headerRow {
                 // Create yet another flexbox, this time within the row, to ensure items stay
                 // aligned correctly. This is also a row-based flexbox.
@@ -62,32 +62,6 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
                 align-items: center;
             }
 
-            .mx_LeftPanel2_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_LeftPanel2_userAvatar {
-                    border-radius: 32px; // should match avatar size
-                }
-            }
-
-            .mx_LeftPanel2_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_LeftPanel2_headerButtons {
-                // No special styles: the rest of the layout happens to make it work.
-            }
-
             .mx_LeftPanel2_breadcrumbsContainer {
                 width: 100%;
                 overflow: hidden;
@@ -158,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;

res/css/structures/_UserMenu.scss

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_UserMenuButton {
+.mx_UserMenu {
-    > span {
+    .mx_UserMenu_headerButtons {
         width: 16px;
         height: 16px;
         position: relative;
@@ -35,12 +35,56 @@ 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_UserMenuButton_contextMenu {
+.mx_UserMenu_contextMenu {
     width: 247px;
 
-    .mx_UserMenuButton_contextMenu_redRow {
+    .mx_UserMenu_contextMenu_redRow {
         .mx_AccessibleButton {
             color: $warning-color !important; // !important to override styles from context menu
         }
@@ -50,12 +94,12 @@ limitations under the License.
         }
     }
 
-    .mx_UserMenuButton_contextMenu_header {
+    .mx_UserMenu_contextMenu_header {
         // Create a flexbox to organize the header a bit easier
         display: flex;
         align-items: center;
 
-        .mx_UserMenuButton_contextMenu_name {
+        .mx_UserMenu_contextMenu_name {
             // Create another flexbox of columns to handle large user IDs
             display: flex;
             flex-direction: column;
@@ -72,19 +116,19 @@ limitations under the License.
                 white-space: nowrap;
             }
 
-            .mx_UserMenuButton_contextMenu_displayName {
+            .mx_UserMenu_contextMenu_displayName {
                 font-weight: bold;
                 font-size: $font-15px;
                 line-height: $font-20px;
             }
 
-            .mx_UserMenuButton_contextMenu_userId {
+            .mx_UserMenu_contextMenu_userId {
                 font-size: $font-15px;
                 line-height: $font-24px;
             }
         }
 
-        .mx_UserMenuButton_contextMenu_themeButton {
+        .mx_UserMenu_contextMenu_themeButton {
             min-width: 32px;
             max-width: 32px;
             width: 32px;
@@ -118,31 +162,31 @@ limitations under the License.
         }
     }
 
-    .mx_UserMenuButton_iconHome::before {
+    .mx_UserMenu_iconHome::before {
         mask-image: url('$(res)/img/feather-customised/home.svg');
     }
 
-    .mx_UserMenuButton_iconBell::before {
+    .mx_UserMenu_iconBell::before {
         mask-image: url('$(res)/img/feather-customised/notifications.svg');
     }
 
-    .mx_UserMenuButton_iconLock::before {
+    .mx_UserMenu_iconLock::before {
         mask-image: url('$(res)/img/feather-customised/lock.svg');
     }
 
-    .mx_UserMenuButton_iconSettings::before {
+    .mx_UserMenu_iconSettings::before {
         mask-image: url('$(res)/img/feather-customised/settings.svg');
     }
 
-    .mx_UserMenuButton_iconArchive::before {
+    .mx_UserMenu_iconArchive::before {
         mask-image: url('$(res)/img/feather-customised/archive.svg');
     }
 
-    .mx_UserMenuButton_iconMessage::before {
+    .mx_UserMenu_iconMessage::before {
         mask-image: url('$(res)/img/feather-customised/message-circle.svg');
     }
 
-    .mx_UserMenuButton_iconSignOut::before {
+    .mx_UserMenu_iconSignOut::before {
         mask-image: url('$(res)/img/feather-customised/sign-out.svg');
     }
 }

src/components/structures/LeftPanel2.tsx

@@ -22,18 +22,13 @@ import dis from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
 import RoomList2 from "../views/rooms/RoomList2";
 import { Action } from "../../dispatcher/actions";
-import { MatrixClientPeg } from "../../MatrixClientPeg";
+import UserMenu from "./UserMenu";
-import BaseAvatar from '../views/avatars/BaseAvatar';
-import UserMenuButton from "./UserMenuButton";
 import RoomSearch from "./RoomSearch";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import RoomBreadcrumbs2 from "../views/rooms/RoomBreadcrumbs2";
 import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import ResizeNotifier from "../../utils/ResizeNotifier";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { throttle } from 'lodash';
-import { OwnProfileStore } from "../../stores/OwnProfileStore";
 
 /*******************************************************************
  *   CAUTION                                                       *
@@ -76,32 +71,13 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         // We watch the middle panel because we don't actually get resized, the middle panel does.
         // We listen to the noisy channel to avoid choppy reaction times.
         this.props.resizeNotifier.on("middlePanelResizedNoisy", this.onResize);
-
-        OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
     }
 
     public componentWillUnmount() {
         BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
         this.props.resizeNotifier.off("middlePanelResizedNoisy", this.onResize);
-        OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate);
     }
 
-    // TSLint wants this to be a member, but we don't want that.
-    // tslint:disable-next-line
-    private onRoomStateUpdate = throttle((ev: MatrixEvent) => {
-        const myUserId = MatrixClientPeg.get().getUserId();
-        if (ev.getType() === 'm.room.member' && ev.getSender() === myUserId && ev.getStateKey() === myUserId) {
-            // noinspection JSIgnoredPromiseFromCall
-            this.onProfileUpdate();
-        }
-    }, 200, {trailing: true, leading: true});
-
-    private onProfileUpdate = async () => {
-        // the store triggered an update, so force a layout update. We don't
-        // have any state to store here for that to magically happen.
-        this.forceUpdate();
-    };
-
     private onSearch = (term: string): void => {
         this.setState({searchFilter: term});
     };
@@ -170,7 +146,6 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         // TODO: Presence
         // TODO: Breadcrumbs toggle
         // TODO: Menu button
-        const avatarSize = 32; // should match border-radius of the avatar
 
         let breadcrumbs;
         if (this.state.showBreadcrumbs) {
@@ -181,34 +156,9 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
             );
         }
 
-        let name = <span className="mx_LeftPanel2_userName">{OwnProfileStore.instance.displayName}</span>;
-        let buttons = (
-            <span className="mx_LeftPanel2_headerButtons">
-                <UserMenuButton />
-            </span>
-        );
-        if (this.props.isMinimized) {
-            name = null;
-            buttons = null;
-        }
-
         return (
             <div className="mx_LeftPanel2_userHeader">
-                <div className="mx_LeftPanel2_headerRow">
+                <UserMenu isMinimized={this.props.isMinimized} />
-                    <span className="mx_LeftPanel2_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_LeftPanel2_userAvatar"
-                        />
-                    </span>
-                    {name}
-                    {buttons}
-                </div>
                 {breadcrumbs}
             </div>
         );

src/components/structures/UserMenu.tsx

@@ -0,0 +1,332 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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 * as React from "react";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import defaultDispatcher from "../../dispatcher/dispatcher";
+import { ActionPayload } from "../../dispatcher/payloads";
+import { Action } from "../../dispatcher/actions";
+import { createRef } from "react";
+import { _t } from "../../languageHandler";
+import {ContextMenu, ContextMenuButton} from "./ContextMenu";
+import {USER_NOTIFICATIONS_TAB, USER_SECURITY_TAB} from "../views/dialogs/UserSettingsDialog";
+import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
+import RedesignFeedbackDialog from "../views/dialogs/RedesignFeedbackDialog";
+import Modal from "../../Modal";
+import LogoutDialog from "../views/dialogs/LogoutDialog";
+import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
+import {getCustomTheme} from "../../theme";
+import {getHostingLink} from "../../utils/HostingLink";
+import AccessibleButton, {ButtonEvent} from "../views/elements/AccessibleButton";
+import SdkConfig from "../../SdkConfig";
+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;
+}
+
+interface IState {
+    menuDisplayed: boolean;
+    isDarkTheme: boolean;
+}
+
+export default class UserMenu extends React.Component<IProps, IState> {
+    private dispatcherRef: string;
+    private themeWatcherRef: string;
+    private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            menuDisplayed: false,
+            isDarkTheme: this.isUserOnDarkTheme(),
+        };
+
+        OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
+    }
+
+    private get hasHomePage(): boolean {
+        return !!getHomePageUrl(SdkConfig.get());
+    }
+
+    public componentDidMount() {
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+        this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
+    }
+
+    public componentWillUnmount() {
+        if (this.themeWatcherRef) SettingsStore.unwatchSetting(this.themeWatcherRef);
+        if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef);
+        OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate);
+    }
+
+    private isUserOnDarkTheme(): boolean {
+        const theme = SettingsStore.getValue("theme");
+        if (theme.startsWith("custom-")) {
+            return getCustomTheme(theme.substring("custom-".length)).is_dark;
+        }
+        return theme === "dark";
+    }
+
+    private onProfileUpdate = async () => {
+        // the store triggered an update, so force a layout update. We don't
+        // have any state to store here for that to magically happen.
+        this.forceUpdate();
+    };
+
+    private onThemeChanged = () => {
+        this.setState({isDarkTheme: this.isUserOnDarkTheme()});
+    };
+
+    private onAction = (ev: ActionPayload) => {
+        if (ev.action !== Action.ToggleUserMenu) return; // not interested
+
+        // For accessibility
+        if (this.buttonRef.current) this.buttonRef.current.click();
+    };
+
+    private onOpenMenuClick = (ev: InputEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setState({menuDisplayed: true});
+    };
+
+    private onCloseMenu = (ev: InputEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setState({menuDisplayed: false});
+    };
+
+    private onSwitchThemeClick = () => {
+        // Disable system theme matching if the user hits this button
+        SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, false);
+
+        const newTheme = this.state.isDarkTheme ? "light" : "dark";
+        SettingsStore.setValue("theme", null, SettingLevel.DEVICE, newTheme); // set at same level as Appearance tab
+    };
+
+    private onSettingsOpen = (ev: ButtonEvent, tabId: string) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        const payload: OpenToTabPayload = {action: Action.ViewUserSettings, initialTabId: tabId};
+        defaultDispatcher.dispatch(payload);
+        this.setState({menuDisplayed: false}); // also close the menu
+    };
+
+    private onShowArchived = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        // TODO: Archived room view (deferred)
+        console.log("TODO: Show archived rooms");
+    };
+
+    private onProvideFeedback = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        Modal.createTrackedDialog('Report bugs & give feedback', '', RedesignFeedbackDialog);
+        this.setState({menuDisplayed: false}); // also close the menu
+    };
+
+    private onSignOutClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        Modal.createTrackedDialog('Logout from LeftPanel', '', LogoutDialog);
+        this.setState({menuDisplayed: false}); // also close the menu
+    };
+
+    private onHomeClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        defaultDispatcher.dispatch({action: 'view_home_page'});
+    };
+
+    private renderContextMenu = (): React.ReactNode => {
+        if (!this.state.menuDisplayed) return null;
+
+        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 (
+            <ContextMenu
+                chevronFace="none"
+                left={elementRect.width + 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() {
+        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">
+                {/* masked image in CSS */}
+            </span>
+        );
+        if (this.props.isMinimized) {
+            name = null;
+            buttons = null;
+        }
+
+        const classes = classNames({
+            'mx_UserMenu': true,
+            'mx_UserMenu_minimized': this.props.isMinimized,
+        });
+
+        return (
+            <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>
+        );
+    }
+}

src/components/structures/UserMenuButton.tsx

@@ -1,294 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-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 * as React from "react";
-import { MatrixClientPeg } from "../../MatrixClientPeg";
-import defaultDispatcher from "../../dispatcher/dispatcher";
-import { ActionPayload } from "../../dispatcher/payloads";
-import { Action } from "../../dispatcher/actions";
-import { createRef } from "react";
-import { _t } from "../../languageHandler";
-import {ContextMenu, ContextMenuButton} from "./ContextMenu";
-import {USER_NOTIFICATIONS_TAB, USER_SECURITY_TAB} from "../views/dialogs/UserSettingsDialog";
-import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
-import RedesignFeedbackDialog from "../views/dialogs/RedesignFeedbackDialog";
-import Modal from "../../Modal";
-import LogoutDialog from "../views/dialogs/LogoutDialog";
-import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
-import {getCustomTheme} from "../../theme";
-import {getHostingLink} from "../../utils/HostingLink";
-import AccessibleButton, {ButtonEvent} from "../views/elements/AccessibleButton";
-import SdkConfig from "../../SdkConfig";
-import {getHomePageUrl} from "../../utils/pages";
-import { OwnProfileStore } from "../../stores/OwnProfileStore";
-import { UPDATE_EVENT } from "../../stores/AsyncStore";
-
-interface IProps {
-}
-
-interface IState {
-    menuDisplayed: boolean;
-    isDarkTheme: boolean;
-}
-
-export default class UserMenuButton extends React.Component<IProps, IState> {
-    private dispatcherRef: string;
-    private themeWatcherRef: string;
-    private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
-
-    constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            menuDisplayed: false,
-            isDarkTheme: this.isUserOnDarkTheme(),
-        };
-
-        OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
-    }
-
-    private get hasHomePage(): boolean {
-        return !!getHomePageUrl(SdkConfig.get());
-    }
-
-    public componentDidMount() {
-        this.dispatcherRef = defaultDispatcher.register(this.onAction);
-        this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
-    }
-
-    public componentWillUnmount() {
-        if (this.themeWatcherRef) SettingsStore.unwatchSetting(this.themeWatcherRef);
-        if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef);
-        OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate);
-    }
-
-    private isUserOnDarkTheme(): boolean {
-        const theme = SettingsStore.getValue("theme");
-        if (theme.startsWith("custom-")) {
-            return getCustomTheme(theme.substring("custom-".length)).is_dark;
-        }
-        return theme === "dark";
-    }
-
-    private onProfileUpdate = async () => {
-        // the store triggered an update, so force a layout update. We don't
-        // have any state to store here for that to magically happen.
-        this.forceUpdate();
-    };
-
-    private onThemeChanged = () => {
-        this.setState({isDarkTheme: this.isUserOnDarkTheme()});
-    };
-
-    private onAction = (ev: ActionPayload) => {
-        if (ev.action !== Action.ToggleUserMenu) return; // not interested
-
-        // For accessibility
-        if (this.buttonRef.current) this.buttonRef.current.click();
-    };
-
-    private onOpenMenuClick = (ev: InputEvent) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.setState({menuDisplayed: true});
-    };
-
-    private onCloseMenu = () => {
-        this.setState({menuDisplayed: false});
-    };
-
-    private onSwitchThemeClick = () => {
-        // Disable system theme matching if the user hits this button
-        SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, false);
-
-        const newTheme = this.state.isDarkTheme ? "light" : "dark";
-        SettingsStore.setValue("theme", null, SettingLevel.DEVICE, newTheme); // set at same level as Appearance tab
-    };
-
-    private onSettingsOpen = (ev: ButtonEvent, tabId: string) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-
-        const payload: OpenToTabPayload = {action: Action.ViewUserSettings, initialTabId: tabId};
-        defaultDispatcher.dispatch(payload);
-        this.setState({menuDisplayed: false}); // also close the menu
-    };
-
-    private onShowArchived = (ev: ButtonEvent) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-
-        // TODO: Archived room view (deferred)
-        console.log("TODO: Show archived rooms");
-    };
-
-    private onProvideFeedback = (ev: ButtonEvent) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-
-        Modal.createTrackedDialog('Report bugs & give feedback', '', RedesignFeedbackDialog);
-        this.setState({menuDisplayed: false}); // also close the menu
-    };
-
-    private onSignOutClick = (ev: ButtonEvent) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-
-        Modal.createTrackedDialog('Logout from LeftPanel', '', LogoutDialog);
-        this.setState({menuDisplayed: false}); // also close the menu
-    };
-
-    private onHomeClick = (ev: ButtonEvent) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-
-        defaultDispatcher.dispatch({action: 'view_home_page'});
-    };
-
-    public render() {
-        let contextMenu;
-        if (this.state.menuDisplayed) {
-            let hostingLink;
-            const signupLink = getHostingLink("user-context-menu");
-            if (signupLink) {
-                hostingLink = (
-                    <div className="mx_UserMenuButton_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_UserMenuButton_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_UserMenuButton_contextMenu">
-                        <div className="mx_UserMenuButton_contextMenu_header">
-                            <div className="mx_UserMenuButton_contextMenu_name">
-                                <span className="mx_UserMenuButton_contextMenu_displayName">
-                                    {OwnProfileStore.instance.displayName}
-                                </span>
-                                <span className="mx_UserMenuButton_contextMenu_userId">
-                                    {MatrixClientPeg.get().getUserId()}
-                                </span>
-                            </div>
-                            <div
-                                className="mx_UserMenuButton_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_UserMenuButton_iconBell" />
-                                        <span>{_t("Notification settings")}</span>
-                                    </AccessibleButton>
-                                </li>
-                                <li>
-                                    <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}>
-                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconLock" />
-                                        <span>{_t("Security & privacy")}</span>
-                                    </AccessibleButton>
-                                </li>
-                                <li>
-                                    <AccessibleButton onClick={(e) => this.onSettingsOpen(e, null)}>
-                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconSettings" />
-                                        <span>{_t("All settings")}</span>
-                                    </AccessibleButton>
-                                </li>
-                                <li>
-                                    <AccessibleButton onClick={this.onShowArchived}>
-                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconArchive" />
-                                        <span>{_t("Archived rooms")}</span>
-                                    </AccessibleButton>
-                                </li>
-                                <li>
-                                    <AccessibleButton onClick={this.onProvideFeedback}>
-                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconMessage" />
-                                        <span>{_t("Feedback")}</span>
-                                    </AccessibleButton>
-                                </li>
-                            </ul>
-                        </div>
-                        <div className="mx_IconizedContextMenu_optionList">
-                            <ul>
-                                <li className="mx_UserMenuButton_contextMenu_redRow">
-                                    <AccessibleButton onClick={this.onSignOutClick}>
-                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconSignOut" />
-                                        <span>{_t("Sign out")}</span>
-                                    </AccessibleButton>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </ContextMenu>
-            );
-        }
-
-        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>
-        );
-    }
-}