From 275e9c1d026fcd7e4144ec2e236bbb14bb64082f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 7 Dec 2021 09:32:00 +0000 Subject: [PATCH] Update space panel expand mechanism (#7230) --- res/css/structures/_SpacePanel.scss | 41 ++++++++++++++------ res/css/structures/_UserMenu.scss | 7 +++- res/img/element-icons/expand-space-panel.svg | 4 -- src/KeyBindingsDefaults.ts | 19 ++++++++- src/KeyBindingsManager.ts | 2 + src/accessibility/KeyboardShortcuts.tsx | 8 +++- src/components/structures/LoggedInView.tsx | 11 +++--- src/components/structures/UserMenu.tsx | 8 ++-- src/components/views/spaces/SpacePanel.tsx | 36 ++++++++++++----- src/dispatcher/actions.ts | 5 +++ src/i18n/strings/en_EN.json | 5 +-- 11 files changed, 107 insertions(+), 39 deletions(-) delete mode 100644 res/img/element-icons/expand-space-panel.svg diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss index b2a3cef1b9..781beaa149 100644 --- 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,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; diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss index 66b89975e8..5e0d4f6f15 100644 --- 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 deleted file mode 100644 index 11232acd58..0000000000 --- a/res/img/element-icons/expand-space-panel.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/KeyBindingsDefaults.ts b/src/KeyBindingsDefaults.ts index 6169f431f4..75222d9121 100644 --- 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[] => { 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 index 3a893e2ec8..1eb6b689f0 100644 --- 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 index c66984191f..d183487329 100644 --- a/src/accessibility/KeyboardShortcuts.tsx +++ b/src/accessibility/KeyboardShortcuts.tsx @@ -253,6 +253,12 @@ const shortcuts: Record = { 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
- { s.modifiers && s.modifiers.map(m => { + { s.modifiers?.map(m => { return { modifierIcon[m] || _t(m) }+ ; diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 427e5f8467..e19725ff60 100644 --- 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 { 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({ diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index 56b5dd4d0e..4c7e01bcdd 100644 --- a/src/components/structures/UserMenu.tsx +++ b/src/components/structures/UserMenu.tsx @@ -523,14 +523,14 @@ export default class UserMenu extends React.Component {
; } - return ( + return
@@ -550,6 +550,8 @@ export default class UserMenu extends React.Component { { this.renderContextMenu() } - ); + + { this.props.children } +
; } } diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx index d945ca395a..9d20782a7e 100644 --- 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(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 ( { if (!result.destination) return; // dropped outside the list @@ -307,7 +318,21 @@ const SpacePanel = () => { aria-label={_t("Spaces")} ref={ref} > - + + setPanelCollapsed(!isPanelCollapsed)} + title={isPanelCollapsed ? _t("Expand") : _t("Collapse")} + tooltip={
+
+ { isPanelCollapsed ? _t("Expand") : _t("Collapse") } +
+
+ { isMac ? "⌘ + ⇧ + D" : "Ctrl + Shift + D" } +
+
} + /> + { (provided, snapshot) => ( { ) } - setPanelCollapsed(!isPanelCollapsed)} - title={isPanelCollapsed ? _t("Expand space panel") : _t("Collapse space panel")} - forceHide={!isPanelCollapsed} - > - { !isPanelCollapsed ? _t("Collapse") : null } - + { metaSpacesEnabled && } ) } diff --git a/src/dispatcher/actions.ts b/src/dispatcher/actions.ts index 4e49c1e61b..4133198dd6 100644 --- 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 index 1637b0908c..403fab8d03 100644 --- 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 .": "This bridge was provisioned by .", @@ -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",