105 lines
2.8 KiB
HTML
Raw Normal View History

<div fxLayout="column" style="width: 600px;" 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>
<div fxFlex="0 0 400px">
<ng-container *ngIf="!selectedFile">
Select File.
</ng-container>
<ng-container *ngIf="selectedFile">
<img
*ngIf="selectedFile.info.type === FileType.Image"
[src]="getImageUrl(selectedFile)"
class="preview-image"
/>
<video
controls
*ngIf="selectedFile.info.type === FileType.Video"
class="preview-image"
>
<source [src]="getImageUrl(selectedFile)" />
</video>
<ul>
<li>name : {{ selectedFile.info.name }}</li>
<li>size : {{ selectedFile.info.size | ucapBytes }}</li>
<li>
date :
{{ 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>
<span>
<mat-checkbox
#checkbox
[checked]="getCheckItem(fileInfo)"
(change)="onCheckItem(checkbox.checked, fileInfo)"
(click)="$event.stopPropagation()"
>
</mat-checkbox>
</span>
<span>
<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>