Refactor and redesign user menu (#32812)

* Initial quick settings menu * Total refactor * Quick design fixes. * Refactor to use a view model. * Remove unused strings * Apply label * Refactor naming * Fixup most tests * Remove specific theming for old user menu * prettier * Lots of cleanup * Allow overriding the menu classes * update snap * Oops translations * tidy * Cleanup guest flows. * Copyrights * Remove unused classname * Match guest view to designs * Add guest screenshots * Update guests * snapshot * Cleanup * fix import * Update tests * More sceenshot fixes * update collapsed * move statements to prevent flake * update snap * Kick it along * Click the room list * Fiddle with the room video list. * More screenshot adjustments * fix imports * fix another import * Update snaps * update snaps * Fix snap flakes * Refactor to move actions to view component, and callbacks to Actions * Cleanup * Cleanup * Cleanup * invert auth * More bits * fix * Change md buttons to sm * Try to assemble the snapshot component of the house of cards * Consistent newlines between tests * Update snapshot Not sure why this was like this, this seems consistet for a logged in user * Update snapshot again these seem sensible for a guest * Remove test I don't really understand why the thing it asserts matters, so I'm removing it for now. * Update snapshot * screenshot * Don't show profile picture for guests I'm not really sure what it meant for this interface to have a property with a default value, so I've removed it and added the property to the view model. * Show avatar in story * update snapshots for showAvatar * Update screenshots & hopefully make hover consistent in one * Use outline home icon --------- Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2026-05-06 09:34:36 +01:00
parent bbd2d81a08
commit d4f419d1b5
58 changed files with 1231 additions and 874 deletions
@@ -0,0 +1,68 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.container {
+    /* As per design, seperator should span whole width. */
+    div[role="separator"] {
+        margin-inline: 0;
+    }
+    max-width: 300px;
+    /* Override menu defaults */
+    padding-block: 0 !important;
+    section.profile {
+        margin: var(--cpd-space-8x) var(--cpd-space-6x);
+        margin-bottom: var(--cpd-space-3x);
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-2x);
+        > * {
+            margin: auto;
+        }
+
+        .displayname {
+            text-wrap: balance;
+            text-align: center;
+        }
+
+        .createAccount {
+            margin-top: var(--cpd-space-1x);
+            margin-bottom: var(--cpd-space-2x);
+        }
+    }
+    section.actions {
+        margin: var(--cpd-space-2x) 0;
+        margin-bottom: var(--cpd-space-3x);
+        padding-top: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-1x);
+        font: var(--cpd-font-body-md-medium);
+        > button[data-kind="primary"] > svg {
+            color: var(--cpd-color-icon-secondary);
+        }
+    }
+}
+
+.triggerButton {
+    border: none;
+    background: none;
+    display: flex;
+    color: var(--cpd-color-body-primary);
+    gap: var(--cpd-space-2x);
+    > span {
+        height: fit-content;
+        margin-top: auto;
+        margin-bottom: auto;
+        max-width: 200px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        text-wrap: nowrap;
+    }
+    margin-top: var(--cpd-space-3x);
+    margin-bottom: var(--cpd-space-4x);
+    margin-left: var(--cpd-space-3x);
+}