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

perfect scrollbar of messeages is added

Browse Source
This commit is contained in:
병준 박 2019-10-29 11:39:34 +09:00
parent 43d96eb477
commit 22605ae51e
3 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
View File

@ -70,17 +70,19 @@
<!-- Timer Room Info -->
<!-- CHAT MESSAGES -->
<ucap-chat-messages
[messages]="eventList$ | async"
[userInfos]="userInfoList"
[loginRes]="loginRes"
[sessionVerInfo]="sessionVerInfo"
(massDetail)="onMassDetail($event)"
(save)="onSave($event)"
(imageViewer)="onImageViewer($event)"
(contextMenu)="onContextMenuMessage($event)"
>
</ucap-chat-messages>
<perfect-scrollbar fxFlex="1 1 auto" #psChatContent>
<ucap-chat-messages
[messages]="eventList$ | async"
[userInfos]="userInfoList"
[loginRes]="loginRes"
[sessionVerInfo]="sessionVerInfo"
(massDetail)="onMassDetail($event)"
(save)="onSave($event)"
(imageViewer)="onImageViewer($event)"
(contextMenu)="onContextMenuMessage($event)"
>
</ucap-chat-messages>
</perfect-scrollbar>
<!-- CHAT MESSAGES -->
<div

22
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
View File

@ -1,5 +1,5 @@
@charset 'utf-8';
$line-basic:1px solid #dddddd;
$line-basic: 1px solid #dddddd;
@mixin ellipsis($row) {
overflow: hidden;
text-overflow: ellipsis;
@ -28,9 +28,9 @@ $line-basic:1px solid #dddddd;
height: 70px;
min-height: 70px;
border-bottom: $line-basic;
background-color:#ffffff;
.chat-header{
width:100%;
background-color: #ffffff;
.chat-header {
width: 100%;
.responsive-chats-button {
padding: 0;
width: 40px;
@ -42,14 +42,14 @@ $line-basic:1px solid #dddddd;
font-weight: 100;
line-height: 40px;
}
.room-name{
font-size:16px;
padding:0 10px;
@include ellipsis(1)
.room-name {
font-size: 16px;
padding: 0 10px;
@include ellipsis(1);
}
.room-option{
width:100px;
margin-left:auto;
.room-option {
width: 100px;
margin-left: auto;
}
}
}

14
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
View File

@ -55,6 +55,7 @@ import {
ImageViewerDialogResult
} from '@app/layouts/common/dialogs/image-viewer.dialog.component';
import { Maximum_Range } from '@ucap-webmessenger/core';
import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
@Component({
selector: 'app-layout-messenger-messages',
@ -70,6 +71,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
messageContextMenuTrigger: MatMenuTrigger;
messageContextMenuPosition = { x: '0px', y: '0px' };
@ViewChild('psChatContent', { static: true })
psChatContent: PerfectScrollbarComponent;
environmentsInfo: EnvironmentsInfo;
loginRes: LoginResponse;
@ -143,7 +147,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
select(AppStore.MessengerSelector.EventSelector.selectAllInfoList)
);
this.scrollToBottomForMessageBoxContainer();
this.psChatContent.directiveRef.scrollToBottom(0, 0);
}
ngOnDestroy(): void {
@ -159,7 +163,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
}
ngAfterViewChecked(): void {
this.scrollToBottomForMessageBoxContainer();
this.psChatContent.directiveRef.scrollToBottom(0, 0);
}
getRoomName() {
@ -220,12 +224,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
this.store.dispatch(RoomStore.updateOnlyAlarm({ roomInfo: this.roomInfo }));
}
private scrollToBottomForMessageBoxContainer(): void {
try {
this.messageBoxContainer.nativeElement.scrollTop = this.messageBoxContainer.nativeElement.scrollHeight;
} catch (err) {}
}
/** MassText Detail View */
onMassDetail(value: number) {
this.store.dispatch(