imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Allow maintaining a different right panel width for thread panels (#11064)

Browse source 
* Move Room context threadId our of RoomView state

* Allow maintaining a different right panel width for thread panels

* Fix types

* Fix types

* Add tests

* Increase coverage

* Increase coverage

* Add comments

* Update src/components/structures/MainSplit.tsx

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
Michael Telatynski 2023-06-15 12:57:58 +01:00 • committed by GitHub
parent cb2b1718ff
commit 7236e48765
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 190 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/structures/MainSplit.tsx
View file

@ -26,9 +26,24 @@ interface IProps {
collapsedRhs?: boolean;
panel?: JSX.Element;
children: ReactNode;
/**
* A unique identifier for this panel split.
*
* This is appended to the key used to store the panel size in localStorage, allowing the widths of different
* panels to be stored.
*/
sizeKey?: string;
/**
* The size to use for the panel component if one isn't persisted in storage. Defaults to 350.
*/
defaultSize: number;
}
export default class MainSplit extends React.Component<IProps> {
public static defaultProps = {
defaultSize: 350,
};
private onResizeStart = (): void => {
this.props.resizeNotifier.startResizing();
};
@ -37,6 +52,14 @@ export default class MainSplit extends React.Component<IProps> {
this.props.resizeNotifier.notifyRightHandleResized();
};
private get sizeSettingStorageKey(): string {
let key = "mx_rhs_size";
if (!!this.props.sizeKey) {
key += `_${this.props.sizeKey}`;
}
return key;
}
private onResizeStop = (
event: MouseEvent | TouchEvent,
direction: Direction,
@ -44,14 +67,17 @@ export default class MainSplit extends React.Component<IProps> {
delta: NumberSize,
): void => {
this.props.resizeNotifier.stopResizing();
window.localStorage.setItem("mx_rhs_size", (this.loadSidePanelSize().width + delta.width).toString());
window.localStorage.setItem(
this.sizeSettingStorageKey,
(this.loadSidePanelSize().width + delta.width).toString(),
);
};
private loadSidePanelSize(): { height: string | number; width: number } {
let rhsSize = parseInt(window.localStorage.getItem("mx_rhs_size")!, 10);
let rhsSize = parseInt(window.localStorage.getItem(this.sizeSettingStorageKey)!, 10);
if (isNaN(rhsSize)) {
rhsSize = 350;
rhsSize = this.props.defaultSize;
}
return {
@ -70,6 +96,7 @@ export default class MainSplit extends React.Component<IProps> {
if (hasResizer) {
children = (
<Resizable
key={this.props.sizeKey}
defaultSize={this.loadSidePanelSize()}
minWidth={264}
maxWidth="50%"