쪽지 - 스크롤적용

This commit is contained in:
khk 2020-01-10 18:54:14 +09:00
parent ff87a0540e
commit 996507f673
3 changed files with 42 additions and 24 deletions

View File

@ -37,52 +37,57 @@
</form> </form>
</div> </div>
</div> </div>
<div *ngIf="!isSearch"> <div *ngIf="!isSearch" class="message-section">
<mat-tab-group <mat-tab-group
#tabs #tabs
mat-stretch-tabs mat-stretch-tabs
animationDuration="0ms" animationDuration="0ms"
[selectedIndex]="0" [selectedIndex]="0"
(selectedIndexChange)="onSelectedIndexChange($event)" (selectedIndexChange)="onSelectedIndexChange($event)"
class="message-tab"
> >
<mat-tab [label]="MessageType.Receive"> <mat-tab [label]="MessageType.Receive">
<ng-template mat-tab-label> <ng-template mat-tab-label>
{{ 'message.messageTypeReceiving' | translate }} {{ 'message.messageTypeReceiving' | translate }}
</ng-template> </ng-template>
<perfect-scrollbar fxFlex="1 1 auto">
<ucap-message-list-item <ucap-message-list-item
*ngFor="let message of messageRetrieveList$ | async" *ngFor="let message of messageRetrieveList$ | async"
[message]="message" [message]="message"
(click)="onClickDetail(message)" (click)="onClickDetail(message)"
class="message-item" class="message-item"
></ucap-message-list-item> ></ucap-message-list-item>
</perfect-scrollbar>
</mat-tab> </mat-tab>
<mat-tab [label]="MessageType.Send"> <mat-tab [label]="MessageType.Send">
<ng-template mat-tab-label> <ng-template mat-tab-label>
{{ 'message.messageTypeOutgoing' | translate }} {{ 'message.messageTypeOutgoing' | translate }}
</ng-template> </ng-template>
<perfect-scrollbar fxFlex="1 1 auto">
<ucap-message-list-item <ucap-message-list-item
*ngFor="let message of messageSendList$ | async" *ngFor="let message of messageSendList$ | async"
[message]="message" [message]="message"
(click)="onClickDetail(message)" (click)="onClickDetail(message)"
class="message-item" class="message-item"
></ucap-message-list-item> ></ucap-message-list-item>
</perfect-scrollbar>
</mat-tab> </mat-tab>
<mat-tab [label]="MessageType.Reservation"> <mat-tab [label]="MessageType.Reservation">
<ng-template mat-tab-label> <ng-template mat-tab-label>
{{ 'message.messageTypeReservation' | translate }} {{ 'message.messageTypeReservation' | translate }}
</ng-template> </ng-template>
<perfect-scrollbar fxFlex="1 1 auto">
<ucap-message-list-item <ucap-message-list-item
*ngFor="let message of messageReservationList$ | async" *ngFor="let message of messageReservationList$ | async"
[message]="message" [message]="message"
(click)="onClickDetail(message)" (click)="onClickDetail(message)"
class="message-item" class="message-item"
></ucap-message-list-item> ></ucap-message-list-item>
</perfect-scrollbar>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</div> </div>
<div *ngIf="isSearch"> <div *ngIf="isSearch">
<div class="search-sub"> <div class="search-sub">
<form [formGroup]="fgSearchType" class="w-100-p"> <form [formGroup]="fgSearchType" class="w-100-p">

View File

@ -1,3 +1,7 @@
.message-box {
position: relative;
height: 100%;
}
.current-head { .current-head {
h3 { h3 {
display: inline-flex; display: inline-flex;
@ -65,7 +69,16 @@
.mat-tab-label-active { .mat-tab-label-active {
opacity: 1; opacity: 1;
} }
.message-item { .message-item {
cursor: pointer; cursor: pointer;
} }
::ng-deep .message-box {
.message-section {
position: relative;
height: calc(100% - 130px);
.message-tab {
position: relative;
height: 100%;
}
}
}

View File

@ -13,7 +13,7 @@
</span> </span>
<button <button
mat-stroked-button mat-stroked-button
class="btn-translation-send" class="btn-translation-send bg-accent-color"
(click)="onClickSendTranslationMessage(translationPreviewInfo)" (click)="onClickSendTranslationMessage(translationPreviewInfo)"
> >
<!--{{ 'chat.send' | translate }}--> <!--{{ 'chat.send' | translate }}-->