Fix some styling issues with users listing

This commit is contained in:
George Kalampokis 2020-12-08 16:25:55 +02:00
parent c62cc1068a
commit b5a9aa9ad3
3 changed files with 14 additions and 4 deletions

View File

@ -25,7 +25,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 67px; min-width: 67px;
height: 28px; height: 28px;
color: #00c4ff; color: #00c4ff;
background: #d3f5ff 0% 0% no-repeat padding-box; background: #d3f5ff 0% 0% no-repeat padding-box;
@ -35,13 +35,15 @@
opacity: 1; opacity: 1;
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
padding-left: 10px;
padding-right: 10px;
} }
.manager { .manager {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 90px; min-width: 90px;
height: 28px; height: 28px;
color: #568b5a; color: #568b5a;
background: #9dd1a1 0% 0% no-repeat padding-box; background: #9dd1a1 0% 0% no-repeat padding-box;
@ -51,13 +53,15 @@
opacity: 1; opacity: 1;
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
padding-left: 10px;
padding-right: 10px;
} }
.admin { .admin {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 77px; min-width: 77px;
height: 28px; height: 28px;
color: #ff3d33; color: #ff3d33;
background: #ffd5d3 0% 0% no-repeat padding-box; background: #ffd5d3 0% 0% no-repeat padding-box;
@ -67,6 +71,8 @@
opacity: 1; opacity: 1;
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
padding-left: 10px;
padding-right: 10px;
} }
} }

View File

@ -15,7 +15,7 @@
<ng-container cdkColumnDef="avatar"> <ng-container cdkColumnDef="avatar">
<mat-header-cell *matHeaderCellDef></mat-header-cell> <mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let row"> <mat-cell *matCellDef="let row">
<img mat-card-avatar *ngIf="row.avatarUrl" class="my-mat-card-avatar" [src]="row.avatarUrl"> <img mat-card-avatar *ngIf="row.avatarUrl" class="my-mat-card-avatar" [src]="row.avatarUrl" (error)="this.setDefaultAvatar($event)">
<img mat-card-avatar *ngIf="!row.avatarUrl" class="my-mat-card-avatar" [src]="'assets/images/profile-placeholder.png'"> <img mat-card-avatar *ngIf="!row.avatarUrl" class="my-mat-card-avatar" [src]="'assets/images/profile-placeholder.png'">
</mat-cell> </mat-cell>
</ng-container> </ng-container>

View File

@ -182,6 +182,10 @@ export class UserListingComponent extends BaseComponent implements OnInit, After
return filename; return filename;
} }
public setDefaultAvatar(ev: Event) {
(ev.target as HTMLImageElement).src = 'assets/images/profile-placeholder.png';
}
// public principalHasAvatar(): boolean { // public principalHasAvatar(): boolean {
// return this.authentication.current().avatarUrl != null && this.authentication.current().avatarUrl.length > 0; // return this.authentication.current().avatarUrl != null && this.authentication.current().avatarUrl.length > 0;
// } // }