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} /> , 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 = + { 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 (