feat: show call participants in room list (Discord-style)

2026-05-10 14:25:35 +02:00
parent b797925316
commit 3da363517f
4610 changed files with 827237 additions and 1 deletions
@@ -0,0 +1,79 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+:root {
+    --irc-line-height: $font-18px;
+}
+
+.mx_IRCLayout {
+    --name-width: 80px; /* cf. ircDisplayNameWidth on Settings.tsx */
+    --icon-width: 14px;
+    --line-height: var(--irc-line-height);
+    --right-padding: 5px;
+
+    line-height: var(--line-height) !important;
+
+    blockquote {
+        margin: 0;
+    }
+
+    .mx_NewRoomIntro {
+        > h2 {
+            line-height: initial; /* Cancel var(--irc-line-height) */
+        }
+    }
+
+    .mx_ReplyChain {
+        .mx_DisambiguatedProfile {
+            width: unset;
+            background: transparent;
+            order: unset;
+            flex-shrink: unset; /* Unset flex-shrink to prevent long display name blowout */
+        }
+
+        .mx_EventTile_emote {
+            > .mx_EventTile_avatar {
+                margin-left: initial;
+            }
+        }
+
+        .mx_MessageTimestamp {
+            width: initial;
+        }
+
+        /**
+         * adding the icon back in the document flow
+         * if it's not present, there's no unwanted wasted space
+         */
+        .mx_EventTile_e2eIcon {
+            position: relative;
+            order: -1;
+        }
+    }
+
+    .mx_ProfileResizer {
+        --resizer-width: 15px;
+        --resizer-a11y: 3px; /* Magic number, to be replaced with something more proper from the perspective of a11y */
+
+        position: absolute;
+        height: 100%;
+        width: var(--resizer-width);
+        cursor: col-resize;
+        z-index: 100;
+
+        /* Add width of every element rendered before the resizer (including padding for the avatar and the display
+           name), subtracting the resizer width itself to prevent the resizer from overlapping the text and moving
+           the resizer a bit to the left to make it easier to avoid selecting the resizer when highlighting text.
+           Please note that MessageTimestamp does not have inline padding. */
+        inset-inline-start: calc(
+            var(--RoomView_MessageList-padding) + var(--MessageTimestamp-width) + var(--icon-width) +
+                var(--right-padding) + var(--name-width) + var(--right-padding) - var(--resizer-width) -
+                var(--resizer-a11y)
+        );
+    }
+}