aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorkontrollanten <6680299+kontrollanten@users.noreply.github.com>2021-04-27 16:08:10 +0200
committerGitHub <noreply@github.com>2021-04-27 16:08:10 +0200
commit0979075453b380fa8e3694db3f460e822f046c35 (patch)
tree93efe74fe8fb76c39a5acfe0722243ccdfd045b5
parent75d749596205511e012cecbdd39123277244f462 (diff)
downloadPeerTube-0979075453b380fa8e3694db3f460e822f046c35.tar.gz
PeerTube-0979075453b380fa8e3694db3f460e822f046c35.tar.zst
PeerTube-0979075453b380fa8e3694db3f460e822f046c35.zip
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
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.html2
-rw-r--r--client/src/app/shared/shared-account-avatar/account-avatar.component.html5
-rw-r--r--client/src/app/shared/shared-account-avatar/account-avatar.component.scss56
-rw-r--r--client/src/app/shared/shared-account-avatar/account-avatar.component.ts27
-rw-r--r--client/src/app/shared/shared-main/account/account.model.ts4
-rw-r--r--client/src/sass/include/_mixins.scss10
6 files changed, 88 insertions, 16 deletions
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index e114f3425..eefb8ea88 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -106,7 +106,7 @@
106 <td *ngIf="isSelected('username')"> 106 <td *ngIf="isSelected('username')">
107 <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]"> 107 <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]">
108 <div class="chip two-lines"> 108 <div class="chip two-lines">
109 <my-account-avatar [account]="user?.account"></my-account-avatar> 109 <my-account-avatar [account]="user?.account" size="32"></my-account-avatar>
110 <div> 110 <div>
111 <span class="user-table-primary-text">{{ user.account.displayName }}</span> 111 <span class="user-table-primary-text">{{ user.account.displayName }}</span>
112 <span class="text-muted">{{ user.username }}</span> 112 <span class="text-muted">{{ user.username }}</span>
diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.html b/client/src/app/shared/shared-account-avatar/account-avatar.component.html
index ca4ceb12f..083daccfb 100644
--- a/client/src/app/shared/shared-account-avatar/account-avatar.component.html
+++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.html
@@ -1,5 +1,8 @@
1<ng-template #img> 1<ng-template #img>
2 <img [class]="class" [src]="avatarUrl" i18n-alt alt="Account avatar" /> 2 <img *ngIf="avatarUrl || !initial" [class]="class" [src]="avatarUrl || defaultAvatarUrl" i18n-alt alt="Account avatar" />
3 <div *ngIf="!avatarUrl && initial" [class]="class">
4 <span>{{ initial }}</span>
5 </div>
3</ng-template> 6</ng-template>
4 7
5<a *ngIf="account && href" [href]="href" target="_blank" rel="noopener noreferrer" [title]="title"> 8<a *ngIf="account && href" [href]="href" target="_blank" rel="noopener noreferrer" [title]="title">
diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.scss b/client/src/app/shared/shared-account-avatar/account-avatar.component.scss
index bb941d712..75a4cbf86 100644
--- a/client/src/app/shared/shared-account-avatar/account-avatar.component.scss
+++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.scss
@@ -5,6 +5,10 @@
5 @include avatar(25px); 5 @include avatar(25px);
6} 6}
7 7
8.avatar-32 {
9 @include avatar(32px);
10}
11
8.avatar-34 { 12.avatar-34 {
9 @include avatar(34px); 13 @include avatar(34px);
10} 14}
@@ -19,4 +23,54 @@
19 23
20.avatar-120 { 24.avatar-120 {
21 @include avatar(120px); 25 @include avatar(120px);
22} \ No newline at end of file 26
27 &.initial {
28 font-size: 46px;
29 }
30}
31
32a:hover {
33 text-decoration: none;
34}
35
36.initial {
37 background-color: #3C2109;
38 color: #fff;
39 display: flex;
40 align-items: center;
41 justify-content: center;
42 font-size: 22px;
43 border-radius: 50%;
44
45 &.blue {
46 background-color: #009FD4;
47 }
48
49 &.green {
50 background-color: #00AA55;
51 }
52
53 &.purple {
54 background-color: #B381B3;
55 }
56
57 &.gray {
58 background-color: #939393;
59 }
60
61 &.yellow {
62 background-color: #AA8F00;
63 }
64
65 &.orange {
66 background-color: #D47500;
67 }
68
69 &.red {
70 background-color: #E76E3C;
71 }
72
73 &.dark-blue {
74 background-color: #0A3055;
75 }
76}
diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.ts b/client/src/app/shared/shared-account-avatar/account-avatar.component.ts
index 02a0a18bf..76b696566 100644
--- a/client/src/app/shared/shared-account-avatar/account-avatar.component.ts
+++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.ts
@@ -12,7 +12,7 @@ export class AccountAvatarComponent {
12 avatar?: { url?: string, path: string } 12 avatar?: { url?: string, path: string }
13 url: string 13 url: string
14 } 14 }
15 @Input() size: '25' | '34' | '36' | '40' | '120' = '36' 15 @Input() size: '25' | '32' | '34' | '36' | '40' | '120' = '36'
16 16
17 // Use an external link 17 // Use an external link
18 @Input() href: string 18 @Input() href: string
@@ -23,6 +23,8 @@ export class AccountAvatarComponent {
23 this._title = value 23 this._title = value
24 } 24 }
25 25
26 defaultAvatarUrl = Account.GET_DEFAULT_AVATAR_URL()
27
26 private _title: string 28 private _title: string
27 29
28 get title () { 30 get title () {
@@ -30,10 +32,31 @@ export class AccountAvatarComponent {
30 } 32 }
31 33
32 get class () { 34 get class () {
33 return `avatar avatar-${this.size}` 35 return `avatar avatar-${this.size}` + (this.avatarUrl ? '' : ` initial ${this.getColorTheme()}`)
34 } 36 }
35 37
36 get avatarUrl () { 38 get avatarUrl () {
37 return Account.GET_ACTOR_AVATAR_URL(this.account) 39 return Account.GET_ACTOR_AVATAR_URL(this.account)
38 } 40 }
41
42 get initial () {
43 return this.account?.name.slice(0, 1)
44 }
45
46 private getColorTheme () {
47 const themes = {
48 abc: 'blue',
49 def: 'green',
50 ghi: 'purple',
51 jkl: 'gray',
52 mno: 'yellow',
53 pqr: 'orange',
54 stv: 'red',
55 wxyz: 'dark-blue'
56 }
57
58 const theme = Object.keys(themes).find(chars => chars.includes(this.initial))
59
60 return themes[theme]
61 }
39} 62}
diff --git a/client/src/app/shared/shared-main/account/account.model.ts b/client/src/app/shared/shared-main/account/account.model.ts
index 65e6798d4..c90bafa5c 100644
--- a/client/src/app/shared/shared-main/account/account.model.ts
+++ b/client/src/app/shared/shared-main/account/account.model.ts
@@ -14,7 +14,7 @@ export class Account extends Actor implements ServerAccount {
14 userId?: number 14 userId?: number
15 15
16 static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) { 16 static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) {
17 return Actor.GET_ACTOR_AVATAR_URL(actor) || this.GET_DEFAULT_AVATAR_URL() 17 return Actor.GET_ACTOR_AVATAR_URL(actor)
18 } 18 }
19 19
20 static GET_DEFAULT_AVATAR_URL () { 20 static GET_DEFAULT_AVATAR_URL () {
@@ -46,7 +46,7 @@ export class Account extends Actor implements ServerAccount {
46 46
47 resetAvatar () { 47 resetAvatar () {
48 this.avatar = null 48 this.avatar = null
49 this.avatarUrl = Account.GET_DEFAULT_AVATAR_URL() 49 this.avatarUrl = null
50 } 50 }
51 51
52 private updateComputedAttributes () { 52 private updateComputedAttributes () {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index e03201cef..2c8ad1d57 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -830,17 +830,9 @@
830 --chip-padding: .2rem .3rem; 830 --chip-padding: .2rem .3rem;
831 } 831 }
832 832
833 .avatar { 833 ::ng-deep .avatar {
834 margin-left: -.4rem; 834 margin-left: -.4rem;
835 margin-right: .2rem; 835 margin-right: .2rem;
836 height: $avatar-height;
837 width: $avatar-height;
838
839 border-radius: 50%;
840 display: inline-block;
841 line-height: 1.25;
842 position: relative;
843 vertical-align: middle;
844 } 836 }
845 837
846 &.two-lines { 838 &.two-lines {