matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-11-20 16:22:28 +03:00
Code Activity

Merge pull request #2507 from matrix-org/bwindels/roomlistjslayout

Browse Source 
Redesign: new layout algorithm for room sublists.
This commit is contained in:
Bruno Windels
2019-01-28 14:55:31 +00:00
committed by GitHub
parent eb7112cbc0 eaf212dd89
commit 55e0838c82
7 changed files with 379 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/structures/LeftPanel.js
View File

@@ -212,6 +212,7 @@ const LeftPanel = React.createClass({
<CallPreview ConferenceHandler={VectorConferenceHandler} />
<RoomList
ref={this.collectRoomList}
toolbarShown={this.props.toolbarShown}
collapsed={this.props.collapsed}
searchFilter={this.state.searchFilter}
ConferenceHandler={VectorConferenceHandler} />

1
src/components/structures/LoggedInView.js
View File

@@ -545,6 +545,7 @@ const LoggedInView = React.createClass({
<DragDropContext onDragEnd={this._onDragEnd}>
<div ref={this._setResizeContainerRef} className={bodyClasses}>
<LeftPanel
toolbarShown={!!topBar}
collapsed={this.props.collapseLhs || this.state.collapseLhs || false}
disabled={this.props.leftDisabled}
/>

12
src/components/structures/RoomSubList.js
View File

@@ -313,6 +313,12 @@ const RoomSubList = React.createClass({
}
},
setHeight: function(height) {
if (this.refs.subList) {
this.refs.subList.style.height = `${height}px`;
}
},
render: function() {
const len = this.props.list.length + this.props.extraTiles.length;
if (len) {
@@ -322,13 +328,13 @@ const RoomSubList = React.createClass({
"mx_RoomSubList_nonEmpty": len && !this.state.hidden,
});
if (this.state.hidden) {
return <div className={subListClasses}>
return <div ref="subList" className={subListClasses}>
{this._getHeaderJsx()}
</div>;
} else {
const tiles = this.makeRoomTiles();
tiles.push(...this.props.extraTiles);
return <div className={subListClasses}>
return <div ref="subList" className={subListClasses}>
{this._getHeaderJsx()}
<IndicatorScrollbar ref="scroller" className="mx_RoomSubList_scroll">
{ tiles }
@@ -343,7 +349,7 @@ const RoomSubList = React.createClass({
}
return (
<div className="mx_RoomSubList">
<div ref="subList" className="mx_RoomSubList">
{ this._getHeaderJsx() }
{ content }
</div>

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

@@ -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,23 @@ 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);
}
// 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 {
isLoadingLeftRooms: false,
totalRoomCount: null,
@@ -146,54 +164,38 @@ 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 = {
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.offsetHeight,
);
this._checkSubListsOverflow();
this.resizer.attach();
window.addEventListener("resize", this.onWindowResize);
this.mounted = true;
},
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,
);
// TODO: call layout.setAvailableHeight, window height was changed when bannerShown prop was changed
},
onAction: function(payload) {
@@ -222,6 +224,7 @@ module.exports = React.createClass({
componentWillUnmount: function() {
this.mounted = false;
window.removeEventListener("resize", this.onWindowResize);
dis.unregister(this.dispatcherRef);
if (MatrixClientPeg.get()) {
MatrixClientPeg.get().removeListener("Room", this.onRoom);
@@ -251,6 +254,17 @@ module.exports = React.createClass({
this._delayedRefreshRoomList.cancelPendingCall();
},
onWindowResize: function() {
if (this.mounted && this._layout && this.resizeContainer &&
Array.isArray(this._layoutSections)
) {
this._layout.update(
this._layoutSections,
this.resizeContainer.offsetHeight
);
}
},
onRoom: function(room) {
this.updateVisibleRooms();
},
@@ -551,22 +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
if (!collapsed) {
this._restoreSubListSize(key);
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());
@@ -581,6 +589,7 @@ module.exports = React.createClass({
},
_mapSubListProps: function(subListsProps) {
this._layoutSections = [];
const defaultProps = {
collapsed: this.props.collapsed,
isFiltered: !!this.props.searchFilter,
@@ -599,6 +608,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 +618,10 @@ module.exports = React.createClass({
}
};
const startAsHidden = props.startAsHidden || this.collapsedState[chosenKey];
this._layoutSections.push({
id: chosenKey,
count: len,
});
let subList = (<RoomSubList
ref={this._subListRef.bind(this, chosenKey)}
startAsHidden={startAsHidden}