diff options
author | Chocobozzz <me@florianbigard.com> | 2021-04-28 11:49:34 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-04-28 11:49:34 +0200 |
commit | 746018f6b81b40e8858303662ac9ec5ce59ac6eb (patch) | |
tree | 7b115d12c1926e6283346072fe1c6adbf056abd7 /client/src/app/shared/shared-actor-image-edit | |
parent | ec489ce2f74570f94dffb62266f4ed6f18621b3e (diff) | |
download | PeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.tar.gz PeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.tar.zst PeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.zip |
Refactor actor avatar display
Diffstat (limited to 'client/src/app/shared/shared-actor-image-edit')
4 files changed, 17 insertions, 10 deletions
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html index 0829263f4..e9c5fadcf 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html +++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html | |||
@@ -1,6 +1,6 @@ | |||
1 | <div class="actor" *ngIf="actor"> | 1 | <div class="actor" *ngIf="actor"> |
2 | <div class="d-flex"> | 2 | <div class="d-flex"> |
3 | <img [ngClass]="{ channel: isChannel() }" [src]="preview || actor.avatarUrl" alt="Avatar" /> | 3 | <my-actor-avatar [channel]="getChannel()" [account]="getAccount()" [previewImage]="preview" size="100"></my-actor-avatar> |
4 | 4 | ||
5 | <div class="actor-img-edit-container"> | 5 | <div class="actor-img-edit-container"> |
6 | 6 | ||
@@ -34,6 +34,7 @@ | |||
34 | <span for="avatarfile" i18n>Upload a new avatar</span> | 34 | <span for="avatarfile" i18n>Upload a new avatar</span> |
35 | <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/> | 35 | <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/> |
36 | </div> | 36 | </div> |
37 | |||
37 | <div class="dropdown-item c-hand" (click)="deleteAvatar()" (key.enter)="deleteAvatar()"> | 38 | <div class="dropdown-item c-hand" (click)="deleteAvatar()" (key.enter)="deleteAvatar()"> |
38 | <my-global-icon iconName="delete"></my-global-icon> | 39 | <my-global-icon iconName="delete"></my-global-icon> |
39 | <span i18n>Remove avatar</span> | 40 | <span i18n>Remove avatar</span> |
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss index 8b0172315..08e80c3b4 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss +++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss | |||
@@ -4,16 +4,8 @@ | |||
4 | .actor { | 4 | .actor { |
5 | display: flex; | 5 | display: flex; |
6 | 6 | ||
7 | img { | 7 | my-actor-avatar { |
8 | margin-right: 15px; | 8 | margin-right: 15px; |
9 | |||
10 | &:not(.channel) { | ||
11 | @include avatar(100px); | ||
12 | } | ||
13 | |||
14 | &.channel { | ||
15 | @include channel-avatar(100px); | ||
16 | } | ||
17 | } | 9 | } |
18 | 10 | ||
19 | .actor-info { | 11 | .actor-info { |
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts index d0d269489..840946690 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts +++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts | |||
@@ -80,4 +80,16 @@ export class ActorAvatarEditComponent implements OnInit { | |||
80 | isChannel () { | 80 | isChannel () { |
81 | return !!(this.actor as VideoChannel).ownerAccount | 81 | return !!(this.actor as VideoChannel).ownerAccount |
82 | } | 82 | } |
83 | |||
84 | getChannel (): VideoChannel { | ||
85 | if (this.isChannel()) return this.actor as VideoChannel | ||
86 | |||
87 | return undefined | ||
88 | } | ||
89 | |||
90 | getAccount (): Account { | ||
91 | if (this.isChannel()) return undefined | ||
92 | |||
93 | return this.actor as Account | ||
94 | } | ||
83 | } | 95 | } |
diff --git a/client/src/app/shared/shared-actor-image-edit/shared-actor-image-edit.module.ts b/client/src/app/shared/shared-actor-image-edit/shared-actor-image-edit.module.ts index c9c6472b9..f6a397d5c 100644 --- a/client/src/app/shared/shared-actor-image-edit/shared-actor-image-edit.module.ts +++ b/client/src/app/shared/shared-actor-image-edit/shared-actor-image-edit.module.ts | |||
@@ -1,6 +1,7 @@ | |||
1 | 1 | ||
2 | import { CommonModule } from '@angular/common' | 2 | import { CommonModule } from '@angular/common' |
3 | import { NgModule } from '@angular/core' | 3 | import { NgModule } from '@angular/core' |
4 | import { SharedActorImageModule } from '../shared-actor-image/shared-actor-image.module' | ||
4 | import { SharedGlobalIconModule } from '../shared-icons' | 5 | import { SharedGlobalIconModule } from '../shared-icons' |
5 | import { SharedMainModule } from '../shared-main' | 6 | import { SharedMainModule } from '../shared-main' |
6 | import { ActorAvatarEditComponent } from './actor-avatar-edit.component' | 7 | import { ActorAvatarEditComponent } from './actor-avatar-edit.component' |
@@ -11,6 +12,7 @@ import { ActorBannerEditComponent } from './actor-banner-edit.component' | |||
11 | CommonModule, | 12 | CommonModule, |
12 | 13 | ||
13 | SharedMainModule, | 14 | SharedMainModule, |
15 | SharedActorImageModule, | ||
14 | SharedGlobalIconModule | 16 | SharedGlobalIconModule |
15 | ], | 17 | ], |
16 | 18 | ||