Add most of the UI for the new room list's menu button

Incomplete implementation: buttons don't work, some text is missing, etc

res/css/_components.scss

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

res/css/structures/_LeftPanel2.scss

@@ -73,6 +73,11 @@ $roomListMinimizedWidth: 50px;
                 font-weight: 600;
                 font-size: $font-15px;
                 line-height: $font-20px;
+                flex: 1;
+            }
+
+            .mx_LeftPanel2_headerButtons {
+                // No special styles: the rest of the layout happens to make it work.
             }
 
             .mx_LeftPanel2_breadcrumbsContainer {

res/css/structures/_UserMenuButton.scss

@@ -0,0 +1,157 @@
+/*
+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.
+*/
+
+.mx_UserMenuButton {
+    // No special styles on the button itself
+}
+
+.mx_UserMenuButton_contextMenu {
+    width: 231px;
+
+    // Put 20px of padding around the whole menu. We do this instead of a
+    // simple `padding: 20px` rule so the horizontal rules added by the
+    // optionLists is rendered correctly (full width).
+    >* {
+        padding-left: 20px;
+        padding-right: 20px;
+
+        &:first-child {
+            padding-top: 20px;
+        }
+
+        &:last-child {
+            padding-bottom: 20px;
+        }
+    }
+
+    .mx_UserMenuButton_contextMenu_header {
+        // Create a flexbox to organize the header a bit easier
+        display: flex;
+        align-items: center;
+
+        .mx_UserMenuButton_contextMenu_name {
+            // Create another flexbox of columns to handle large user IDs
+            display: flex;
+            flex-direction: column;
+
+            // fit the container
+            flex: 1;
+            width: calc(100% - 40px); // 40px = 32px theme button + 8px margin to theme button
+
+            * {
+                // Automatically grow all subelements to fit the container
+                flex: 1;
+                width: 100%;
+
+                // Ellipsize any text overflow
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+
+            .mx_UserMenuButton_contextMenu_displayName {
+                font-weight: bold;
+                font-size: $font-15px;
+                line-height: $font-20px;
+            }
+
+            .mx_UserMenuButton_contextMenu_userId {
+                font-size: $font-15px;
+                line-height: $font-24px;
+            }
+        }
+
+        .mx_UserMenuButton_contextMenu_themeButton {
+            min-width: 32px;
+            max-width: 32px;
+            width: 32px;
+            height: 32px;
+            margin-left: 8px;
+            border-radius: 32px;
+            background-color: $theme-button-bg-color;
+            cursor: pointer;
+
+            // to make alignment easier, create flexbox for the image
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+
+    .mx_UserMenuButton_contextMenu_optionList {
+        margin-top: 20px;
+
+        // This is a bit of a hack when we could just use a simple border-top property,
+        // however we have a (kinda) good reason for doing it this way: we need opacity.
+        // To get the right color, we need an opacity modifier which means we have to work
+        // around the problem. PostCSS doesn't support the opacity() function, and if we
+        // use something like postcss-functions we quickly run into an issue where the
+        // function we would define gets passed a CSS variable for custom themes, which
+        // can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379
+        //
+        // Therefore, we just hack in a line and border the thing ourselves
+        &::before {
+            border-top: 1px solid $primary-fg-color;
+            opacity: 0.1;
+            content: '';
+
+            // Counteract the padding problems (width: 100% ignores the 40px padding,
+            // unless we position it absolutely then it does the right thing).
+            width: 100%;
+            position: absolute;
+            left: 0;
+        }
+
+        ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+
+            li {
+                margin: 0;
+                padding: 20px 0 0;
+
+                a {
+                    text-decoration: none;
+                    color: $primary-fg-color;
+                    font-size: $font-15px;
+                    line-height: $font-24px;
+
+                    // Create a flexbox to more easily define the list items
+                    display: flex;
+                    align-items: center;
+
+                    img { // icons
+                        width: 16px;
+                        min-width: 16px;
+                        max-width: 16px;
+                    }
+
+                    span { // labels
+                        padding-left: 14px;
+                        width: 100%;
+                        flex: 1;
+
+                        // Ellipsize any text overflow
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                        white-space: nowrap;
+                    }
+                }
+            }
+        }
+    }
+}

res/img/feather-customised/archive.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>

res/img/feather-customised/more-horizontal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>

res/img/feather-customised/sun.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>

res/themes/light/css/_light.scss

@@ -177,6 +177,7 @@ $header-divider-color: #91A1C0;
 $roomtile2-preview-color: #9e9e9e;
 $roomtile2-badge-color: #61708b;
 $roomtile2-selected-bg-color: #FFF;
+$theme-button-bg-color: #e3e8f0;
 
 $roomtile-name-color: #61708b;
 $roomtile-badge-fg-color: $accent-fg-color;

src/components/structures/LeftPanel2.tsx

@@ -27,6 +27,7 @@ import { Action } from "../../dispatcher/actions";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import BaseAvatar from '../views/avatars/BaseAvatar';
 import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
+import UserMenuButton from "./UserMenuButton";
 
 /*******************************************************************
  *   CAUTION                                                       *
@@ -49,7 +50,6 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
     // TODO: Properly support TagPanel
     // TODO: Properly support searching/filtering
     // TODO: Properly support breadcrumbs
-    // TODO: Properly support TopLeftMenu (User Settings)
     // TODO: a11y
     // TODO: actually make this useful in general (match design proposals)
     // TODO: Fadable support (is this still needed?)
@@ -115,6 +115,9 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
                         />
                     </span>
                     <span className="mx_LeftPanel2_userName">{displayName}</span>
+                    <span className="mx_LeftPanel2_headerButtons">
+                        <UserMenuButton />
+                    </span>
                 </div>
                 <div className="mx_LeftPanel2_headerRow mx_LeftPanel2_breadcrumbsContainer">
                     <RoomBreadcrumbs />

src/components/structures/LoggedInView.tsx

@@ -452,9 +452,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
                 // composer, so CTRL+` it is
 
                 if (ctrlCmdOnly) {
-                    dis.dispatch({
+                    dis.fire(Action.ToggleUserMenu);
-                        action: 'toggle_top_left_menu',
-                    });
                     handled = true;
                 }
                 break;

src/components/structures/TopLeftMenuButton.js

@@ -24,6 +24,7 @@ import * as Avatar from '../../Avatar';
 import { _t } from '../../languageHandler';
 import dis from "../../dispatcher/dispatcher";
 import {ContextMenu, ContextMenuButton} from "./ContextMenu";
+import {Action} from "../../dispatcher/actions";
 
 const AVATAR_SIZE = 28;
 
@@ -75,7 +76,7 @@ export default class TopLeftMenuButton extends React.Component {
 
     onAction = (payload) => {
         // For accessibility
-        if (payload.action === "toggle_top_left_menu") {
+        if (payload.action === Action.ToggleUserMenu) {
             if (this._buttonRef) this._buttonRef.click();
         }
     };

src/components/structures/UserMenuButton.tsx

@@ -0,0 +1,211 @@
+/*
+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 {User} from "matrix-js-sdk/src/models/user";
+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";
+
+interface IProps {
+}
+
+interface IState {
+    user: User;
+    menuDisplayed: boolean;
+}
+
+export default class UserMenuButton extends React.Component<IProps, IState> {
+    private dispatcherRef: string;
+    private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            menuDisplayed: false,
+            user: MatrixClientPeg.get().getUser(MatrixClientPeg.get().getUserId()),
+        };
+    }
+
+    private get displayName(): string {
+        if (MatrixClientPeg.get().isGuest()) {
+            return _t("Guest");
+        } else if (this.state.user) {
+            return this.state.user.displayName;
+        } else {
+            return MatrixClientPeg.get().getUserId();
+        }
+    }
+
+    public componentDidMount() {
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+    }
+
+    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 = () => {
+        console.log("TODO: Switch theme");
+    };
+
+    private onSettingsOpen = (ev: React.MouseEvent, tabRef: string) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        console.log("TODO: Open settings", tabRef);
+    };
+
+    private onShowArchived = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        console.log("TODO: Show archived rooms");
+    };
+
+    private onProvideFeedback = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        console.log("TODO: Show feedback");
+    };
+
+    private onSignOutClick = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        console.log("TODO: Sign out");
+    };
+
+    public render() {
+        let contextMenu;
+        if (this.state.menuDisplayed) {
+            const elementRect = this.buttonRef.current.getBoundingClientRect();
+            contextMenu = (
+                <ContextMenu
+                    chevronFace="none"
+                    left={elementRect.left}
+                    top={elementRect.top + elementRect.height}
+                    onFinished={this.onCloseMenu}
+                >
+                    <div className="mx_UserMenuButton_contextMenu">
+                        <div className="mx_UserMenuButton_contextMenu_header">
+                            <div className="mx_UserMenuButton_contextMenu_name">
+                                <span className="mx_UserMenuButton_contextMenu_displayName">
+                                    {this.displayName}
+                                </span>
+                                <span className="mx_UserMenuButton_contextMenu_userId">
+                                    {MatrixClientPeg.get().getUserId()}
+                                </span>
+                            </div>
+                            <div
+                                className="mx_UserMenuButton_contextMenu_themeButton"
+                                onClick={this.onSwitchThemeClick}
+                                title={_t("Switch to dark mode")}
+                            >
+                                <img
+                                    src={require("../../../res/img/feather-customised/sun.svg")}
+                                    alt={_t("Switch theme")}
+                                    width={16}
+                                />
+                            </div>
+                        </div>
+                        <div className="mx_UserMenuButton_contextMenu_header">
+                            TODO: Upgrade prompt
+                        </div>
+                        <div className="mx_UserMenuButton_contextMenu_optionList">
+                            <ul>
+                                <li>
+                                    <a href={"#"} onClick={(e) => this.onSettingsOpen(e, 'notifications')}>
+                                        <img src={require("../../../res/img/feather-customised/notifications.svg")} width={16} />
+                                        <span>{_t("Notification settings")}</span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href={"#"} onClick={(e) => this.onSettingsOpen(e, 'security')}>
+                                        <img src={require("../../../res/img/feather-customised/lock.svg")} width={16} />
+                                        <span>{_t("Security & privacy")}</span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href={"#"} onClick={(e) => this.onSettingsOpen(e, 'all')}>
+                                        <img src={require("../../../res/img/feather-customised/settings.svg")} width={16} />
+                                        <span>{_t("All settings")}</span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href={"#"} onClick={this.onShowArchived}>
+                                        <img src={require("../../../res/img/feather-customised/archive.svg")} width={16} />
+                                        <span>{_t("Archived rooms")}</span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href={"#"} onClick={this.onShowArchived}>
+                                        <img src={require("../../../res/img/feather-customised/message-circle.svg")} width={16} />
+                                        <span>{_t("Feedback")}</span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div className="mx_UserMenuButton_contextMenu_optionList">
+                            <ul>
+                                <li>
+                                    <a href={"#"} onClick={(e) => this.onSettingsOpen(e, 'notifications')}>
+                                        <img src={require("../../../res/img/feather-customised/sign-out.svg")} width={16} />
+                                        <span>{_t("Sign out")}</span>
+                                    </a>
+                                </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}
+                >
+                    <img src={require("../../../res/img/feather-customised/more-horizontal.svg")} alt="..." width={14} />
+                </ContextMenuButton>
+                {contextMenu}
+            </React.Fragment>
+        )
+    }
+}

src/dispatcher/actions.ts

@@ -58,4 +58,9 @@ export enum Action {
      * Focuses the user's cursor to the composer. No additional payload information required.
      */
     FocusComposer = "focus_composer",
+
+    /**
+     * Opens the user menu (previously known as the top left menu). No additional payload information required.
+     */
+    ToggleUserMenu = "toggle_user_menu",
 }

src/i18n/strings/en_EN.json

@@ -2042,6 +2042,13 @@
     "Uploading %(filename)s and %(count)s others|other": "Uploading %(filename)s and %(count)s others",
     "Uploading %(filename)s and %(count)s others|zero": "Uploading %(filename)s",
     "Uploading %(filename)s and %(count)s others|one": "Uploading %(filename)s and %(count)s other",
+    "Switch to dark mode": "Switch to dark mode",
+    "Switch theme": "Switch theme",
+    "Security & privacy": "Security & privacy",
+    "All settings": "All settings",
+    "Archived rooms": "Archived rooms",
+    "Feedback": "Feedback",
+    "Account settings": "Account settings",
     "Could not load user profile": "Could not load user profile",
     "Verify this login": "Verify this login",
     "Session verified": "Session verified",