create ResizeNotifier to derive which areas of the app resize and emit

pull/21833/head
Bruno Windels 2019-03-12 16:36:12 +01:00
parent 27070b3149
commit 735b4f6fcf
10 changed files with 75 additions and 6 deletions

View File

@ -123,6 +123,7 @@ const FilePanel = React.createClass({
timelineSet={this.state.timelineSet}
showUrlPreview = {false}
tileShape="file_grid"
resizeNotifier={this.props.resizeNotifier}
empty={_t('There are no visible files in this room')}
/>
);

View File

@ -173,6 +173,7 @@ const LoggedInView = React.createClass({
},
onResized: (size) => {
window.localStorage.setItem("mx_lhs_size", '' + size);
this.props.resizeNotifier.notifyLeftHandleResized();
},
};
const resizer = new Resizer(
@ -448,6 +449,7 @@ const LoggedInView = React.createClass({
disabled={this.props.middleDisabled}
collapsedRhs={this.props.collapsedRhs}
ConferenceHandler={this.props.ConferenceHandler}
resizeNotifier={this.props.resizeNotifier}
/>;
break;

View File

@ -27,6 +27,7 @@ export default class MainSplit extends React.Component {
_onResized(size) {
window.localStorage.setItem("mx_rhs_size", size);
this.props.resizeNotifier.notifyRightHandleResized();
}
_createResizer() {

View File

@ -48,6 +48,7 @@ import { _t, getCurrentLanguage } from '../../languageHandler';
import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
import { startAnyRegistrationFlow } from "../../Registration.js";
import { messageForSyncError } from '../../utils/ErrorUtils';
import ResizeNotifier from "../../utils/ResizeNotifier";
const AutoDiscovery = Matrix.AutoDiscovery;
@ -194,6 +195,7 @@ export default React.createClass({
hideToSRUsers: false,
syncError: null, // If the current syncing status is ERROR, the error object, otherwise null.
resizeNotifier: new ResizeNotifier(),
};
return s;
},
@ -1661,6 +1663,7 @@ export default React.createClass({
dis.dispatch({ action: 'show_right_panel' });
}
this.state.resizeNotifier.notifyWindowResized();
this._windowWidth = window.innerWidth;
},

View File

@ -703,7 +703,8 @@ module.exports = React.createClass({
onFillRequest={this.props.onFillRequest}
onUnfillRequest={this.props.onUnfillRequest}
style={style}
stickyBottom={this.props.stickyBottom}>
stickyBottom={this.props.stickyBottom}
resizeNotifier={this.props.resizeNotifier}>
{ topSpinner }
{ this._getEventTiles() }
{ whoIsTyping }

View File

@ -193,7 +193,7 @@ export default class RightPanel extends React.Component {
} else if (this.state.phase === RightPanel.Phase.NotificationPanel) {
panel = <NotificationPanel />;
} else if (this.state.phase === RightPanel.Phase.FilePanel) {
panel = <FilePanel roomId={this.props.roomId} />;
panel = <FilePanel roomId={this.props.roomId} resizeNotifier={this.props.resizeNotifier} />;
}
const classes = classNames("mx_RightPanel", "mx_fadable", {

View File

@ -392,7 +392,7 @@ module.exports = React.createClass({
this._updateConfCallNotification();
window.addEventListener('beforeunload', this.onPageUnload);
window.addEventListener('resize', this.onResize);
this.props.resizeNotifier.on("middlePanelResized", this.onResize);
this.onResize();
document.addEventListener("keydown", this.onKeyDown);
@ -472,7 +472,7 @@ module.exports = React.createClass({
}
window.removeEventListener('beforeunload', this.onPageUnload);
window.removeEventListener('resize', this.onResize);
this.props.resizeNotifier.removeListener("middlePanelResized", this.onResize);
document.removeEventListener("keydown", this.onKeyDown);
@ -1829,6 +1829,7 @@ module.exports = React.createClass({
className="mx_RoomView_messagePanel"
membersLoaded={this.state.membersLoaded}
permalinkCreator={this.state.permalinkCreator}
resizeNotifier={this.props.resizeNotifier}
/>);
let topUnreadMessagesBar = null;
@ -1861,7 +1862,7 @@ module.exports = React.createClass({
},
);
const rightPanel = this.state.room ? <RightPanel roomId={this.state.room.roomId} /> : undefined;
const rightPanel = this.state.room ? <RightPanel roomId={this.state.room.roomId} resizeNotifier={this.props.resizeNotifier} /> : undefined;
return (
<main className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
@ -1877,7 +1878,11 @@ module.exports = React.createClass({
onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
e2eStatus={this.state.e2eStatus}
/>
<MainSplit panel={rightPanel} collapsedRhs={this.props.collapsedRhs}>
<MainSplit
panel={rightPanel}
collapsedRhs={this.props.collapsedRhs}
resizeNotifier={this.props.resizeNotifier}
>
<div className={fadableSectionClasses}>
{ auxPanel }
<div className="mx_RoomView_timeline">

View File

@ -149,6 +149,8 @@ module.exports = React.createClass({
componentWillMount: function() {
this._pendingFillRequests = {b: null, f: null};
this.props.resizeNotifier.on("middlePanelResized", this.onResize);
this.resetScrollState();
},
@ -171,6 +173,7 @@ module.exports = React.createClass({
//
// (We could use isMounted(), but facebook have deprecated that.)
this.unmounted = true;
this.props.resizeNotifier.removeListener("middlePanelResized", this.onResize);
},
onScroll: function(ev) {

View File

@ -1227,6 +1227,7 @@ var TimelinePanel = React.createClass({
alwaysShowTimestamps={this.state.alwaysShowTimestamps}
className={this.props.className}
tileShape={this.props.tileShape}
resizeNotifier={this.props.resizeNotifier}
/>
);
},

View File

@ -0,0 +1,52 @@
/*
Copyright 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/**
* Fires when the middle panel has been resized.
* @event module:utils~ResizeNotifier#"middlePanelResized"
*/
import { EventEmitter } from "events";
import { throttle } from "lodash";
export default class ResizeNotifier extends EventEmitter {
constructor() {
super();
// with default options, will call fn once at first call, and then every x ms
// if there was another call in that timespan
this._throttledMiddlePanel = throttle(() => this.emit("middlePanelResized"), 200);
}
notifyBannersChanged() {
this.emit("middlePanelResized");
}
// can be called in quick succession
notifyLeftHandleResized() {
this._throttledMiddlePanel();
}
// can be called in quick succession
notifyRightHandleResized() {
this._throttledMiddlePanel();
}
// can be called in quick succession
notifyWindowResized() {
this._throttledMiddlePanel();
}
}