Update space panel expand mechanism (#7230)

res/css/structures/_SpacePanel.scss

@@ -36,12 +36,9 @@ $activeBorderColor: $primary-content;
     flex-direction: column;
 
     .mx_SpacePanel_toggleCollapse {
-        margin: 0 auto;
         position: relative;
-        min-width: 32px;
-        min-height: 32px;
-        line-height: 32px;
-        color: $secondary-content;
+        height: 32px;
+        width: 32px;
 
         &::before {
             content: "";
@@ -50,23 +47,45 @@ $activeBorderColor: $primary-content;
             height: 32px;
             left: 0;
             mask-position: center;
-            mask-size: contain;
+            mask-size: 24px;
             mask-repeat: no-repeat;
             background-color: $secondary-content;
-            mask-image: url('$(res)/img/element-icons/expand-space-panel.svg');
+            mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+            transform: rotate(270deg);
+        }
+
+        &:not(.expanded) {
+            position: absolute;
+            left: 68px;
+            top: 12px;
+            border-radius: 0 8px 8px 0;
+            background-color: $primary-content;
+            opacity: 0;
+
+            &::before {
+                background-color: $background;
+            }
         }
 
         &.expanded {
-            padding-left: 48px;
-            padding-right: 8px;
-            margin-left: $gutterSize;
+            margin-left: auto;
+            margin-right: -8px; // overflow into .mx_UserMenu's margin without butchering its bottom stroke
+            border-radius: 8px;
 
             &::before {
-                transform: scaleX(-1);
+                transform: rotate(90deg);
+            }
+
+            &:hover {
+                background-color: $panel-actions;
             }
         }
     }
 
+    &:hover .mx_SpacePanel_toggleCollapse {
+        opacity: 100%;
+    }
+
     ul {
         margin: 0;
         list-style: none;

res/css/structures/_UserMenu.scss

@@ -19,6 +19,11 @@ limitations under the License.
     display: flex;
     align-items: center;
 
+    .mx_AccessibleButton {
+        display: flex;
+        align-items: center;
+    }
+
     .mx_UserMenu_userAvatar {
         position: relative;
     }
@@ -30,7 +35,7 @@ limitations under the License.
         margin-left: 10px;
     }
 
-    &.mx_UserMenu_cutout .mx_BaseAvatar {
+    .mx_UserMenu_cutout .mx_BaseAvatar {
         mask-image: url('$(res)/img/element-icons/roomlist/dnd-avatar-mask.svg');
         mask-position: center;
         mask-size: contain;

res/img/element-icons/expand-space-panel.svg

@@ -1,4 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7701 16.617H22.3721L18.614 20.3751C18.3137 20.6754 18.3137 21.1683 18.614 21.4686C18.9143 21.769 19.3995 21.769 19.6998 21.4686L24.7747 16.3937C25.0751 16.0934 25.0751 15.6082 24.7747 15.3079L19.7075 10.2253C19.4072 9.92492 18.922 9.92492 18.6217 10.2253C18.3214 10.5256 18.3214 11.0107 18.6217 11.3111L22.3721 15.0768H13.7701C13.3465 15.0768 13 15.4234 13 15.8469C13 16.2705 13.3465 16.617 13.7701 16.617Z" fill="#86888A"/>
-<rect x="7" y="10" width="1.5" height="12" rx="0.75" fill="#86888A"/>
-</svg>

src/KeyBindingsDefaults.ts

@@ -14,8 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { AutocompleteAction, IKeyBindingsProvider, KeyBinding, MessageComposerAction, NavigationAction, RoomAction,
-    RoomListAction } from "./KeyBindingsManager";
+import {
+    AutocompleteAction,
+    IKeyBindingsProvider,
+    KeyBinding,
+    MessageComposerAction,
+    NavigationAction,
+    RoomAction,
+    RoomListAction,
+} from "./KeyBindingsManager";
 import { isMac, Key } from "./Keyboard";
 import SettingsStore from "./settings/SettingsStore";
 
@@ -321,6 +328,14 @@ const navigationBindings = (): KeyBinding<NavigationAction>[] => {
                 ctrlOrCmd: true,
             },
         },
+        {
+            action: NavigationAction.ToggleSpacePanel,
+            keyCombo: {
+                key: Key.D,
+                ctrlOrCmd: true,
+                shiftKey: true,
+            },
+        },
         {
             action: NavigationAction.ToggleRoomSidePanel,
             keyCombo: {

src/KeyBindingsManager.ts

@@ -105,6 +105,8 @@ export enum RoomAction {
 export enum NavigationAction {
     /** Jump to room search (search for a room) */
     FocusRoomSearch = 'FocusRoomSearch',
+    /** Toggle the space panel */
+    ToggleSpacePanel = 'ToggleSpacePanel',
     /** Toggle the room side panel */
     ToggleRoomSidePanel = 'ToggleRoomSidePanel',
     /** Toggle the user menu */

src/accessibility/KeyboardShortcuts.tsx

@@ -253,6 +253,12 @@ const shortcuts: Record<Categories, IShortcut[]> = {
                 key: Key.SPACE,
             }],
             description: _td("Activate selected button"),
+        }, {
+            keybinds: [{
+                modifiers: [CMD_OR_CTRL, Modifiers.SHIFT],
+                key: Key.D,
+            }],
+            description: _td("Toggle space panel"),
         }, {
             keybinds: [{
                 modifiers: [CMD_OR_CTRL],
@@ -348,7 +354,7 @@ const Shortcut: React.FC<{
             }
 
             return <div key={s.key}>
-                { s.modifiers && s.modifiers.map(m => {
+                { s.modifiers?.map(m => {
                     return <React.Fragment key={m}>
                         <kbd>{ modifierIcon[m] || _t(m) }</kbd>+
                     </React.Fragment>;

src/components/structures/LoggedInView.tsx

@@ -27,17 +27,14 @@ import { IMatrixClientCreds } from '../../MatrixClientPeg';
 import SettingsStore from "../../settings/SettingsStore";
 
 import ResizeHandle from '../views/elements/ResizeHandle';
-import { Resizer, CollapseDistributor } from '../../resizer';
+import { CollapseDistributor, Resizer } from '../../resizer';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import * as KeyboardShortcuts from "../../accessibility/KeyboardShortcuts";
 import HomePage from "./HomePage";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import PlatformPeg from "../../PlatformPeg";
 import { DefaultTagID } from "../../stores/room-list/models";
-import {
-    showToast as showServerLimitToast,
-    hideToast as hideServerLimitToast,
-} from "../../toasts/ServerLimitToast";
+import { hideToast as hideServerLimitToast, showToast as showServerLimitToast } from "../../toasts/ServerLimitToast";
 import { Action } from "../../dispatcher/actions";
 import LeftPanel from "./LeftPanel";
 import CallContainer from '../views/voip/CallContainer';
@@ -505,6 +502,10 @@ class LoggedInView extends React.Component<IProps, IState> {
                 Modal.closeCurrentModal("homeKeyboardShortcut");
                 handled = true;
                 break;
+            case NavigationAction.ToggleSpacePanel:
+                dis.fire(Action.ToggleSpacePanel);
+                handled = true;
+                break;
             case NavigationAction.ToggleRoomSidePanel:
                 if (this.props.page_type === "room_view" || this.props.page_type === "group_view") {
                     dis.dispatch<ToggleRightPanelPayload>({

src/components/structures/UserMenu.tsx

@@ -523,14 +523,14 @@ export default class UserMenu extends React.Component<IProps, IState> {
             </div>;
         }
 
-        return (
+        return <div className="mx_UserMenu">
             <ContextMenuButton
                 onClick={this.onOpenMenuClick}
                 inputRef={this.buttonRef}
                 label={_t("User menu")}
                 isExpanded={!!this.state.contextMenuPosition}
                 onContextMenu={this.onContextMenu}
-                className={classNames("mx_UserMenu", {
+                className={classNames({
                     mx_UserMenu_cutout: badge,
                 })}
             >
@@ -550,6 +550,8 @@ export default class UserMenu extends React.Component<IProps, IState> {
 
                 { this.renderContextMenu() }
             </ContextMenuButton>
-        );
+
+            { this.props.children }
+        </div>;
     }
 }

src/components/views/spaces/SpacePanel.tsx

@@ -58,6 +58,11 @@ import QuickSettingsButton from "./QuickSettingsButton";
 import { useSettingValue } from "../../../hooks/useSettings";
 import UserMenu from "../../structures/UserMenu";
 import IndicatorScrollbar from "../../structures/IndicatorScrollbar";
+import { isMac } from "../../../Keyboard";
+import { useDispatcher } from "../../../hooks/useDispatcher";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import { ActionPayload } from "../../../dispatcher/payloads";
+import { Action } from "../../../dispatcher/actions";
 
 const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
     const invites = useEventEmitterState<Room[]>(SpaceStore.instance, UPDATE_INVITED_SPACES, () => {
@@ -293,6 +298,12 @@ const SpacePanel = () => {
         return () => UIStore.instance.stopTrackingElementDimensions("SpacePanel");
     }, []);
 
+    useDispatcher(defaultDispatcher, (payload: ActionPayload) => {
+        if (payload.action === Action.ToggleSpacePanel) {
+            setPanelCollapsed(!isPanelCollapsed);
+        }
+    });
+
     return (
         <DragDropContext onDragEnd={result => {
             if (!result.destination) return; // dropped outside the list
@@ -307,7 +318,21 @@ const SpacePanel = () => {
                         aria-label={_t("Spaces")}
                         ref={ref}
                     >
-                        <UserMenu isPanelCollapsed={isPanelCollapsed} />
+                        <UserMenu isPanelCollapsed={isPanelCollapsed}>
+                            <AccessibleTooltipButton
+                                className={classNames("mx_SpacePanel_toggleCollapse", { expanded: !isPanelCollapsed })}
+                                onClick={() => setPanelCollapsed(!isPanelCollapsed)}
+                                title={isPanelCollapsed ? _t("Expand") : _t("Collapse")}
+                                tooltip={<div>
+                                    <div className="mx_Tooltip_title">
+                                        { isPanelCollapsed ? _t("Expand") : _t("Collapse") }
+                                    </div>
+                                    <div className="mx_Tooltip_sub">
+                                        { isMac ? "⌘ + ⇧ + D" : "Ctrl + Shift + D" }
+                                    </div>
+                                </div>}
+                            />
+                        </UserMenu>
                         <Droppable droppableId="top-level-spaces">
                             { (provided, snapshot) => (
                                 <IndicatorScrollbar
@@ -327,14 +352,7 @@ const SpacePanel = () => {
                                 </IndicatorScrollbar>
                             ) }
                         </Droppable>
-                        <AccessibleTooltipButton
-                            className={classNames("mx_SpacePanel_toggleCollapse", { expanded: !isPanelCollapsed })}
-                            onClick={() => setPanelCollapsed(!isPanelCollapsed)}
-                            title={isPanelCollapsed ? _t("Expand space panel") : _t("Collapse space panel")}
-                            forceHide={!isPanelCollapsed}
-                        >
-                            { !isPanelCollapsed ? _t("Collapse") : null }
-                        </AccessibleTooltipButton>
+
                         { metaSpacesEnabled && <QuickSettingsButton isPanelCollapsed={isPanelCollapsed} /> }
                     </ul>
                 ) }

src/dispatcher/actions.ts

@@ -77,6 +77,11 @@ export enum Action {
      */
     ToggleUserMenu = "toggle_user_menu",
 
+    /**
+     * Toggles the Space panel. No additional payload information required.
+     */
+    ToggleSpacePanel = "toggle_space_panel",
+
     /**
      * Sets the apps root font size. Should be used with UpdateFontSizePayload
      */

src/i18n/strings/en_EN.json

@@ -1100,8 +1100,7 @@
     "Create": "Create",
     "Show all rooms": "Show all rooms",
     "Options": "Options",
-    "Expand space panel": "Expand space panel",
-    "Collapse space panel": "Collapse space panel",
+    "Expand": "Expand",
     "Collapse": "Collapse",
     "Click to copy": "Click to copy",
     "Copied!": "Copied!",
@@ -1130,7 +1129,6 @@
     "Recommended for public spaces.": "Recommended for public spaces.",
     "Jump to first unread room.": "Jump to first unread room.",
     "Jump to first invite.": "Jump to first invite.",
-    "Expand": "Expand",
     "Space options": "Space options",
     "Remove": "Remove",
     "This bridge was provisioned by <user />.": "This bridge was provisioned by <user />.",
@@ -3321,6 +3319,7 @@
     "Toggle the top left menu": "Toggle the top left menu",
     "Close dialog or context menu": "Close dialog or context menu",
     "Activate selected button": "Activate selected button",
+    "Toggle space panel": "Toggle space panel",
     "Toggle right panel": "Toggle right panel",
     "Toggle this dialog": "Toggle this dialog",
     "Go to Home View": "Go to Home View",