SIGMA/swedishchamber-granprize-admin
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

* tooltip added to faded image in image upload parts

Browse Source 
* button label changed to "select" to reflect that no upload is actually happening at that point
This commit is contained in:
Danyi Dávid 2018-05-13 22:50:28 +02:00
parent a909486396
commit d406fa83fa
4 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/awardee-editor/awardee-editor.component.html
View File

@ -4,13 +4,13 @@
</mat-form-field> </mat-form-field>
<div class="image-preview-zone"> <div class="image-preview-zone">
<img [src]="profileImage" class="profile-image mat-elevation-z10" [class.tobe-replaced]="rawProfileImage" <img [src]="profileImage" class="profile-image mat-elevation-z10" [class.tobe-replaced]="rawProfileImage"
*ngIf="awardee.hasProfileImage"> *ngIf="awardee.hasProfileImage" [matTooltip]="existingProfileTooltip">
<img [src]="rawProfileImage" class="profile-image mat-elevation-z10 clickable" *ngIf="rawProfileImage" <img [src]="rawProfileImage" class="profile-image mat-elevation-z10 clickable" *ngIf="rawProfileImage"
(click)="undoImageSelect(profileImageUpload)" matTooltip="Remove image"> (click)="undoImageSelect(profileImageUpload)" matTooltip="Cancel this change">
</div> </div>
<input #profileImageUpload id="profileImageUpload" type="file" accept="image/*" hidden (change)="profileImageSelectionChange()"> <input #profileImageUpload id="profileImageUpload" type="file" accept="image/*" hidden (change)="profileImageSelectionChange()">
<label for="profileImageUpload" class="mat-raised-button"> <label for="profileImageUpload" class="mat-raised-button">
<i class="far fa-image"></i> Upload profile image <i class="far fa-image"></i> Select profile image
</label> </label>
<mat-divider></mat-divider> <mat-divider></mat-divider>
@ -25,13 +25,13 @@
</mat-form-field> </mat-form-field>
<div class="image-preview-zone"> <div class="image-preview-zone">
<img [src]="awardImage" class="award-image mat-elevation-z10" [class.tobe-replaced]="rawAwardImage" <img [src]="awardImage" class="award-image mat-elevation-z10" [class.tobe-replaced]="rawAwardImage"
*ngIf="awardee.hasAwardImage"> *ngIf="awardee.hasAwardImage" [matTooltip]="existingAwardTooltip">
<img [src]="rawAwardImage" class="award-image mat-elevation-z10 clickable" *ngIf="rawAwardImage" <img [src]="rawAwardImage" class="award-image mat-elevation-z10 clickable" *ngIf="rawAwardImage"
(click)="undoImageSelect(awardImageUpload)" matTooltip="Remove image"> (click)="undoImageSelect(awardImageUpload)" matTooltip="Cancel this change">
</div> </div>
<input #awardImageUpload id="awardImageUpload" type="file" accept="image/*" hidden (change)="awardImageSelectionChange()"> <input #awardImageUpload id="awardImageUpload" type="file" accept="image/*" hidden (change)="awardImageSelectionChange()">
<label for="awardImageUpload" class="mat-raised-button"> <label for="awardImageUpload" class="mat-raised-button">
<i class="far fa-image"></i> Upload article image <i class="far fa-image"></i> Select article image
</label> </label>
<mat-divider></mat-divider> <mat-divider></mat-divider>

8
src/app/awardee-editor/awardee-editor.component.ts
View File

@ -120,4 +120,12 @@ export class AwardeeEditorComponent implements OnInit {
get awardImage(): string { get awardImage(): string {
return `${environment.apiUrl}/awardee-image/award/${this.awardee.slug}` return `${environment.apiUrl}/awardee-image/award/${this.awardee.slug}`
} }
get existingProfileTooltip(): string {
return this.rawProfileImage ? 'Image will be replaced' : '';
}
get existingAwardTooltip(): string {
return this.rawAwardImage ? 'Image will be replaced' : '';
}
} }

6
src/app/judge-editor/judge-editor.component.html
View File

@ -11,14 +11,14 @@
<div class="image-preview-zone"> <div class="image-preview-zone">
<img [src]="profileImage" class="profile-image mat-elevation-z10" [class.tobe-replaced]="rawProfileImage" <img [src]="profileImage" class="profile-image mat-elevation-z10" [class.tobe-replaced]="rawProfileImage"
*ngIf="judge.hasProfileImage"> *ngIf="judge.hasProfileImage" [matTooltip]="existingProfileTooltip">
<img [src]="rawProfileImage" class="profile-image mat-elevation-z10 clickable" *ngIf="rawProfileImage" <img [src]="rawProfileImage" class="profile-image mat-elevation-z10 clickable" *ngIf="rawProfileImage"
(click)="undoImageSelect(profileImageUpload)" matTooltip="Remove image"> (click)="undoImageSelect(profileImageUpload)" matTooltip="Cancel this change">
</div> </div>
<input #profileImageUpload id="profileImageUpload" type="file" accept="image/*" hidden (change)="profileImageSelectionChange()"> <input #profileImageUpload id="profileImageUpload" type="file" accept="image/*" hidden (change)="profileImageSelectionChange()">
<label for="profileImageUpload" class="mat-raised-button"> <label for="profileImageUpload" class="mat-raised-button">
<i class="far fa-image"></i> Upload profile image <i class="far fa-image"></i> Select profile image
</label> </label>
<mat-divider></mat-divider> <mat-divider></mat-divider>

4
src/app/judge-editor/judge-editor.component.ts
View File

@ -99,6 +99,10 @@ export class JudgeEditorComponent implements OnInit {
return `${environment.apiUrl}/judge-image/${this.judge.slug}` return `${environment.apiUrl}/judge-image/${this.judge.slug}`
} }
get existingProfileTooltip(): string {
return this.rawProfileImage ? 'Image will be replaced' : '';
}
private sortByYear() { private sortByYear() {
this.judge.titles.sort((a,b) => a.year < b.year ? 1 : -1); this.judge.titles.sort((a,b) => a.year < b.year ? 1 : -1);
} }