WIP on persisting height across collapse/expand

pull/21833/head
Bruno Windels 2019-01-28 14:35:04 +01:00
parent 2d2f9712b5
commit 0a5e8e6cfe
2 changed files with 29 additions and 42 deletions

View File

@ -87,11 +87,14 @@ module.exports = React.createClass({
if (subList) { if (subList) {
subList.setHeight(size); subList.setHeight(size);
} }
this.subListSizes[key] = size;
window.localStorage.setItem("mx_roomlist_sizes",
JSON.stringify(this.subListSizes));
// update overflow indicators // update overflow indicators
this._checkSubListsOverflow(); 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); }, this.subListSizes, this.collapsedState);
return { return {
@ -161,23 +164,6 @@ module.exports = React.createClass({
this._delayedRefreshRoomListLoopCount = 0; 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() { componentDidMount: function() {
this.dispatcherRef = dis.register(this.onAction); this.dispatcherRef = dis.register(this.onAction);
const cfg = { const cfg = {
@ -202,13 +188,9 @@ module.exports = React.createClass({
componentDidUpdate: function(prevProps) { componentDidUpdate: function(prevProps) {
this._repositionIncomingCallBox(undefined, false); this._repositionIncomingCallBox(undefined, false);
if (this.props.searchFilter !== prevProps.searchFilter) { // if (this.props.searchFilter !== prevProps.searchFilter) {
// restore sizes // this._checkSubListsOverflow();
Object.keys(this.subListSizes).forEach((key) => { // }
this._restoreSubListSize(key);
});
this._checkSubListsOverflow();
}
this._layout.update( this._layout.update(
this._layoutSections, this._layoutSections,
this.resizeContainer && this.resizeContainer.clientHeight, this.resizeContainer && this.resizeContainer.clientHeight,
@ -583,20 +565,16 @@ module.exports = React.createClass({
this.collapsedState[key] = collapsed; this.collapsedState[key] = collapsed;
window.localStorage.setItem("mx_roomlist_collapsed", JSON.stringify(this.collapsedState)); window.localStorage.setItem("mx_roomlist_collapsed", JSON.stringify(this.collapsedState));
// load the persisted size configuration of the expanded sub list // 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 // check overflow, as sub lists sizes have changed
// important this happens after calling resize above // important this happens after calling resize above
this._checkSubListsOverflow(); 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 // check overflow for scroll indicator gradient
_checkSubListsOverflow() { _checkSubListsOverflow() {
Object.values(this._subListRefs).forEach(l => l.checkOverflow()); Object.values(this._subListRefs).forEach(l => l.checkOverflow());

View File

@ -34,11 +34,11 @@ export class Layout {
constructor(applyHeight, initialSizes, collapsedState) { constructor(applyHeight, initialSizes, collapsedState) {
this._applyHeight = applyHeight; this._applyHeight = applyHeight;
this._sections = []; this._sections = [];
this._collapsedState = collapsedState || {}; this._collapsedState = Object.assign({}, collapsedState);
this._availableHeight = 0; this._availableHeight = 0;
// need to store heights by id so it doesn't get // need to store heights by id so it doesn't get
// assigned to wrong section when a section gets added? // assigned to wrong section when a section gets added?
this._sectionHeights = initialSizes || {}; this._sectionHeights = Object.assign({}, initialSizes);
this._originalHeights = []; this._originalHeights = [];
this._heights = []; this._heights = [];
} }
@ -49,10 +49,17 @@ export class Layout {
this._applyNewSize(); this._applyNewSize();
} }
setCollapsed(id, collapsed) { expandSection(id, height) {
this._collapsedState[id] = collapsed; this._collapsedState[id] = false;
this._applyNewSize();
this.openHandle(id).setHeight(height).finish();
}
collapseSection(id) {
this._collapsedState[id] = true;
this._applyNewSize(); this._applyNewSize();
} }
// [{id, count}] // [{id, count}]
update(sections, availableHeight) { update(sections, availableHeight) {
if (Number.isFinite(availableHeight)) { if (Number.isFinite(availableHeight)) {
@ -98,7 +105,7 @@ export class Layout {
this._heights = this._originalHeights.slice(0); this._heights = this._originalHeights.slice(0);
this._applyOverflow(-offset, sections, true); this._applyOverflow(-offset, sections, true);
this._applyHeights(); this._applyHeights();
this._originalHeights = this._heights; this._commitHeights();
this._sections.forEach((section, i) => { this._sections.forEach((section, i) => {
this._sectionHeights[section.id] = this._originalHeights[i]; this._sectionHeights[section.id] = this._originalHeights[i];
}); });
@ -163,7 +170,7 @@ export class Layout {
if (Math.abs(overflow) > 1.0 && unclampedSections.length > 0) { if (Math.abs(overflow) > 1.0 && unclampedSections.length > 0) {
// we weren't able to distribute all the overflow so recurse and try again // 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); overflow = this._applyOverflow(overflow, unclampedSections, blend);
} }
@ -275,10 +282,12 @@ class Handle {
setHeight(height) { setHeight(height) {
this._layout._relayout(this._anchor, height - this._initialHeight); this._layout._relayout(this._anchor, height - this._initialHeight);
return this;
} }
finish() { finish() {
this._layout._commitHeights(); this._layout._commitHeights();
return this;
} }
} }