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

scroll to bottom of message box is implemented

Browse Source
This commit is contained in:
병준 박 2019-10-10 15:53:08 +09:00
parent d6f32316ee
commit 5cdb2b18d1
2 changed files with 25 additions and 3 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

@ -39,7 +39,7 @@
mode="indeterminate" mode="indeterminate"
></mat-progress-bar> ></mat-progress-bar>
<!-- CHAT CONTENT --> <!-- CHAT CONTENT -->
<div fxFlex="1 1 auto" class="chat-content"> <div fxFlex="1 1 auto" class="chat-content" #messageBoxContainer>
<!-- CHAT MESSAGES --> <!-- CHAT MESSAGES -->
<ucap-chat-messages <ucap-chat-messages
[messages]="eventList$ | async" [messages]="eventList$ | async"

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

@ -1,4 +1,11 @@
import { Component, OnInit, OnDestroy } from '@angular/core'; import {
Component,
OnInit,
OnDestroy,
AfterViewChecked,
ViewChild,
ElementRef
} from '@angular/core';
import { ucapAnimations } from '@ucap-webmessenger/ui'; import { ucapAnimations } from '@ucap-webmessenger/ui';
import { Store, select } from '@ngrx/store'; import { Store, select } from '@ngrx/store';
import { NGXLogger } from 'ngx-logger'; import { NGXLogger } from 'ngx-logger';
@ -19,7 +26,10 @@ import { tap } from 'rxjs/operators';
styleUrls: ['./messages.component.scss'], styleUrls: ['./messages.component.scss'],
animations: ucapAnimations animations: ucapAnimations
}) })
export class MessagesComponent implements OnInit, OnDestroy { export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
@ViewChild('messageBoxContainer', { static: true })
private messageBoxContainer: ElementRef;
loginRes: LoginResponse; loginRes: LoginResponse;
loginResSubscription: Subscription; loginResSubscription: Subscription;
eventList$: Observable<Info[]>; eventList$: Observable<Info[]>;
@ -61,6 +71,8 @@ export class MessagesComponent implements OnInit, OnDestroy {
this.eventList$ = this.store.pipe( this.eventList$ = this.store.pipe(
select(AppStore.MessengerSelector.EventSelector.infoList) select(AppStore.MessengerSelector.EventSelector.infoList)
); );
this.scrollToBottomForMessageBoxContainer();
} }
ngOnDestroy(): void { ngOnDestroy(): void {
@ -72,6 +84,10 @@ export class MessagesComponent implements OnInit, OnDestroy {
} }
} }
ngAfterViewChecked(): void {
this.scrollToBottomForMessageBoxContainer();
}
selectContact() {} selectContact() {}
onSendMessage(message: string) { onSendMessage(message: string) {
@ -86,4 +102,10 @@ export class MessagesComponent implements OnInit, OnDestroy {
}) })
); );
} }
private scrollToBottomForMessageBoxContainer(): void {
try {
this.messageBoxContainer.nativeElement.scrollTop = this.messageBoxContainer.nativeElement.scrollHeight;
} catch (err) {}
}
} }