2019-11-06 13:48:06 +09:00
|
|
|
<div class="ucap-image-viewer-container">
|
2019-11-08 16:02:42 +09:00
|
|
|
<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>
|
2019-11-06 16:24:51 +09:00
|
|
|
<span class="ucap-image-viewer-title">{{ fileInfo.fileName }}</span>
|
2019-11-06 13:48:06 +09:00
|
|
|
<span class="ucap-image-viewer-spacer"></span>
|
2019-11-06 16:24:51 +09:00
|
|
|
|
|
|
|
<button
|
|
|
|
mat-icon-button
|
|
|
|
class="ucap-image-viewer-action"
|
|
|
|
matTooltip="이미지 크기 재설정"
|
|
|
|
matTooltipPosition="below"
|
2019-11-06 18:19:37 +09:00
|
|
|
aria-label=""
|
2019-11-06 13:48:06 +09:00
|
|
|
>
|
2019-11-08 16:02:42 +09:00
|
|
|
<!--<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>
|
2019-11-06 16:24:51 +09:00
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
mat-icon-button
|
|
|
|
class="ucap-image-viewer-action"
|
|
|
|
matTooltip="축소"
|
|
|
|
matTooltipPosition="below"
|
2019-11-06 18:19:37 +09:00
|
|
|
aria-label=""
|
2019-11-06 13:48:06 +09:00
|
|
|
>
|
2019-11-08 16:02:42 +09:00
|
|
|
<!--<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>
|
2019-11-06 16:24:51 +09:00
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
mat-icon-button
|
|
|
|
class="ucap-image-viewer-action"
|
|
|
|
matTooltip="확대"
|
|
|
|
matTooltipPosition="below"
|
2019-11-06 18:19:37 +09:00
|
|
|
aria-label=""
|
2019-11-06 16:24:51 +09:00
|
|
|
>
|
2019-11-08 16:02:42 +09:00
|
|
|
<!--<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>
|
2019-11-06 16:24:51 +09:00
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
mat-icon-button
|
|
|
|
class="ucap-image-viewer-action"
|
|
|
|
matTooltip="다운로드"
|
|
|
|
matTooltipPosition="below"
|
2019-11-06 18:19:37 +09:00
|
|
|
aria-label=""
|
|
|
|
(click)="onClickDownload()"
|
2019-11-06 16:24:51 +09:00
|
|
|
>
|
2019-11-08 16:02:42 +09:00
|
|
|
<!--<mat-icon>get_app</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 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5" /></svg>
|
2019-11-06 16:24:51 +09:00
|
|
|
</button>
|
2019-11-08 16:02:42 +09:00
|
|
|
<span class="stroke-bar"></span>
|
2019-11-06 16:24:51 +09:00
|
|
|
<button
|
2019-11-08 16:02:42 +09:00
|
|
|
mat-icon-button
|
|
|
|
color="warn"
|
|
|
|
class="ucap-image-viewer-action btn-close"
|
|
|
|
matTooltip="뷰어닫기"
|
2019-11-06 16:24:51 +09:00
|
|
|
(click)="onClickClose()"
|
|
|
|
>
|
2019-11-08 16:02:42 +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">
|
|
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
|
|
</svg>
|
2019-11-06 16:24:51 +09:00
|
|
|
</button>
|
2019-11-06 13:48:06 +09:00
|
|
|
</mat-toolbar>
|
2019-11-06 16:24:51 +09:00
|
|
|
<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"
|
|
|
|
>
|
2019-11-07 13:48:25 +09:00
|
|
|
<img *ngIf="fileDownloadUrl" [src]="fileDownloadUrl" />
|
2019-11-06 17:25:59 +09:00
|
|
|
</div>
|
2019-11-06 16:24:51 +09:00
|
|
|
</div>
|
2019-11-06 13:48:06 +09:00
|
|
|
</div>
|