New space panel expand mechanism

t3chguy · t3chguy · commit 6b1cde070fd9 · 2021-12-06T16:33:33.000Z
diff --git a/res/css/structures/_SpacePanel.scss b/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,20 +47,47 @@ $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);
+            transition: transform 200ms linear;
+        }
+
+        &: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%;
+
+        &:not(.expanded) {
+            transition: opacity 500ms linear;
         }
     }
 
diff --git a/res/css/structures/_UserMenu.scss b/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;
diff --git a/res/img/element-icons/expand-space-panel.svg b/res/img/element-icons/expand-space-panel.svg
diff --git a/src/KeyBindingsDefaults.ts b/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: {
diff --git a/src/KeyBindingsManager.ts b/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 */
diff --git a/src/accessibility/KeyboardShortcuts.tsx b/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>;
diff --git a/src/components/structures/LoggedInView.tsx b/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>({
diff --git a/src/components/structures/UserMenu.tsx b/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>;
     }
 }
diff --git a/src/components/views/spaces/SpacePanel.tsx b/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>
                 ) }
diff --git a/src/dispatcher/actions.ts b/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
      */
diff --git a/src/i18n/strings/en_EN.json b/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",

Original file line number	Diff line number	Diff line change
`@@ -523,14 +523,14 @@ export default class UserMenu extends React.Component<IProps, IState> {`
`523`	`523`	`</div>;`
`524`	`524`	`}`
`525`	`525`
`526`		`- return (`
	`526`	`+ return <div className="mx_UserMenu">`
`527`	`527`	`<ContextMenuButton`
`528`	`528`	`onClick={this.onOpenMenuClick}`
`529`	`529`	`inputRef={this.buttonRef}`
`530`	`530`	`label={_t("User menu")}`
`531`	`531`	`isExpanded={!!this.state.contextMenuPosition}`
`532`	`532`	`onContextMenu={this.onContextMenu}`
`533`		`- className={classNames("mx_UserMenu", {`
	`533`	`+ className={classNames({`
`534`	`534`	`mx_UserMenu_cutout: badge,`
`535`	`535`	`})}`
`536`	`536`	`>`
`@@ -550,6 +550,8 @@ export default class UserMenu extends React.Component<IProps, IState> {`
`550`	`550`
`551`	`551`	`{ this.renderContextMenu() }`
`552`	`552`	`</ContextMenuButton>`
`553`		`- );`
	`553`	`+`
	`554`	`+ { this.props.children }`
	`555`	`+ </div>;`
`554`	`556`	`}`
`555`	`557`	`}`