153 lines
4.5 KiB
HTML
Raw Normal View History

<div fxLayout="column" class="album-box">
<div>
<mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
<mat-tab label="Image"></mat-tab>
<mat-tab label="Video"></mat-tab>
</mat-tab-group>
</div>
2019-11-19 13:13:08 +09:00
<div fxFlex="1 1 240px" class="select-filebox bg-accent-brightest">
2019-11-20 17:31:08 +09:00
<!--<ng-container *ngIf="!selectedFile">-->
<ng-container *ngIf="!selectedFile">
<!--이미지 빈화면-->
<div class="empty-msg" *ngIf="currentTabIndex === 0">
<svg
xmlns="http://www.w3.org/2000/svg"
width="36"
height="36"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="butt"
stroke-linejoin="round"
>
2019-11-20 17:31:08 +09:00
<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>Select File.</span>
</div>
<!--비디오 빈화면-->
<div class="empty-msg" *ngIf="currentTabIndex === 1">
<svg
xmlns="http://www.w3.org/2000/svg"
width="36"
height="36"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="butt"
stroke-linejoin="round"
>
2019-11-20 17:31:08 +09:00
<rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
<line x1="7" y1="2" x2="7" y2="22"></line>
<line x1="17" y1="2" x2="17" y2="22"></line>
<line x1="2" y1="12" x2="22" y2="12"></line>
<line x1="2" y1="7" x2="7" y2="7"></line>
<line x1="2" y1="17" x2="7" y2="17"></line>
<line x1="17" y1="17" x2="22" y2="17"></line>
<line x1="17" y1="7" x2="22" y2="7"></line>
</svg>
<span>Select File.</span>
</div>
</ng-container>
<ng-container *ngIf="selectedFile">
2019-11-19 13:13:08 +09:00
<div class="select-file">
<img
*ngIf="selectedFile.info.type === FileType.Image"
[src]="getImageUrl(selectedFile)"
class="preview-image"
/>
<video
controls
*ngIf="selectedFile.info.type === FileType.Video"
class="preview-video"
>
<source [src]="getImageUrl(selectedFile)" />
</video>
</div>
<ul>
<li class="name">{{ selectedFile.info.name }}</li>
<li>
<span class="text-accent-color">size :</span>
{{ selectedFile.info.size | ucapBytes }}
</li>
<li>
2019-11-20 17:31:08 +09:00
<span class="text-accent-color">date :</span>
{{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
</li>
</ul>
</ng-container>
</div>
<div class="search-list">
<div
*ngFor="let fileInfo of filteredList"
class="img-item"
matTooltip="fileInfo.info.name"
(click)="onClickImage($event, fileInfo)"
>
<dl>
<dt>
<div
*ngIf="
!!fileInfo.eventInfo &&
!!fileInfo.eventInfo.sentMessageJson &&
!!fileInfo.eventInfo.sentMessageJson.thumbUrl;
then thumb;
else icon
"
></div>
<ng-template #thumb>
<img [src]="fileInfo.eventInfo.sentMessageJson.thumbUrl" />
</ng-template>
<ng-template #icon>
<div
[ngClass]="[
'mime-icon',
'light',
'ico-' + getExtention(fileInfo.info.name)
]"
>
<div class="ico"></div>
</div>
</ng-template>
</dt>
<dd>
2019-11-19 13:13:08 +09:00
<span class="checkbox">
<mat-checkbox
#checkbox
[checked]="getCheckItem(fileInfo)"
(change)="onCheckItem(checkbox.checked, fileInfo)"
(click)="$event.stopPropagation()"
>
</mat-checkbox>
</span>
2019-11-19 13:13:08 +09:00
<span class="btn-download">
<button mat-button (click)="onClickDownload(fileInfo)">
<mat-icon>vertical_align_bottom</mat-icon>
</button>
</span>
</dd>
</dl>
</div>
</div>
<div
fxFlex="1 1 50px"
fxLayout="row"
fxLayoutAlign="center center"
class="btn-box"
>
<button
mat-flat-button
[disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
class="mat-primary"
>
Download All
</button>
<button mat-flat-button class="mat-primary">
Open Folder
</button>
</div>
</div>