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

쪽지 virture scroll 적용.

Browse Source
This commit is contained in:
leejinho 2020-02-20 10:49:04 +09:00
parent 640cfb6d4f
commit a29a2c7b5e
2 changed files with 48 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
View File

@ -50,7 +50,7 @@
<ng-template mat-tab-label> <ng-template mat-tab-label>
{{ 'message.type.messageTypeReceiving' | translate }} {{ 'message.type.messageTypeReceiving' | translate }}
</ng-template> </ng-template>
<perfect-scrollbar <!-- <perfect-scrollbar
fxFlex="1 1 auto" fxFlex="1 1 auto"
*ngIf="!!(messageRetrieveList$ | async)" *ngIf="!!(messageRetrieveList$ | async)"
> >
@ -60,7 +60,20 @@
(click)="onClickDetail(message)" (click)="onClickDetail(message)"
class="message-item" class="message-item"
></ucap-message-list-item> ></ucap-message-list-item>
</perfect-scrollbar> </perfect-scrollbar> -->
<virtual-scroller
#vsMessageRetrieve
[items]="messageRetrieveList$ | async"
perfectScrollbar
fxFlexFill
>
<ucap-message-list-item
*ngFor="let message of vsMessageRetrieve.viewPortItems"
[message]="message"
(click)="onClickDetail(message)"
class="message-item"
></ucap-message-list-item>
</virtual-scroller>
<div <div
class="no-search-result" class="no-search-result"
fxFlexFill fxFlexFill
@ -76,7 +89,7 @@
<ng-template mat-tab-label> <ng-template mat-tab-label>
{{ 'message.type.messageTypeOutgoing' | translate }} {{ 'message.type.messageTypeOutgoing' | translate }}
</ng-template> </ng-template>
<perfect-scrollbar <!-- <perfect-scrollbar
fxFlex="1 1 auto" fxFlex="1 1 auto"
*ngIf="!!(messageSendList$ | async)" *ngIf="!!(messageSendList$ | async)"
> >
@ -86,7 +99,20 @@
(click)="onClickDetail(message)" (click)="onClickDetail(message)"
class="message-item" class="message-item"
></ucap-message-list-item> ></ucap-message-list-item>
</perfect-scrollbar> </perfect-scrollbar> -->
<virtual-scroller
#vsMessageSend
[items]="messageSendList$ | async"
perfectScrollbar
fxFlexFill
>
<ucap-message-list-item
*ngFor="let message of vsMessageSend.viewPortItems"
[message]="message"
(click)="onClickDetail(message)"
class="message-item"
></ucap-message-list-item>
</virtual-scroller>
<div <div
class="no-search-result" class="no-search-result"
fxFlexFill fxFlexFill
@ -102,7 +128,7 @@
<ng-template mat-tab-label> <ng-template mat-tab-label>
{{ 'message.type.messageTypeReservation' | translate }} {{ 'message.type.messageTypeReservation' | translate }}
</ng-template> </ng-template>
<perfect-scrollbar <!-- <perfect-scrollbar
fxFlex="1 1 auto" fxFlex="1 1 auto"
*ngIf="!!(messageReservationList$ | async)" *ngIf="!!(messageReservationList$ | async)"
> >
@ -112,7 +138,20 @@
(click)="onClickDetail(message)" (click)="onClickDetail(message)"
class="message-item" class="message-item"
></ucap-message-list-item> ></ucap-message-list-item>
</perfect-scrollbar> </perfect-scrollbar> -->
<virtual-scroller
#vsMessageReservation
[items]="messageReservationList$ | async"
perfectScrollbar
fxFlexFill
>
<ucap-message-list-item
*ngFor="let message of vsMessageReservation.viewPortItems"
[message]="message"
(click)="onClickDetail(message)"
class="message-item"
></ucap-message-list-item>
</virtual-scroller>
<div <div
class="no-search-result" class="no-search-result"
fxFlexFill fxFlexFill

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

@ -18,6 +18,9 @@
.message-item { .message-item {
cursor: pointer; cursor: pointer;
} }
::ng-deep .ps__rail-y {
left: auto !important;
}
.message-box { .message-box {
position: relative; position: relative;
height: 100%; height: 100%;