쪽지 - 스크롤적용
This commit is contained in:
parent
ff87a0540e
commit
996507f673
|
@ -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">
|
||||||
|
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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 }}-->
|
||||||
|
|
Loading…
Reference in New Issue
Block a user