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

Add scroll token to file and notif event tiles

Browse source
This commit is contained in:
Germain Souquet 2021-06-07 09:26:42 +01:00
parent 7f83590846
commit a6ddffe74c
2 changed files with 14 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/structures/MessagePanel.js
View file

@ -616,10 +616,6 @@ export default class MessagePanel extends React.Component {
const eventId = mxEv.getId(); const eventId = mxEv.getId();
const highlight = (eventId === this.props.highlightedEventId); const highlight = (eventId === this.props.highlightedEventId);
// we can't use local echoes as scroll tokens, because their event IDs change.
// Local echos have a send "status".
const scrollToken = mxEv.status ? undefined : eventId;
const readReceipts = this._readReceiptsByEvent[eventId]; const readReceipts = this._readReceiptsByEvent[eventId];
let isLastSuccessful = false; let isLastSuccessful = false;
@ -651,7 +647,6 @@ export default class MessagePanel extends React.Component {
<TileErrorBoundary key={mxEv.getTxnId() || eventId} mxEvent={mxEv}> <TileErrorBoundary key={mxEv.getTxnId() || eventId} mxEvent={mxEv}>
<EventTile <EventTile
as="li" as="li"
data-scroll-tokens={scrollToken}
ref={this._collectEventNode.bind(this, eventId)} ref={this._collectEventNode.bind(this, eventId)}
alwaysShowTimestamps={this.props.alwaysShowTimestamps} alwaysShowTimestamps={this.props.alwaysShowTimestamps}
mxEvent={mxEv} mxEvent={mxEv}

22
src/components/views/rooms/EventTile.tsx
View file

@ -906,6 +906,10 @@ export default class EventTile extends React.Component<IProps, IState> {
permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId()); permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
} }
const scrollToken = this.props.mxEvent.status
? undefined
: this.props.mxEvent.getId();
let avatar; let avatar;
let sender; let sender;
let avatarSize; let avatarSize;
@ -1046,7 +1050,7 @@ export default class EventTile extends React.Component<IProps, IState> {
case 'notif': { case 'notif': {
const room = this.context.getRoom(this.props.mxEvent.getRoomId()); const room = this.context.getRoom(this.props.mxEvent.getRoomId());
return ( return (
<div className={classes} aria-live={ariaLive} aria-atomic="true"> <li className={classes} aria-live={ariaLive} aria-atomic="true" data-scroll-tokens={scrollToken}>
<div className="mx_EventTile_roomName"> <div className="mx_EventTile_roomName">
<RoomAvatar room={room} width={28} height={28} /> <RoomAvatar room={room} width={28} height={28} />
<a href={permalink} onClick={this.onPermalinkClicked}> <a href={permalink} onClick={this.onPermalinkClicked}>
@ -1069,12 +1073,12 @@ export default class EventTile extends React.Component<IProps, IState> {
onHeightChanged={this.props.onHeightChanged} onHeightChanged={this.props.onHeightChanged}
/> />
</div> </div>
</div> </li>
); );
} }
case 'file_grid': { case 'file_grid': {
return ( return (
<div className={classes} aria-live={ariaLive} aria-atomic="true"> <li className={classes} aria-live={ariaLive} aria-atomic="true" data-scroll-tokens={scrollToken}>
<div className="mx_EventTile_line"> <div className="mx_EventTile_line">
<EventTileType ref={this.tile} <EventTileType ref={this.tile}
mxEvent={this.props.mxEvent} mxEvent={this.props.mxEvent}
@ -1095,7 +1099,7 @@ export default class EventTile extends React.Component<IProps, IState> {
{ timestamp } { timestamp }
</div> </div>
</a> </a>
</div> </li>
); );
} }
@ -1111,7 +1115,7 @@ export default class EventTile extends React.Component<IProps, IState> {
); );
} }
return ( return (
<div className={classes} aria-live={ariaLive} aria-atomic="true"> <li className={classes} aria-live={ariaLive} aria-atomic="true" data-scroll-tokens={scrollToken}>
{ ircTimestamp } { ircTimestamp }
{ avatar } { avatar }
{ sender } { sender }
@ -1129,7 +1133,7 @@ export default class EventTile extends React.Component<IProps, IState> {
showUrlPreview={false} showUrlPreview={false}
/> />
</div> </div>
</div> </li>
); );
} }
default: { default: {
@ -1143,13 +1147,15 @@ export default class EventTile extends React.Component<IProps, IState> {
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
return ( return (
React.createElement(this.props.as || "div", { React.createElement(this.props.as || "li", {
"ref": this.ref, "ref": this.ref,
"className": classes, "className": classes,
"tabIndex": -1, "tabIndex": -1,
"aria-live": ariaLive, "aria-live": ariaLive,
"aria-atomic": "true", "aria-atomic": "true",
"data-scroll-tokens": this.props["data-scroll-tokens"], // we can't use local echoes as scroll tokens, because their event IDs change.
// Local echos have a send "status".
"data-scroll-tokens": scrollToken,
"onMouseEnter": () => this.setState({ hover: true }), "onMouseEnter": () => this.setState({ hover: true }),
"onMouseLeave": () => this.setState({ hover: false }), "onMouseLeave": () => this.setState({ hover: false }),
}, [ }, [