Adding a more icon when the user does not have a profile picture

This commit is contained in:
Zoe Roux 2020-03-16 02:23:22 +01:00
parent 8154b93f9b
commit 04944c5164
5 changed files with 7 additions and 4 deletions

View File

@ -25,8 +25,8 @@
</a> </a>
</li> </li>
<ng-template #accountDrop> <ng-template #accountDrop>
<li class="nav-item icon" style="opacity: 1 !important;"> <li #accountParent class="nav-item icon" style="opacity: 1 !important;">
<img matRipple [src]="authManager.user.picture" [matMenuTriggerFor]="accountMenu" class="profilePicture" matTooltipPosition="below" [matTooltip]="authManager.user.name" /> <img matRipple [src]="authManager.user.picture" [matMenuTriggerFor]="accountMenu" class="profilePicture" matTooltipPosition="below" [matTooltip]="authManager.user.name" fallback="more.svg" (error)="accountParent.style.removeProperty('opacity');" />
</li> </li>
<mat-menu #accountMenu="matMenu"> <mat-menu #accountMenu="matMenu">
<button class="dropButton" mat-menu-item (click)="this.openAccountDialog()">Settings</button> <button class="dropButton" mat-menu-item (click)="this.openAccountDialog()">Settings</button>

View File

@ -84,7 +84,8 @@ export class AppComponent
const dialog = this.dialog.open(AccountComponent, {width: "500px", data: this.account}); const dialog = this.dialog.open(AccountComponent, {width: "500px", data: this.account});
dialog.afterClosed().subscribe((result: Account) => dialog.afterClosed().subscribe((result: Account) =>
{ {
this.account = result; if (result)
this.account = result;
}); });
} }
} }

View File

@ -93,7 +93,7 @@ export function loadConfig(oidcConfigService: OidcConfigService)
AuthModule.forRoot() AuthModule.forRoot()
], ],
entryComponents: [ entryComponents: [
AccountComponent AccountComponent
], ],
providers: [ providers: [
OidcConfigService, OidcConfigService,

View File

@ -56,6 +56,7 @@ export class AuthService
{ {
if (!this.isAuthenticated) if (!this.isAuthenticated)
return null; return null;
console.log("Running get account");
console.log(this.user); console.log(this.user);
return {email: this.user.email, username: this.user.username, picture: this.user.picture}; return {email: this.user.email, username: this.user.username, picture: this.user.picture};
} }

1
static/more.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="#ffffff"/></svg>

After

Width:  |  Height:  |  Size: 298 B