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

fix HTML tag for Event Tile when not rendered in a list

Browse source
This commit is contained in:
Germain Souquet 2021-06-11 11:34:53 +01:00
parent e84d51bc0a
commit b1824ce579
3 changed files with 82 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/views/elements/EventTilePreview.tsx
View file

@ -128,6 +128,7 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
mxEvent={event} mxEvent={event}
layout={this.props.layout} layout={this.props.layout}
enableFlair={SettingsStore.getValue(UIFeature.Flair)} enableFlair={SettingsStore.getValue(UIFeature.Flair)}
as="div"
/> />
</div>; </div>;
} }

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

@ -1059,22 +1059,26 @@ export default class EventTile extends React.Component<IProps, IState> {
switch (this.props.tileShape) { switch (this.props.tileShape) {
case 'notif': { case 'notif': {
const room = this.context.getRoom(this.props.mxEvent.getRoomId()); const room = this.context.getRoom(this.props.mxEvent.getRoomId());
return ( return React.createElement(this.props.as || "li", {
<li className={classes} aria-live={ariaLive} aria-atomic="true" data-scroll-tokens={scrollToken}> "className": classes,
<div className="mx_EventTile_roomName"> "aria-live": ariaLive,
"aria-atomic": true,
"data-scroll-tokens": scrollToken,
}, [
<div className="mx_EventTile_roomName" key="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}>
{ room ? room.name : '' } { room ? room.name : '' }
</a> </a>
</div> </div>,
<div className="mx_EventTile_senderDetails"> <div className="mx_EventTile_senderDetails" key="mx_EventTile_senderDetails">
{ avatar } { avatar }
<a href={permalink} onClick={this.onPermalinkClicked}> <a href={permalink} onClick={this.onPermalinkClicked}>
{ sender } { sender }
{ timestamp } { timestamp }
</a> </a>
</div> </div>,
<div className="mx_EventTile_line"> <div className="mx_EventTile_line" key="mx_EventTile_line">
<EventTileType ref={this.tile} <EventTileType ref={this.tile}
mxEvent={this.props.mxEvent} mxEvent={this.props.mxEvent}
highlights={this.props.highlights} highlights={this.props.highlights}
@ -1082,14 +1086,17 @@ export default class EventTile extends React.Component<IProps, IState> {
showUrlPreview={this.props.showUrlPreview} showUrlPreview={this.props.showUrlPreview}
onHeightChanged={this.props.onHeightChanged} onHeightChanged={this.props.onHeightChanged}
/> />
</div> </div>,
</li> ]);
);
} }
case 'file_grid': { case 'file_grid': {
return ( return React.createElement(this.props.as || "li", {
<li className={classes} aria-live={ariaLive} aria-atomic="true" data-scroll-tokens={scrollToken}> "className": classes,
<div className="mx_EventTile_line"> "aria-live": ariaLive,
"aria-atomic": true,
"data-scroll-tokens": scrollToken,
}, [
<div className="mx_EventTile_line" key="mx_EventTile_line">
<EventTileType ref={this.tile} <EventTileType ref={this.tile}
mxEvent={this.props.mxEvent} mxEvent={this.props.mxEvent}
highlights={this.props.highlights} highlights={this.props.highlights}
@ -1098,9 +1105,10 @@ export default class EventTile extends React.Component<IProps, IState> {
tileShape={this.props.tileShape} tileShape={this.props.tileShape}
onHeightChanged={this.props.onHeightChanged} onHeightChanged={this.props.onHeightChanged}
/> />
</div> </div>,
<a <a
className="mx_EventTile_senderDetailsLink" className="mx_EventTile_senderDetailsLink"
key="mx_EventTile_senderDetailsLink"
href={permalink} href={permalink}
onClick={this.onPermalinkClicked} onClick={this.onPermalinkClicked}
> >
@ -1108,9 +1116,8 @@ export default class EventTile extends React.Component<IProps, IState> {
{ sender } { sender }
{ timestamp } { timestamp }
</div> </div>
</a> </a>,
</li> ]);
);
} }
case 'reply': case 'reply':
@ -1126,13 +1133,17 @@ export default class EventTile extends React.Component<IProps, IState> {
this.props.alwaysShowTimestamps || this.state.hover, this.props.alwaysShowTimestamps || this.state.hover,
); );
} }
return ( return React.createElement(this.props.as || "li", {
<li className={classes} aria-live={ariaLive} aria-atomic="true" data-scroll-tokens={scrollToken}> "className": classes,
{ ircTimestamp } "aria-live": ariaLive,
{ avatar } "aria-atomic": true,
{ sender } "data-scroll-tokens": scrollToken,
{ ircPadlock } }, [
<div className="mx_EventTile_reply"> ircTimestamp,
avatar,
sender,
ircPadlock,
<div className="mx_EventTile_reply" key="mx_EventTile_reply">
{ groupTimestamp } { groupTimestamp }
{ groupPadlock } { groupPadlock }
{ thread } { thread }
@ -1144,9 +1155,8 @@ export default class EventTile extends React.Component<IProps, IState> {
replacingEventId={this.props.replacingEventId} replacingEventId={this.props.replacingEventId}
showUrlPreview={false} showUrlPreview={false}
/> />
</div> </div>,
</li> ]);
);
} }
default: { default: {
const thread = ReplyThread.makeThread( const thread = ReplyThread.makeThread(

1
src/components/views/rooms/ReplyPreview.js
View file

@ -95,6 +95,7 @@ export default class ReplyPreview extends React.Component {
permalinkCreator={this.props.permalinkCreator} permalinkCreator={this.props.permalinkCreator}
isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")} isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
enableFlair={SettingsStore.getValue(UIFeature.Flair)} enableFlair={SettingsStore.getValue(UIFeature.Flair)}
as="div"
/> />
</div> </div>
</div>; </div>;