ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

앨범,파일함- 퍼펙트 스크롤 적용

Browse Source
This commit is contained in:
khk 2019-11-21 16:43:47 +09:00
parent 534e026742
commit b43afc3ebb
9 changed files with 141 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
View File

@ -33,6 +33,7 @@
width: 70px;
flex-direction: row;
}
::ng-deep .organization-side {
flex-direction: column;
height: 100%;
@ -44,6 +45,7 @@
flex-flow: column;
height: 280px;
padding-top: 10px;
border-bottom: none;
.mat-tab-label {
width: 100%;
height: 80px;
@ -92,11 +94,15 @@
.mat-tab-label-content {
.icon-item {
transform: scale(1);
/*svg {
stroke: #ef4c73;
fill: #ef4c73;
}*/
}
}
}
}
::ng-deep .ps {
.ps-content {
position: relative;
width: 100%;
height: 100%;
}
}

1
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
View File

@ -14,6 +14,7 @@
}
.list-search {
position: relative;
display: flex;
flex-direction: row;
height: 60px;

13
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
View File

@ -16,13 +16,6 @@
}
}
}
::ng-deep .ps {
.ps-content {
position: relative;
width: 100%;
height: 100%;
}
}
.search-result {
height: calc(100% - 130px);
@ -52,7 +45,7 @@
}
}
.list-item-frame{
width:100%;
height:100%;
.list-item-frame {
width: 100%;
height: 100%;
}

7
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss
View File

@ -10,3 +10,10 @@
margin-left:auto;
}
}
::ng-deep .mat-tab-labels {
display: flex;
width: 100%;
border-bottom: 2px solid #dddddd;
flex: 1 1 auto;
justify-content: space-around;
}

4
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
View File

@ -1,4 +1,4 @@
<div fxLayout="column" class="album-box">
<div fxLayout="column" class="rightDrawer-albumbox">
<div>
<mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
<mat-tab label="Image"></mat-tab>
@ -81,7 +81,7 @@
</ng-container>
</div>
<div class="search-list">
<perfect-scrollbar>
<perfect-scrollbar class="album-scrollbar">
<div
*ngFor="let fileInfo of filteredList"
class="img-item"

23
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
View File

@ -13,25 +13,23 @@
}
}
.album-box {
::ng-deep .rightDrawer-albumbox {
height: 100%;
overflow: hidden;
.search-list {
overflow: auto;
.mat-tab-labels {
.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;
border-radius: 4px;
.select-file{
color: #212121;
border-bottom: 1px dotted #dddddd;
@ -66,6 +64,7 @@
height: calc(100% - 450px);
overflow-y: auto;
flex-wrap: wrap;
.img-item {
cursor: pointer;
margin-bottom:10px;
@ -99,6 +98,14 @@
}
}
::ng-deep .album-scrollbar{
.ps{
.ps-content{
display:flex;
flex-flow: wrap;
}
}
}
.preview-image,
.preview-video{
max-height: 140px;

102
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
View File

@ -123,56 +123,58 @@
</ng-container>
</div>
<div fxFlex="0 0 auto" class="table-box">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="check">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox
#checkboxAll
[checked]="getCheckAllUser()"
(change)="onCheckAllkUser(checkboxAll.checked)"
(click)="$event.stopPropagation()"
>
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let element">
<mat-checkbox
#checkbox
[checked]="getCheckUser(element)"
(change)="onCheckUser(checkbox.checked, element)"
(click)="$event.stopPropagation()"
>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="infos">
Name
</th>
<td mat-cell *matCellDef="let element" class="file-info">
<div class="file-name">
{{ element.info.name }}
</div>
<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.size | ucapBytes }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns"
(click)="onClickRow(row)"
></tr>
</table>
<perfect-scrollbar class="album-scrollbar">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="check">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox
#checkboxAll
[checked]="getCheckAllUser()"
(change)="onCheckAllkUser(checkboxAll.checked)"
(click)="$event.stopPropagation()"
>
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let element">
<mat-checkbox
#checkbox
[checked]="getCheckUser(element)"
(change)="onCheckUser(checkbox.checked, element)"
(click)="$event.stopPropagation()"
>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="infos">
Name
</th>
<td mat-cell *matCellDef="let element" class="file-info">
<div class="file-name">
{{ element.info.name }}
</div>
<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.size | ucapBytes }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns"
(click)="onClickRow(row)"
></tr>
</table>
</perfect-scrollbar>
</div>
<div class="footer-fix">
<mat-paginator

9
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
View File

@ -13,7 +13,7 @@
}
}
.rightDrawer-filebox {
::ng-deep .rightDrawer-filebox {
width: 100%;
height: calc(100% - 60px);
.rightDrawer-tab {
@ -23,16 +23,13 @@
}
}
::ng-deep .mat-tab-label {
width: 50%;
}
.select-filebox {
position: relative;
display: flex;
flex-flow: column;
margin: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
.select-flie {
display: flex;
flex-flow: row;
@ -114,7 +111,7 @@
}
}
.table-box {
height: calc(100% - 450px);
height: calc(100% - 440px);
overflow-y: auto;
}
.mat-paginator-container {

49
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.scss
View File

@ -1,3 +1,48 @@
div.message-box {
width: 600px;
.list-search {
display: flex;
flex-direction: row;
height: 60px;
align-items: center;
padding: 0;
font-size: 14px;
background-color: #f9f9f9;
border-bottom: 1px solid #dddddd;
.searchbox {
width: 100%;
height: 100%;
}
}
::ng-deep .searchbox {
.mat-form-field {
display: block;
.mat-form-field-wrapper {
padding: 0;
padding-bottom: 0 !important;
height: 100%;
.mat-form-field-flex {
height: 59px;
padding: 0 10px 0 20px;
align-items: center;
.mat-form-field-infix {
width: 90%;
font-size: 14px;
border: none;
}
.mat-form-field-suffix {
.mat-icon {
line-height: 24px;
}
}
}
}
}
.mat-form-field-appearance-legacy {
.mat-form-field-wrapper {
padding: 0;
}
.mat-form-field-underline {
bottom: 0;
background-color: unset !important;
}
}
}