clear width of right panel container when collapsed in grid view

pull/21833/head
Bruno Windels 2019-01-07 15:20:39 +01:00
parent b63bd5ea54
commit 81c48f07c7
4 changed files with 27 additions and 8 deletions

View File

@ -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) {

View File

@ -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;
} }

View File

@ -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() {

View File

@ -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,