diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index 10d8c701c3..c7cf2c31c2 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -63,9 +63,12 @@ $right-padding: 5px; display: flex; align-items: center; - > .mx_BaseAvatar { - height: 1rem; - width: 1rem; + // Need to use important to override the js provided height and width values. + > .mx_BaseAvatar, .mx_BaseAvatar > * { + height: $font-14px !important; + width: $font-14px !important; + font-size: $font-10px !important; + line-height: $font-14px !important; } } @@ -90,6 +93,10 @@ $right-padding: 5px; .mx_EventTile_line > * { display: inline-block; } + + .mx_EventTile_reply { + order: 3; + } } .mx_EventListSummary { diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index eae2d13f8a..a8f9599f35 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -37,6 +37,8 @@ export default class ReplyThread extends React.Component { // called when the ReplyThread contents has changed, including EventTiles thereof onHeightChanged: PropTypes.func.isRequired, permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired, + // Specifies which layout to use. + useIRCLayout: PropTypes.bool, }; static contextType = MatrixClientContext; @@ -176,12 +178,12 @@ export default class ReplyThread extends React.Component { }; } - static makeThread(parentEv, onHeightChanged, permalinkCreator, ref) { + static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout) { if (!ReplyThread.getParentEventId(parentEv)) { return
; } return ; + ref={ref} permalinkCreator={permalinkCreator} useIRCLayout={useIRCLayout} />; } componentDidMount() { @@ -331,7 +333,8 @@ export default class ReplyThread extends React.Component { onHeightChanged={this.props.onHeightChanged} permalinkCreator={this.props.permalinkCreator} isRedacted={ev.isRedacted()} - isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")} /> + isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")} + useIRCLayout={this.props.useIRCLayout} /> ; }); diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index 2da9677a17..837c8929b9 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -795,6 +795,17 @@ export default createReactClass({ />; } + const linkedTimestamp = + { timestamp } + ; + + const groupTimestamp = !this.props.useIRCLayout ? linkedTimestamp : null; + const ircTimestamp = this.props.useIRCLayout ? linkedTimestamp : null; + switch (this.props.tileShape) { case 'notif': { const room = this.context.getRoom(this.props.mxEvent.getRoomId()); @@ -862,12 +873,11 @@ export default createReactClass({ } return (
+ { ircTimestamp } { avatar } { sender }
- - { timestamp } - + { groupTimestamp } { !isBubbleMessage && this._renderE2EPadlock() } { thread } - { timestamp } - ; - - const groupTimestamp = !this.props.useIRCLayout ? linkedTimestamp : null; - const ircTimestamp = this.props.useIRCLayout ? linkedTimestamp : null; - - // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers return (