179 lines
4.9 KiB
HTML
Raw Normal View History

2019-11-06 13:48:06 +09:00
<div class="ucap-image-viewer-container">
2019-11-13 15:28:33 +09:00
<mat-toolbar class="ucap-image-viewer-header bg-primary-dark">
2019-11-08 16:02:42 +09:00
<!--<mat-icon class="ucap-image-viewer-icon">image</mat-icon>-->
2019-11-13 15:28:33 +09:00
<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"
>
2019-11-08 16:02:42 +09:00
<rect x="3" y="3" width="18" height="18" rx="2" />
<circle cx="8.5" cy="8.5" r="1.5" />
2019-11-13 15:28:33 +09:00
<path d="M20.4 14.5L16 10 4 20" />
</svg>
<span class="ucap-image-viewer-title">{{ fileInfo.fileName }}</span>
2019-11-06 13:48:06 +09:00
<span class="ucap-image-viewer-spacer"></span>
<button
mat-icon-button
class="ucap-image-viewer-action"
2020-01-08 14:43:43 +09:00
matTooltip="{{ 'common.messages.zoomReset' | translate }}"
matTooltipPosition="below"
2019-11-06 18:19:37 +09:00
aria-label=""
2020-01-29 17:17:04 +09:00
(click)="onClickZoomReset()"
2019-11-06 13:48:06 +09:00
>
2019-11-08 16:02:42 +09:00
<!--<mat-icon>settings_overscan</mat-icon>-->
2019-11-13 15:28:33 +09:00
<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"
/>
2019-11-08 16:02:42 +09:00
</svg>
</button>
<button
mat-icon-button
class="ucap-image-viewer-action"
2020-01-08 14:43:43 +09:00
matTooltip="{{ 'common.messages.zoomOut' | translate }}"
matTooltipPosition="below"
2019-11-06 18:19:37 +09:00
aria-label=""
2020-01-29 17:17:04 +09:00
(click)="onClickZoomOut()"
2019-11-06 13:48:06 +09:00
>
2019-11-08 16:02:42 +09:00
<!--<mat-icon>zoom_out</mat-icon>-->
2019-11-13 15:28:33 +09:00
<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"
2020-01-08 14:43:43 +09:00
matTooltip="{{ 'common.messages.zoomIn' | translate }}"
matTooltipPosition="below"
2019-11-06 18:19:37 +09:00
aria-label=""
2020-01-29 17:17:04 +09:00
(click)="onClickZoomIn()"
>
2019-11-08 16:02:42 +09:00
<!--<mat-icon>zoom_in</mat-icon>-->
2019-11-13 15:28:33 +09:00
<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"
>
2019-11-08 16:02:42 +09:00
<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
mat-icon-button
class="ucap-image-viewer-action"
2020-01-08 14:43:43 +09:00
matTooltip="{{ 'common.file.download' | translate }}"
matTooltipPosition="below"
2019-11-06 18:19:37 +09:00
aria-label=""
(click)="onClickDownload()"
>
2019-11-08 16:02:42 +09:00
<!--<mat-icon>get_app</mat-icon>-->
2019-11-13 15:28:33 +09:00
<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 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
/>
</svg>
</button>
2019-11-08 16:02:42 +09:00
<span class="stroke-bar"></span>
<button
2019-11-08 16:02:42 +09:00
mat-icon-button
color="warn"
class="ucap-image-viewer-action btn-close"
2020-01-08 14:43:43 +09:00
matTooltip="{{ 'common.messages.close' | translate }}"
(click)="onClickClose()"
>
2019-11-13 15:28:33 +09:00
<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"
>
2019-11-08 16:02:42 +09:00
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
2019-11-06 13:48:06 +09:00
</mat-toolbar>
2019-11-26 14:06:50 +09:00
<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">
2019-11-06 18:19:37 +09:00
<div
class="ucap-image-viewer-image-wrapper"
fxLayout="row"
fxLayout.xs="column"
fxFlexFill
fxLayoutAlign="center center"
>
2020-01-29 17:17:04 +09:00
<img
#downloadImage
*ngIf="fileDownloadUrl"
[src]="fileDownloadUrl"
[style.width]="(zoomRatio / 100) * naturalWidth + 'px'"
[style.height]="'auto'"
(load)="onLoadFileDownloadUrl(downloadImage)"
/>
2019-11-06 17:25:59 +09:00
</div>
</div>
2019-11-06 13:48:06 +09:00
</div>