mirror of
https://github.com/element-hq/element-web
synced 2024-11-28 12:28:50 +03:00
post-review tweaks
This commit is contained in:
parent
f2377fa9fe
commit
0e0d0cf4f5
2 changed files with 76 additions and 72 deletions
|
@ -23,7 +23,7 @@ module.exports = React.createClass({
|
||||||
displayName: 'MessagePanel',
|
displayName: 'MessagePanel',
|
||||||
|
|
||||||
propTypes: {
|
propTypes: {
|
||||||
// true to give the component a 'display: hidden' style.
|
// true to give the component a 'display: none' style.
|
||||||
hidden: React.PropTypes.bool,
|
hidden: React.PropTypes.bool,
|
||||||
|
|
||||||
// the list of MatrixEvents to display
|
// the list of MatrixEvents to display
|
||||||
|
@ -117,19 +117,6 @@ module.exports = React.createClass({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function() {
|
|
||||||
var ScrollPanel = sdk.getComponent("structures.ScrollPanel");
|
|
||||||
return (
|
|
||||||
<ScrollPanel ref="scrollPanel" className="mx_RoomView_messagePanel"
|
|
||||||
onScroll={ this.props.onScroll }
|
|
||||||
onFillRequest={ this.props.onFillRequest }
|
|
||||||
style={ this.props.hidden ? { display: 'none' } : {} }
|
|
||||||
stickyBottom={ this.props.stickyBottom }>
|
|
||||||
{this._getEventTiles()}
|
|
||||||
</ScrollPanel>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
_getEventTiles: function() {
|
_getEventTiles: function() {
|
||||||
var DateSeparator = sdk.getComponent('messages.DateSeparator');
|
var DateSeparator = sdk.getComponent('messages.DateSeparator');
|
||||||
var EventTile = sdk.getComponent('rooms.EventTile');
|
var EventTile = sdk.getComponent('rooms.EventTile');
|
||||||
|
@ -240,12 +227,15 @@ module.exports = React.createClass({
|
||||||
// is the last element or not, because we only decide as we're going along.
|
// is the last element or not, because we only decide as we're going along.
|
||||||
if (readMarkerIndex === undefined && ghostIndex && ghostIndex <= ret.length) {
|
if (readMarkerIndex === undefined && ghostIndex && ghostIndex <= ret.length) {
|
||||||
var hr;
|
var hr;
|
||||||
hr = (<hr className="mx_RoomView_myReadMarker"
|
hr = (
|
||||||
|
<hr className="mx_RoomView_myReadMarker"
|
||||||
style={{opacity: 1, width: '99%'}}
|
style={{opacity: 1, width: '99%'}}
|
||||||
ref={function(n) {
|
ref={function(n) {
|
||||||
Velocity(n, {opacity: '0', width: '10%'},
|
Velocity(n, {opacity: '0', width: '10%'},
|
||||||
{duration: 400, easing: 'easeInSine', delay: 1000});
|
{duration: 400, easing: 'easeInSine',
|
||||||
}} />);
|
delay: 1000});
|
||||||
|
}}
|
||||||
|
/>);
|
||||||
ret.splice(ghostIndex, 0, (
|
ret.splice(ghostIndex, 0, (
|
||||||
<li key="_readuptoghost"
|
<li key="_readuptoghost"
|
||||||
className="mx_RoomView_myReadMarker_container">
|
className="mx_RoomView_myReadMarker_container">
|
||||||
|
@ -261,4 +251,17 @@ module.exports = React.createClass({
|
||||||
if (this.eventNodes == undefined) this.eventNodes = {};
|
if (this.eventNodes == undefined) this.eventNodes = {};
|
||||||
this.eventNodes[eventId] = node;
|
this.eventNodes[eventId] = node;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
var ScrollPanel = sdk.getComponent("structures.ScrollPanel");
|
||||||
|
return (
|
||||||
|
<ScrollPanel ref="scrollPanel" className="mx_RoomView_messagePanel"
|
||||||
|
onScroll={ this.props.onScroll }
|
||||||
|
onFillRequest={ this.props.onFillRequest }
|
||||||
|
style={ this.props.hidden ? { display: 'none' } : {} }
|
||||||
|
stickyBottom={ this.props.stickyBottom }>
|
||||||
|
{this._getEventTiles()}
|
||||||
|
</ScrollPanel>
|
||||||
|
);
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -51,7 +51,7 @@ module.exports = React.createClass({
|
||||||
// representing.
|
// representing.
|
||||||
room: React.PropTypes.object.isRequired,
|
room: React.PropTypes.object.isRequired,
|
||||||
|
|
||||||
// true to give the component a 'display: hidden' style.
|
// true to give the component a 'display: none' style.
|
||||||
hidden: React.PropTypes.bool,
|
hidden: React.PropTypes.bool,
|
||||||
|
|
||||||
// ID of an event to highlight. If undefined, no event will be highlighted.
|
// ID of an event to highlight. If undefined, no event will be highlighted.
|
||||||
|
@ -279,56 +279,6 @@ module.exports = React.createClass({
|
||||||
return this.refs.messagePanel.getScrollState();
|
return this.refs.messagePanel.getScrollState();
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function() {
|
|
||||||
var MessagePanel = sdk.getComponent("structures.MessagePanel");
|
|
||||||
var Loader = sdk.getComponent("elements.Spinner");
|
|
||||||
|
|
||||||
// just show a spinner while the timeline loads.
|
|
||||||
//
|
|
||||||
// put it in a div of the right class (mx_RoomView_messagePanel) so
|
|
||||||
// that the order in the roomview flexbox is correct, and
|
|
||||||
// mx_RoomView_messageListWrapper to position the inner div in the
|
|
||||||
// right place.
|
|
||||||
//
|
|
||||||
// Note that the click-on-search-result functionality relies on the
|
|
||||||
// fact that the messagePanel is hidden while the timeline reloads,
|
|
||||||
// but that the RoomHeader (complete with search term) continues to
|
|
||||||
// exist.
|
|
||||||
if (this.state.timelineLoading) {
|
|
||||||
return (
|
|
||||||
<div className="mx_RoomView_messagePanel mx_RoomView_messageListWrapper">
|
|
||||||
<Loader />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// give the messagepanel a stickybottom if we're at the end of the
|
|
||||||
// live timeline, so that the arrival of new events triggers a
|
|
||||||
// scroll.
|
|
||||||
//
|
|
||||||
// Make sure that stickyBottom is *false* if we can paginate
|
|
||||||
// forwards, otherwise if somebody hits the bottom of the loaded
|
|
||||||
// events when viewing historical messages, we get stuck in a loop
|
|
||||||
// of paginating our way through the entire history of the room.
|
|
||||||
var stickyBottom = !this._timelineWindow.canPaginate(EventTimeline.FORWARDS);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MessagePanel ref="messagePanel"
|
|
||||||
hidden={ this.props.hidden }
|
|
||||||
events={ this.state.events }
|
|
||||||
highlightedEventId={ this.props.highlightedEventId }
|
|
||||||
readMarkerEventId={ this.state.readMarkerEventId }
|
|
||||||
readMarkerGhostEventId={ this.state.readMarkerGhostEventId }
|
|
||||||
suppressFirstDateSeparator={ this.state.canBackPaginate }
|
|
||||||
ourUserId={ MatrixClientPeg.get().credentials.userId }
|
|
||||||
stickyBottom={ stickyBottom }
|
|
||||||
isConferenceUser={ this.props.isConferenceUser }
|
|
||||||
onScroll={ this.props.onScroll }
|
|
||||||
onFillRequest={ this.onMessageListFillRequest }
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
_initTimeline: function(props) {
|
_initTimeline: function(props) {
|
||||||
var initialEvent = props.eventId;
|
var initialEvent = props.eventId;
|
||||||
var pixelOffset = props.eventPixelOffset;
|
var pixelOffset = props.eventPixelOffset;
|
||||||
|
@ -446,4 +396,55 @@ module.exports = React.createClass({
|
||||||
var myUserId = client.credentials.userId;
|
var myUserId = client.credentials.userId;
|
||||||
return this.props.room.getEventReadUpTo(myUserId);
|
return this.props.room.getEventReadUpTo(myUserId);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
var MessagePanel = sdk.getComponent("structures.MessagePanel");
|
||||||
|
var Loader = sdk.getComponent("elements.Spinner");
|
||||||
|
|
||||||
|
// just show a spinner while the timeline loads.
|
||||||
|
//
|
||||||
|
// put it in a div of the right class (mx_RoomView_messagePanel) so
|
||||||
|
// that the order in the roomview flexbox is correct, and
|
||||||
|
// mx_RoomView_messageListWrapper to position the inner div in the
|
||||||
|
// right place.
|
||||||
|
//
|
||||||
|
// Note that the click-on-search-result functionality relies on the
|
||||||
|
// fact that the messagePanel is hidden while the timeline reloads,
|
||||||
|
// but that the RoomHeader (complete with search term) continues to
|
||||||
|
// exist.
|
||||||
|
if (this.state.timelineLoading) {
|
||||||
|
return (
|
||||||
|
<div className="mx_RoomView_messagePanel mx_RoomView_messageListWrapper">
|
||||||
|
<Loader />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// give the messagepanel a stickybottom if we're at the end of the
|
||||||
|
// live timeline, so that the arrival of new events triggers a
|
||||||
|
// scroll.
|
||||||
|
//
|
||||||
|
// Make sure that stickyBottom is *false* if we can paginate
|
||||||
|
// forwards, otherwise if somebody hits the bottom of the loaded
|
||||||
|
// events when viewing historical messages, we get stuck in a loop
|
||||||
|
// of paginating our way through the entire history of the room.
|
||||||
|
var stickyBottom = !this._timelineWindow.canPaginate(EventTimeline.FORWARDS);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MessagePanel ref="messagePanel"
|
||||||
|
hidden={ this.props.hidden }
|
||||||
|
events={ this.state.events }
|
||||||
|
highlightedEventId={ this.props.highlightedEventId }
|
||||||
|
readMarkerEventId={ this.state.readMarkerEventId }
|
||||||
|
readMarkerGhostEventId={ this.state.readMarkerGhostEventId }
|
||||||
|
suppressFirstDateSeparator={ this.state.canBackPaginate }
|
||||||
|
ourUserId={ MatrixClientPeg.get().credentials.userId }
|
||||||
|
stickyBottom={ stickyBottom }
|
||||||
|
isConferenceUser={ this.props.isConferenceUser }
|
||||||
|
onScroll={ this.props.onScroll }
|
||||||
|
onFillRequest={ this.onMessageListFillRequest }
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue