diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
new file mode 100644
index 0000000000..6152749573
--- /dev/null
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -0,0 +1,124 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+$name-width: 50px;
+$icon-width: 14px;
+$timestamp-width: 45px;
+$right-padding: 5px;
+
+.mx_IRCLayout {
+
+ line-height: $font-22px !important;
+
+ .mx_EventTile {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+
+ > * {
+ margin-right: $right-padding;
+ }
+
+ > .mx_EventTile_msgOption {
+ order: 4;
+ flex-shrink: 0;
+ }
+
+ > .mx_SenderProfile {
+ order: 2;
+ flex-shrink: 0;
+ width: $name-width;
+ text-overflow: ellipsis;
+ text-align: right;
+ display: flex;
+ align-items: center;
+ }
+
+ > .mx_EventTile_line {
+ order: 3;
+ flex-grow: 1;
+ }
+
+ > .mx_EventTile_avatar {
+ order: 1;
+ position: relative;
+ top: 0;
+ left: 0;
+ flex-shrink: 0;
+ height: 22px;
+ display: flex;
+ align-items: center;
+
+ > .mx_BaseAvatar {
+ height: 1rem;
+ width: 1rem;
+ }
+ }
+
+ .mx_MessageTimestamp {
+ font-size: $font-10px;
+ width: $timestamp-width;
+ text-align: right;
+ }
+
+ .mx_EventTile_line, .mx_EventTile_reply {
+ padding: 0;
+ }
+
+ .mx_EventTile_e2eIcon {
+ position: relative;
+ right: unset;
+ left: unset;
+ top: -2px;
+ padding: 0;
+ }
+
+ .mx_EventTile_line > * {
+ display: inline-block;
+ }
+ }
+
+ .mx_EventListSummary {
+ > .mx_EventTile_line {
+ padding-left: calc($name-width + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
+ }
+ }
+
+ .mx_EventTile.mx_EventTile_info {
+ .mx_EventTile_avatar {
+ left: calc($name-width + 10px + $icon-width);
+ top: 0;
+ }
+
+ .mx_EventTile_line {
+ left: calc($name-width + 10px + $icon-width);
+ }
+
+ .mx_TextualEvent {
+ line-height: $font-22px;
+ }
+ }
+
+ .mx_EventTile_continuation:not(.mx_EventTile_info) {
+ .mx_EventTile_avatar {
+ visibility: hidden;
+ }
+
+ .mx_SenderProfile {
+ visibility: hidden;
+ }
+ }
+}
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 0123d43920..80e5d17bf3 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -607,6 +607,7 @@ export default class MessagePanel extends React.Component {
isSelectedEvent={highlight}
getRelationsForEvent={this.props.getRelationsForEvent}
showReactions={this.props.showReactions}
+ useIRCLayout={this.state.useIRCLayout}
/>
</TileErrorBoundary>
</li>,
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index a64fd82eb5..2da9677a17 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -206,6 +206,9 @@ export default createReactClass({
// whether to show reactions for this event
showReactions: PropTypes.bool,
+
+ // whether to use the irc layout
+ useIRCLayout: PropTypes.bool,
},
getDefaultProps: function() {
@@ -653,6 +656,8 @@ export default createReactClass({
const classes = classNames({
mx_EventTile_bubbleContainer: isBubbleMessage,
mx_EventTile: true,
+ mx_EventTile_irc: this.props.useIRCLayout,
+ mx_EventTile_group: !this.props.useIRCLayout,
mx_EventTile_isEditing: isEditing,
mx_EventTile_info: isInfoMessage,
mx_EventTile_12hr: this.props.isTwelveHour,
@@ -696,6 +701,9 @@ export default createReactClass({
// joins/parts/etc
avatarSize = 14;
needsSenderProfile = false;
+ } else if (this.props.useIRCLayout) {
+ avatarSize = 14;
+ needsSenderProfile = true;
} else if (this.props.continuation && this.props.tileShape !== "file_grid") {
// no avatar or sender profile for continuation messages
avatarSize = 0;
@@ -879,21 +887,29 @@ export default createReactClass({
this.props.permalinkCreator,
this._replyThread,
);
+
+ const linkedTimestamp = <a
+ href={permalink}
+ onClick={this.onPermalinkClicked}
+ aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
+ >
+ { timestamp }
+ </a>;
+
+ 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 (
<div className={classes} tabIndex={-1}>
+ { ircTimestamp }
<div className="mx_EventTile_msgOption">
{ readAvatars }
</div>
{ sender }
<div className="mx_EventTile_line">
- <a
- href={permalink}
- onClick={this.onPermalinkClicked}
- aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
- >
- { timestamp }
- </a>
+ { groupTimestamp }
{ !isBubbleMessage && this._renderE2EPadlock() }
{ thread }
<EventTileType ref={this._tile}