matrix-org · germain-gg · Jul 20, 2021 · Jun 17, 2021 · Jun 18, 2021 · Jun 30, 2021
@@ -193,6 +193,7 @@
 @import "./views/rooms/_EditMessageComposer.scss";
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventTile.scss";
+@import "./views/rooms/_EventBubbleTile.scss";
 @import "./views/rooms/_GroupLayout.scss";
 @import "./views/rooms/_IRCLayout.scss";
 @import "./views/rooms/_JumpToBottomButton.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 {

@@ -16,7 +16,6 @@ limitations under the License.
 
 .mx_MImageBody {
     display: block;
-    margin-right: 34px;
 }
 
 .mx_MImageBody_thumbnail {

@@ -26,6 +26,7 @@ limitations under the License.
         height: 24px;
         vertical-align: middle;
         margin-left: 4px;
+        margin-right: 4px;
 
         &::before {
             content: '';

@@ -0,0 +1,200 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+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_EventTile[data-layout=bubble],
+.mx_EventTile[data-layout=bubble] ~ .mx_EventListSummary {
+    --avatarSize: 32px;
+    --gutterSize: 7px;
+    --cornerRadius: 12px;
+    --maxWidth: 70%;
+}
+
+.mx_EventTile[data-layout=bubble] {
+
+    position: relative;
+    margin-top: var(--gutterSize);
+    margin-left: calc(var(--avatarSize) + var(--gutterSize));
+    margin-right: calc(var(--gutterSize) + var(--avatarSize));
+    padding: 2px 0;
+
+    /* For replies */
+    .mx_EventTile {
+        padding-top: 0;
+    }
+
+    &:hover {
+        background: $eventbubble-bg-hover;
+    }
+
+    .mx_SenderProfile,
+    .mx_EventTile_line {
+        width: fit-content;
+        max-width: 70%;
+    }
+
+    .mx_SenderProfile {
+        padding: 0 var(--gutterSize);
+    }
+
+    .mx_EventTile_line {
+        padding: var(--gutterSize);
+        border-radius: var(--cornerRadius);
+        background: var(--backgroundColor);
+        display: flex;
+        gap: var(--gutterSize);
+        > a {
+            position: absolute;
+            left: -33px;
+        }
+    }
+
+    .mx_EventTile_avatar {
+        position: absolute;
+        top: 0;
+        line-height: 1;
+        img {
+            box-shadow: 0 0 0 2px $eventbubble-avatar-outline;
+            border-radius: 50%;
+        }
+    }
+
+    &[data-self=true] {
+        .mx_EventTile_line {
+            float: right;
+        }
+        .mx_SenderProfile {
+            display: none;
+        }
+        .mx_ReactionsRow {
+            float: right;
+            clear: right;
+            display: flex;
+
+            /* Moving the "add reaction button" before the reactions */
+            > :last-child {
+                order: -1;
+            }
+        }
+        .mx_EventTile_avatar {
+            right: calc(-1 * var(--avatarSize));
+        }
+
+        --backgroundColor: $eventbubble-self-bg;
+    }
+
+    &[data-has-reply=true] {
+        > .mx_EventTile_line {
+            flex-direction: column;
+        }
+
+        .mx_ReplyThread_show {
+            order: 99999;
+            /* background: white;
+            box-shadow: 0 0 0 var(--gutterSize) white; */
+        }
+
+        .mx_ReplyThread {
+            margin: 0 calc(-1 * var(--gutterSize));
+
+            .mx_EventTile_reply {
+                padding: 0;
+                > a {
+                    display: none !important;
+                }
+            }
+
+            .mx_EventTile {
+                display: flex;
+                gap: var(--gutterSize);
+                .mx_EventTile_avatar {
+                    position: static;
+                }
+                .mx_SenderProfile {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    &[data-self=false] {
+        .mx_EventTile_avatar {
+            left: calc(-1 * var(--avatarSize));
+        }
+
+        --backgroundColor: $eventbubble-others-bg;
+    }
+
+    &.mx_EventTile_bubbleContainer,
+    &.mx_EventTile_info,
+    & ~ .mx_EventListSummary[data-expanded=false] {
+        --backgroundColor: transparent;
+        --gutterSize: 0;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .mx_EventTile_avatar {
+            position: static;
+            order: -1;
+            margin-right: 5px;
+        }
+    }
+
+    & ~ .mx_EventListSummary {
+        --maxWidth: 80%;
+        margin-left: calc(var(--avatarSize) + var(--gutterSize));
+        margin-right: calc(var(--gutterSize) + var(--avatarSize));
+        .mx_EventListSummary_toggle {
+            float: none;
+            margin: 0;
+            order: 9;
+            margin-left: 5px;
+        }
+        .mx_EventListSummary_avatars {
+            padding-top: 0;
+        }
+    }
+
+    & + .mx_EventListSummary {
+        .mx_EventTile {
+            margin-top: 0;
+            padding: 0;
+        }
+    }
+
+    .mx_EventListSummary_toggle {
+        margin-right: 55px;
+    }
+
+    /* Special layout scenario for "Unable To Decrypt (UTD)" events */
+    &.mx_EventTile_bad > .mx_EventTile_line {
+        flex-direction: column;
+    }
+
+
+    .mx_EventTile_readAvatars {
+        position: absolute;
+        right: -45px;
+        bottom: 0;
+        top: auto;
+    }
+
+    .mx_MTextBody {
+        /* 30px equates to the width of the timestamp */
+        max-width: calc(100% - 35px - var(--gutterSize));
+    }
+}