From 25af26323c3ca9048ab7a45d63ed74116e553aa8 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Fri, 10 Apr 2020 15:45:59 +0300
Subject: [PATCH] Make image reply rendering even more compact

---
 res/css/_components.scss                      |  1 +
 res/css/views/messages/_MImageReplyBody.scss  | 35 +++++++++++++++++++
 .../views/messages/MImageReplyBody.js         | 31 ++++++++++++++--
 src/components/views/rooms/ReplyTile.js       |  2 +-
 4 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 res/css/views/messages/_MImageReplyBody.scss

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 607257400b..2d701bb1e1 100644
--- a/res/css/_components.scss
+++ b/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";
diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss
new file mode 100644
index 0000000000..8169e027d1
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/views/messages/MImageReplyBody.js b/src/components/views/messages/MImageReplyBody.js
index 31b4d1fa82..cdc78e46e8 100644
--- a/src/components/views/messages/MImageReplyBody.js
+++ b/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>;
     }
 }
diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js
index 3ad6962f1a..ca349baac2 100644
--- a/src/components/views/rooms/ReplyTile.js
+++ b/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;