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,62 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 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_BeaconListItem {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: $spacing-12 0;
+
+    border-bottom: 1px solid $system;
+
+    cursor: pointer;
+}
+
+.mx_BeaconListItem_avatarIcon {
+    flex: 0 0;
+    height: 32px;
+    width: 32px;
+}
+
+.mx_BeaconListItem_avatar {
+    flex: 0 0;
+    box-sizing: border-box;
+
+    margin-right: $spacing-8;
+    border: 2px solid $location-live-color;
+    border-radius: 50%;
+}
+
+.mx_BeaconListItem_info {
+    flex: 1 1 0;
+    width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.mx_BeaconListItem_status {
+    /* override beacon status padding */
+    padding: 0 !important;
+    margin-bottom: $spacing-8;
+
+    .mx_BeaconStatus_label {
+        font-weight: var(--cpd-font-weight-semibold);
+    }
+}
+
+.mx_BeaconListItem_lastUpdated {
+    color: $tertiary-content;
+    font-size: $font-10px;
+}
+
+.mx_BeaconListItem_interactions {
+    display: flex;
+    flex-direction: row;
+}
@@ -0,0 +1,65 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 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_BeaconStatus {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+
+    box-sizing: border-box;
+    padding: $spacing-8;
+
+    color: var(--color);
+    font-size: $font-12px;
+}
+
+.mx_BeaconStatus_Loading,
+.mx_BeaconStatus_Stopped {
+    --color: $tertiary-content;
+}
+
+.mx_BeaconStatus_Active,
+.mx_BeaconStatus_Error {
+    --color: $primary-content;
+}
+
+.mx_BeaconStatus_icon {
+    height: 32px;
+    width: 32px;
+
+    flex: 0 0 32px;
+    margin-right: $spacing-8;
+}
+
+.mx_BeaconStatus_description {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    line-height: $font-14px;
+
+    padding-right: $spacing-8;
+
+    white-space: nowrap;
+    overflow: hidden;
+
+    .mx_BeaconStatus_description_status {
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
+
+.mx_BeaconStatus_expiryTime {
+    color: $secondary-content;
+}
+
+.mx_BeaconStatus_label {
+    margin-bottom: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
@@ -0,0 +1,24 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 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_BeaconStatusTooltip {
+    position: absolute;
+    top: 42px;
+    max-width: 150px;
+    height: 38px;
+    box-sizing: content-box;
+    padding-top: $spacing-8;
+}
+
+.mx_BeaconStatusTooltip_inner {
+    position: relative;
+    height: 100%;
+    border-radius: 4px;
+    background: $menu-bg-color;
+    box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
+}
@@ -0,0 +1,63 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 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_BeaconViewDialog_wrapper .mx_Dialog {
+    padding: 0px;
+
+    /* Unset contain and position to allow the close button
+    to appear outside the dialog */
+    contain: unset;
+    position: unset;
+}
+
+.mx_BeaconViewDialog {
+    /* subtract 0.5px to prevent single-pixel margin due to rounding */
+    width: calc(80vw - 0.5px);
+    height: calc(80vh - 0.5px);
+    overflow: hidden;
+
+    /* sidebar is absolutely positioned inside */
+    position: relative;
+
+    .mx_Dialog_header {
+        margin: 0px;
+        padding: 0px;
+        position: unset;
+
+        .mx_Dialog_title {
+            display: none;
+        }
+
+        .mx_Dialog_cancelButton {
+            z-index: 4010;
+            position: fixed;
+            right: 5vw;
+            top: 5vh;
+            width: 20px;
+            height: 20px;
+            background-color: $dialog-close-external-color;
+        }
+    }
+}
+
+.mx_BeaconViewDialog_map {
+    width: 80vw;
+    height: 80vh;
+    border-radius: 8px;
+}
+
+.mx_BeaconViewDialog_mapFallbackMessage {
+    color: $secondary-content;
+    margin-bottom: $spacing-16;
+}
+
+.mx_BeaconViewDialog_viewListButton {
+    position: absolute;
+    top: $spacing-24;
+    left: $spacing-24;
+}
@@ -0,0 +1,48 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 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_DialogOwnBeaconStatus {
+    position: absolute;
+    bottom: $spacing-32;
+    width: 300px;
+    margin-left: -150px;
+    left: 50%;
+
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: stretch;
+
+    background: $background;
+    border-radius: 8px;
+    box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
+
+    padding: 0 $spacing-12;
+}
+
+.mx_DialogOwnBeaconStatus_avatarIcon {
+    flex: 0 0;
+    height: 32px;
+    width: 32px;
+    margin: $spacing-8 0 $spacing-8 0;
+}
+
+.mx_DialogOwnBeaconStatus_avatar {
+    flex: 0 0;
+    box-sizing: border-box;
+
+    border: 2px solid $location-live-color;
+    border-radius: 50%;
+    margin: $spacing-8 0 $spacing-8 0;
+}
+
+.mx_DialogOwnBeaconStatus_status {
+    flex: 1 1;
+    padding-right: 0;
+}
@@ -0,0 +1,53 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 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_DialogSidebar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 265px;
+
+    display: flex;
+    flex-direction: column;
+
+    box-sizing: border-box;
+    padding: $spacing-16;
+
+    background-color: $background;
+    box-shadow: 0px 4px 4px $menu-box-shadow-color;
+
+    .mx_DialogSidebar_header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        flex: 0 0;
+        margin-bottom: $spacing-16;
+
+        color: $primary-content;
+
+        .mx_DialogSidebar_closeButtonIcon {
+            color: $tertiary-content;
+        }
+    }
+
+    .mx_DialogSidebar_list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        flex: 1 1 0;
+        width: 100%;
+        overflow: auto;
+    }
+}
+
+.mx_DialogSidebar_noResults {
+    font: var(--cpd-font-body-md-regular);
+    color: $secondary-content;
+}
@@ -0,0 +1,27 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 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_LeftPanelLiveShareWarning {
+    width: 100%;
+    box-sizing: border-box;
+
+    padding: $spacing-4;
+    text-align: center;
+
+    background-color: $accent;
+    color: #fff;
+    font-size: $font-10px;
+
+    /* panel backdrops overlay the whole sidepanel */
+    /* go above to get hover for title */
+    z-index: 1;
+}
+
+.mx_LeftPanelLiveShareWarning__error {
+    background-color: $alert;
+}
@@ -0,0 +1,12 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 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_LiveTimeRemaining {
+    color: $secondary-content;
+    font-size: $font-12px;
+}
@@ -0,0 +1,23 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 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_OwnBeaconStatus_button {
+    margin-left: $spacing-8;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button {
+    /* align to top to make room for timestamp */
+    /* in bubble view */
+    align-self: start;
+}
+
+.mx_OwnBeaconStatus_destructiveButton {
+    /* override button link_inline styles */
+    color: $alert !important;
+    font-weight: var(--cpd-font-weight-semibold) !important;
+}
@@ -0,0 +1,31 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 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_ShareLatestLocation_icon {
+    height: 13px;
+    width: 13px;
+    color: $secondary-content;
+}
+
+/* double class to be more specific than the general mx_CopyableText CSS rule */
+.mx_CopyableText.mx_ShareLatestLocation_copy {
+    /* override copyable text style to make compact */
+    .mx_CopyableText_copyButton {
+        height: 13px;
+        margin-left: $spacing-8 !important;
+        position: relative;
+        top: -1px;
+        width: 13px;
+
+        &::before {
+            background-color: $secondary-content;
+            height: 13px;
+            width: 13px;
+        }
+    }
+}
@@ -0,0 +1,32 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 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_StyledLiveBeaconIcon {
+    flex-grow: 0;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 50%;
+
+    background-color: $location-live-color;
+    border-color: $location-live-color;
+    padding: 2px;
+    /* colors icon */
+    color: white;
+}
+
+.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_error {
+    background-color: $alert;
+    border-color: $alert;
+}
+
+.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_idle {
+    background-color: $quaternary-content;
+    border-color: $quaternary-content;
+}