Further improve replies (#6396)

* Give reply tile an avatar Signed-off-by: Šimon Brandner <[email protected]> * Improve `in reply to` Signed-off-by: Šimon Brandner <[email protected]> * Drop `In reply to` for `Expand thread` Signed-off-by: Šimon Brandner <[email protected]> * Fix avatar alignment Signed-off-by: Šimon Brandner <[email protected]> * Fix default avatar alignment Signed-off-by: Šimon Brandner <[email protected]> * Simplifie code Signed-off-by: Šimon Brandner <[email protected]> * Simplifie some more code Signed-off-by: Šimon Brandner <[email protected]> * Make replies lighter Signed-off-by: Šimon Brandner <[email protected]> * Give replies a hover effect Signed-off-by: Šimon Brandner <[email protected]> * Revert changes to sender profile in replies Signed-off-by: Šimon Brandner <[email protected]> * Improve padding Signed-off-by: Šimon Brandner <[email protected]> * Increase line height of replies to keep descenders from being cut off, and generally give them more room to breathe. Signed-off-by: Robin Townsend <[email protected]> * Replace reply hover effect with a color change Signed-off-by: Robin Townsend <[email protected]> * Replace expand thread hover effect with an opacity change Signed-off-by: Robin Townsend <[email protected]> * Simplify image and sticker reply designs Signed-off-by: Robin Townsend <[email protected]> * Revise file and deleted message padding to match new reply layout Signed-off-by: Robin Townsend <[email protected]> * Remove unneeded CSS Since the download button for files got moved out of the timeline and into the message action bar, hiding it manually is no longer necessary. Signed-off-by: Robin Townsend <[email protected]> * Hide edited indicator from replies There are a few reasons for this: it adds visual noise to what is meant to be a brief preview, it can sometimes add an extra line to the reply preview, and clicking on it inside a reply was broken due to the stacking of event listeners. Signed-off-by: Robin Townsend <[email protected]> * Fix i18n Signed-off-by: Robin Townsend <[email protected]> * "Expand thread" -> "Expand replies" Signed-off-by: Šimon Brandner <[email protected]> * Add a missing import Signed-off-by: Šimon Brandner <[email protected]> * Remove unused import Signed-off-by: Šimon Brandner <[email protected]> * Remove unused import Signed-off-by: Šimon Brandner <[email protected]> * Use `this.state` Signed-off-by: Šimon Brandner <[email protected]> * Fix sender profile confusion Signed-off-by: Šimon Brandner <[email protected]> * Implement suggested changes * Make "In reply to" the same color as reply previews Signed-off-by: Šimon Brandner <[email protected]> Signed-off-by: Robin Townsend <[email protected]> Co-authored-by: Robin Townsend <[email protected]>
matrix-org · Nov 29, 2022 · 6b3098d · 6b3098d
1 parent ad090ac
commit 6b3098d
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 63 deletions.
diff --git a/res/css/views/elements/_ReplyChain.pcss b/res/css/views/elements/_ReplyChain.pcss
@@ -16,50 +16,51 @@ limitations under the License.
 
 .mx_ReplyChain {
     margin: 0 0 $spacing-8 0;
-    padding: 0 10px; /* TODO: Use a spacing variable */
-    border-left: 2px solid $accent;
-    border-radius: 2px;
+    padding-left: 10px; // TODO: Use a spacing variable
+    border-left: 2px solid var(--username-color); // TODO: Use a spacing variable
+    border-radius: 2px; // TODO: Use a spacing variable
 
     .mx_ReplyChain_show {
         &.mx_AccessibleButton_kind_link_inline {
-            color: unset;
             white-space: nowrap; /* Enforce 'In reply to' to be a single line */
+            color: $secondary-content;
+            transition: color ease 0.15s;
 
             &:hover {
-                color: $links;
+                color: $primary-content;
             }
         }
     }
 
     &.mx_ReplyChain_color1 {
-        border-left-color: $username-variant1-color;
+        --username-color: $username-variant1-color;
     }
 
     &.mx_ReplyChain_color2 {
-        border-left-color: $username-variant2-color;
+        --username-color: $username-variant2-color;
     }
 
     &.mx_ReplyChain_color3 {
-        border-left-color: $username-variant3-color;
+        --username-color: $username-variant3-color;
     }
 
     &.mx_ReplyChain_color4 {
-        border-left-color: $username-variant4-color;
+        --username-color: $username-variant4-color;
     }
 
     &.mx_ReplyChain_color5 {
-        border-left-color: $username-variant5-color;
+        --username-color: $username-variant5-color;
     }
 
     &.mx_ReplyChain_color6 {
-        border-left-color: $username-variant6-color;
+        --username-color: $username-variant6-color;
     }
 
     &.mx_ReplyChain_color7 {
-        border-left-color: $username-variant7-color;
+        --username-color: $username-variant7-color;
     }
 
     &.mx_ReplyChain_color8 {
-        border-left-color: $username-variant8-color;
+        --username-color: $username-variant8-color;
     }
 }
diff --git a/res/css/views/rooms/_ReplyTile.pcss b/res/css/views/rooms/_ReplyTile.pcss
@@ -27,21 +27,21 @@ limitations under the License.
         mask-image: url("$(res)/img/element-icons/call/video-call.svg");
     }
 
-    .mx_MFileBody {
-        .mx_MFileBody_info {
-            margin: 5px 0;
-        }
-
-        .mx_MFileBody_download {
-            display: none;
-        }
-    }
-
     > a {
         display: flex;
         flex-direction: column;
         text-decoration: none;
-        color: $primary-content;
+        color: $secondary-content;
+        transition: color ease 0.15s;
+        gap: 2px;
+
+        &:hover {
+            color: $primary-content;
+        }
+    }
+
+    .mx_RedactedBody {
+        line-height: $font-18px;
     }
 
     .mx_RedactedBody,
@@ -52,13 +52,14 @@ limitations under the License.
         &::before {
             height: 13px;
             width: 13px;
-            top: 5px;
+            top: 3px;
         }
     }
 
     /* We do reply size limiting with CSS to avoid duplicating the TextualBody component. */
     .mx_EventTile_content {
         $reply-lines: 2;
+        $line-height: $font-18px;
 
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -70,8 +71,8 @@ limitations under the License.
             font-size: $font-14px !important; /* Override the big emoji override */
         }
 
-        /* Hide line numbers */
-        .mx_EventTile_lineNumbers {
+        // Hide line numbers and edited indicator
+        .mx_EventTile_lineNumbers, .mx_EventTile_edited {
             display: none;
         }
 
@@ -101,7 +102,26 @@ limitations under the License.
         padding-top: 0;
     }
 
-    .mx_DisambiguatedProfile {
-        line-height: $font-17px;
+    .mx_ReplyTile_sender {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        .mx_DisambiguatedProfile {
+            font-size: $font-14px;
+
+            display: inline-block; // anti-zalgo, with overflow hidden
+            padding: 0;
+            margin: 0;
+
+            // truncate long display names
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .mx_BaseAvatar {
+            line-height: 14px; // To match size
+        }
     }
 }
diff --git a/src/components/views/messages/MImageReplyBody.tsx b/src/components/views/messages/MImageReplyBody.tsx
@@ -15,13 +15,9 @@ limitations under the License.
 */
 
 import React from "react";
-import { EventType } from "matrix-js-sdk/src/@types/event";
 
 import MImageBody from "./MImageBody";
-import { presentableTextForFile } from "../../../utils/FileUtils";
 import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
-import SenderProfile from "./SenderProfile";
-import { _t } from "../../../languageHandler";
 
 const FORCED_IMAGE_HEIGHT = 44;
 
@@ -34,34 +30,16 @@ export default class MImageReplyBody extends MImageBody {
         return children;
     }
 
-    // Don't show "Download this_file.png ..."
-    public getFileBody(): string {
-        const sticker = this.props.mxEvent.getType() === EventType.Sticker;
-        return presentableTextForFile(this.props.mxEvent.getContent(), sticker ? _t("Sticker") : _t("Image"), !sticker);
-    }
-
-    protected getBanner(content: IMediaEventContent): JSX.Element {
-        return null; // we don't need a banner, nor have space for one
-    }
-
     render() {
         if (this.state.error) {
             return super.render();
         }
 
         const content = this.props.mxEvent.getContent<IMediaEventContent>();
         const thumbnail = this.messageContent(this.state.contentUrl, this.state.thumbUrl, content, FORCED_IMAGE_HEIGHT);
-        const fileBody = this.getFileBody();
-        const sender = <SenderProfile
-            mxEvent={this.props.mxEvent}
-        />;
 
         return <div className="mx_MImageReplyBody">
             { thumbnail }
-            <div className="mx_MImageReplyBody_info">
-                <div className="mx_MImageReplyBody_sender">{ sender }</div>
-                <div className="mx_MImageReplyBody_filename">{ fileBody }</div>
-            </div>
         </div>;
     }
 }
diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
@@ -29,6 +29,7 @@ import MImageReplyBody from "../messages/MImageReplyBody";
 import { isVoiceMessage } from '../../../utils/EventUtils';
 import { getEventDisplayInfo } from "../../../utils/EventRenderingUtils";
 import MFileBody from "../messages/MFileBody";
+import MemberAvatar from '../avatars/MemberAvatar';
 import MVoiceMessageBody from "../messages/MVoiceMessageBody";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { renderReplyTile } from "../../../events/EventTileFactory";
@@ -106,7 +107,7 @@ export default class ReplyTile extends React.PureComponent<IProps> {
     render() {
         const mxEvent = this.props.mxEvent;
         const msgType = mxEvent.getContent().msgtype;
-        const evType = mxEvent.getType() as EventType;
+        const evType = mxEvent.getType();
 
         const {
             hasRenderer, isInfoMessage, isSeeingThroughMessageHiddenForModeration,
@@ -133,17 +134,21 @@ export default class ReplyTile extends React.PureComponent<IProps> {
         }
 
         let sender;
-        const needsSenderProfile = (
-            !isInfoMessage
-            && msgType !== MsgType.Image
-            && evType !== EventType.Sticker
-            && evType !== EventType.RoomCreate
-        );
-
-        if (needsSenderProfile) {
-            sender = <SenderProfile
-                mxEvent={mxEvent}
-            />;
+        const hasOwnSender = isInfoMessage || evType === EventType.RoomCreate;
+        if (!hasOwnSender) {
+            sender = (
+                <div className="mx_ReplyTile_sender">
+                    <MemberAvatar
+                        member={mxEvent.sender}
+                        fallbackUserId={mxEvent.getSender()}
+                        width={16}
+                        height={16}
+                    />
+                    <SenderProfile
+                        mxEvent={mxEvent}
+                    />
+                </div>
+            );
         }
 
         const msgtypeOverrides: Record<string, typeof React.Component> = {