Tweak resizer collapse distributor behaviour to work with the expanding space panel
This commit is contained in:
parent
e479edd47a
commit
4e93452275
2 changed files with 19 additions and 2 deletions
|
@ -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({
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue