You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
24 lines
1.3 KiB
HTML
24 lines
1.3 KiB
HTML
<div (mouseenter)="this.mouseInImageView = true" (mouseleave)="this.mouseInImageView = false"
|
|
class="image-full-view-inner">
|
|
<div class="zoom-slider">
|
|
<mat-slider (input)="this.imageZoom=$event.value ?? 1" [max]="this.maxZoom" [min]="this.minZoom"
|
|
[value]="this.imageZoom" step="0.1" vertical></mat-slider>
|
|
<button (click)="this.resetImage()" class="reset-image-zoom-button" mat-icon-button>
|
|
<ng-icon name="mat-refresh"></ng-icon>
|
|
</button>
|
|
</div>
|
|
<div (cdkDragMoved)="this.onDragMoved($event)"
|
|
[cdkDragFreeDragPosition]="this.imagePosition" cdkDrag class="image-drag-container">
|
|
<div [style]="{scale: this.imageZoom}" class="image-scale-container">
|
|
<app-busy-indicator [busy]="this.loading" indicatorType="pulse">
|
|
<app-content-aware-image (appLoadEnd)="this.loading = false" (appLoadError)="this.loading = false"
|
|
[class.hidden]="this.loading"
|
|
[imageSrc]="this.imageUrl"
|
|
[maxRetry]="10"
|
|
[retryDelay]="500"
|
|
decoding="sync"></app-content-aware-image>
|
|
</app-busy-indicator>
|
|
</div>
|
|
</div>
|
|
</div>
|