From 1ea7da819e5bfae7b443ed722c18c4165d101439 Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Wed, 13 Jan 2021 09:12:55 +0100
Subject: add ability to remove one's avatar for account and channels (#3467)

* add ability to remove one's avatar for account and channels

* add ability to remove one's avatar for account and channels

* only display avatar edition options after input change
---
 .../shared/shared-main/account/account.model.ts    |  5 ++++
 .../account/actor-avatar-info.component.html       | 28 +++++++++++++++----
 .../account/actor-avatar-info.component.scss       | 14 ++++++++++
 .../account/actor-avatar-info.component.ts         | 31 ++++++++++++++++++----
 4 files changed, 68 insertions(+), 10 deletions(-)

(limited to 'client/src/app/shared/shared-main/account')

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 b3dc6cfe5..b71a893d1 100644
--- a/client/src/app/shared/shared-main/account/account.model.ts
+++ b/client/src/app/shared/shared-main/account/account.model.ts
@@ -44,6 +44,11 @@ export class Account extends Actor implements ServerAccount {
     this.updateComputedAttributes()
   }
 
+  resetAvatar () {
+    this.avatar = null
+    this.avatarUrl = Account.GET_DEFAULT_AVATAR_URL()
+  }
+
   private updateComputedAttributes () {
     this.avatarUrl = Account.GET_ACTOR_AVATAR_URL(this)
   }
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html b/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
index e63d8de2d..a34d27b26 100644
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
+++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
@@ -4,12 +4,18 @@
       <img [src]="actor.avatarUrl" alt="Avatar" />
 
       <div class="actor-img-edit-container">
-        <div class="actor-img-edit-button" [ngbTooltip]="avatarFormat"
-          placement="right" container="body">
+
+        <div *ngIf="!hasAvatar" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
+          <my-global-icon iconName="upload"></my-global-icon>
+          <label class="sr-only" for="avatarfile" i18n>Upload a new avatar</label>
+          <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
+        </div>
+
+        <div *ngIf="hasAvatar" class="actor-img-edit-button" #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-avatar-info" autoClose="outside" placement="right">
           <my-global-icon iconName="edit"></my-global-icon>
-          <label for="avatarfile" i18n>Change your avatar</label>
-          <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/>
+          <label class="sr-only" for="avatarMenu" i18n>Change your avatar</label>
         </div>
+
       </div>
     </div>
 
@@ -22,4 +28,16 @@
       <div i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div>
     </div>
   </div>
-</ng-container>
\ No newline at end of file
+</ng-container>
+
+<ng-template #avatarEditContent>
+  <div class="dropdown-item c-hand" [ngbTooltip]="avatarFormat" placement="right" container="body">
+    <my-global-icon iconName="upload"></my-global-icon>
+    <span for="avatarfile" i18n>Upload a new avatar</span>
+    <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
+  </div>
+  <div class="dropdown-item c-hand" (click)="deleteAvatar()" (key.enter)="deleteAvatar()">
+    <my-global-icon iconName="delete"></my-global-icon>
+    <span i18n>Remove avatar</span>
+  </div>
+</ng-template>
\ No newline at end of file
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss b/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
index 7118e9471..57c298508 100644
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
+++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
@@ -70,3 +70,17 @@
     }
   }
 }
+
+.actor-img-edit-container ::ng-deep .popover-avatar-info .popover-body {
+  padding: 0;
+
+  .dropdown-item {
+    padding: 6px 10px;
+    border-radius: 4px;
+
+    &:first-child {
+      @include peertube-file;
+      display: block;
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
index de78a390e..451bbbba3 100644
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
+++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
@@ -1,22 +1,27 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
 import { Notifier, ServerService } from '@app/core'
 import { getBytes } from '@root-helpers/bytes'
 import { ServerConfig } from '@shared/models'
 import { VideoChannel } from '../video-channel/video-channel.model'
 import { Account } from '../account/account.model'
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
+import { Actor } from './actor.model'
 
 @Component({
   selector: 'my-actor-avatar-info',
   templateUrl: './actor-avatar-info.component.html',
   styleUrls: [ './actor-avatar-info.component.scss' ]
 })
-export class ActorAvatarInfoComponent implements OnInit {
+export class ActorAvatarInfoComponent implements OnInit, OnChanges {
   @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
+  @ViewChild('avatarPopover') avatarPopover: NgbPopover
 
   @Input() actor: VideoChannel | Account
 
   @Output() avatarChange = new EventEmitter<FormData>()
+  @Output() avatarDelete = new EventEmitter<void>()
 
+  private avatarUrl: string
   private serverConfig: ServerConfig
 
   constructor (
@@ -30,19 +35,31 @@ export class ActorAvatarInfoComponent implements OnInit {
         .subscribe(config => this.serverConfig = config)
   }
 
-  onAvatarChange () {
+  ngOnChanges (changes: SimpleChanges) {
+    if (changes['actor']) {
+      this.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.actor)
+    }
+  }
+
+  onAvatarChange (input: HTMLInputElement) {
+    this.avatarfileInput = new ElementRef(input)
+
     const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ]
     if (avatarfile.size > this.maxAvatarSize) {
-      this.notifier.error('Error', 'This image is too large.')
+      this.notifier.error('Error', $localize`This image is too large.`)
       return
     }
 
     const formData = new FormData()
     formData.append('avatarfile', avatarfile)
-
+    this.avatarPopover?.close()
     this.avatarChange.emit(formData)
   }
 
+  deleteAvatar () {
+    this.avatarDelete.emit()
+  }
+
   get maxAvatarSize () {
     return this.serverConfig.avatar.file.size.max
   }
@@ -58,4 +75,8 @@ export class ActorAvatarInfoComponent implements OnInit {
   get avatarFormat () {
     return `${$localize`max size`}: 192*192px, ${this.maxAvatarSizeInBytes} ${$localize`extensions`}: ${this.avatarExtensions}`
   }
+
+  get hasAvatar () {
+    return !!this.avatarUrl
+  }
 }
-- 
cgit v1.2.3