mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 19:26:04 +03:00
Code Issues Projects Releases Packages Wiki Activity

Tweak resizer collapse distributor behaviour to work with the expanding space panel

Browse source
This commit is contained in:
Michael Telatynski 2021-03-02 14:02:03 +00:00
parent e479edd47a
commit 4e93452275
2 changed files with 19 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/structures/LoggedInView.tsx
View file

@ -223,7 +223,14 @@ class LoggedInView extends React.Component<IProps, IState> {
let size; let size;
let collapsed; let collapsed;
const collapseConfig: ICollapseConfig = { const collapseConfig: ICollapseConfig = {
toggleSize: 260 - 50, // TODO: the space panel currently does not have a fixed width,
// just the headers at each level have a max-width of 150px
// Taking 222px for the space panel for now,
// so this will look slightly off for now,
// depending on the depth of your space tree.
// To fix this, we'll need to turn toggleSize
// into a callback so it can be measured when starting the resize operation
toggleSize: 222 + 68,
onCollapsed: (_collapsed) => { onCollapsed: (_collapsed) => {
collapsed = _collapsed; collapsed = _collapsed;
if (_collapsed) { if (_collapsed) {
@ -244,6 +251,9 @@ class LoggedInView extends React.Component<IProps, IState> {
if (!collapsed) window.localStorage.setItem("mx_lhs_size", '' + size); if (!collapsed) window.localStorage.setItem("mx_lhs_size", '' + size);
this.props.resizeNotifier.stopResizing(); this.props.resizeNotifier.stopResizing();
}, },
isItemCollapsed: domNode => {
return domNode.classList.contains("mx_LeftPanel_minimized");
},
}; };
const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig); const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig);
resizer.setClassNames({ resizer.setClassNames({

9
src/resizer/distributors/collapse.ts
View file

@ -22,6 +22,7 @@ import Sizer from "../sizer";
export interface ICollapseConfig extends IConfig { export interface ICollapseConfig extends IConfig {
toggleSize: number; toggleSize: number;
onCollapsed?(collapsed: boolean, id: string, element: HTMLElement): void; onCollapsed?(collapsed: boolean, id: string, element: HTMLElement): void;
isItemCollapsed(element: HTMLElement): boolean;
} }
class CollapseItem extends ResizeItem<ICollapseConfig> { class CollapseItem extends ResizeItem<ICollapseConfig> {
@ -31,6 +32,11 @@ class CollapseItem extends ResizeItem<ICollapseConfig> {
callback(collapsed, this.id, this.domNode); callback(collapsed, this.id, this.domNode);
} }
} }
get isCollapsed() {
const isItemCollapsed = this.resizer.config.isItemCollapsed;
return isItemCollapsed(this.domNode);
}
} }
export default class CollapseDistributor extends FixedDistributor<ICollapseConfig, CollapseItem> { export default class CollapseDistributor extends FixedDistributor<ICollapseConfig, CollapseItem> {
@ -39,11 +45,12 @@ export default class CollapseDistributor extends FixedDistributor<ICollapseConfi
} }
private readonly toggleSize: number; private readonly toggleSize: number;
private isCollapsed = false; private isCollapsed: boolean;
constructor(item: CollapseItem) { constructor(item: CollapseItem) {
super(item); super(item);
this.toggleSize = item.resizer?.config?.toggleSize; this.toggleSize = item.resizer?.config?.toggleSize;
this.isCollapsed = item.isCollapsed;
} }
public resize(newSize: number) { public resize(newSize: number) {