mirror of
https://github.com/element-hq/element-web
synced 2024-11-24 10:15:43 +03:00
clear width of right panel container when collapsed in grid view
This commit is contained in:
parent
b63bd5ea54
commit
81c48f07c7
4 changed files with 27 additions and 8 deletions
|
@ -104,7 +104,7 @@ export default class RoomGridView extends React.Component {
|
|||
}
|
||||
|
||||
return (<main className="mx_GroupGridView">
|
||||
<MainSplit panel={rightPanel}>
|
||||
<MainSplit panel={rightPanel} disableSizing={this.props.collapsedRhs} >
|
||||
<div className="mx_GroupGridView_rooms">
|
||||
{ roomStores.map((roomStore, i) => {
|
||||
if (roomStore) {
|
||||
|
|
|
@ -71,14 +71,17 @@ export default class MainSplit extends React.Component {
|
|||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const wasExpanded = !this.props.collapsedRhs && prevProps.collapsedRhs;
|
||||
const wasCollapsed = this.props.collapsedRhs && !prevProps.collapsedRhs;
|
||||
const wasPanelSet = this.props.panel && !prevProps.panel;
|
||||
const wasPanelCleared = !this.props.panel && prevProps.panel;
|
||||
const shouldAllowResizing =
|
||||
!this.props.disableSizing &&
|
||||
!this.props.collapsedRhs &&
|
||||
this.props.panel;
|
||||
|
||||
if (wasExpanded || wasPanelSet) {
|
||||
if (shouldAllowResizing && !this.resizer) {
|
||||
this._createResizer();
|
||||
} else if (wasCollapsed || wasPanelCleared) {
|
||||
} else if (!shouldAllowResizing && this.resizer) {
|
||||
if (this.props.disableSizing) {
|
||||
this.resizer.clearItemSizes();
|
||||
}
|
||||
this.resizer.detach();
|
||||
this.resizer = null;
|
||||
}
|
||||
|
|
|
@ -43,6 +43,14 @@ export class Resizer {
|
|||
this._onMouseDown = this._onMouseDown.bind(this);
|
||||
}
|
||||
|
||||
clearItemSizes() {
|
||||
const handles = this._getResizeHandles();
|
||||
handles.forEach((handle) => {
|
||||
const {sizer, item} = this._createSizerAndDistributor(handle);
|
||||
sizer.clearItemSize(item);
|
||||
});
|
||||
}
|
||||
|
||||
setClassNames(classNames) {
|
||||
this.classNames = classNames;
|
||||
}
|
||||
|
@ -134,7 +142,7 @@ export class Resizer {
|
|||
const distributor = new this.distributorCtor(
|
||||
sizer, item, id, this.distributorCfg,
|
||||
items, this.container);
|
||||
return {sizer, distributor};
|
||||
return {sizer, distributor, item};
|
||||
}
|
||||
|
||||
_getResizableItems() {
|
||||
|
|
|
@ -82,6 +82,14 @@ class Sizer {
|
|||
}
|
||||
}
|
||||
|
||||
clearItemSize(item, size) {
|
||||
if (this.vertical) {
|
||||
item.style.height = null;
|
||||
} else {
|
||||
item.style.width = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@param {MouseEvent} event the mouse event
|
||||
@return {number} the distance between the cursor and the edge of the container,
|
||||
|
|
Loading…
Reference in a new issue