diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index 3cbd8b0a4b..f79ca64869 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -87,11 +87,14 @@ module.exports = React.createClass({ if (subList) { subList.setHeight(size); } - this.subListSizes[key] = size; - window.localStorage.setItem("mx_roomlist_sizes", - JSON.stringify(this.subListSizes)); // update overflow indicators this._checkSubListsOverflow(); + // don't store height for collapsed sublists + if(!this.collapsedState[key]) { + this.subListSizes[key] = size; + window.localStorage.setItem("mx_roomlist_sizes", + JSON.stringify(this.subListSizes)); + } }, this.subListSizes, this.collapsedState); return { @@ -161,23 +164,6 @@ module.exports = React.createClass({ this._delayedRefreshRoomListLoopCount = 0; }, - _onSubListResize: function(newSize, id) { - if (!id) { - return; - } - if (typeof newSize === "string") { - newSize = Number.MAX_SAFE_INTEGER; - } - if (newSize === null) { - delete this.subListSizes[id]; - } else { - this.subListSizes[id] = newSize; - } - window.localStorage.setItem("mx_roomlist_sizes", JSON.stringify(this.subListSizes)); - // update overflow indicators - this._checkSubListsOverflow(); - }, - componentDidMount: function() { this.dispatcherRef = dis.register(this.onAction); const cfg = { @@ -202,13 +188,9 @@ module.exports = React.createClass({ componentDidUpdate: function(prevProps) { this._repositionIncomingCallBox(undefined, false); - if (this.props.searchFilter !== prevProps.searchFilter) { - // restore sizes - Object.keys(this.subListSizes).forEach((key) => { - this._restoreSubListSize(key); - }); - this._checkSubListsOverflow(); - } + // if (this.props.searchFilter !== prevProps.searchFilter) { + // this._checkSubListsOverflow(); + // } this._layout.update( this._layoutSections, this.resizeContainer && this.resizeContainer.clientHeight, @@ -583,20 +565,16 @@ module.exports = React.createClass({ this.collapsedState[key] = collapsed; window.localStorage.setItem("mx_roomlist_collapsed", JSON.stringify(this.collapsedState)); // load the persisted size configuration of the expanded sub list - this._layout.setCollapsed(key, collapsed); + if (collapsed) { + this._layout.collapseSection(key); + } else { + this._layout.expandSection(key, this.subListSizes[key]); + } // check overflow, as sub lists sizes have changed // important this happens after calling resize above this._checkSubListsOverflow(); }, - _restoreSubListSize(key) { - const size = this.subListSizes[key]; - const handle = this.resizer.forHandleWithId(key); - if (handle) { - handle.resize(size); - } - }, - // check overflow for scroll indicator gradient _checkSubListsOverflow() { Object.values(this._subListRefs).forEach(l => l.checkOverflow()); diff --git a/src/resizer/distributors/roomsublist2.js b/src/resizer/distributors/roomsublist2.js index 36c140887b..bd4c37df84 100644 --- a/src/resizer/distributors/roomsublist2.js +++ b/src/resizer/distributors/roomsublist2.js @@ -34,11 +34,11 @@ export class Layout { constructor(applyHeight, initialSizes, collapsedState) { this._applyHeight = applyHeight; this._sections = []; - this._collapsedState = collapsedState || {}; + this._collapsedState = Object.assign({}, collapsedState); this._availableHeight = 0; // need to store heights by id so it doesn't get // assigned to wrong section when a section gets added? - this._sectionHeights = initialSizes || {}; + this._sectionHeights = Object.assign({}, initialSizes); this._originalHeights = []; this._heights = []; } @@ -49,10 +49,17 @@ export class Layout { this._applyNewSize(); } - setCollapsed(id, collapsed) { - this._collapsedState[id] = collapsed; + expandSection(id, height) { + this._collapsedState[id] = false; + this._applyNewSize(); + this.openHandle(id).setHeight(height).finish(); + } + + collapseSection(id) { + this._collapsedState[id] = true; this._applyNewSize(); } + // [{id, count}] update(sections, availableHeight) { if (Number.isFinite(availableHeight)) { @@ -98,7 +105,7 @@ export class Layout { this._heights = this._originalHeights.slice(0); this._applyOverflow(-offset, sections, true); this._applyHeights(); - this._originalHeights = this._heights; + this._commitHeights(); this._sections.forEach((section, i) => { this._sectionHeights[section.id] = this._originalHeights[i]; }); @@ -163,7 +170,7 @@ export class Layout { if (Math.abs(overflow) > 1.0 && unclampedSections.length > 0) { // we weren't able to distribute all the overflow so recurse and try again - log("recursing with", overflow, unclampedSections); + // log("recursing with", overflow, unclampedSections); overflow = this._applyOverflow(overflow, unclampedSections, blend); } @@ -275,10 +282,12 @@ class Handle { setHeight(height) { this._layout._relayout(this._anchor, height - this._initialHeight); + return this; } finish() { this._layout._commitHeights(); + return this; } }