nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Tweak default right panel size to be 320px except for maximised widgets at 420px (#110)

Browse Source 
* 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
2024-10-04 10:41:00 +01:00
committed by GitHub
parent 70418f8f3d
commit 0a9b4aecd3
26 changed files with 435 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/structures/MainSplit.tsx
View File

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