Fix message sent states and read receipts for message bubbles

res/css/views/rooms/_EventBubbleTile.scss

@@ -20,7 +20,7 @@ limitations under the License.
     --gutterSize: 11px;
     --cornerRadius: 12px;
     --maxWidth: 70%;
-    margin-right: 100px;
+    margin-right: 80px;
 }
 
 .mx_EventTile[data-layout=bubble] {
@@ -112,10 +112,6 @@ limitations under the License.
         .mx_EventTile_line {
             float: right;
             border-bottom-left-radius: var(--cornerRadius);
-            > a {
-                left: auto;
-                right: -68px;
-            }
 
             .mx_MImageBody .mx_MImageBody_thumbnail {
                 border-bottom-left-radius: var(--cornerRadius);
@@ -160,11 +156,13 @@ limitations under the License.
         margin: 0 -12px 0 -9px;
         border-top-left-radius: var(--cornerRadius);
         border-top-right-radius: var(--cornerRadius);
+
         > a {
             position: absolute;
-            padding: 10px 20px;
-            top: 0;
-            left: -68px;
+            padding: 4px 8px;
+            bottom: 0;
+            right: 0;
+            z-index: 1; // above media
         }
 
         //noinspection CssReplaceWithShorthandSafely
@@ -184,6 +182,7 @@ limitations under the License.
 
     .mx_EventTile_line:not(.mx_EventTile_mediaLine) {
         padding: var(--gutterSize);
+        padding-right: 60px; // space for the timestamp
         background: var(--backgroundColor);
     }
 
@@ -304,11 +303,18 @@ limitations under the License.
         }
     }
 
-    .mx_EventTile_readAvatars {
+    .mx_EventTile_msgOption {
         position: absolute;
-        right: -110px;
         bottom: 0;
-        top: auto;
+        right: 0;
+        z-index: 10; // above avatar
+
+        .mx_EventTile_readAvatars {
+            position: absolute;
+            right: -100px;
+            bottom: 0;
+            top: auto;
+        }
     }
 
     .mx_MTextBody {

res/css/views/rooms/_EventTile.scss

@@ -172,54 +172,10 @@ $left-gutter: 64px;
         color: $accent-fg-color;
     }
 
-    .mx_EventTile_receiptSent,
-    .mx_EventTile_receiptSending {
-        // We don't use `position: relative` on the element because then it won't line
-        // up with the other read receipts
-
-        &::before {
-            background-color: $tertiary-content;
-            mask-repeat: no-repeat;
-            mask-position: center;
-            mask-size: 14px;
-            width: 14px;
-            height: 14px;
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-        }
-    }
-    .mx_EventTile_receiptSent::before {
-        mask-image: url('$(res)/img/element-icons/circle-sent.svg');
-    }
-    .mx_EventTile_receiptSending::before {
-        mask-image: url('$(res)/img/element-icons/circle-sending.svg');
-    }
-
     &.mx_EventTile_contextual {
         opacity: 0.4;
     }
 
-    .mx_EventTile_msgOption {
-        float: right;
-        text-align: right;
-        position: relative;
-        width: 90px;
-
-        /* Hack to stop the height of this pushing the messages apart.
-           Replaces margin-top: -6px. This interacts better with a read
-           marker being in between. Content overflows. */
-        height: 1px;
-
-        margin-right: 10px;
-    }
-
-    .mx_EventTile_msgOption a {
-        text-decoration: none;
-    }
-
     /* De-zalgoing */
     .mx_EventTile_body {
         overflow-y: hidden;
@@ -272,6 +228,52 @@ $left-gutter: 64px;
     }
 }
 
+.mx_EventTile {
+    .mx_EventTile_receiptSent,
+    .mx_EventTile_receiptSending {
+        // We don't use `position: relative` on the element because then it won't line
+        // up with the other read receipts
+
+        &::before {
+            background-color: $tertiary-content;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            mask-size: 14px;
+            width: 14px;
+            height: 14px;
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+        }
+    }
+    .mx_EventTile_receiptSent::before {
+        mask-image: url('$(res)/img/element-icons/circle-sent.svg');
+    }
+    .mx_EventTile_receiptSending::before {
+        mask-image: url('$(res)/img/element-icons/circle-sending.svg');
+    }
+
+    .mx_EventTile_msgOption {
+        float: right;
+        text-align: right;
+        position: relative;
+        width: 90px;
+
+        /* Hack to stop the height of this pushing the messages apart.
+           Replaces margin-top: -6px. This interacts better with a read
+           marker being in between. Content overflows. */
+        height: 1px;
+
+        margin-right: 10px;
+    }
+
+    .mx_EventTile_msgOption a {
+        text-decoration: none;
+    }
+}
+
 .mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line,
 .mx_EventListSummary:not([data-layout=bubble]) > :not(.mx_EventTile) .mx_EventTile_avatar ~ .mx_EventTile_line {
     padding-left: calc($left-gutter + 18px);

src/components/views/rooms/EventTile.tsx

@@ -449,7 +449,7 @@ export default class EventTile extends React.Component<IProps, IState> {
 
         // Check to make sure the sending state is appropriate. A null/undefined send status means
         // that the message is 'sent', so we're just double checking that it's explicitly not sent.
-        if (this.props.eventSendStatus && this.props.eventSendStatus !== 'sent') return false;
+        if (this.props.eventSendStatus && this.props.eventSendStatus !== EventStatus.SENT) return false;
 
         // If anyone has read the event besides us, we don't want to show a sent receipt.
         const receipts = this.props.readReceipts || [];
@@ -466,7 +466,7 @@ export default class EventTile extends React.Component<IProps, IState> {
 
         // Check the event send status to see if we are pending. Null/undefined status means the
         // message was sent, so check for that and 'sent' explicitly.
-        if (!this.props.eventSendStatus || this.props.eventSendStatus === 'sent') return false;
+        if (!this.props.eventSendStatus || this.props.eventSendStatus === EventStatus.SENT) return false;
 
         // Default to showing - there's no other event properties/behaviours we care about at
         // this point.