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,25 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 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_SettingsBanner {
+    background: $system;
+    border-radius: 8px;
+    padding: 12px 16px;
+    gap: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .mx_SettingsBanner_content {
+        margin: 0;
+    }
+
+    .mx_AccessibleButton {
+        white-space: nowrap;
+    }
+}
@@ -0,0 +1,14 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 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_SettingsIndent {
+    padding-left: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
@@ -0,0 +1,41 @@
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+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_SettingsSection {
+    --SettingsTab_section-margin-bottom-preferences-labs: 30px;
+    --SettingsTab_heading_nth_child-margin-top: 30px;
+    --SettingsTab_tooltip-max-width: 20px; /* So it fits in the space provided by the page */
+
+    color: $primary-content;
+
+    /* Compound links carry data-kind and provide their own colour. */
+    a:not([data-kind]) {
+        color: $links;
+    }
+
+    &.mx_SettingsSection_newUi {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-6x);
+        align-items: start;
+    }
+
+    .mx_SettingsSection_header {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-3x);
+        color: var(--cpd-color-text-secondary);
+    }
+}
+
+.mx_SettingsSection_subSections {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: $spacing-32;
+
+    margin: $spacing-16 0;
+}
@@ -0,0 +1,88 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+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_SettingsTab {
+    --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */
+
+    color: $primary-content;
+
+    /* Compound links carry data-kind and provide their own colour. */
+    a:not([data-kind]) {
+        color: $links;
+    }
+
+    form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-3x);
+        flex-grow: 1;
+    }
+
+    // never want full width buttons
+    // event when other content is 100% width
+    .mx_AccessibleButton {
+        align-self: flex-start;
+        justify-self: flex-start;
+    }
+
+    .mx_Field {
+        margin: 0;
+        flex: 1;
+    }
+}
+
+.mx_SettingsTab_warningText {
+    color: $alert;
+}
+
+.mx_SettingsTab_subsectionText {
+    color: $secondary-content;
+    font: var(--cpd-font-body-md-regular);
+    display: block;
+    margin-top: 10px;
+    margin-inline-end: 80px; /* Align with the rest of the view */
+    margin-bottom: 10px;
+    margin-inline-start: 0;
+}
+
+.mx_SettingsTab_section {
+    $end-gutter: 80px;
+
+    margin-bottom: $spacing-24;
+
+    .mx_SettingsFlag {
+        margin-inline-end: $end-gutter;
+        margin-bottom: 10px;
+
+        .mx_SettingsFlag_label {
+            vertical-align: middle;
+            display: inline-block;
+            max-width: calc(100% - $font-48px); /* Force word wrap instead of colliding with the switch */
+            box-sizing: border-box;
+        }
+
+        .mx_ToggleSwitch {
+            float: inline-end;
+        }
+    }
+
+    > p {
+        margin-inline-end: $end-gutter;
+    }
+
+    &.mx_SettingsTab_subsectionText .mx_SettingsFlag {
+        margin-inline-end: 0 !important;
+    }
+}
+
+.mx_SettingsTab_sections {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: $spacing-32;
+
+    padding-bottom: $spacing-16;
+}
@@ -0,0 +1,38 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 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_NotificationSettingsTab_notificationsSection {
+    width: 360px;
+
+    .mx_StyledRadioButton {
+        flex-direction: row-reverse;
+        color: $primary-content;
+        font-size: $font-15px;
+        line-height: $font-18px;
+        font-weight: var(--cpd-font-weight-semibold);
+        margin-top: 16px;
+        position: relative;
+        align-items: center;
+
+        input + div {
+            margin-top: 8px;
+        }
+
+        .mx_NotificationSettingsTab_microCopy {
+            color: $secondary-content;
+            font-weight: normal;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            margin-right: 32px;
+        }
+    }
+}
+
+input[type="file"].mx_NotificationSound_soundUpload {
+    display: none;
+}
@@ -0,0 +1,53 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 Nordeck IT + Consulting GmbH
+
+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_PeopleRoomSettingsTab_knock {
+    display: flex;
+    margin-top: var(--cpd-space-2x);
+}
+
+.mx_PeopleRoomSettingsTab_content {
+    flex-grow: 1;
+    margin: 0 var(--cpd-space-4x);
+}
+
+.mx_PeopleRoomSettingsTab_avatar {
+    align-self: flex-start;
+    flex-shrink: 0;
+}
+
+.mx_PeopleRoomSettingsTab_name {
+    font-weight: var(--cpd-font-weight-semibold);
+}
+
+.mx_PeopleRoomSettingsTab_timestamp {
+    color: $secondary-content;
+    margin-left: var(--cpd-space-1x);
+}
+
+.mx_PeopleRoomSettingsTab_userId {
+    color: $secondary-content;
+    display: block;
+    font-size: var(--cpd-font-size-body-sm);
+}
+
+.mx_PeopleRoomSettingsTab_seeMoreOrLess {
+    margin: var(--cpd-space-3x) 0 0;
+}
+
+.mx_PeopleRoomSettingsTab_action {
+    flex-shrink: 0;
+
+    + .mx_PeopleRoomSettingsTab_action {
+        margin-left: var(--cpd-space-3x);
+    }
+}
+
+.mx_PeopleRoomSettingsTab_paragraph {
+    margin: 0;
+}
@@ -0,0 +1,15 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+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_RolesRoomSettingsTab_bannedList {
+    margin-bottom: 0;
+}
+
+.mx_RolesRoomSettingsTab_unbanBtn {
+    margin-right: 10px;
+    margin-bottom: 5px;
+}
@@ -0,0 +1,20 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+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_SecurityRoomSettingsTab_advancedSection {
+    margin-top: $spacing-16;
+}
+
+.mx_SecurityRoomSettingsTab_warning {
+    display: flex;
+    align-items: center;
+    column-gap: $spacing-4;
+
+    svg {
+        color: #ff0064; /* Match legacy icon colour until redesign */
+    }
+}
@@ -0,0 +1,13 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020, 2021 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_Field.mx_AppearanceUserSettingsTab_checkboxControlledField {
+    width: 256px;
+    /* Line up with Settings field toggle button */
+    margin-inline-start: 0;
+}
@@ -0,0 +1,12 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 Šimon Brandner <simon.bra.ag@gmail.com>
+Copyright 2019 New Vector Ltd
+
+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_HelpUserSettingsTab_accessTokenDetails {
+    width: fit-content;
+}
@@ -0,0 +1,32 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+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.
+*/
+
+.mx_KeyboardShortcut_shortcutList {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    display: grid;
+    gap: $spacing-4;
+}
+
+.mx_KeyboardShortcut_shortcutRow,
+.mx_KeyboardShortcut {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.mx_KeyboardShortcut_shortcutRow {
+    column-gap: $spacing-8;
+}
+
+.mx_KeyboardShortcut {
+    flex-wrap: nowrap;
+    column-gap: $spacing-4;
+}
@@ -0,0 +1,29 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+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_MediaPreviewAccountSetting_Radio {
+    margin: var(--cpd-space-1x) 0;
+}
+
+.mx_MediaPreviewAccountSetting {
+    margin-top: var(--cpd-space-1x);
+}
+
+.mx_MediaPreviewAccountSetting_RadioHelp {
+    /* !important because it's overriding compound help message */
+    margin-top: 0 !important;
+    margin-bottom: var(--cpd-space-1x);
+}
+
+.mx_MediaPreviewAccountSetting_Form {
+    width: 100%;
+}
+
+.mx_MediaPreviewAccountSetting_ToggleSwitch {
+    font: var(--cpd-font-body-md-medium);
+    letter-spacing: var(--cpd-font-letter-spacing-body-md);
+}
@@ -0,0 +1,11 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019 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_MjolnirUserSettingsTab_listItem {
+    margin-bottom: 2px;
+}
@@ -0,0 +1,13 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2024 The Matrix.org Foundation C.I.C.
+Copyright 2019 New Vector Ltd
+
+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_PreferencesUserSettingsTab_section_hint {
+    font: var(--cpd-font-body-sm-regular);
+    color: var(--cpd-color-text-secondary);
+}
@@ -0,0 +1,42 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+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_SecurityUserSettingsTab_bulkOptions {
+    display: flex;
+    flex-direction: row;
+    column-gap: $spacing-8;
+}
+
+.mx_SecurityUserSettingsTab_ignoredUsers {
+    padding-left: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.mx_SecurityUserSettingsTab_ignoredUser {
+    margin-bottom: $spacing-4;
+}
+
+.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
+    margin-right: $spacing-8;
+}
+
+.mx_SecurityUserSettingsTab_warning {
+    color: $alert;
+
+    svg {
+        width: 24px;
+        height: 24px;
+        margin-right: var(--cpd-space-4x);
+        color: $alert;
+    }
+}
+
+form.mx_SecurityUserSettingsTab_posthogSection {
+    /* Inhibit compound spacing here as it clashes with pre-compound UI */
+    display: contents !important;
+}
@@ -0,0 +1,25 @@
+/*
+Copyright 2024,2025 New Vector Ltd.
+Copyright 2021 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_SidebarUserSettingsTab_homeAllRoomsCheckbox {
+    margin-left: 24px;
+
+    & + div {
+        margin-left: 48px;
+    }
+}
+
+.mx_SidebarUserSettingsTab_icon {
+    margin-right: var(--cpd-space-2x);
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.mx_SidebarUserSettingsTab_checkbox label {
+    display: flex;
+}