Render mini user menu for when space panel is disabled (#7258)

matrix-org · Dec 2, 2021 · 0a99be3 · 0a99be3
1 parent d3c556b
commit 0a99be3
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 5 deletions.
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
@@ -111,6 +111,11 @@ $roomListCollapsedWidth: 68px;
             display: flex;
             align-items: center;
 
+            .mx_UserMenu {
+                // mini-mode for when Space Panel is disabled
+                margin-right: 12px;
+            }
+
             & + .mx_RoomListHeader {
                 margin-top: 12px;
             }

diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
@@ -349,6 +349,12 @@ $activeBorderColor: $primary-content;
             mask-image: linear-gradient(180deg, transparent, black 5%, black 95%, transparent);
         }
     }
+
+    .mx_UserMenu {
+        padding: 0 2px 8px;
+        border-bottom: 1px solid $quinary-content;
+        margin: 12px 14px 4px 18px;
+    }
 }
 
 .mx_SpacePanel_contextMenu {

diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss
@@ -15,9 +15,6 @@ limitations under the License.
 */
 
 .mx_UserMenu {
-    padding: 0 2px 8px;
-    border-bottom: 1px solid $quinary-content;
-    margin: 12px 14px 4px 18px;
     box-sizing: border-box;
     display: flex;
     align-items: center;

diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
@@ -43,6 +43,7 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import IndicatorScrollbar from "./IndicatorScrollbar";
 import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
 import SettingsStore from "../../settings/SettingsStore";
+import UserMenu from "./UserMenu";
 
 interface IProps {
     isMinimized: boolean;
@@ -380,6 +381,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                 onBlur={this.onBlur}
                 onKeyDown={this.onKeyDown}
             >
+                { !SpaceStore.spacesEnabled && <UserMenu isPanelCollapsed={true} /> }
                 <RoomSearch
                     isMinimized={this.props.isMinimized}
                     ref={this.roomSearchRef}
@@ -420,7 +422,12 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                 <aside className="mx_LeftPanel_roomListContainer">
                     { this.renderSearchDialExplore() }
                     { this.renderBreadcrumbs() }
-                    { !this.props.isMinimized && <RoomListHeader onVisibilityChange={this.refreshStickyHeaders} /> }
+                    { !this.props.isMinimized && (
+                        <RoomListHeader
+                            onVisibilityChange={this.refreshStickyHeaders}
+                            spacePanelDisabled={!SpaceStore.spacesEnabled}
+                        />
+                    ) }
                     <div className="mx_LeftPanel_roomListWrapper">
                         <div
                             className={roomListClasses}

diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/RoomListHeader.tsx
@@ -148,10 +148,11 @@ const useJoiningRooms = (): Set<string> => {
 };
 
 interface IProps {
+    spacePanelDisabled: boolean;
     onVisibilityChange?(): void;
 }
 
-const RoomListHeader = ({ onVisibilityChange }: IProps) => {
+const RoomListHeader = ({ spacePanelDisabled, onVisibilityChange }: IProps) => {
     const cli = useContext(MatrixClientContext);
     const [mainMenuDisplayed, mainMenuHandle, openMainMenu, closeMainMenu] = useContextMenu<HTMLDivElement>();
     const [plusMenuDisplayed, plusMenuHandle, openPlusMenu, closePlusMenu] = useContextMenu<HTMLDivElement>();
@@ -183,6 +184,8 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
         return <div className="mx_LeftPanel_roomListFilterCount">
             { _t("%(count)s results", { count }) }
         </div>;
+    } else if (spacePanelDisabled) {
+        return null;
     }
 
     const communityId = CommunityPrototypeStore.instance.getSelectedCommunityId();