Make image reply rendering even more compact

res/css/_components.scss

@@ -130,6 +130,7 @@
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";
 @import "./views/messages/_MImageBody.scss";
+@import "./views/messages/_MImageReplyBody.scss";
 @import "./views/messages/_MNoticeBody.scss";
 @import "./views/messages/_MStickerBody.scss";
 @import "./views/messages/_MTextBody.scss";

res/css/views/messages/_MImageReplyBody.scss

@@ -0,0 +1,35 @@
+/*
+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_MImageReplyBody_sender {
+    grid-area: sender;
+}
+
+.mx_MImageReplyBody_filename {
+    grid-area: filename;
+}

src/components/views/messages/MImageReplyBody.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 Tulir Asokan <tulir@maunium.net>
+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.
@@ -14,7 +14,11 @@ 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) {
@@ -27,6 +31,29 @@ export default class MImageReplyBody extends MImageBody {
 
     // Don't show "Download this_file.png ..."
     getFileBody() {
-        return null;
+        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>;
     }
 }

src/components/views/rooms/ReplyTile.js

@@ -184,7 +184,7 @@ class ReplyTile extends React.Component {
         }
 
         let sender;
-        const needsSenderProfile = tileHandler !== 'messages.RoomCreate' && !isInfoMessage;
+        const needsSenderProfile = msgtype !== 'm.image' && tileHandler !== 'messages.RoomCreate' && !isInfoMessage;
 
         if (needsSenderProfile) {
             let text = null;