swedishchamber-granprize-admin/src/app/awardee-editor/awardee-editor.component.html
Danyi Dávid d406fa83fa * tooltip added to faded image in image upload parts
* button label changed to "select" to reflect that no upload is actually happening at that point
2018-05-13 22:50:28 +02:00

46 lines
2.3 KiB
HTML

<form class="awardee-form" (ngSubmit)="saveAwardee()">
<mat-form-field class="full-width">
<input name="name" type="text" matInput placeholder="Display name" [(ngModel)]="awardee.name">
</mat-form-field>
<div class="image-preview-zone">
<img [src]="profileImage" class="profile-image mat-elevation-z10" [class.tobe-replaced]="rawProfileImage"
*ngIf="awardee.hasProfileImage" [matTooltip]="existingProfileTooltip">
<img [src]="rawProfileImage" class="profile-image mat-elevation-z10 clickable" *ngIf="rawProfileImage"
(click)="undoImageSelect(profileImageUpload)" matTooltip="Cancel this change">
</div>
<input #profileImageUpload id="profileImageUpload" type="file" accept="image/*" hidden (change)="profileImageSelectionChange()">
<label for="profileImageUpload" class="mat-raised-button">
<i class="far fa-image"></i> Select profile image
</label>
<mat-divider></mat-divider>
<mat-form-field class="full-width">
<mat-select name="year" placeholder="Year" [(ngModel)]="awardee.year">
<mat-option *ngFor="let year of years" [value]="year">{{ year }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="full-width">
<textarea name="text" matInput placeholder="Article text" rows="10" [(ngModel)]="awardee.text"></textarea>
</mat-form-field>
<div class="image-preview-zone">
<img [src]="awardImage" class="award-image mat-elevation-z10" [class.tobe-replaced]="rawAwardImage"
*ngIf="awardee.hasAwardImage" [matTooltip]="existingAwardTooltip">
<img [src]="rawAwardImage" class="award-image mat-elevation-z10 clickable" *ngIf="rawAwardImage"
(click)="undoImageSelect(awardImageUpload)" matTooltip="Cancel this change">
</div>
<input #awardImageUpload id="awardImageUpload" type="file" accept="image/*" hidden (change)="awardImageSelectionChange()">
<label for="awardImageUpload" class="mat-raised-button">
<i class="far fa-image"></i> Select article image
</label>
<mat-divider></mat-divider>
<mat-form-field class="full-width">
<input name="imageLabel" type="text" matInput placeholder="Image label" [(ngModel)]="awardee.imageLabel">
</mat-form-field>
<button type="submit" mat-raised-button color="accent" [disabled]="!canSave">
<i class="fas fa-save"></i> Save
</button>
</form>