Add jump to bottom button for right panel timeline (#7746)

pull/21833/head
J. Ryan Stinnett 2022-02-08 17:35:03 +00:00 committed by GitHub
parent 0a45ae0781
commit bf8438cbb2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 77 additions and 25 deletions

View File

@ -112,3 +112,8 @@ limitations under the License.
flex-basis: 48px; // 12 (padding on message list) + 36 (padding on event lines) flex-basis: 48px; // 12 (padding on message list) + 36 (padding on event lines)
} }
} }
.mx_TimelineCard_timeline {
overflow: hidden;
position: relative; // offset parent for jump to bottom button
}

View File

@ -16,7 +16,9 @@ limitations under the License.
import React from 'react'; import React from 'react';
import { EventSubscription } from "fbemitter"; import { EventSubscription } from "fbemitter";
import { EventTimelineSet, IEventRelation, MatrixEvent, Room } from 'matrix-js-sdk/src'; import { IEventRelation, MatrixEvent } from 'matrix-js-sdk/src/models/event';
import { EventTimelineSet } from 'matrix-js-sdk/src/models/event-timeline-set';
import { NotificationCountType, Room } from 'matrix-js-sdk/src/models/room';
import { Thread } from 'matrix-js-sdk/src/models/thread'; import { Thread } from 'matrix-js-sdk/src/models/thread';
import classNames from 'classnames'; import classNames from 'classnames';
@ -38,6 +40,7 @@ import RoomViewStore from '../../../stores/RoomViewStore';
import ContentMessages from '../../../ContentMessages'; import ContentMessages from '../../../ContentMessages';
import UploadBar from '../../structures/UploadBar'; import UploadBar from '../../structures/UploadBar';
import SettingsStore from '../../../settings/SettingsStore'; import SettingsStore from '../../../settings/SettingsStore';
import JumpToBottomButton from '../rooms/JumpToBottomButton';
interface IProps { interface IProps {
room: Room; room: Room;
@ -58,6 +61,7 @@ interface IState {
initialEventId?: string; initialEventId?: string;
isInitialEventHighlighted?: boolean; isInitialEventHighlighted?: boolean;
layout: Layout; layout: Layout;
atEndOfLiveTimeline: boolean;
// settings: // settings:
showReadReceipts?: boolean; showReadReceipts?: boolean;
@ -78,6 +82,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
this.state = { this.state = {
showReadReceipts: SettingsStore.getValue("showReadReceipts", props.room.roomId), showReadReceipts: SettingsStore.getValue("showReadReceipts", props.room.roomId),
layout: SettingsStore.getValue("layout"), layout: SettingsStore.getValue("layout"),
atEndOfLiveTimeline: true,
}; };
this.readReceiptsSettingWatcher = null; this.readReceiptsSettingWatcher = null;
} }
@ -137,7 +142,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
} }
}; };
private onScroll = (): void => { private onUserScroll = (): void => {
if (this.state.initialEventId && this.state.isInitialEventHighlighted) { if (this.state.initialEventId && this.state.isInitialEventHighlighted) {
dis.dispatch({ dis.dispatch({
action: Action.ViewRoom, action: Action.ViewRoom,
@ -149,6 +154,36 @@ export default class TimelineCard extends React.Component<IProps, IState> {
} }
}; };
private onScroll = (): void => {
const timelinePanel = this.timelinePanelRef.current;
if (!timelinePanel) return;
if (timelinePanel.isAtEndOfLiveTimeline()) {
this.setState({
atEndOfLiveTimeline: true,
});
} else {
this.setState({
atEndOfLiveTimeline: false,
});
}
};
private jumpToLiveTimeline = () => {
if (this.state.initialEventId && this.state.isInitialEventHighlighted) {
// If we were viewing a highlighted event, firing view_room without
// an event will take care of both clearing the URL fragment and
// jumping to the bottom
dis.dispatch({
action: Action.ViewRoom,
room_id: this.props.room.roomId,
});
} else {
// Otherwise we have to jump manually
this.timelinePanelRef.current?.jumpToLiveTimeline();
dis.fire(Action.FocusSendMessageComposer);
}
};
private renderTimelineCardHeader = (): JSX.Element => { private renderTimelineCardHeader = (): JSX.Element => {
return <div className="mx_TimelineCard__header"> return <div className="mx_TimelineCard__header">
<span>{ _t("Chat") }</span> <span>{ _t("Chat") }</span>
@ -165,6 +200,14 @@ export default class TimelineCard extends React.Component<IProps, IState> {
"mx_GroupLayout": this.state.layout === Layout.Group, "mx_GroupLayout": this.state.layout === Layout.Group,
}); });
let jumpToBottom;
if (!this.state.atEndOfLiveTimeline) {
jumpToBottom = (<JumpToBottomButton
highlight={this.props.room.getUnreadNotificationCount(NotificationCountType.Highlight) > 0}
onScrollToBottomClick={this.jumpToLiveTimeline}
/>);
}
return ( return (
<RoomContext.Provider value={{ <RoomContext.Provider value={{
...this.context, ...this.context,
@ -177,6 +220,8 @@ export default class TimelineCard extends React.Component<IProps, IState> {
withoutScrollContainer={true} withoutScrollContainer={true}
header={this.renderTimelineCardHeader()} header={this.renderTimelineCardHeader()}
> >
<div className="mx_TimelineCard_timeline">
{ jumpToBottom }
<TimelinePanel <TimelinePanel
ref={this.timelinePanelRef} ref={this.timelinePanelRef}
showReadReceipts={this.state.showReadReceipts} showReadReceipts={this.state.showReadReceipts}
@ -197,8 +242,10 @@ export default class TimelineCard extends React.Component<IProps, IState> {
eventId={this.state.initialEventId} eventId={this.state.initialEventId}
resizeNotifier={this.props.resizeNotifier} resizeNotifier={this.props.resizeNotifier}
highlightedEventId={highlightedEventId} highlightedEventId={highlightedEventId}
onUserScroll={this.onScroll} onScroll={this.onScroll}
onUserScroll={this.onUserScroll}
/> />
</div>
{ ContentMessages.sharedInstance().getCurrentUploads(this.props.composerRelation).length > 0 && ( { ContentMessages.sharedInstance().getCurrentUploads(this.props.composerRelation).length > 0 && (
<UploadBar room={this.props.room} relation={this.props.composerRelation} /> <UploadBar room={this.props.room} relation={this.props.composerRelation} />

View File

@ -21,7 +21,7 @@ import { _t } from '../../../languageHandler';
import AccessibleButton from '../elements/AccessibleButton'; import AccessibleButton from '../elements/AccessibleButton';
interface IProps { interface IProps {
numUnreadMessages: number; numUnreadMessages?: number;
highlight: boolean; highlight: boolean;
onScrollToBottomClick: (e: React.MouseEvent) => void; onScrollToBottomClick: (e: React.MouseEvent) => void;
} }