+
{ this._getHeaderJsx() }
{ content }
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js
index 1a714e3a84..647e755456 100644
--- a/src/components/views/rooms/RoomList.js
+++ b/src/components/views/rooms/RoomList.js
@@ -36,7 +36,8 @@ import GroupStore from '../../../stores/GroupStore';
import RoomSubList from '../../structures/RoomSubList';
import ResizeHandle from '../elements/ResizeHandle';
-import {Resizer, RoomSubListDistributor} from '../../../resizer'
+import {Resizer} from '../../../resizer'
+import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2';
const HIDE_CONFERENCE_CHANS = true;
const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
@@ -79,6 +80,20 @@ module.exports = React.createClass({
const collapsedJson = window.localStorage.getItem("mx_roomlist_collapsed");
this.subListSizes = sizesJson ? JSON.parse(sizesJson) : {};
this.collapsedState = collapsedJson ? JSON.parse(collapsedJson) : {};
+ this._layoutSections = [];
+
+ this._layout = new Layout((key, size) => {
+ const subList = this._subListRefs[key];
+ if (subList) {
+ subList.setHeight(size);
+ }
+ this.subListSizes[key] = size;
+ window.localStorage.setItem("mx_roomlist_sizes",
+ JSON.stringify(this.subListSizes));
+ // update overflow indicators
+ this._checkSubListsOverflow();
+ }, this.subListSizes, this.collapsedState);
+
return {
isLoadingLeftRooms: false,
totalRoomCount: null,
@@ -166,19 +181,18 @@ module.exports = React.createClass({
componentDidMount: function() {
this.dispatcherRef = dis.register(this.onAction);
const cfg = {
- onResized: this._onSubListResize,
+ layout: this._layout,
};
- this.resizer = new Resizer(this.resizeContainer, RoomSubListDistributor, cfg);
+ this.resizer = new Resizer(this.resizeContainer, Distributor, cfg);
this.resizer.setClassNames({
handle: "mx_ResizeHandle",
vertical: "mx_ResizeHandle_vertical",
reverse: "mx_ResizeHandle_reverse"
});
-
- // load stored sizes
- Object.keys(this.subListSizes).forEach((key) => {
- this._restoreSubListSize(key);
- });
+ this._layout.update(
+ this._layoutSections,
+ this.resizeContainer && this.resizeContainer.clientHeight,
+ );
this._checkSubListsOverflow();
this.resizer.attach();
@@ -194,6 +208,11 @@ module.exports = React.createClass({
});
this._checkSubListsOverflow();
}
+ this._layout.update(
+ this._layoutSections,
+ this.resizeContainer && this.resizeContainer.clientHeight,
+ );
+ // TODO: call layout.setAvailableHeight, window height was changed when bannerShown prop was changed
},
onAction: function(payload) {
@@ -551,9 +570,7 @@ 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
- if (!collapsed) {
- this._restoreSubListSize(key);
- }
+ this._layout.setCollapsed(key, collapsed);
// check overflow, as sub lists sizes have changed
// important this happens after calling resize above
this._checkSubListsOverflow();
@@ -581,6 +598,7 @@ module.exports = React.createClass({
},
_mapSubListProps: function(subListsProps) {
+ this._layoutSections = [];
const defaultProps = {
collapsed: this.props.collapsed,
isFiltered: !!this.props.searchFilter,
@@ -599,6 +617,7 @@ module.exports = React.createClass({
return subListsProps.reduce((components, props, i) => {
props = Object.assign({}, defaultProps, props);
const isLast = i === subListsProps.length - 1;
+ const len = props.list.length + (props.extraTiles ? props.extraTiles.length : 0);
const {key, label, onHeaderClick, ... otherProps} = props;
const chosenKey = key || label;
const onSubListHeaderClick = (collapsed) => {
@@ -608,7 +627,10 @@ module.exports = React.createClass({
}
};
const startAsHidden = props.startAsHidden || this.collapsedState[chosenKey];
-
+ this._layoutSections.push({
+ id: chosenKey,
+ count: len,
+ });
let subList = (