MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Add User Avatar fallback to placeholder

This commit is contained in:
George Kalampokis 2020-02-17 17:39:33 +02:00
parent 1750a4a308
commit 28074a7f17
6 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.html
View File

@ -2,8 +2,8 @@
<div mat-dialog-title>
<div class="row">
<div class="col-auto">
<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()">
<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()">
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="applyFallbackAvatar($event)">
<!-- <img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()"> -->
</div>
<span class="user-label col">{{this.getPrincipalName()}}</span>
</div>

4
dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.ts
View File

@ -47,6 +47,10 @@ export class UserDialogComponent implements OnInit {
return 'assets/images/profile-placeholder.png';
}
public applyFallbackAvatar(ev: Event) {
(ev.target as HTMLImageElement).src = this.getDefaultAvatar();
}
public navigateToProfile() {
this.dialogRef.close();
this.router.navigate(['/profile']);

4
dmp-frontend/src/app/ui/navbar/navbar.component.html
View File

@ -79,8 +79,8 @@
<!-- Login -->
<li class="nav-item" *ngIf="isAuthenticated();else loginoption">
<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()" (click)="openProfile()">
<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()">
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()">
<!-- <img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
</li>
<ng-template #loginoption>
<button mat-button [routerLink]=" ['/login'] ">

4
dmp-frontend/src/app/ui/navbar/navbar.component.ts
View File

@ -178,6 +178,10 @@ export class NavbarComponent extends BaseComponent implements OnInit {
return 'assets/images/profile-placeholder.png';
}
public applyFallbackAvatar(ev: Event) {
(ev.target as HTMLImageElement).src = this.getDefaultAvatar();
}
public isAdmin(): boolean {
if (!this.authentication.current()) { return false; }
const principalRoles = this.authentication.current().authorities;

2
dmp-frontend/src/app/ui/user-profile/user-profile.component.html
View File

@ -6,7 +6,7 @@
<div class="row">
<div class="col-12">
<div class="row profile-card-center-row">
<div class="col-auto"><img mat-card-avatar [src]="userProfile.additionalinfo.avatarUrl">
<div class="col-auto"><img mat-card-avatar [src]="userProfile.additionalinfo.avatarUrl" (error)="applyFallbackAvatar($event)">
</div>
</div>
<div class="row profile-card-center-row">

4
dmp-frontend/src/app/ui/user-profile/user-profile.component.ts
View File

@ -146,4 +146,8 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
});
}
public applyFallbackAvatar(ev: Event) {
(ev.target as HTMLImageElement).src = 'assets/images/profile-placeholder.png';
}
}