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 + +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 +Copyright 2020 Tulir Asokan 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 = ; + + return
+
{ thumbnail }
+
{ sender }
+
{ fileBody }
+
; } } 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;