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

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

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

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(