Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 05:04:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

WIP on persisting height across collapse/expand

Browse Source
This commit is contained in:
Bruno Windels 2019-01-28 14:35:04 +01:00
parent 2d2f9712b5
commit 0a5e8e6cfe
2 changed files with 29 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/views/rooms/RoomList.js
View File

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

21
src/resizer/distributors/roomsublist2.js
View File

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