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,40 @@
+/*
+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_EnableLiveShare {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+
+    padding: $spacing-32 $spacing-16;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+.mx_EnableLiveShare_heading {
+    padding-top: $spacing-24;
+}
+
+.mx_EnableLiveShare_icon {
+    height: 58px;
+    width: 58px;
+}
+
+.mx_EnableLiveShare_description {
+    padding: 0 $spacing-24;
+    margin-bottom: $spacing-32;
+    line-height: $font-20px;
+}
+
+.mx_EnableLiveShare_button {
+    margin-top: $spacing-32;
+    height: 48px;
+    width: 100%;
+}
@@ -0,0 +1,11 @@
+/*
+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_LiveDurationDropdown {
+    margin-bottom: $spacing-16;
+}
@@ -0,0 +1,14 @@
+/*
+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_LocationShareMenu {
+    width: 375px;
+    height: 460px;
+    display: flex;
+    flex-direction: column;
+}
@@ -0,0 +1,58 @@
+/*
+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_MapError {
+    padding: 100px $spacing-32 0;
+    text-align: center;
+
+    --mx-map-error-icon-color: $secondary-content;
+    --mx-map-error-icon-size: 58px;
+}
+
+.mx_MapError.mx_MapError_isMinimised {
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    padding: $spacing-24;
+    background-color: $panels;
+    font-size: $font-12px;
+    line-height: $font-16px;
+
+    --mx-map-error-icon-color: $alert;
+    --mx-map-error-icon-size: 26px;
+
+    .mx_MapError_message {
+        margin: 0;
+        max-width: 275px;
+    }
+
+    .mx_MapError_heading {
+        padding-top: $spacing-8;
+        /* override h3 heading size */
+        font-size: inherit !important;
+        font-weight: normal !important;
+    }
+}
+
+.mx_MapError_message {
+    margin: $spacing-16 0 $spacing-32;
+}
+
+.mx_MapError_heading {
+    padding-top: $spacing-24;
+}
+
+.mx_MapError_icon {
+    height: var(--mx-map-error-icon-size);
+    width: var(--mx-map-error-icon-size);
+    color: var(--mx-map-error-icon-color);
+}
@@ -0,0 +1,37 @@
+/*
+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_MapFallback {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    z-index: 0;
+
+    background-color: $system;
+}
+
+.mx_MapFallback_bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-height: 100%;
+    min-width: 100%;
+    color: $quinary-content;
+    z-index: -1;
+
+    pointer-events: none;
+}
+
+.mx_MapFallback_icon {
+    width: 65px;
+    margin-bottom: $spacing-16;
+    color: $quaternary-content;
+}
@@ -0,0 +1,38 @@
+/*
+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_Marker_defaultColor {
+    color: $accent;
+}
+
+.mx_Marker_border {
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    filter: drop-shadow(0px 3px 5px rgb(0, 0, 0, 0.2));
+    background-color: currentColor;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    /* caret down */
+    &::before {
+        content: "";
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 5px solid currentColor;
+        position: absolute;
+        bottom: -4px;
+    }
+}
+
+.mx_Marker_icon {
+    color: white;
+    height: 20px;
+}
@@ -0,0 +1,45 @@
+/*
+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_ShareDialogButtons {
+    position: absolute;
+    width: 100%;
+    height: 0;
+    top: 0;
+}
+
+button.mx_ShareDialogButtons_button {
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+    background-color: $quinary-content;
+    opacity: 0.8;
+    text-align: center;
+    color: $secondary-content;
+    position: absolute;
+    top: $spacing-16;
+
+    &:hover,
+    &:focus {
+        opacity: 1;
+    }
+
+    &.left {
+        left: $spacing-16;
+    }
+
+    &.right {
+        right: $spacing-16;
+    }
+}
+
+.mx_ShareDialogButtons_button-icon {
+    width: 20px;
+    height: 20px;
+    margin: 2px;
+}
@@ -0,0 +1,90 @@
+/*
+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_ShareType {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+
+    padding: 60px $spacing-12 $spacing-32;
+
+    color: $primary-content;
+
+    .mx_ShareType_wrapper_options {
+        display: flex;
+        flex-direction: column;
+        row-gap: $spacing-12;
+        width: 100%;
+        margin-top: $spacing-12;
+
+        .mx_ShareType_option {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            padding: $spacing-8 $spacing-20;
+            background: none;
+
+            border: 1px solid $quinary-content;
+            border-radius: 8px;
+
+            font-size: $font-15px;
+            font-family: inherit;
+            line-height: inherit;
+            color: $primary-content;
+
+            &:hover,
+            &:focus {
+                border-color: $accent;
+            }
+        }
+    }
+}
+
+.mx_ShareType_badge {
+    height: 60px;
+    width: 60px;
+    margin-bottom: $spacing-20;
+    background-color: $accent;
+    border-radius: 50%;
+    border: 14px solid $accent;
+    /* colors icon */
+    color: white;
+    box-sizing: border-box;
+}
+
+.mx_ShareType_heading {
+    padding-bottom: $spacing-32;
+    text-align: center;
+}
+
+.mx_ShareType_option-icon {
+    height: 40px;
+    width: 40px;
+    box-sizing: border-box;
+    margin-right: $spacing-12;
+    flex: 0 0 40px;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 50%;
+
+    /* Live is styled by StyledLiveBeaconIcon */
+
+    &.Own {
+        border-color: $accent;
+    }
+
+    &.Pin {
+        border-color: $accent;
+        background-color: $accent;
+        padding: 7px;
+        /* colors icon */
+        color: white;
+    }
+}
@@ -0,0 +1,37 @@
+/*
+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_ZoomButtons {
+    position: absolute;
+    bottom: $spacing-32;
+    right: $spacing-24;
+    display: flex;
+    flex-direction: column;
+    row-gap: $spacing-8;
+
+    .mx_ZoomButtons_button {
+        $ZoomButtons_button-size: 24px;
+
+        border-radius: 4px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: $ZoomButtons_button-size;
+        width: $ZoomButtons_button-size;
+        background: $background;
+        box-shadow: 0px 4px 12px rgb(0, 0, 0, 0.25);
+
+        .mx_ZoomButtons_icon {
+            $ZoomButtons_icon-size: 12px;
+
+            height: $ZoomButtons_icon-size;
+            width: $ZoomButtons_icon-size;
+            color: $primary-content;
+        }
+    }
+}