FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add no-image placeholder

Browse Source
This commit is contained in:
Willem Dantuma 2021-03-01 17:25:40 +01:00
parent 01488ae2e0
commit 47f3238edd
3 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html
View File

@ -5,8 +5,12 @@
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="modal-body">
<div class="cropper">
<div *ngIf="!isImageLoaded" class="no-image" (click)="fileInput.click()">
<i class="fal fa-image"></i>
<div i18n>No image selected</div>
</div>
<image-cropper #imageCropper
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="true"
@ -23,7 +27,7 @@
<span class="btn btn-primary" (click)="fileInput.click()" i18n>Select image</span>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" i18n>Apply</button>
<button type="submit" class="btn btn-primary" i18n [disabled]="!isImageLoaded">Apply</button>
<button type="button" autofocus class="btn btn-secondary" (click)="modal.close('Save click')" i18n="@@buttonCancel">Cancel</button>
</div>
</ng-template>

9
projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.scss
View File

@ -1,4 +1,13 @@
.cropper {
position: relative;
height: calc(60vh);
}
.no-image {
text-align: center;
}
.no-image i {
font-size: calc(50vh);
color: gray;
}

3
projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts
View File

@ -21,8 +21,8 @@ export class EditImageModalComponent implements OnInit {
this.modalService.open(this.modal,{ size: 'lg' });
}
isImageLoaded:boolean = false;
aspectRatio:number = 4/3;
imageChangedEvent: any = '';
croppedImage: any = '';
@ -33,6 +33,7 @@ export class EditImageModalComponent implements OnInit {
this.croppedImage = event.base64;
}
imageLoaded(image: LoadedImage) {
this.isImageLoaded=true;
}
cropperReady() {
// cropper ready