imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2297 from matrix-org/bwindels/roomlistsizingimprovements

Browse source 
Redesign: improve room sub list sizing & persist sizes
This commit is contained in:
Bruno Windels 2018-11-27 13:40:48 +00:00 • committed by GitHub
commit 8f4292399b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 163 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/elements/ResizeHandle.js
View file

@ -14,7 +14,7 @@ const ResizeHandle = (props) => {
classNames.push('mx_ResizeHandle_reverse');
}
return (
<div className={classNames.join(' ')} />
<div className={classNames.join(' ')} data-id={props.id} />
);
};

36
src/components/views/rooms/RoomList.js
View file

@ -36,7 +36,7 @@ import GroupStore from '../../../stores/GroupStore';
import RoomSubList from '../../structures/RoomSubList';
import ResizeHandle from '../elements/ResizeHandle';
import {Resizer, FixedDistributor, FlexSizer} from '../../../resizer'
import {Resizer, RoomDistributor, RoomSizer} from '../../../resizer'
const HIDE_CONFERENCE_CHANS = true;
const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
@ -70,6 +70,10 @@ module.exports = React.createClass({
},
getInitialState: function() {
const sizesJson = window.localStorage.getItem("mx_roomlist_sizes");
this.subListSizes = sizesJson ? JSON.parse(sizesJson) : {};
return {
isLoadingLeftRooms: false,
totalRoomCount: null,
@ -134,14 +138,34 @@ module.exports = React.createClass({
this._delayedRefreshRoomListLoopCount = 0;
},
_onSubListResize: function(newSize, id) {
if (!id) {
return;
}
if (typeof newSize === "string") {
newSize = Number.MAX_SAFE_INTEGER;
}
this.subListSizes[id] = newSize;
window.localStorage.setItem("mx_roomlist_sizes", JSON.stringify(this.subListSizes));
},
componentDidMount: function() {
this.dispatcherRef = dis.register(this.onAction);
this.resizer = new Resizer(this.resizeContainer, FixedDistributor, null, FlexSizer);
const cfg = {
onResized: this._onSubListResize,
};
this.resizer = new Resizer(this.resizeContainer, RoomDistributor, cfg, RoomSizer);
this.resizer.setClassNames({
handle: "mx_ResizeHandle",
vertical: "mx_ResizeHandle_vertical",
reverse: "mx_ResizeHandle_reverse"
});
// load stored sizes
Object.entries(this.subListSizes).forEach(([id, size]) => {
this.resizer.forHandleWithId(id).resize(size);
});
this.resizer.attach();
this.mounted = true;
},
@ -476,7 +500,7 @@ module.exports = React.createClass({
if (!isLast) {
return components.concat(
subList,
<ResizeHandle key={chosenKey+"-resizer"} vertical={true} />
<ResizeHandle key={chosenKey+"-resizer"} vertical={true} id={chosenKey} />
);
} else {
return components.concat(subList);
@ -484,6 +508,10 @@ module.exports = React.createClass({
}, []);
},
_collectResizeContainer: function(el) {
this.resizeContainer = el;
},
render: function() {
let subLists = [
{
@ -560,7 +588,7 @@ module.exports = React.createClass({
const subListComponents = this._mapSubListProps(subLists);
return (
<div ref={(d) => this.resizeContainer = d} className="mx_RoomList">
<div ref={this._collectResizeContainer} className="mx_RoomList">
{ subListComponents }
</div>
);