#99 UI: User Avatar Component
Description
EditCreate user avatar component with initials fallback.
Component: api/ui/templates/components/user_avatar/
Files:
- user_avatar.html
- user_avatar.css
- user_avatar.js
Features:
- Display:
- Image from URL (Gravatar or custom)
- Initials fallback (first letters of name)
- Background color from name hash
- Size variants (xs, sm, md, lg, xl)
- Options:
- Round or square
- Border option
- Status indicator dot (online, away, offline)
- Click handler for profile link
- Gravatar:
- Auto-generate from email
- Default to initials if no Gravatar
- Color Generation:
- Consistent color from email/name hash
- Pleasant, accessible color palette
- Dark text on light backgrounds
JavaScript API:
- UserAvatar.render(element, { email, name, size, showStatus })
- Globally usable: data-user-avatar attribute
Sizes:
- xs: 24px
- sm: 32px
- md: 40px (default)
- lg: 56px
- xl: 80px
With ultra attention to details and correctness.
Before closing: write comment summarizing implementation with screenshot.
Comments
Loading comments...
Context
Loading context...
Audit History
View AllLoading audit history...