feat: add view to see custom user profile fields

2026-11-04 10:32:44 +00:00 · 2025-04-10 23:44:21 +02:00
parent 3561a15b47
commit 5f3fe8eae7
9 changed files with 541 additions and 0 deletions
@@ -0,0 +1,79 @@
+/*
+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_ExtendedProfileView {
+    /* Anpassung an das bestehende UserInfo Panel */
+    font-size: var(--cpd-font-size-body-sm);
+    padding: 0;
+
+    /* Styling für das Accordion */
+    .mx_ExtendedProfileView_accordion {
+        width: 100%;
+    }
+
+    /* Abstand zwischen den Feldern */
+    .mx_ExtendedProfileView_content {
+        padding: var(--cpd-space-2x) 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-4x);
+    }
+
+    /* Styling für die Felder */
+    .mx_ExtendedProfileView_field {
+        margin-bottom: var(--cpd-space-2x);
+
+        .mx_ExtendedProfileView_icon {
+            width: 20px;
+            height: 20px;
+            color: var(--cpd-color-icon-secondary);
+            flex-shrink: 0;
+        }
+    }
+
+    /* Labels und Werte */
+    .mx_ExtendedProfileView_label {
+        color: var(--cpd-color-text-secondary);
+        font-size: var(--cpd-font-size-body-xs);
+        margin-bottom: var(--cpd-space-1x);
+    }
+
+    .mx_ExtendedProfileView_value {
+        color: var(--cpd-color-text-primary);
+        word-break: break-word;
+
+        &.mx_ExtendedProfileView_multiline {
+            white-space: pre-line;
+            margin-top: var(--cpd-space-1x);
+        }
+    }
+
+    /* Spezielle Styles für Website-Links */
+    .mx_ExtendedProfileView_link {
+        color: var(--cpd-color-text-action-accent);
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    /* Für Bereich "Weitere Informationen" */
+    .mx_ExtendedProfileView_further_info {
+        padding: var(--cpd-space-1x) 0;
+    }
+
+    /* Loading State */
+    .mx_ExtendedProfileView_loading {
+        padding: var(--cpd-space-4x) 0;
+    }
+
+    /* Error State */
+    .mx_ExtendedProfileView_error {
+        margin: var(--cpd-space-2x) 0;
+    }
+}
@@ -0,0 +1,59 @@
+/*
+Copyright 2025 New Vector Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+*/
+
+.mx_UserExtendedProfileInfo {
+    padding: 16px;
+    background-color: $system;
+}
+
+.mx_UserExtendedProfileInfo_loading {
+    display: flex;
+    justify-content: center;
+    padding: 20px 0;
+}
+
+.mx_UserExtendedProfileInfo_heading {
+    margin-bottom: 12px;
+}
+
+.mx_UserExtendedProfileInfo_content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.mx_UserExtendedProfileInfo_row {
+    display: flex;
+    gap: 16px;
+}
+
+.mx_UserExtendedProfileInfo_row .mx_UserExtendedProfileInfo_field {
+    flex: 1;
+}
+
+.mx_UserExtendedProfileInfo_field {
+    margin-bottom: 4px;
+}
+
+.mx_UserExtendedProfileInfo_label {
+    margin-bottom: 3px;
+    color: $tertiary-content;
+}
+
+.mx_UserExtendedProfileInfo_value {
+    word-break: break-word;
+    overflow-wrap: break-word;
+}
+
+/* Dark theme specific styles */
+.mx_UserExtendedProfileInfo_value a {
+    color: $accent;
+    text-decoration: none;
+}
+
+.mx_UserExtendedProfileInfo_value a:hover {
+    text-decoration: underline;
+}