Update space panel expand mechanism (#7230)
This commit is contained in:
parent
e2ed00db85
commit
275e9c1d02
11 changed files with 107 additions and 39 deletions
|
@ -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>({
|
||||
|
|
|
@ -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>;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
) }
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue