Unverified Commit 09790754 authored by kontrollanten's avatar kontrollanten Committed by GitHub
Browse files

Use account initial as default avatar (#4002)

* client: use account initial as default avatar

* fix UI in user list

Avatars was cutted in the top and bottom
parent 75d74959
......@@ -106,7 +106,7 @@
<td *ngIf="isSelected('username')">
<a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]">
<div class="chip two-lines">
<my-account-avatar [account]="user?.account"></my-account-avatar>
<my-account-avatar [account]="user?.account" size="32"></my-account-avatar>
<div>
<span class="user-table-primary-text">{{ user.account.displayName }}</span>
<span class="text-muted">{{ user.username }}</span>
......
<ng-template #img>
<img [class]="class" [src]="avatarUrl" i18n-alt alt="Account avatar" />
<img *ngIf="avatarUrl || !initial" [class]="class" [src]="avatarUrl || defaultAvatarUrl" i18n-alt alt="Account avatar" />
<div *ngIf="!avatarUrl && initial" [class]="class">
<span>{{ initial }}</span>
</div>
</ng-template>
<a *ngIf="account && href" [href]="href" target="_blank" rel="noopener noreferrer" [title]="title">
......
......@@ -5,6 +5,10 @@
@include avatar(25px);
}
.avatar-32 {
@include avatar(32px);
}
.avatar-34 {
@include avatar(34px);
}
......@@ -19,4 +23,54 @@
.avatar-120 {
@include avatar(120px);
}
\ No newline at end of file
&.initial {
font-size: 46px;
}
}
a:hover {
text-decoration: none;
}
.initial {
background-color: #3C2109;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
border-radius: 50%;
&.blue {
background-color: #009FD4;
}
&.green {
background-color: #00AA55;
}
&.purple {
background-color: #B381B3;
}
&.gray {
background-color: #939393;
}
&.yellow {
background-color: #AA8F00;
}
&.orange {
background-color: #D47500;
}
&.red {
background-color: #E76E3C;
}
&.dark-blue {
background-color: #0A3055;
}
}
......@@ -12,7 +12,7 @@ export class AccountAvatarComponent {
avatar?: { url?: string, path: string }
url: string
}
@Input() size: '25' | '34' | '36' | '40' | '120' = '36'
@Input() size: '25' | '32' | '34' | '36' | '40' | '120' = '36'
// Use an external link
@Input() href: string
......@@ -23,6 +23,8 @@ export class AccountAvatarComponent {
this._title = value
}
defaultAvatarUrl = Account.GET_DEFAULT_AVATAR_URL()
private _title: string
get title () {
......@@ -30,10 +32,31 @@ export class AccountAvatarComponent {
}
get class () {
return `avatar avatar-${this.size}`
return `avatar avatar-${this.size}` + (this.avatarUrl ? '' : ` initial ${this.getColorTheme()}`)
}
get avatarUrl () {
return Account.GET_ACTOR_AVATAR_URL(this.account)
}
get initial () {
return this.account?.name.slice(0, 1)
}
private getColorTheme () {
const themes = {
abc: 'blue',
def: 'green',
ghi: 'purple',
jkl: 'gray',
mno: 'yellow',
pqr: 'orange',
stv: 'red',
wxyz: 'dark-blue'
}
const theme = Object.keys(themes).find(chars => chars.includes(this.initial))
return themes[theme]
}
}
......@@ -14,7 +14,7 @@ export class Account extends Actor implements ServerAccount {
userId?: number
static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) {
return Actor.GET_ACTOR_AVATAR_URL(actor) || this.GET_DEFAULT_AVATAR_URL()
return Actor.GET_ACTOR_AVATAR_URL(actor)
}
static GET_DEFAULT_AVATAR_URL () {
......@@ -46,7 +46,7 @@ export class Account extends Actor implements ServerAccount {
resetAvatar () {
this.avatar = null
this.avatarUrl = Account.GET_DEFAULT_AVATAR_URL()
this.avatarUrl = null
}
private updateComputedAttributes () {
......
......@@ -830,17 +830,9 @@
--chip-padding: .2rem .3rem;
}
.avatar {
::ng-deep .avatar {
margin-left: -.4rem;
margin-right: .2rem;
height: $avatar-height;
width: $avatar-height;
border-radius: 50%;
display: inline-block;
line-height: 1.25;
position: relative;
vertical-align: middle;
}
&.two-lines {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment