Improve reply rendering

res/css/_components.scss

@@ -153,6 +153,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/_RoomDropTarget.scss";
 @import "./views/rooms/_RoomHeader.scss";

res/css/views/elements/_ReplyThread.scss

@@ -18,20 +18,13 @@ 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-bottom: 8px;
     padding-left: 10px;
-    border-left: 4px solid $blockquote-bar-color;
+    border-left: 4px solid $button-bg-color;
 }

res/css/views/rooms/_ReplyPreview.scss

@@ -32,19 +32,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,96 @@
+/*
+Copyright 2019 Tulir Asokan <[email protected]>
+
+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;
+
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $reply-lines;
+    line-height: $line-height;
+
+    .mx_EventTile_body.mx_EventTile_bigEmoji {
+        line-height: $line-height !important;
+        // Override the big emoji override
+        font-size: 14px !important;
+    }
+}
+
+.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

@@ -304,28 +304,19 @@ 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
+                <ReplyTile
                     mxEvent={ev}
-                    tileShape="reply"
                     onHeightChanged={this.props.onHeightChanged}
                     permalinkCreator={this.props.permalinkCreator}
                     isRedacted={ev.isRedacted()}
                     isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")} />
             </blockquote>;
         });
 
-        return <div>
+        return <div className="mx_ReplyThread_wrapper">
             <div>{ header }</div>
             <div>{ evTiles }</div>
         </div>;

src/components/views/messages/MImageReplyBody.js

@@ -0,0 +1,33 @@
+/*
+Copyright 2019 Tulir Asokan <[email protected]>
+
+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 MImageBody from './MImageBody';
+
+export default class MImageReplyBody extends MImageBody {
+    onClick(ev) {
+        ev.preventDefault();
+    }
+
+    wrapImage(contentUrl, children) {
+        return children;
+    }
+
+    // Don't show "Download this_file.png ..."
+    getFileBody() {
+        return null;
+    }
+}

src/components/views/messages/MessageEvent.js

@@ -43,6 +43,9 @@ module.exports = createReactClass({
 
         /* the maximum image height to use, if the event is an image */
         maxImageHeight: PropTypes.number,
+
+        overrideBodyTypes: PropTypes.object,
+        overrideEventTypes: PropTypes.object,
     },
 
     getEventTileOps: function() {
@@ -60,9 +63,11 @@ module.exports = createReactClass({
             'm.file': sdk.getComponent('messages.MFileBody'),
             'm.audio': sdk.getComponent('messages.MAudioBody'),
             'm.video': sdk.getComponent('messages.MVideoBody'),
+            ...(this.props.overrideBodyTypes || {}),
         };
         const evTypes = {
             'm.sticker': sdk.getComponent('messages.MStickerBody'),
+            ...(this.props.overrideEventTypes || {}),
         };
 
         const content = this.props.mxEvent.getContent();
@@ -81,7 +86,7 @@ module.exports = createReactClass({
             }
         }
 
-        return <BodyType
+        return BodyType ? <BodyType
             ref="body" mxEvent={this.props.mxEvent}
             highlights={this.props.highlights}
             highlightLink={this.props.highlightLink}
@@ -90,6 +95,6 @@ module.exports = createReactClass({
             maxImageHeight={this.props.maxImageHeight}
             replacingEventId={this.props.replacingEventId}
             editState={this.props.editState}
-            onHeightChanged={this.props.onHeightChanged} />;
+            onHeightChanged={this.props.onHeightChanged} /> : null;
     },
 });

src/components/views/rooms/ReplyPreview.js

@@ -68,7 +68,7 @@ export default class ReplyPreview extends React.Component {
     render() {
         if (!this.state.event) return null;
 
-        const EventTile = sdk.getComponent('rooms.EventTile');
+        const ReplyTile = sdk.getComponent('rooms.ReplyTile');
 
         return <div className="mx_ReplyPreview">
             <div className="mx_ReplyPreview_section">
@@ -80,11 +80,11 @@ export default class ReplyPreview extends React.Component {
                          onClick={cancelQuoting} />
                 </div>
                 <div className="mx_ReplyPreview_clear" />
-                <EventTile last={true}
-                           tileShape="reply_preview"
-                           mxEvent={this.state.event}
-                           permalinkCreator={this.props.permalinkCreator}
-                           isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")} />
+                <div className="mx_ReplyPreview_tile">
+                    <ReplyTile isRedacted={this.state.event.isRedacted()}
+                               mxEvent={this.state.event}
+                               permalinkCreator={this.props.permalinkCreator} />
+                </div>
             </div>
         </div>;
     }