cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(user-avatar): users can now edit there image (image is taken from OIDC picture)

Browse Source
This commit is contained in:
Edouard Vanbelle
2026-05-26 00:50:38 +02:00
parent 8b6c8e345b
commit b0c5e7827e
43 changed files with 1563 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/components/shareModal.css
+6 -53
View File
@@ -132,30 +132,10 @@
background: var(--color-bg-hover);
}
.smd-suggestion-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
}
.smd-suggestion-name {
font-size: 14px;
color: var(--color-text-heading);
/* Vignette fills the row; name + email stack vertically inside .user-vignette__info. */
.smd-suggestion-item .user-vignette {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.smd-suggestion-email {
font-size: 12px;
color: var(--color-text-faint);
min-width: 0;
}
/* Role picker beside the search box */
@@ -201,18 +181,6 @@
color: var(--color-text-heading);
}
.smd-chip-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 9px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.smd-chip-remove {
display: flex;
align-items: center;
@@ -280,25 +248,10 @@
padding: 7px 0;
}
.smd-member-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.smd-member-name {
/* Vignette grows to fill the member row; role-select + action stay right-aligned. */
.smd-member-row .user-vignette {
flex: 1;
font-size: 14px;
color: var(--color-text-heading);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.smd-member-role-select {
static/css/components/userMenu.css
+22 -41
View File
@@ -20,7 +20,7 @@
transform: scale(1.05);
}
.user-avatar-btn:hover .user-avatar {
.user-avatar-btn:hover .user-vignette__avatar {
box-shadow: 0 0 0 2px var(--color-accent-ring-strong);
}
@@ -28,21 +28,22 @@
border-color: var(--color-accent);
}
.user-avatar {
width: 38px;
height: 38px;
background: var(--color-accent-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-danger-text);
font-weight: 700;
font-size: 14px;
/* ── Avatar vignette overrides ────────────────────────────────────────────── */
/* The toolbar button and dropdown header mount avatar-only userVignette
components. Sizing is owned by userVignette.css (--menu / --xl variants);
the rules below add the decoration that is specific to this context. */
.user-avatar-btn .user-vignette__avatar {
letter-spacing: 0.5px;
user-select: none;
}
.user-menu-header .user-vignette__avatar {
letter-spacing: 0.5px;
box-shadow: 0 4px 12px var(--color-accent-shadow);
}
.user-menu {
display: none;
position: absolute;
@@ -89,42 +90,22 @@
border-bottom: 1px solid var(--color-user-menu-header-border);
}
.user-menu-avatar {
width: 48px;
height: 48px;
min-width: 48px;
background: var(--color-accent-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-danger-text);
font-weight: 700;
font-size: 17px;
letter-spacing: 0.5px;
box-shadow: 0 4px 12px var(--color-accent-shadow);
/* The header vignette (xl, name + email) fills the available width. */
.user-menu-header .user-vignette {
flex: 1;
min-width: 0;
}
.user-menu-info {
overflow: hidden;
}
.user-menu-name {
font-weight: 600;
/* Increase name prominence relative to the base vignette style. */
.user-menu-header .user-vignette__name {
font-size: 15px;
font-weight: 600;
color: var(--color-text-heading);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-menu-email {
.user-menu-header .user-vignette__email {
font-size: 12.5px;
color: var(--color-text-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
margin-top: 1px;
}
.user-menu-storage {
static/css/components/userVignette.css
+53 -1
View File
@@ -4,8 +4,10 @@
* name resolved asynchronously. Used in:
* • Owner column (list view, SharedWithMe & Favorites sections)
* • ShareModal member rows, chips, suggestion items
* • User-menu toolbar button and dropdown header (avatar-only mode)
*
* Sizes: --xs (20 px) · --sm (24 px) · --md (32 px) · --lg (40 px)
* Sizes: --xs (20 px) · --sm (24 px) · --list (36 px) · --md (32 px)
* --lg (40 px) · --menu (38 px) · --xl (48 px)
* Colours: .uv-color-0..4 (applied by JS via _colorIndex(userId) % 5)
*
* All colours use CSS custom properties — no raw hex / rgb / named values.
@@ -40,6 +42,26 @@
color: var(--color-text-secondary);
}
/* ── Email mode (showEmail: true) ─────────────────────────────────────────── */
/* Column wrapper used when both name and email are shown. */
.user-vignette__info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
overflow: hidden;
flex: 1;
}
.user-vignette__email {
font-size: 12px;
color: var(--color-text-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Size variants ─────────────────────────────────────────────────────────── */
.user-vignette--xs .user-vignette__avatar {
@@ -54,6 +76,12 @@
font-size: 10px;
}
.user-vignette--list .user-vignette__avatar {
width: 36px;
height: 36px;
font-size: 13px;
}
.user-vignette--md .user-vignette__avatar {
width: 32px;
height: 32px;
@@ -66,6 +94,18 @@
font-size: 15px;
}
.user-vignette--menu .user-vignette__avatar {
width: 38px;
height: 38px;
font-size: 14px;
}
.user-vignette--xl .user-vignette__avatar {
width: 48px;
height: 48px;
font-size: 17px;
}
/* ── Colour palette ────────────────────────────────────────────────────────── */
/* Colours are shared with the ShareModal avatar palette.
@@ -95,3 +135,15 @@
background: var(--color-badge-amber-bg);
color: var(--color-badge-amber-text);
}
/* ── Photo rendering ───────────────────────────────────────────────────────── */
/* When a photo is available the JS replaces the initials text with an <img>.
The avatar <span> keeps its background color as a fallback while loading. */
.user-vignette__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}