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,316 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019, 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.
+*/
+
+.mx_InviteDialog_flexWrapper .mx_Dialog {
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_InviteDialog_transferWrapper .mx_Dialog {
+    padding-bottom: $spacing-16;
+}
+
+.mx_InviteDialog_addressBar {
+    display: flex;
+    flex-direction: row;
+    /* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */
+    /* for the user section gets weird. */
+    margin: $spacing-8 45px 0 0;
+
+    .mx_InviteDialog_editor {
+        flex: 1;
+        margin-left: var(--cpd-space-0-5x);
+    }
+
+    .mx_InviteDialog_goButton {
+        min-width: 86px;
+        margin-inline-start: 10px;
+        height: 41px;
+        line-height: $font-25px;
+    }
+}
+
+.mx_InviteDialog_section {
+    padding-bottom: $spacing-4;
+
+    .mx_InviteDialog_section_showMore {
+        margin: 7px 18px;
+        display: block;
+    }
+}
+
+.mx_InviteDialog_section_hidden_suggestions_disclaimer {
+    padding: $spacing-8 0 $spacing-16 0;
+    font: var(--cpd-font-body-md-regular);
+
+    > span {
+        color: $primary-content;
+        font-weight: var(--cpd-font-weight-semibold);
+    }
+
+    > p {
+        margin: 0;
+    }
+}
+
+.mx_InviteDialog_footer {
+    border-top: 1px solid $input-border-color;
+
+    > h3 {
+        margin: $spacing-12 0;
+        font-size: $font-12px;
+        color: $muted-fg-color;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    .mx_CopyableText.mx_CopyableText_border {
+        width: unset; /* full width */
+        margin-bottom: 0;
+
+        > a {
+            text-decoration: none;
+            flex-shrink: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}
+
+.mx_InviteDialog_other {
+    /* Prevent the dialog from jumping around randomly when elements change. */
+    display: flex;
+    flex-direction: column;
+    height: 600px;
+    overflow: hidden;
+
+    h2 {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        white-space: pre-wrap;
+        overflow: hidden;
+    }
+
+    .mx_InviteDialog_addressBar {
+        margin-inline-end: 0;
+    }
+
+    .mx_InviteDialog_userSections {
+        flex-grow: 1;
+        padding-inline-end: 0;
+        display: flex;
+        flex-direction: column;
+        margin-top: var(--cpd-space-3x);
+        gap: var(--cpd-space-3x);
+
+        .mx_InviteDialog_section {
+            padding-bottom: 0;
+        }
+    }
+}
+
+.mx_InviteDialog_content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow: hidden;
+
+    .mx_InviteProgressBody {
+        margin-top: var(--cpd-space-12x);
+    }
+}
+
+.mx_InviteDialog_transfer {
+    width: auto;
+
+    .mx_InviteDialog_content {
+        width: 496px;
+        height: 430px;
+        overflow: visible;
+
+        .mx_TabbedView {
+            display: flex;
+            flex-direction: column;
+            flex-shrink: 1;
+            flex-grow: 1;
+            min-height: 0;
+
+            .mx_TabbedView_tabPanel {
+                flex-direction: column;
+
+                .mx_TabbedView_tabPanelContent {
+                    display: flex;
+                    flex-direction: column;
+                }
+            }
+        }
+    }
+
+    .mx_InviteDialog_addressBar {
+        margin-top: $spacing-8;
+    }
+
+    input[type="checkbox"] {
+        margin-inline-end: $spacing-8;
+    }
+}
+
+.mx_InviteDialog_userSections {
+    overflow-y: auto;
+    padding: 0 45px $spacing-4 0;
+}
+
+.mx_InviteDialog_helpText {
+    margin: 0;
+}
+
+.mx_InviteDialog_dialPad {
+    width: 224px;
+    margin-top: $spacing-16;
+    margin-inline: auto;
+
+    .mx_InviteDialog_dialPadField {
+        border-top: 0;
+        border-inline: 0;
+        border-radius: 0;
+        margin-top: 0;
+        border-color: $quaternary-content;
+
+        &:focus-within {
+            border-color: $accent;
+        }
+
+        input {
+            font-size: 18px;
+            font-weight: var(--cpd-font-weight-semibold);
+            padding-top: 0;
+        }
+
+        .mx_Field_postfix {
+            /* Remove border separator between postfix and field content */
+            border-left: none;
+        }
+    }
+
+    .mx_DialPad {
+        row-gap: $spacing-16;
+        column-gap: 48px;
+        margin-inline: auto;
+    }
+}
+
+.mx_InviteDialog_transferConsultConnect {
+    padding-top: $spacing-16;
+    /* This wants a drop shadow the full width of the dialog, so use negative margin to make it full width,
+     * then compensate with padding
+     */
+    padding-inline: $spacing-24;
+    margin-inline: calc(-1 * $spacing-24);
+    border-top: 1px solid $quinary-content;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.mx_InviteDialog_transferConsultConnect_pushRight {
+    margin-inline-start: auto;
+}
+
+.mx_InviteDialog_tile {
+    cursor: pointer;
+    display: grid;
+    gap: $spacing-8 $spacing-12;
+    align-items: center;
+
+    &.mx_InviteDialog_tile--inviterError {
+        grid-template-columns: max-content auto; /* max-content = avatar width */
+        margin-bottom: $spacing-24;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        .mx_InviteDialog_tile--inviterError_errorText {
+            grid-row-start: 2;
+            grid-column-start: 2;
+
+            font-size: $font-15px;
+            color: $alert;
+        }
+    }
+
+    * {
+        vertical-align: middle;
+    }
+
+    .mx_InviteDialog_tile_avatarStack {
+        width: 36px;
+        height: 36px;
+        display: inline-block;
+        position: relative;
+        grid-row-start: 1;
+        grid-column-start: 1;
+
+        & > * {
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+    }
+
+    .mx_InviteDialog_tile_nameStack {
+        grid-row-start: 1;
+        grid-column-start: 2;
+
+        display: flex;
+        flex-flow: column;
+        align-self: center;
+        align-items: baseline;
+        gap: 2px 0;
+        overflow: hidden;
+
+        .mx_InviteDialog_tile_nameStack_name,
+        .mx_InviteDialog_tile_nameStack_userId {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: 100%;
+        }
+
+        .mx_InviteDialog_tile_nameStack_name {
+            font-size: $font-15px;
+            font-weight: var(--cpd-font-weight-semibold);
+            color: $primary-content;
+        }
+
+        .mx_InviteDialog_tile_nameStack_userId {
+            font-size: $font-12px;
+            color: $muted-fg-color;
+        }
+    }
+}
+
+.mx_InviteDialog_multiInviterError {
+    > h4 {
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $secondary-content;
+        font-weight: normal;
+    }
+}
+
+.mx_InviteDialog_identityServer {
+    margin-top: 1em;
+}
+
+.mx_InviteDialog_oneThreepid {
+    font-size: $font-12px;
+    margin: $spacing-8 0;
+}