235 lines
6.6 KiB
HTML
235 lines
6.6 KiB
HTML
<div class="ucap-image-viewer-container">
|
|
<mat-toolbar class="ucap-image-viewer-header bg-primary-dark">
|
|
<!--<mat-icon class="ucap-image-viewer-icon">image</mat-icon>-->
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="21"
|
|
height="21"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
class="ucap-image-viewer-icon"
|
|
>
|
|
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
<circle cx="8.5" cy="8.5" r="1.5" />
|
|
<path d="M20.4 14.5L16 10 4 20" />
|
|
</svg>
|
|
<span class="ucap-image-viewer-title">
|
|
<ng-container
|
|
*ngIf="imageOnly; then imageOnlyName; else defaultName"
|
|
></ng-container>
|
|
<ng-template #imageOnlyName>
|
|
{{ imageOnlyData.fileName }}
|
|
</ng-template>
|
|
<ng-template #defaultName>
|
|
{{ fileInfo.fileName }}
|
|
</ng-template>
|
|
</span>
|
|
<span class="ucap-image-viewer-spacer"></span>
|
|
|
|
<button
|
|
mat-icon-button
|
|
class="ucap-image-viewer-action"
|
|
matTooltip="{{ 'common.messages.zoomReset' | translate }}"
|
|
matTooltipPosition="below"
|
|
aria-label=""
|
|
(click)="onClickZoomReset()"
|
|
>
|
|
<!--<mat-icon>settings_overscan</mat-icon>-->
|
|
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="21"
|
|
height="21"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M3.8 3.8l16.4 16.4M20.2 3.8L3.8 20.2M15 3h6v6M9 3H3v6M15 21h6v-6M9 21H3v-6"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
mat-icon-button
|
|
class="ucap-image-viewer-action"
|
|
matTooltip="{{ 'common.messages.zoomOut' | translate }}"
|
|
matTooltipPosition="below"
|
|
aria-label=""
|
|
(click)="onClickZoomOut()"
|
|
>
|
|
<!--<mat-icon>zoom_out</mat-icon>-->
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="21"
|
|
height="21"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
<line x1="8" y1="11" x2="14" y2="11"></line>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
mat-icon-button
|
|
class="ucap-image-viewer-action"
|
|
matTooltip="{{ 'common.messages.zoomIn' | translate }}"
|
|
matTooltipPosition="below"
|
|
aria-label=""
|
|
(click)="onClickZoomIn()"
|
|
>
|
|
<!--<mat-icon>zoom_in</mat-icon>-->
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="21"
|
|
height="21"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
<line x1="11" y1="8" x2="11" y2="14"></line>
|
|
<line x1="8" y1="11" x2="14" y2="11"></line>
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
*ngIf="!imageOnly"
|
|
mat-icon-button
|
|
class="ucap-image-viewer-action"
|
|
matTooltip="{{ 'common.file.download' | translate }}"
|
|
matTooltipPosition="below"
|
|
aria-label=""
|
|
(click)="onClickDownload()"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 19.01"
|
|
width="20"
|
|
height="20"
|
|
fill="currentColor"
|
|
>
|
|
<polygon
|
|
points="12.01 9 11.96 0 7.96 0.02 8.01 9.02 3.01 9.05 10.04 15.01 17.01 8.97 12.01 9"
|
|
/>
|
|
<rect y="17.01" width="20" height="2" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
*ngIf="!imageOnly"
|
|
mat-icon-button
|
|
class="ucap-image-viewer-action"
|
|
matTooltip="{{ 'common.file.saveAs' | translate }}"
|
|
matTooltipPosition="below"
|
|
aria-label=""
|
|
(click)="onClickSaveAs()"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
height="24"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
d="M10.2,18.6l0.7,2.9l2.9-0.7l6.3-10.6l-3.5-2.2L10.2,18.6z M21.4,6.4L19.3,5c-0.2-0.1-0.4-0.1-0.6-0.1
|
|
c-0.2,0-0.3,0.2-0.5,0.3l-1,1.7l3.5,2.2l1.1-1.8C22,7,21.9,6.6,21.4,6.4z"
|
|
/>
|
|
<g>
|
|
<polygon class="st0" points="7.1,15.4 12.9,10.4 1.4,10.4 " />
|
|
<rect x="5.5" y="2.9" class="st0" width="3.3" height="7.5" />
|
|
</g>
|
|
<rect x="1.4" y="16.6" class="st0" width="8.2" height="2" />
|
|
</svg>
|
|
</button>
|
|
<span class="stroke-bar"></span>
|
|
<button
|
|
mat-icon-button
|
|
color="warn"
|
|
class="ucap-image-viewer-action btn-close"
|
|
matTooltip="{{ 'common.messages.close' | translate }}"
|
|
(click)="onClickClose()"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="21"
|
|
height="21"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</mat-toolbar>
|
|
<div style="position: relative;">
|
|
<div
|
|
*ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
|
|
style="position: absolute; width: 100%;"
|
|
>
|
|
<mat-progress-bar
|
|
mode="determinate"
|
|
[value]="fileDownloadItem.downloadingProgress$ | async"
|
|
></mat-progress-bar>
|
|
</div>
|
|
</div>
|
|
<div class="ucap-image-viewer-body">
|
|
<div
|
|
#imageContainer
|
|
class="ucap-image-viewer-image-wrapper"
|
|
fxLayout="row"
|
|
fxLayout.xs="column"
|
|
fxFlexFill
|
|
fxLayoutAlign="center center"
|
|
>
|
|
<ng-container
|
|
*ngIf="imageOnly; then imageOnlyImg; else defaultImg"
|
|
></ng-container>
|
|
<ng-template #imageOnlyImg>
|
|
<img
|
|
ucapImage
|
|
#downloadImage
|
|
[base]="imageOnlyData.imageRootUrl"
|
|
[path]="imageOnlyData.imageUrl"
|
|
[default]="imageOnlyData.defaultImage"
|
|
style="cursor: pointer;"
|
|
[style.width]="'auto'"
|
|
[style.height]="imageHeight + 'px'"
|
|
(click)="onClickClose()"
|
|
(load)="onLoadFileDownloadUrl(downloadImage)"
|
|
/>
|
|
</ng-template>
|
|
<ng-template #defaultImg>
|
|
<img
|
|
#downloadImage
|
|
*ngIf="fileDownloadUrl"
|
|
[src]="fileDownloadUrl"
|
|
[style.width]="'auto'"
|
|
[style.height]="imageHeight + 'px'"
|
|
(load)="onLoadFileDownloadUrl(downloadImage)"
|
|
/>
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
</div>
|