Reimplement message bubbles with correct scope

Close SchildiChat/schildichat-desktop#16 Close SchildiChat/schildichat-desktop#10 Close SchildiChat/schildichat-desktop#2
SchildiChat · Dec 14, 2020 · f39adb9 · f39adb9
1 parent 0bf1e47
commit f39adb9
Show file tree

Hide file tree

Showing 8 changed files with 504 additions and 48 deletions.
diff --git a/res/css/_components.scss b/res/css/_components.scss
@@ -177,6 +177,7 @@
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventTile.scss";
 @import "./views/rooms/_GroupLayout.scss";
+@import "./views/rooms/_BubbleLayout.scss";
 @import "./views/rooms/_IRCLayout.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";
 @import "./views/rooms/_LinkPreviewWidget.scss";

diff --git a/res/css/views/rooms/_BubbleLayout.scss b/res/css/views/rooms/_BubbleLayout.scss
@@ -0,0 +1,361 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 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.
+*/
+
+$left-gutter: 56px;
+
+.sc_BubbleLayout {
+    // ---- Overrides ----
+
+    .mx_RoomView_MessageList {
+        padding-bottom: 0;
+    }
+
+    .mx_RoomTile {
+        .mx_RoomTile_nameContainer {
+            .mx_RoomTile_name,
+            .mx_RoomTile_messagePreview {
+                margin: 2px 2px;
+            }
+        }
+    }
+
+    .mx_EventTile {
+        // SC: no reserved space for read recipts required.
+        max-width: 100%;
+
+        > .mx_SenderProfile {
+            line-height: $font-17px;
+            padding-left: $left-gutter;
+            max-width: unset !important;
+        }
+
+        > .mx_EventTile_line {
+            padding-left: $left-gutter;
+            margin-right: unset;
+        }
+
+        > .mx_EventTile_avatar {
+            position: absolute;
+        }
+
+        .mx_ReplyThread {
+            .mx_EventTile_avatar {
+                top: 14px !important;
+            }
+            .mx_MessageTimestamp {
+                top: 2px !important;
+            }
+        }
+
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding-top: 3px;
+            padding-bottom: 3px;
+            line-height: $font-22px;
+        }
+    }
+
+    .mx_EventTile_info .mx_EventTile_line {
+        padding-left: calc($left-gutter + 18px);
+    }
+
+    .mx_SenderProfile {
+        // Sender-profile within bubble
+        max-width: 100%;
+    }
+
+    .mx_SenderProfile_name {
+        color: $accent-color !important;
+    }
+
+    .mx_EventTile_selected > div > a > .mx_MessageTimestamp {
+        left: -4px;
+    }
+
+    .mx_EventTile_msgOption {
+        float: unset;
+        text-align: unset;
+        position: unset;
+
+        margin-left: 8px;
+        margin-right: unset;
+
+        /* 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. */
+        // SC: Reserve our space
+        height: 14px;
+        margin-top: 6px;
+        margin-bottom: 6px;
+
+        &.sc_readReceipts_empty {
+            height: 0;
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+    }
+
+    .mx_EventTile_readAvatars {
+        // SC-TODO align left below msg area
+        //top: 29px;
+        top: 0;
+    }
+
+    .mx_EventTile_readAvatarRemainder {
+        height: 14px;
+    }
+
+    .mx_EventTile_content {
+        // Handled by bubble
+        margin-right: unset;
+    }
+
+    // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
+    .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
+    .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
+    .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
+        left: 5px;
+    }
+
+    .mx_MessageActionBar {
+        right: unset;
+    }
+
+    .mx_MessageActionBar_left {
+        left: $left-gutter;
+    }
+
+    .mx_MessageActionBar_right {
+        right: 8px;
+    }
+
+    .mx_MFileBody {
+        display: flow-root;
+    }
+
+    .mx_MFileBody_download {
+        display: inline;
+    }
+
+    .mx_MImageBody {
+        margin-right: 34px;
+    }
+
+    .mx_MessageTimestamp {
+        position: absolute;
+        width: 46px; /* 8 + 30 (avatar) + 8 */
+    }
+
+    // ---- Bubble specific ----
+
+    .sc_EventTile_bubbleContainer {
+        > .mx_EventTile_avatar {
+            top: 21px;
+        }
+    }
+
+    .mx_EventTile_e2eIcon {
+        display: none !important;
+    }
+
+    // .sc_EventTile_bubbleLine {
+    //     .mx_EventTile_e2eIcon {
+    //         left: 16px;
+
+    //         .sc_EventTile_bubbleTailLeftContainer & {
+    //             top: 35px;
+    //         }
+    //     }
+    // }
+
+    .sc_EventTile_bubbleArea {
+        // Max-width 75% for both-side bubbles only
+        max-width: 75%;
+        padding: 0px;
+        margin-bottom: 0;
+    }
+
+    .sc_EventTile_bubbleArea_left {
+        margin-left: 0px;
+        margin-right: auto;
+        text-align: left;
+    }
+
+    .sc_EventTile_bubble {
+        background-color: $dark-panel-bg-color;
+        padding: 10px;
+        border-radius: 2px;
+        //margin: 10px auto;
+        max-width: max-content;
+        // Min width: respect/"hide" bubble tail
+        min-width: 20px;
+        position: relative;
+        //box-sizing: content-box;
+        //display: flex;
+        //flex-wrap: wrap;
+
+        // Don't inherit bubbleArea alignment
+        text-align: left;
+
+        > *:not(.mx_ReplyThread_wrapper) {
+            .sc_LinkedTimestamp {
+                float: right;
+                display: flex;
+                margin-left: 1rem;
+
+                .mx_MessageTimestamp {
+                    visibility: visible !important;
+                    position: unset !important;
+                    width: unset !important;
+                    text-align: right !important;
+                    margin-top: auto;
+                    padding-top: 0.3rem;
+                    margin-bottom: -0.3rem;
+                    font-size: 0.85em;
+                }
+            }
+
+            .sc_EventTile_bigContent .sc_LinkedTimestamp {
+                height: 57px;
+            }
+
+            .mx_MStickerBody_wrapper + .sc_LinkedTimestamp {
+                float: unset;
+                display: block;
+            }
+        }
+    }
+
+    .sc_EventTile_bubble_left {
+        margin-left: 0px;
+        margin-right: auto;
+        background-color: $message-bubble-left;
+
+        &.sc_EventTile_bubble_tail::before {
+            content: '';
+            border: 16px solid transparent;
+            border-top-color: $message-bubble-left;
+            border-bottom: 0;
+            position: absolute;
+            left: -8px;
+            top: 0;
+        }
+    }
+
+    // Right aligned bubble
+
+    .sc_EventTile_bubbleArea_right {
+        margin-right: 8px;
+        margin-left: auto;
+        text-align: right;
+    }
+
+    .sc_EventTile_bubble_right {
+        margin-right: 0px;
+        margin-left: auto;
+        background-color: $message-bubble-right;
+
+        &.sc_EventTile_bubble_tail::before {
+            content: '';
+            border: 16px solid transparent;
+            border-top-color: $message-bubble-right;
+            border-bottom: 0;
+            position: absolute;
+            right: -8px;
+            top: 0;
+        }
+    }
+}
+
+/* Compact layout overrides */
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_EventTile {
+        padding-top: 4px;
+
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+
+        &.mx_EventTile_info {
+            // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
+            padding-top: 0px;
+            font-size: $font-13px;
+            .mx_EventTile_line, .mx_EventTile_reply {
+                line-height: $font-20px;
+            }
+            .mx_EventTile_avatar {
+                top: 4px;
+            }
+        }
+
+        .mx_SenderProfile {
+            font-size: $font-13px;
+        }
+
+        &.mx_EventTile_emote {
+            // add a bit more space for emotes so that avatars don't collide
+            padding-top: 8px;
+            .mx_EventTile_avatar {
+                top: 2px;
+            }
+            .mx_EventTile_line, .mx_EventTile_reply {
+                padding-top: 0px;
+                padding-bottom: 1px;
+            }
+        }
+
+        &.mx_EventTile_emote.mx_EventTile_continuation {
+            padding-top: 0;
+            .mx_EventTile_line, .mx_EventTile_reply {
+                padding-top: 0px;
+                padding-bottom: 0px;
+            }
+        }
+
+        .mx_EventTile_avatar {
+            top: 2px;
+        }
+
+        .mx_EventTile_e2eIcon {
+            top: 3px;
+        }
+
+        .mx_EventTile_readAvatars {
+            top: 27px;
+        }
+
+        &.mx_EventTile_continuation .mx_EventTile_readAvatars,
+        &.mx_EventTile_emote .mx_EventTile_readAvatars {
+            top: 5px;
+        }
+
+        &.mx_EventTile_info .mx_EventTile_readAvatars {
+            top: 4px;
+        }
+
+        .mx_EventTile_content .markdown-body {
+            p, ul, ol, dl, blockquote, pre, table {
+                margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
+            }
+        }
+    }
+
+    .mx_RoomView_MessageList h2 {
+        margin-top: 6px;
+    }
+}