mirror of https://github.com/vector-im/riot-web
clear width of right panel container when collapsed in grid view
parent
b63bd5ea54
commit
81c48f07c7
|
@ -104,7 +104,7 @@ export default class RoomGridView extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (<main className="mx_GroupGridView">
|
return (<main className="mx_GroupGridView">
|
||||||
<MainSplit panel={rightPanel}>
|
<MainSplit panel={rightPanel} disableSizing={this.props.collapsedRhs} >
|
||||||
<div className="mx_GroupGridView_rooms">
|
<div className="mx_GroupGridView_rooms">
|
||||||
{ roomStores.map((roomStore, i) => {
|
{ roomStores.map((roomStore, i) => {
|
||||||
if (roomStore) {
|
if (roomStore) {
|
||||||
|
|
|
@ -71,14 +71,17 @@ export default class MainSplit extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
componentDidUpdate(prevProps) {
|
||||||
const wasExpanded = !this.props.collapsedRhs && prevProps.collapsedRhs;
|
const shouldAllowResizing =
|
||||||
const wasCollapsed = this.props.collapsedRhs && !prevProps.collapsedRhs;
|
!this.props.disableSizing &&
|
||||||
const wasPanelSet = this.props.panel && !prevProps.panel;
|
!this.props.collapsedRhs &&
|
||||||
const wasPanelCleared = !this.props.panel && prevProps.panel;
|
this.props.panel;
|
||||||
|
|
||||||
if (wasExpanded || wasPanelSet) {
|
if (shouldAllowResizing && !this.resizer) {
|
||||||
this._createResizer();
|
this._createResizer();
|
||||||
} else if (wasCollapsed || wasPanelCleared) {
|
} else if (!shouldAllowResizing && this.resizer) {
|
||||||
|
if (this.props.disableSizing) {
|
||||||
|
this.resizer.clearItemSizes();
|
||||||
|
}
|
||||||
this.resizer.detach();
|
this.resizer.detach();
|
||||||
this.resizer = null;
|
this.resizer = null;
|
||||||
}
|
}
|
||||||
|
|
|
@ -43,6 +43,14 @@ export class Resizer {
|
||||||
this._onMouseDown = this._onMouseDown.bind(this);
|
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) {
|
setClassNames(classNames) {
|
||||||
this.classNames = classNames;
|
this.classNames = classNames;
|
||||||
}
|
}
|
||||||
|
@ -134,7 +142,7 @@ export class Resizer {
|
||||||
const distributor = new this.distributorCtor(
|
const distributor = new this.distributorCtor(
|
||||||
sizer, item, id, this.distributorCfg,
|
sizer, item, id, this.distributorCfg,
|
||||||
items, this.container);
|
items, this.container);
|
||||||
return {sizer, distributor};
|
return {sizer, distributor, item};
|
||||||
}
|
}
|
||||||
|
|
||||||
_getResizableItems() {
|
_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
|
@param {MouseEvent} event the mouse event
|
||||||
@return {number} the distance between the cursor and the edge of the container,
|
@return {number} the distance between the cursor and the edge of the container,
|
||||||
|
|
Loading…
Reference in New Issue