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

Don't relayout scrollpanels every time something changes

Browse source 
Gemini's habit of reflowing everything everytime anything changes at all makes
for an unresponsive app. Turn it off everywhere we use gemini.
This commit is contained in:
Richard van der Hoff 2016-04-20 12:25:19 +01:00
parent 0d9526fcec
commit d953ac4e6b
6 changed files with 22 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -35,7 +35,7 @@
"q": "^1.4.1", "q": "^1.4.1",
"react": "^15.0.1", "react": "^15.0.1",
"react-dom": "^15.0.1", "react-dom": "^15.0.1",
"react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#4707b88", "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#6f5336c",
"sanitize-html": "^1.11.1", "sanitize-html": "^1.11.1",
"velocity-animate": "^1.2.3", "velocity-animate": "^1.2.3",
"velocity-ui-pack": "^1.2.2" "velocity-ui-pack": "^1.2.2"

1
src/components/structures/ScrollPanel.js
View file

@ -540,6 +540,7 @@ module.exports = React.createClass({
// it's not obvious why we have a separate div and ol anyway. // it's not obvious why we have a separate div and ol anyway.
return (<GeminiScrollbar autoshow={true} ref="geminiPanel" return (<GeminiScrollbar autoshow={true} ref="geminiPanel"
onScroll={this.onScroll} onResize={this.onResize} onScroll={this.onScroll} onResize={this.onResize}
relayoutOnUpdate={false}
className={this.props.className} style={this.props.style}> className={this.props.className} style={this.props.style}>
<div className="mx_RoomView_messageListWrapper"> <div className="mx_RoomView_messageListWrapper">
<ol ref="itemlist" className="mx_RoomView_MessageList" aria-live="polite"> <ol ref="itemlist" className="mx_RoomView_MessageList" aria-live="polite">

4
src/components/structures/UserSettings.js
View file

@ -342,7 +342,9 @@ module.exports = React.createClass({
<div className="mx_UserSettings"> <div className="mx_UserSettings">
<SimpleRoomHeader title="Settings" onCancelClick={ this.props.onClose }/> <SimpleRoomHeader title="Settings" onCancelClick={ this.props.onClose }/>
<GeminiScrollbar className="mx_UserSettings_body" autoshow={true}> <GeminiScrollbar className="mx_UserSettings_body"
relayoutOnUpdate={false}
autoshow={true}>
<h3>Profile</h3> <h3>Profile</h3>

4
src/components/views/rooms/MemberList.js
View file

@ -521,7 +521,9 @@ module.exports = React.createClass({
return ( return (
<div className="mx_MemberList"> <div className="mx_MemberList">
{inviteMemberListSection} {inviteMemberListSection}
<GeminiScrollbar autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper"> <GeminiScrollbar autoshow={true}
relayoutOnUpdate={false}
className="mx_MemberList_joined mx_MemberList_outerWrapper">
<TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt} <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt}
createOverflowElement={this._createOverflowTile}> createOverflowElement={this._createOverflowTile}>
{this.makeMemberTiles('join', this.state.searchQuery)} {this.makeMemberTiles('join', this.state.searchQuery)}

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

@ -193,9 +193,9 @@ module.exports = React.createClass({
var me = room.getMember(MatrixClientPeg.get().credentials.userId); var me = room.getMember(MatrixClientPeg.get().credentials.userId);
if (!me) return; if (!me) return;
// console.log("room = " + room.name + ", me.membership = " + me.membership + // console.log("room = " + room.name + ", me.membership = " + me.membership +
// ", sender = " + me.events.member.getSender() + // ", sender = " + me.events.member.getSender() +
// ", target = " + me.events.member.getStateKey() + // ", target = " + me.events.member.getStateKey() +
// ", prevMembership = " + me.events.member.getPrevContent().membership); // ", prevMembership = " + me.events.member.getPrevContent().membership);
if (me.membership == "invite") { if (me.membership == "invite") {
@ -232,7 +232,7 @@ module.exports = React.createClass({
} }
} }
else { else {
s.lists["im.vector.fake.recent"].push(room); s.lists["im.vector.fake.recent"].push(room);
} }
} }
} }
@ -270,7 +270,7 @@ module.exports = React.createClass({
_repositionTooltip: function(e) { _repositionTooltip: function(e) {
if (this.tooltip && this.tooltip.parentElement) { if (this.tooltip && this.tooltip.parentElement) {
var scroll = ReactDOM.findDOMNode(this); var scroll = ReactDOM.findDOMNode(this);
this.tooltip.style.top = (70 + scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - this._getScrollNode().scrollTop) + "px"; this.tooltip.style.top = (70 + scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - this._getScrollNode().scrollTop) + "px";
} }
}, },
@ -324,7 +324,9 @@ module.exports = React.createClass({
var self = this; var self = this;
return ( return (
<GeminiScrollbar className="mx_RoomList_scrollbar" autoshow={true} onScroll={ self._repositionTooltips } ref="gemscroll"> <GeminiScrollbar className="mx_RoomList_scrollbar"
relayoutOnUpdate={false}
autoshow={true} onScroll={ self._repositionTooltips } ref="gemscroll">
<div className="mx_RoomList"> <div className="mx_RoomList">
<RoomSubList list={ self.state.lists['im.vector.fake.invite'] } <RoomSubList list={ self.state.lists['im.vector.fake.invite'] }
label="Invites" label="Invites"

10
src/components/views/rooms/SearchableEntityList.js
View file

@ -162,9 +162,13 @@ var SearchableEntityList = React.createClass({
</div> </div>
); );
} }
list = <GeminiScrollbar autoshow={true} className="mx_SearchableEntityList_listWrapper"> list = (
{ list } <GeminiScrollbar autoshow={true}
</GeminiScrollbar>; relayoutOnUpdate={false}
className="mx_SearchableEntityList_listWrapper">
{ list }
</GeminiScrollbar>
);
} }
return ( return (