1
0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-12-08 17:48:33 +03:00

Update space panel expand mechanism (#7230)

This commit is contained in:
Michael Telatynski
2021-12-07 09:32:00 +00:00
committed by GitHub
parent e2ed00db85
commit 275e9c1d02
11 changed files with 107 additions and 39 deletions

View File

@@ -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>
) }