Tweak default right panel size to be 320px except for maximised widgets at 420px (#110)
* Add extra buttons to room summary card Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove right panel tabs in favour of X button on each panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update room summary card header to align close button correctly Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix typo in pinned messages heading Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak default right panel size to be 320px except for video rooms/maximised widgets at 420px Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Track panel resizing in analytics Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix import cycle Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update test/components/structures/MainSplit-test.tsx Co-authored-by: David Baker <dbkr@users.noreply.github.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: David Baker <dbkr@users.noreply.github.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
70418f8f3d
commit
0a9b4aecd3
26 changed files with 435 additions and 56 deletions
|
|
@ -10,8 +10,10 @@ Please see LICENSE files in the repository root for full details.
|
|||
import React, { ReactNode } from "react";
|
||||
import { NumberSize, Resizable } from "re-resizable";
|
||||
import { Direction } from "re-resizable/lib/resizer";
|
||||
import { WebPanelResize } from "@matrix-org/analytics-events/types/typescript/WebPanelResize";
|
||||
|
||||
import ResizeNotifier from "../../utils/ResizeNotifier";
|
||||
import { PosthogAnalytics } from "../../PosthogAnalytics.ts";
|
||||
|
||||
interface IProps {
|
||||
resizeNotifier: ResizeNotifier;
|
||||
|
|
@ -26,14 +28,16 @@ interface IProps {
|
|||
*/
|
||||
sizeKey?: string;
|
||||
/**
|
||||
* The size to use for the panel component if one isn't persisted in storage. Defaults to 350.
|
||||
* The size to use for the panel component if one isn't persisted in storage. Defaults to 320.
|
||||
*/
|
||||
defaultSize: number;
|
||||
|
||||
analyticsRoomType: WebPanelResize["roomType"];
|
||||
}
|
||||
|
||||
export default class MainSplit extends React.Component<IProps> {
|
||||
public static defaultProps = {
|
||||
defaultSize: 350,
|
||||
defaultSize: 320,
|
||||
};
|
||||
|
||||
private onResizeStart = (): void => {
|
||||
|
|
@ -58,11 +62,16 @@ export default class MainSplit extends React.Component<IProps> {
|
|||
elementRef: HTMLElement,
|
||||
delta: NumberSize,
|
||||
): void => {
|
||||
const newSize = this.loadSidePanelSize().width + delta.width;
|
||||
this.props.resizeNotifier.stopResizing();
|
||||
window.localStorage.setItem(
|
||||
this.sizeSettingStorageKey,
|
||||
(this.loadSidePanelSize().width + delta.width).toString(),
|
||||
);
|
||||
window.localStorage.setItem(this.sizeSettingStorageKey, newSize.toString());
|
||||
|
||||
PosthogAnalytics.instance.trackEvent<WebPanelResize>({
|
||||
eventName: "WebPanelResize",
|
||||
panel: "right",
|
||||
roomType: this.props.analyticsRoomType,
|
||||
size: newSize,
|
||||
});
|
||||
};
|
||||
|
||||
private loadSidePanelSize(): { height: string | number; width: number } {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
|||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React, { ChangeEvent, createRef, ReactElement, ReactNode, RefObject, useContext } from "react";
|
||||
import React, { ChangeEvent, ComponentProps, createRef, ReactElement, ReactNode, RefObject, useContext } from "react";
|
||||
import classNames from "classnames";
|
||||
import {
|
||||
IRecommendedVersion,
|
||||
|
|
@ -54,7 +54,7 @@ import WidgetEchoStore from "../../stores/WidgetEchoStore";
|
|||
import SettingsStore from "../../settings/SettingsStore";
|
||||
import { Layout } from "../../settings/enums/Layout";
|
||||
import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
|
||||
import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
|
||||
import RoomContext, { TimelineRenderingType, MainSplitContentType } from "../../contexts/RoomContext";
|
||||
import { E2EStatus, shieldStatusForRoom } from "../../utils/ShieldUtils";
|
||||
import { Action } from "../../dispatcher/actions";
|
||||
import { IMatrixClientCreds } from "../../MatrixClientPeg";
|
||||
|
|
@ -152,13 +152,8 @@ interface IRoomProps {
|
|||
onRegistered?(credentials: IMatrixClientCreds): void;
|
||||
}
|
||||
|
||||
// This defines the content of the mainSplit.
|
||||
// If the mainSplit does not contain the Timeline, the chat is shown in the right panel.
|
||||
export enum MainSplitContentType {
|
||||
Timeline,
|
||||
MaximisedWidget,
|
||||
Call,
|
||||
}
|
||||
export { MainSplitContentType };
|
||||
|
||||
export interface IRoomState {
|
||||
room?: Room;
|
||||
virtualRoom?: Room;
|
||||
|
|
@ -191,11 +186,6 @@ export interface IRoomState {
|
|||
showApps: boolean;
|
||||
isPeeking: boolean;
|
||||
showRightPanel: boolean;
|
||||
/**
|
||||
* Whether the right panel shown is either of ThreadPanel or ThreadView.
|
||||
* Always false when `showRightPanel` is false.
|
||||
*/
|
||||
threadRightPanel: boolean;
|
||||
// error object, as from the matrix client/server API
|
||||
// If we failed to load information about the room,
|
||||
// store the error here.
|
||||
|
|
@ -234,7 +224,7 @@ export interface IRoomState {
|
|||
e2eStatus?: E2EStatus;
|
||||
rejecting?: boolean;
|
||||
hasPinnedWidgets?: boolean;
|
||||
mainSplitContentType?: MainSplitContentType;
|
||||
mainSplitContentType: MainSplitContentType;
|
||||
// whether or not a spaces context switch brought us here,
|
||||
// if it did we don't want the room to be marked as read as soon as it is loaded.
|
||||
wasContextSwitch?: boolean;
|
||||
|
|
@ -399,7 +389,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
|||
showApps: false,
|
||||
isPeeking: false,
|
||||
showRightPanel: false,
|
||||
threadRightPanel: false,
|
||||
joining: false,
|
||||
showTopUnreadMessagesBar: false,
|
||||
statusBarVisible: false,
|
||||
|
|
@ -626,11 +615,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
|||
mainSplitContentType: room ? this.getMainSplitContentType(room) : undefined,
|
||||
initialEventId: undefined, // default to clearing this, will get set later in the method if needed
|
||||
showRightPanel: roomId ? this.context.rightPanelStore.isOpenForRoom(roomId) : false,
|
||||
threadRightPanel: roomId
|
||||
? [RightPanelPhases.ThreadView, RightPanelPhases.ThreadPanel].includes(
|
||||
this.context.rightPanelStore.currentCardForRoom(roomId).phase!,
|
||||
)
|
||||
: false,
|
||||
activeCall: roomId ? CallStore.instance.getActiveCall(roomId) : null,
|
||||
promptAskToJoin: this.context.roomViewStore.promptAskToJoin(),
|
||||
viewRoomOpts: this.context.roomViewStore.getViewRoomOpts(),
|
||||
|
|
@ -1033,11 +1017,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
|||
const { roomId } = this.state;
|
||||
this.setState({
|
||||
showRightPanel: roomId ? this.context.rightPanelStore.isOpenForRoom(roomId) : false,
|
||||
threadRightPanel: roomId
|
||||
? [RightPanelPhases.ThreadView, RightPanelPhases.ThreadPanel].includes(
|
||||
this.context.rightPanelStore.currentCardForRoom(roomId).phase!,
|
||||
)
|
||||
: false,
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -2531,6 +2510,17 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
|||
}
|
||||
const mainSplitContentClasses = classNames("mx_RoomView_body", mainSplitContentClassName);
|
||||
|
||||
let sizeKey: string | undefined;
|
||||
let defaultSize: number | undefined;
|
||||
let analyticsRoomType: ComponentProps<typeof MainSplit>["analyticsRoomType"] = "other_room";
|
||||
if (this.state.mainSplitContentType !== MainSplitContentType.Timeline) {
|
||||
// Override defaults for video rooms where more space is needed for the chat timeline
|
||||
sizeKey = "wide";
|
||||
defaultSize = 420;
|
||||
analyticsRoomType =
|
||||
this.state.mainSplitContentType === MainSplitContentType.Call ? "video_room" : "maximised_widget";
|
||||
}
|
||||
|
||||
return (
|
||||
<RoomContext.Provider value={this.state}>
|
||||
<div className={mainClasses} ref={this.roomView} onKeyDown={this.onReactKeyDown}>
|
||||
|
|
@ -2541,10 +2531,9 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
|
|||
<MainSplit
|
||||
panel={rightPanel}
|
||||
resizeNotifier={this.props.resizeNotifier}
|
||||
// Override defaults when a thread is being shown to allow persisting a separate
|
||||
// right panel width for thread panels as they tend to want to be wider.
|
||||
sizeKey={this.state.threadRightPanel ? "thread" : undefined}
|
||||
defaultSize={this.state.threadRightPanel ? 500 : undefined}
|
||||
sizeKey={sizeKey}
|
||||
defaultSize={defaultSize}
|
||||
analyticsRoomType={analyticsRoomType}
|
||||
>
|
||||
<div
|
||||
className={mainSplitContentClasses}
|
||||
|
|
|
|||
|
|
@ -764,7 +764,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
|
|||
return (
|
||||
<main className="mx_SpaceRoomView">
|
||||
<ErrorBoundary>
|
||||
<MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
|
||||
<MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier} analyticsRoomType="space">
|
||||
{this.renderBody()}
|
||||
</MainSplit>
|
||||
</ErrorBoundary>
|
||||
|
|
|
|||
|
|
@ -87,7 +87,12 @@ export default class UserView extends React.Component<IProps, IState> {
|
|||
/>
|
||||
);
|
||||
return (
|
||||
<MainSplit panel={panel} resizeNotifier={this.props.resizeNotifier}>
|
||||
<MainSplit
|
||||
panel={panel}
|
||||
resizeNotifier={this.props.resizeNotifier}
|
||||
defaultSize={420}
|
||||
analyticsRoomType="user_profile"
|
||||
>
|
||||
<UserOnboardingPage />
|
||||
</MainSplit>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue