diff options
author | Chocobozzz <me@florianbigard.com> | 2023-03-06 11:39:23 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2023-03-07 10:18:32 +0100 |
commit | 9e401fde36bdcb4b5e8dc54262c01f1e660d81a8 (patch) | |
tree | a2a3c115254370048c6dc0178c7ac91b977a3f2d /client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html | |
parent | 464e4ed92c119c8f5d8ae561ad1d27a90d2581a0 (diff) | |
download | PeerTube-9e401fde36bdcb4b5e8dc54262c01f1e660d81a8.tar.gz PeerTube-9e401fde36bdcb4b5e8dc54262c01f1e660d81a8.tar.zst PeerTube-9e401fde36bdcb4b5e8dc54262c01f1e660d81a8.zip |
Refactor my actor avatar edit
Diffstat (limited to 'client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html')
-rw-r--r-- | client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html | 46 |
1 files changed, 21 insertions, 25 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 6459c5ffe..a0f65a3d9 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,23 +1,32 @@ | |||
1 | <div class="actor" *ngIf="actor"> | 1 | <div class="actor" *ngIf="actor"> |
2 | <div class="d-flex"> | 2 | <div class="position-relative me-3"> |
3 | <my-actor-avatar [actor]="actor" [actorType]="getActorType()" [previewImage]="preview" size="100"></my-actor-avatar> | 3 | <my-actor-avatar [actor]="actor" [actorType]="getActorType()" [previewImage]="preview" size="100"></my-actor-avatar> |
4 | 4 | ||
5 | <div class="actor-img-edit-container"> | 5 | <div *ngIf="editable && !hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body"> |
6 | 6 | <my-global-icon iconName="upload"></my-global-icon> | |
7 | <div *ngIf="editable && !hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body"> | 7 | <label class="visually-hidden" for="avatarfile" i18n>Upload a new avatar</label> |
8 | <my-global-icon iconName="upload"></my-global-icon> | 8 | <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/> |
9 | <label class="visually-hidden" for="avatarfile" i18n>Upload a new avatar</label> | 9 | </div> |
10 | <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/> | ||
11 | </div> | ||
12 | 10 | ||
13 | <div | 11 | <div *ngIf="editable && hasAvatar()" ngbDropdown placement="right"> |
14 | *ngIf="editable && hasAvatar()" class="actor-img-edit-button" | 12 | <div class="actor-img-edit-button" ngbDropdownToggle> |
15 | #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-image-info" autoClose="outside" placement="right" | ||
16 | > | ||
17 | <my-global-icon iconName="edit"></my-global-icon> | 13 | <my-global-icon iconName="edit"></my-global-icon> |
18 | <label class="visually-hidden" for="avatarMenu" i18n>Change your avatar</label> | 14 | <label class="visually-hidden" for="avatarMenu" i18n>Change your avatar</label> |
19 | </div> | 15 | </div> |
20 | 16 | ||
17 | <div ngbDropdownMenu> | ||
18 | <div class="dropdown-item c-hand dropdown-file" [ngbTooltip]="avatarFormat"> | ||
19 | <my-global-icon iconName="upload"></my-global-icon> | ||
20 | <span for="avatarfile" i18n>Upload a new avatar</span> | ||
21 | <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/> | ||
22 | </div> | ||
23 | |||
24 | <div class="dropdown-item c-hand" (click)="deleteAvatar()" (key.enter)="deleteAvatar()"> | ||
25 | <my-global-icon iconName="delete"></my-global-icon> | ||
26 | <span i18n>Remove avatar</span> | ||
27 | </div> | ||
28 | </div> | ||
29 | |||
21 | </div> | 30 | </div> |
22 | </div> | 31 | </div> |
23 | 32 | ||
@@ -27,16 +36,3 @@ | |||
27 | <div *ngIf="displaySubscribers" i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div> | 36 | <div *ngIf="displaySubscribers" i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div> |
28 | </div> | 37 | </div> |
29 | </div> | 38 | </div> |
30 | |||
31 | <ng-template #avatarEditContent> | ||
32 | <div class="dropdown-item c-hand" [ngbTooltip]="avatarFormat" placement="right" container="body"> | ||
33 | <my-global-icon iconName="upload"></my-global-icon> | ||
34 | <span for="avatarfile" i18n>Upload a new avatar</span> | ||
35 | <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/> | ||
36 | </div> | ||
37 | |||
38 | <div class="dropdown-item c-hand" (click)="deleteAvatar()" (key.enter)="deleteAvatar()"> | ||
39 | <my-global-icon iconName="delete"></my-global-icon> | ||
40 | <span i18n>Remove avatar</span> | ||
41 | </div> | ||
42 | </ng-template> | ||