2019-11-19 13:13:08 +09:00
|
|
|
<div fxLayout="column" class="album-box">
|
2019-11-12 17:10:11 +09:00
|
|
|
<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-12 17:10:11 +09:00
|
|
|
<ng-container *ngIf="!selectedFile">
|
|
|
|
Select File.
|
|
|
|
</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>
|
2019-11-12 17:10:11 +09:00
|
|
|
<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>
|
2019-11-19 13:13:08 +09:00
|
|
|
<span class="checkbox">
|
2019-11-12 17:10:11 +09:00
|
|
|
<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">
|
2019-11-12 17:10:11 +09:00
|
|
|
<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>
|
2019-11-12 14:08:14 +09:00
|
|
|
</div>
|