right-drawer 수정중(임시)
This commit is contained in:
khk
parent
165ff91337
commit
8a7469cd5e
|
|
@ -1,5 +1,5 @@
|
|||
<div>
|
||||
<span>{{ selectedRightDrawer }}</span>
|
||||
<div class="rightDrawer-title">
|
||||
<h3>{{ selectedRightDrawer }}</h3>
|
||||
<span>
|
||||
<button
|
||||
mat-button
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
.rightDrawer-title{
|
||||
height: 60px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
font-size: 16px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 0 20px;
|
||||
font-weight: 600;
|
||||
span{
|
||||
margin-left:auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,29 @@
|
|||
<div fxLayout="column" style="width: 600px;" class="album-box">
|
||||
<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>
|
||||
<div fxFlex="0 0 400px">
|
||||
<div fxFlex="1 1 240px" class="select-filebox bg-accent-brightest">
|
||||
<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>
|
||||
<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>name : {{ selectedFile.info.name }}</li>
|
||||
<li>size : {{ selectedFile.info.size | ucapBytes }}</li>
|
||||
|
|
@ -66,7 +68,7 @@
|
|||
</ng-template>
|
||||
</dt>
|
||||
<dd>
|
||||
<span>
|
||||
<span class="checkbox">
|
||||
<mat-checkbox
|
||||
#checkbox
|
||||
[checked]="getCheckItem(fileInfo)"
|
||||
|
|
@ -75,7 +77,7 @@
|
|||
>
|
||||
</mat-checkbox>
|
||||
</span>
|
||||
<span>
|
||||
<span class="btn-download">
|
||||
<button mat-button (click)="onClickDownload(fileInfo)">
|
||||
<mat-icon>vertical_align_bottom</mat-icon>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -7,10 +7,69 @@
|
|||
}
|
||||
}
|
||||
|
||||
.img-item {
|
||||
cursor: pointer;
|
||||
max-width: 150px;
|
||||
min-width: 150px;
|
||||
::ng-deep .mat-tab-label{
|
||||
width:50%;
|
||||
}
|
||||
|
||||
.select-filebox{
|
||||
display:flex;
|
||||
flex-flow: column;
|
||||
margin:10px;
|
||||
padding:10px;
|
||||
border:1px solid #cccccc;
|
||||
.select-flie{
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
color: #212121;
|
||||
align-items: center;
|
||||
border-bottom: 1px dotted #dddddd;
|
||||
text-align:center;
|
||||
ul{
|
||||
padding:0;
|
||||
margin-top:10px;
|
||||
.name{
|
||||
font-weight:600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-list{
|
||||
display:flex;
|
||||
padding:0 10px;
|
||||
height: calc(100% - 450px);
|
||||
overflow-y: auto;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.img-item {
|
||||
cursor: pointer;
|
||||
margin-bottom:10px;
|
||||
position: relative;
|
||||
dl{
|
||||
dt{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background-color: #efefef;
|
||||
border: 1px dotted #cccccc;
|
||||
img{
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
dd{
|
||||
.btn-download{
|
||||
margin-left:auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
& :nth-child(3n+0){
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
|
|
@ -18,6 +77,11 @@
|
|||
}
|
||||
|
||||
.btn-box {
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
height:50px;
|
||||
margin-bottom:10px;
|
||||
width:100%;
|
||||
button {
|
||||
margin: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,40 @@
|
|||
<div fxLayout="column">
|
||||
<div>
|
||||
<div fxLayout="column" class="rightDrawer-filebox">
|
||||
<div class="rightDrawer-tab">
|
||||
<mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
|
||||
<mat-tab label="Receive"></mat-tab>
|
||||
<mat-tab label="Send"></mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
<div fxFlex="1 1 300px">
|
||||
<ng-container *ngIf="!selectedFile">
|
||||
<div fxFlex="1 1 200px" class="select-filebox bg-accent-brightest">
|
||||
<ng-container *ngIf="!selectedFile" >
|
||||
Select File.
|
||||
</ng-container>
|
||||
<ng-container *ngIf="selectedFile">
|
||||
<div
|
||||
[ngClass]="[
|
||||
'mime-icon',
|
||||
'light',
|
||||
'ico-' + getExtention(selectedFile.info.name)
|
||||
]"
|
||||
>
|
||||
<div class="ico"></div>
|
||||
<div class="select-flie">
|
||||
<div
|
||||
[ngClass]="[
|
||||
'mime-icon',
|
||||
'light',
|
||||
'ico-' + getExtention(selectedFile.info.name)
|
||||
]"
|
||||
>
|
||||
<div class="ico"></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="name">name : {{ selectedFile.info.name }}</li>
|
||||
<li>size : {{ selectedFile.info.size | ucapBytes }}</li>
|
||||
<li>
|
||||
date :
|
||||
{{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
아이콘
|
||||
</div>
|
||||
<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 fxFlex="1 1 auto">
|
||||
<div fxFlex="0 0 auto" class="table-box">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<ng-container matColumnDef="check">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
|
|
@ -55,19 +60,21 @@
|
|||
<th mat-header-cell *matHeaderCellDef mat-sort-header class="infos">
|
||||
Name
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div>
|
||||
<td mat-cell *matCellDef="let element" class="file-info">
|
||||
<div class="file-name">
|
||||
{{ element.info.name }}
|
||||
</div>
|
||||
<div>
|
||||
{{ element.info.size | ucapBytes }}
|
||||
<div class="download-period text-accent-color">
|
||||
<!--{{ element.info.size | ucapBytes }}-->
|
||||
{{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} ~ 2020.01.23
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="sendDate" class="date">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>sendDate</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
{{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
|
||||
<!--{{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}-->
|
||||
{{ element.info.size | ucapBytes }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
|
|
@ -77,28 +84,30 @@
|
|||
(click)="onClickRow(row)"
|
||||
></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div class="footer-fix">
|
||||
<mat-paginator
|
||||
[pageSize]="10"
|
||||
[pageSizeOptions]="[5, 10, 20]"
|
||||
showFirstLastButtons
|
||||
></mat-paginator>
|
||||
</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"
|
||||
|
||||
<div
|
||||
fxFlex="1 1 50px"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="center center"
|
||||
class="btn-box"
|
||||
>
|
||||
Download All
|
||||
</button>
|
||||
<button mat-flat-button class="mat-primary">
|
||||
Open Folder
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,87 @@
|
|||
table {
|
||||
@mixin ellipsis($row) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@if $row == 1 {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
} @else if $row >= 2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $row;
|
||||
-webkit-box-orient: vertical;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.rightDrawer-filebox {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
.rightDrawer-tab {
|
||||
.mat-tab-label {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-tab-label {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.select-filebox {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid #cccccc;
|
||||
.select-flie {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
color: #212121;
|
||||
align-items: center;
|
||||
border-bottom: 1px dotted #dddddd;
|
||||
ul {
|
||||
padding: 0;
|
||||
.name {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-table {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
th.infos {
|
||||
padding: 10px;
|
||||
}
|
||||
tr.mat-row {
|
||||
height: 70px;
|
||||
.file-info {
|
||||
padding: 16px;
|
||||
display: grid;
|
||||
height: 70px;
|
||||
.file-name {
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
width: 100%;
|
||||
@include ellipsis(1);
|
||||
}
|
||||
.download-period {
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
@include ellipsis(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-box{
|
||||
height: calc(100% - 450px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.mat-paginator-container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.mat-row:hover {
|
||||
|
|
@ -7,8 +89,42 @@ table {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
button {
|
||||
margin: 5px;
|
||||
.footer-fix{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height:160px;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.btn-box {
|
||||
height: 50px;
|
||||
padding-bottom: 10px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
button {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator {
|
||||
.mat-paginator-container {
|
||||
justify-content: center;
|
||||
}
|
||||
.mat-paginator-navigation-first {
|
||||
order: 1;
|
||||
}
|
||||
.mat-paginator-navigation-previous {
|
||||
order: 2;
|
||||
}
|
||||
// override material paginator page switch
|
||||
.mat-paginator-range-label {
|
||||
order: 3;
|
||||
}
|
||||
.mat-paginator-navigation-next {
|
||||
order: 4;
|
||||
}
|
||||
.mat-paginator-navigation-last {
|
||||
order: 5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.list {
|
||||
width: 300px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user