Improve reply rendering

res/css/_components.scss

@@ -155,6 +155,7 @@
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";
 @import "./views/messages/_MImageBody.scss";
+@import "./views/messages/_MImageReplyBody.scss";
 @import "./views/messages/_MJitsiWidgetEvent.scss";
 @import "./views/messages/_MNoticeBody.scss";
 @import "./views/messages/_MStickerBody.scss";
@@ -201,6 +202,7 @@
 @import "./views/rooms/_PinnedEventsPanel.scss";
 @import "./views/rooms/_PresenceLabel.scss";
 @import "./views/rooms/_ReplyPreview.scss";
+@import "./views/rooms/_ReplyTile.scss";
 @import "./views/rooms/_RoomBreadcrumbs.scss";
 @import "./views/rooms/_RoomHeader.scss";
 @import "./views/rooms/_RoomList.scss";

res/css/views/elements/_ReplyThread.scss

@@ -18,20 +18,46 @@ limitations under the License.
     margin-top: 0;
 }
 
-.mx_ReplyThread .mx_DateSeparator {
-    font-size: 1em !important;
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-bottom: 1px;
-    bottom: -5px;
-}
-
 .mx_ReplyThread_show {
     cursor: pointer;
 }
 
 blockquote.mx_ReplyThread {
     margin-left: 0;
+    margin-right: 0;
+    margin-bottom: 8px;
     padding-left: 10px;
-    border-left: 4px solid $blockquote-bar-color;
+    border-left: 4px solid $button-bg-color;
+
+    &.mx_ReplyThread_color1 {
+        border-left-color: $username-variant1-color;
+    }
+
+    &.mx_ReplyThread_color2 {
+        border-left-color: $username-variant2-color;
+    }
+
+    &.mx_ReplyThread_color3 {
+        border-left-color: $username-variant3-color;
+    }
+
+    &.mx_ReplyThread_color4 {
+        border-left-color: $username-variant4-color;
+    }
+
+    &.mx_ReplyThread_color5 {
+        border-left-color: $username-variant5-color;
+    }
+
+    &.mx_ReplyThread_color6 {
+        border-left-color: $username-variant6-color;
+    }
+
+    &.mx_ReplyThread_color7 {
+        border-left-color: $username-variant7-color;
+    }
+
+    &.mx_ReplyThread_color8 {
+        border-left-color: $username-variant8-color;
+    }
 }

res/css/views/messages/_MImageReplyBody.scss

@@ -0,0 +1,40 @@
+/*
+Copyright 2020 Tulir Asokan <tulir@maunium.net>
+
+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.
+*/
+
+.mx_MImageReplyBody {
+    display: grid;
+    grid-template:
+        "image sender"   20px
+        "image filename" 20px
+        / 44px  auto;
+    grid-gap: 4px;
+}
+
+.mx_MImageReplyBody_thumbnail {
+    grid-area: image;
+
+    .mx_MImageBody_thumbnail_container {
+        max-height: 44px !important;
+    }
+}
+
+.mx_MImageReplyBody_sender {
+    grid-area: sender;
+}
+
+.mx_MImageReplyBody_filename {
+    grid-area: filename;
+}

res/css/views/rooms/_ReplyPreview.scss

@@ -29,19 +29,24 @@ limitations under the License.
 }
 
 .mx_ReplyPreview_header {
-    margin: 12px;
+    margin: 8px;
     color: $primary-fg-color;
     font-weight: 400;
     opacity: 0.4;
 }
 
+.mx_ReplyPreview_tile {
+    margin: 0 8px;
+}
+
 .mx_ReplyPreview_title {
     float: left;
 }
 
 .mx_ReplyPreview_cancel {
     float: right;
     cursor: pointer;
+    display: flex;
 }
 
 .mx_ReplyPreview_clear {

res/css/views/rooms/_ReplyTile.scss

@@ -0,0 +1,113 @@
+/*
+Copyright 2020 Tulir Asokan <tulir@maunium.net>
+
+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.
+*/
+
+.mx_ReplyTile {
+    max-width: 100%;
+    clear: both;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    font-size: 14px;
+    position: relative;
+    line-height: 16px;
+}
+
+.mx_ReplyTile > a {
+    display: block;
+    text-decoration: none;
+    color: $primary-fg-color;
+}
+
+// We do reply size limiting with CSS to avoid duplicating the TextualBody component.
+.mx_ReplyTile .mx_EventTile_content {
+    $reply-lines: 2;
+    $line-height: 22px;
+    $max-height: 66px;
+
+    pointer-events: none;
+
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $reply-lines;
+    line-height: $line-height;
+    max-height: $max-height;
+
+    .mx_EventTile_body.mx_EventTile_bigEmoji {
+        line-height: $line-height !important;
+        // Override the big emoji override
+        font-size: 14px !important;
+    }
+
+    // Hack to cut content in <pre> tags too
+    .mx_EventTile_pre_container > pre {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: $reply-lines;
+        padding: 4px;
+    }
+    .markdown-body blockquote, .markdown-body dl, .markdown-body ol, .markdown-body p, .markdown-body pre, .markdown-body table, .markdown-body ul {
+        margin-bottom: 4px;
+    }
+}
+
+.mx_ReplyTile.mx_ReplyTile_info {
+    padding-top: 0px;
+}
+
+.mx_ReplyTile .mx_SenderProfile {
+    color: $primary-fg-color;
+    font-size: 14px;
+    display: inline-block; /* anti-zalgo, with overflow hidden */
+    overflow: hidden;
+    cursor: pointer;
+    padding-left: 0px; /* left gutter */
+    padding-bottom: 0px;
+    padding-top: 0px;
+    margin: 0px;
+    line-height: 17px;
+    /* the next three lines, along with overflow hidden, truncate long display names */
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 65px);
+}
+
+.mx_ReplyTile_redacted .mx_UnknownBody {
+    --lozenge-color: $event-redacted-fg-color;
+    --lozenge-border-color: $event-redacted-border-color;
+    display: block;
+    height: 22px;
+    width: 250px;
+    border-radius: 11px;
+    background:
+        repeating-linear-gradient(
+            -45deg,
+            var(--lozenge-color),
+            var(--lozenge-color) 3px,
+            transparent 3px,
+            transparent 6px
+        );
+    box-shadow: 0px 0px 3px var(--lozenge-border-color) inset;
+}
+
+.mx_ReplyTile_sending.mx_ReplyTile_redacted .mx_UnknownBody {
+    opacity: 0.4;
+}
+
+.mx_ReplyTile_contextual {
+    opacity: 0.4;
+}

src/components/views/elements/ReplyThread.js

@@ -20,13 +20,13 @@ import * as sdk from '../../../index';
 import {_t} from '../../../languageHandler';
 import PropTypes from 'prop-types';
 import dis from '../../../dispatcher/dispatcher';
-import {wantsDateSeparator} from '../../../DateUtils';
 import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
 import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
 import SettingsStore from "../../../settings/SettingsStore";
 import {LayoutPropType} from "../../../settings/Layout";
 import escapeHtml from "escape-html";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { getUserNameColorClass } from "../../../utils/FormattingUtils";
 import {Action} from "../../../dispatcher/actions";
 import sanitizeHtml from "sanitize-html";
 import {UIFeature} from "../../../settings/UIFeature";
@@ -337,6 +337,10 @@ export default class ReplyThread extends React.Component {
         dis.fire(Action.FocusComposer);
     }
 
+    getReplyThreadColorClass(ev) {
+        return getUserNameColorClass(ev.getSender()).replace("Username", "ReplyThread");
+    }
+
     render() {
         let header = null;
 
@@ -351,7 +355,7 @@ export default class ReplyThread extends React.Component {
             const ev = this.state.loadedEv;
             const Pill = sdk.getComponent('elements.Pill');
             const room = this.context.getRoom(ev.getRoomId());
-            header = <blockquote className="mx_ReplyThread">
+            header = <blockquote className={`mx_ReplyThread ${this.getReplyThreadColorClass(ev)}`}>
                 {
                     _t('<a>In reply to</a> <pill>', {}, {
                         'a': (sub) => <a onClick={this.onQuoteClick} className="mx_ReplyThread_show">{ sub }</a>,
@@ -371,20 +375,11 @@ export default class ReplyThread extends React.Component {
             header = <Spinner w={16} h={16} />;
         }
 
-        const EventTile = sdk.getComponent('views.rooms.EventTile');
-        const DateSeparator = sdk.getComponent('messages.DateSeparator');
+        const ReplyTile = sdk.getComponent('views.rooms.ReplyTile');
         const evTiles = this.state.events.map((ev) => {
-            let dateSep = null;
-
-            if (wantsDateSeparator(this.props.parentEv.getDate(), ev.getDate())) {
-                dateSep = <a href={this.props.url}><DateSeparator ts={ev.getTs()} /></a>;
-            }
-
-            return <blockquote className="mx_ReplyThread" key={ev.getId()}>
-                { dateSep }
-                <EventTile
+            return <blockquote className={`mx_ReplyThread ${this.getReplyThreadColorClass(ev)}`} key={ev.getId()}>
+                <ReplyTile
                     mxEvent={ev}
-                    tileShape="reply"
                     onHeightChanged={this.props.onHeightChanged}
                     permalinkCreator={this.props.permalinkCreator}
                     isRedacted={ev.isRedacted()}

src/components/views/messages/MImageReplyBody.js

@@ -0,0 +1,59 @@
+/*
+Copyright 2020 Tulir Asokan <tulir@maunium.net>
+
+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.
+*/
+
+import React from "react";
+import { _td } from "../../../languageHandler";
+import * as sdk from "../../../index";
+import MImageBody from './MImageBody';
+import MFileBody from "./MFileBody";
+
+export default class MImageReplyBody extends MImageBody {
+    onClick(ev) {
+        ev.preventDefault();
+    }
+
+    wrapImage(contentUrl, children) {
+        return children;
+    }
+
+    // Don't show "Download this_file.png ..."
+    getFileBody() {
+        return MFileBody.prototype.presentableTextForFile.call(this, this.props.mxEvent.getContent());
+    }
+
+    render() {
+        if (this.state.error !== null) {
+            return super.render();
+        }
+
+        const content = this.props.mxEvent.getContent();
+
+        const contentUrl = this._getContentUrl();
+        const thumbnail = this._messageContent(contentUrl, this._getThumbUrl(), content);
+        const fileBody = this.getFileBody();
+        const SenderProfile = sdk.getComponent('messages.SenderProfile');
+        const sender = <SenderProfile onClick={this.onSenderProfileClick}
+                                      mxEvent={this.props.mxEvent}
+                                      enableFlair={false}
+                                      text={_td('%(senderName)s sent an image')} />;
+
+        return <div className="mx_MImageReplyBody">
+            <div className="mx_MImageReplyBody_thumbnail">{ thumbnail }</div>
+            <div className="mx_MImageReplyBody_sender">{ sender }</div>
+            <div className="mx_MImageReplyBody_filename">{ fileBody }</div>
+        </div>;
+    }
+}