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

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

@ -70,6 +70,7 @@
<!-- Timer Room Info --> <!-- Timer Room Info -->
<!-- CHAT MESSAGES --> <!-- CHAT MESSAGES -->
<perfect-scrollbar fxFlex="1 1 auto" #psChatContent>
<ucap-chat-messages <ucap-chat-messages
[messages]="eventList$ | async" [messages]="eventList$ | async"
[userInfos]="userInfoList" [userInfos]="userInfoList"
@ -81,6 +82,7 @@
(contextMenu)="onContextMenuMessage($event)" (contextMenu)="onContextMenuMessage($event)"
> >
</ucap-chat-messages> </ucap-chat-messages>
</perfect-scrollbar>
<!-- CHAT MESSAGES --> <!-- CHAT MESSAGES -->
<div <div

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

@ -45,7 +45,7 @@ $line-basic:1px solid #dddddd;
.room-name { .room-name {
font-size: 16px; font-size: 16px;
padding: 0 10px; padding: 0 10px;
@include ellipsis(1) @include ellipsis(1);
} }
.room-option { .room-option {
width: 100px; width: 100px;

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

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