David BakerandGitHub
5065683658
* First stage 1. Make avatar BIGGER! 2. Move status button out to its own component so we can reuse it * Working version but using context menu rather than dropdown menu which almost looks right but not quite. * Commit the set status view component * Change to use dropdown with custom trigger * Show full set status component in user menu and styling tweaks * In user menu, clicking takes you to settings * Add the view model * oxfmt because apparently mine had decided to go away * Fix type import * Pass set status viewmodel in story * Bump compound-web for customisable dropdown * Snapshot * Add explicit aria label as combobox role things don't just inherit from their inner text * snapshot again * Only show user status if feature flag enabled * Make status btton view not a button because it doesn't need to be. Also rename accordingly. * Screenshots * Disable in settings if feature flag off * Snapshot * Snapshot again * Update screenshots including room settings one which wasn't really supposed to change although the avatar now takes up the space it's in - leaving it for design to check. * Fix size & positioning of the status button * Update screenshots * Screenshots * Test for SetStatusViewModel * Update set status view on status change * Use a link component for the status button which has built in hover state * Float the status button in a 28px container vs making it actually 28px min height * Separate user menu profile into two sections With 8px gap between things in the two sections and 12px gap between sections (ie. in practice, 12px gap between the status control and username). * Screenshot * Screenshots * Pass set status view model in the state rather than as an extra prop. Fixes it in the story too. * Pass ownprofilestore into the viewmodel * Don't use snapshot for testing the view model Avoids getting all the random stuff from the sub VM in the snapshot and better to test what we care about anyway. * don't mention the bad word * Here too * Don't show user status for guests * Update guest story to remove user status
70 lines
1.7 KiB
Plaintext
70 lines
1.7 KiB
Plaintext
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
Copyright 2019, 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_AvatarSetting_avatar {
|
|
width: 120px;
|
|
min-width: 120px; /* so it doesn't get crushed by the flexbox in languages with longer words */
|
|
height: 120px;
|
|
margin-top: 8px;
|
|
position: relative;
|
|
|
|
&.mx_AvatarSetting_avatarDisplay:hover .mx_AvatarSetting_hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
& > * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.mx_AccessibleButton.mx_AccessibleButton_kind_primary {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {
|
|
width: 100%;
|
|
}
|
|
|
|
& > img {
|
|
display: block;
|
|
height: 120px;
|
|
width: inherit;
|
|
border-radius: 120px;
|
|
cursor: pointer;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.mx_AvatarSetting_uploadButton {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 32px;
|
|
border: 1px solid var(--cpd-color-bg-canvas-default);
|
|
background-color: var(--cpd-color-bg-canvas-default);
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
position: relative;
|
|
top: 3px;
|
|
}
|
|
}
|
|
|
|
.mx_AvatarSetting_uploadButton:hover,
|
|
.mx_AvatarSetting_uploadButton_active {
|
|
background-color: var(--cpd-color-bg-subtle-primary);
|
|
}
|
|
}
|
|
|
|
.mx_AvatarSetting_removeMenuItem svg,
|
|
.mx_AvatarSetting_removeMenuItem span {
|
|
color: var(--cpd-color-text-critical-primary) !important;
|
|
}
|