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;
}
static/css/views/profile.css
+157
View File
@@ -776,3 +776,160 @@ body {
margin: 12px 0 8px;
line-height: 1.4;
}
/* ── Avatar photo ──────────────────────────────────────────────────────────── */
.avatar-large-wrap {
position: relative;
flex-shrink: 0;
}
/* Fill circle with photo when JS injects an <img> */
.avatar-large img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
/* Pencil button that appears on hover (visible only for local accounts) */
.avatar-edit-btn {
position: absolute;
bottom: 2px;
right: 2px;
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid var(--color-bg-surface);
background: var(--color-accent);
color: var(--color-sidebar-text-active);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
cursor: pointer;
transition:
opacity 0.15s,
transform 0.15s;
}
.avatar-edit-btn:hover {
transform: scale(1.1);
}
/* OIDC note shown instead of edit button */
.avatar-oidc-note {
font-size: 12px;
color: var(--color-text-faint);
margin-top: 6px;
font-style: italic;
}
/* ── Photo edit panel ──────────────────────────────────────────────────────── */
.avatar-edit-panel {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--color-border);
}
.avatar-edit-tabs {
display: flex;
gap: 4px;
margin-bottom: 16px;
}
.avatar-tab {
padding: 6px 16px;
border: 1px solid var(--color-border);
border-radius: 20px;
background: none;
color: var(--color-text-subtle);
font-size: 13px;
cursor: pointer;
transition:
background 0.15s,
color 0.15s,
border-color 0.15s;
}
.avatar-tab.active {
background: var(--color-accent);
color: var(--color-sidebar-text-active);
border-color: var(--color-accent);
}
.avatar-tab-pane {
display: flex;
flex-direction: column;
gap: 8px;
}
.avatar-url-input {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--color-border);
border-radius: 10px;
background: var(--color-bg-alt);
color: var(--color-text-dark);
font-size: 14px;
box-sizing: border-box;
}
.avatar-url-input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-ring);
}
.avatar-hint {
font-size: 12px;
color: var(--color-text-faint);
}
/* Hidden file input — triggered via the label */
.avatar-file-input {
display: none;
}
.avatar-file-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border: 1px dashed var(--color-border);
border-radius: 10px;
background: var(--color-bg-alt);
color: var(--color-text-subtle);
font-size: 13px;
cursor: pointer;
transition:
border-color 0.15s,
color 0.15s;
}
.avatar-file-label:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
/* Live preview thumbnail (square, small) */
.avatar-preview {
width: 88px;
height: 88px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--color-border);
}
.avatar-edit-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 16px;
}
#p-avatar-status {
margin-top: 12px;
}