From d1c6cfe6b95c903c517cc52c31664a979d70153b Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Wed, 30 Jun 2021 12:06:16 +0100
Subject: [PATCH] Improved message bubble layout (no reply)

---
 res/css/views/avatars/_BaseAvatar.scss    |  1 +
 res/css/views/rooms/_EventBubbleTile.scss | 51 +++++++++++++++++------
 res/css/views/rooms/_EventTile.scss       | 40 +++++++++---------
 src/components/views/rooms/EventTile.tsx  |  7 +++-
 4 files changed, 64 insertions(+), 35 deletions(-)

diff --git a/res/css/views/avatars/_BaseAvatar.scss b/res/css/views/avatars/_BaseAvatar.scss
index cbddd97e18..65e4493f19 100644
--- a/res/css/views/avatars/_BaseAvatar.scss
+++ b/res/css/views/avatars/_BaseAvatar.scss
@@ -27,6 +27,7 @@ limitations under the License.
     // https://bugzilla.mozilla.org/show_bug.cgi?id=255139
     display: inline-block;
     user-select: none;
+    line-height: 1;
 }
 
 .mx_BaseAvatar_initial {
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 28dce730ff..2009e7dcd8 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -36,34 +36,24 @@ limitations under the License.
     .mx_EventTile_line {
         width: fit-content;
         max-width: 70%;
-        background: var(--backgroundColor);
     }
 
     .mx_SenderProfile {
-        display: none;
         padding: var(--gutterSize) var(--gutterSize) 0 var(--gutterSize);
-        border-top-left-radius: var(--cornerRadius);
-        border-top-right-radius: var(--cornerRadius);
     }
 
     .mx_EventTile_line {
         padding: var(--gutterSize);
         border-radius: var(--cornerRadius);
+        background: var(--backgroundColor);
     }
 
-    /*
-    .mx_SenderProfile + .mx_EventTile_line {
-        padding-top: 0;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-    */
-
     .mx_EventTile_avatar {
         position: absolute;
         top: 0;
+        line-height: 1;
         img {
-            border: 2px solid #fff;
+            box-shadow: 0 0 0 2px #fff;
             border-radius: 50%;
         }
     }
@@ -72,6 +62,9 @@ limitations under the License.
         .mx_EventTile_line {
             float: right;
         }
+        .mx_SenderProfile {
+            display: none;
+        }
         .mx_ReactionsRow {
             float: right;
             clear: right;
@@ -88,6 +81,22 @@ limitations under the License.
         --backgroundColor: #F8FDFC;
     }
 
+    &[data-has-reply=true] {
+        > .mx_EventTile_line {
+            flex-direction: column;
+
+            > a {
+                margin-top: -12px;
+            }
+        }
+
+        .mx_ReplyThread_show {
+            order: 99999;
+            background: white;
+            box-shadow: 0 0 0 var(--gutterSize) white;
+        }
+    }
+
     &:not([data-self=true]) {
         .mx_EventTile_avatar {
             left: calc(-1 * var(--avatarSize));
@@ -100,6 +109,7 @@ limitations under the License.
     & ~ .mx_EventListSummary[data-expanded=false] {
 
         --backgroundColor: transparent;
+        --gutterSize: 0;
 
         display: flex;
         align-items: center;
@@ -140,10 +150,25 @@ limitations under the License.
         }
     }
 
+    /* Special layout scenario for "Unable To Decrypt (UTD)" events */
+    &.mx_EventTile_bad > .mx_EventTile_line {
+        flex-direction: column;
+        > a {
+            position: absolute;
+            bottom: var(--gutterSize);
+        }
+    }
+
+
     .mx_EventTile_readAvatars {
         position: absolute;
         right: 0;
         bottom: 0;
     }
 
+    .mx_MTextBody {
+        /* 30px equates to the width of the timestamp */
+        max-width: calc(100% - 35px - var(--gutterSize));
+    }
+
 }
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 1052b87b0d..11b9f5e959 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -372,26 +372,6 @@ $hover-select-border: 4px;
         left: 41px;
     }
 
-    .mx_EventTile_tileError {
-        color: red;
-        text-align: center;
-
-        // Remove some of the default tile padding so that the error is centered
-        margin-right: 0;
-        .mx_EventTile_line {
-            padding-left: 0;
-            margin-right: 0;
-        }
-
-        .mx_EventTile_line span {
-            padding: 4px 8px;
-        }
-
-        a {
-            margin-left: 1em;
-        }
-    }
-
     .mx_MImageBody {
         margin-right: 34px;
     }
@@ -626,6 +606,26 @@ $hover-select-border: 4px;
     margin-bottom: 0px;
 }
 
+.mx_EventTile_tileError {
+    color: red;
+    text-align: center;
+
+    // Remove some of the default tile padding so that the error is centered
+    margin-right: 0;
+    .mx_EventTile_line {
+        padding-left: 0;
+        margin-right: 0;
+    }
+
+    .mx_EventTile_line span {
+        padding: 4px 8px;
+    }
+
+    a {
+        margin-left: 1em;
+    }
+}
+
 @media only screen and (max-width: 480px) {
     .mx_EventTile_line, .mx_EventTile_reply {
         padding-left: 0;
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 6a8748883b..6040e1962f 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -163,8 +163,6 @@ export function getHandlerTile(ev) {
     return eventTileTypes[type];
 }
 
-const MAX_READ_AVATARS = 5;
-
 // Our component structure for EventTiles on the timeline is:
 //
 // .-EventTile------------------------------------------------.
@@ -649,6 +647,10 @@ export default class EventTile extends React.Component<IProps, IState> {
             return <SentReceipt messageState={this.props.mxEvent.getAssociatedStatus()} />;
         }
 
+        const MAX_READ_AVATARS = this.props.layout == Layout.Bubble
+            ? 2
+            : 5;
+
         // return early if there are no read receipts
         if (!this.props.readReceipts || this.props.readReceipts.length === 0) {
             // We currently must include `mx_EventTile_readAvatars` in the DOM
@@ -1194,6 +1196,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                         "data-scroll-tokens": scrollToken,
                         "data-layout": this.props.layout,
                         "data-self": isOwnEvent,
+                        "data-has-reply": !!thread,
                         "onMouseEnter": () => this.setState({ hover: true }),
                         "onMouseLeave": () => this.setState({ hover: false }),
                     }, [