PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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
Show stats 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>;
} }

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

@ -1059,58 +1059,65 @@ 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,
<RoomAvatar room={room} width={28} height={28} /> "aria-atomic": true,
<a href={permalink} onClick={this.onPermalinkClicked}> "data-scroll-tokens": scrollToken,
{ room ? room.name : '' } }, [
</a> <div className="mx_EventTile_roomName" key="mx_EventTile_roomName">
</div> <RoomAvatar room={room} width={28} height={28} />
<div className="mx_EventTile_senderDetails"> <a href={permalink} onClick={this.onPermalinkClicked}>
{ avatar } { room ? room.name : '' }
<a href={permalink} onClick={this.onPermalinkClicked}> </a>
{ sender } </div>,
{ timestamp } <div className="mx_EventTile_senderDetails" key="mx_EventTile_senderDetails">
</a> { avatar }
</div> <a href={permalink} onClick={this.onPermalinkClicked}>
<div className="mx_EventTile_line"> { sender }
<EventTileType ref={this.tile} { timestamp }
mxEvent={this.props.mxEvent} </a>
highlights={this.props.highlights} </div>,
highlightLink={this.props.highlightLink} <div className="mx_EventTile_line" key="mx_EventTile_line">
showUrlPreview={this.props.showUrlPreview} <EventTileType ref={this.tile}
onHeightChanged={this.props.onHeightChanged} mxEvent={this.props.mxEvent}
/> highlights={this.props.highlights}
</div> highlightLink={this.props.highlightLink}
</li> showUrlPreview={this.props.showUrlPreview}
); onHeightChanged={this.props.onHeightChanged}
/>
</div>,
]);
} }
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,
<EventTileType ref={this.tile} "aria-atomic": true,
mxEvent={this.props.mxEvent} "data-scroll-tokens": scrollToken,
highlights={this.props.highlights} }, [
highlightLink={this.props.highlightLink} <div className="mx_EventTile_line" key="mx_EventTile_line">
showUrlPreview={this.props.showUrlPreview} <EventTileType ref={this.tile}
tileShape={this.props.tileShape} mxEvent={this.props.mxEvent}
onHeightChanged={this.props.onHeightChanged} highlights={this.props.highlights}
/> highlightLink={this.props.highlightLink}
showUrlPreview={this.props.showUrlPreview}
tileShape={this.props.tileShape}
onHeightChanged={this.props.onHeightChanged}
/>
</div>,
<a
className="mx_EventTile_senderDetailsLink"
key="mx_EventTile_senderDetailsLink"
href={permalink}
onClick={this.onPermalinkClicked}
>
<div className="mx_EventTile_senderDetails">
{ sender }
{ timestamp }
</div> </div>
<a </a>,
className="mx_EventTile_senderDetailsLink" ]);
href={permalink}
onClick={this.onPermalinkClicked}
>
<div className="mx_EventTile_senderDetails">
{ sender }
{ timestamp }
</div>
</a>
</li>
);
} }
case 'reply': case 'reply':
@ -1126,27 +1133,30 @@ 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,
{ groupTimestamp } avatar,
{ groupPadlock } sender,
{ thread } ircPadlock,
<EventTileType ref={this.tile} <div className="mx_EventTile_reply" key="mx_EventTile_reply">
mxEvent={this.props.mxEvent} { groupTimestamp }
highlights={this.props.highlights} { groupPadlock }
highlightLink={this.props.highlightLink} { thread }
onHeightChanged={this.props.onHeightChanged} <EventTileType ref={this.tile}
replacingEventId={this.props.replacingEventId} mxEvent={this.props.mxEvent}
showUrlPreview={false} highlights={this.props.highlights}
/> highlightLink={this.props.highlightLink}
</div> onHeightChanged={this.props.onHeightChanged}
</li> replacingEventId={this.props.replacingEventId}
); showUrlPreview={false}
/>
</div>,
]);
} }
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>;