From 654a8475fe20deaaf64363aed8f14dfe35f63113 Mon Sep 17 00:00:00 2001 From: Richard Park Date: Fri, 1 Nov 2019 15:06:37 +0900 Subject: [PATCH] bug of scroll is fixed --- .../components/messages.component.html | 15 ++++--- .../components/messages.component.scss | 43 +++++++++++++----- .../components/messages.component.ts | 45 ++++++++++++++++--- .../src/lib/components/form.component.ts | 7 +++ 4 files changed, 87 insertions(+), 23 deletions(-) diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html index 87061a8e..450ac296 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html @@ -17,7 +17,8 @@ mat-icon-button aria-label="chats button" class="responsive-chats-button" - *ngIf="!!roomInfo && roomInfo.isTimeRoom"> + *ngIf="!!roomInfo && roomInfo.isTimeRoom" + > timer @@ -26,8 +27,13 @@ {{ getRoomName() }} -
- {{ getConvertTimer(roomInfo.timeRoomInterval) }} 비밀 대화방입니다. +
+ {{ getConvertTimer(roomInfo.timeRoomInterval) }} 비밀 대화방입니다.
@@ -82,8 +88,6 @@ (fileDragOver)="onFileDragOver()" (fileDragLeave)="onFileDragLeave()" > - - diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss index 1e8fdf7c..fbc0739b 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss @@ -18,12 +18,12 @@ word-wrap: break-word; } } -.container{ +.container { position: relative; - width:100%; + width: 100%; } .chat-toolbar { - width:100%; + width: 100%; height: 70px; min-height: 70px; align-items: center; @@ -53,7 +53,7 @@ } } .room-info { - display:flex; + display: flex; flex-flow: column; overflow: hidden; .room-name { @@ -65,21 +65,42 @@ font-size: 14px; line-height: normal; margin-top: 6px; - height:20px; - span{ - border-radius:10px; - padding:1px 10px; - margin-right:6px; - font-size:13px; + height: 20px; + span { + border-radius: 10px; + padding: 1px 10px; + margin-right: 6px; + font-size: 13px; } } } .room-option { - wdith: 100%; + width: 100%; margin-left: auto; } } } .chat-content { + position: relative; + background: transparent; overflow: auto; + -webkit-overflow-scrolling: touch; + + .file-drop-zone-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.95); + + .file-drop-zone { + position: absolute; + + top: 10%; + left: 10%; + width: 80%; + height: 80%; + } + } } diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts index 5a7f1b87..5c507059 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts @@ -4,7 +4,9 @@ import { OnDestroy, AfterViewChecked, ViewChild, - ElementRef + ElementRef, + AfterContentInit, + AfterViewInit } from '@angular/core'; import { ucapAnimations, @@ -43,7 +45,10 @@ import { } from '@app/types'; import { RoomInfo, UserInfo, RoomType } from '@ucap-webmessenger/protocol-room'; import { tap, take } from 'rxjs/operators'; -import { FileInfo } from '@ucap-webmessenger/ui-chat'; +import { + FileInfo, + FormComponent as UCapUiChatFormComponent +} from '@ucap-webmessenger/ui-chat'; import { KEY_VER_INFO } from '@app/types/ver-info.type'; import { VersionInfo2Response } from '@ucap-webmessenger/api-public'; import { MatMenuTrigger } from '@angular/material'; @@ -67,10 +72,13 @@ import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar'; styleUrls: ['./messages.component.scss'], animations: ucapAnimations }) -export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked { +export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { @ViewChild('messageBoxContainer', { static: true }) private messageBoxContainer: ElementRef; + @ViewChild('chatForm', { static: true }) + private chatForm: UCapUiChatFormComponent; + @ViewChild('messageContextMenuTrigger', { static: true }) messageContextMenuTrigger: MatMenuTrigger; messageContextMenuPosition = { x: '0px', y: '0px' }; @@ -167,6 +175,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked { tap(infoList => { if (!!infoList && infoList.length > 0) { this.baseEventSeq = infoList[0].seq; + this.readyToReply(); } }) ); @@ -175,8 +184,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked { select(AppStore.MessengerSelector.EventSelector.infoStatus) ); - this.psChatContent.directiveRef.scrollToBottom(0, 0); - this.interval = setInterval(() => { if (!!this.roomInfo.isTimeRoom) { this.store.dispatch(EventStore.infoIntervalClear({})); @@ -198,8 +205,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked { clearInterval(this.interval); } - ngAfterViewChecked(): void { - this.psChatContent.directiveRef.scrollToBottom(0, 0); + ngAfterViewInit(): void { + this.readyToReply(); } getRoomName() { @@ -240,6 +247,30 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked { selectContact() {} + readyToReply(): void { + setTimeout(() => { + this.focusReplyInput(); + this.scrollToBottom(); + }); + } + + focusReplyInput(): void { + setTimeout(() => { + this.chatForm.focus(); + }); + } + + scrollToBottom(speed?: number): void { + speed = speed || 0; + if (this.psChatContent.directiveRef) { + this.psChatContent.directiveRef.update(); + + setTimeout(() => { + this.psChatContent.directiveRef.scrollToBottom(0, speed); + }); + } + } + async onSendMessage(message: string) { if (!message || message.trim().length === 0) { const result = await this.dialogService.open< diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts index 5288b19d..6f69bb1d 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts @@ -23,6 +23,9 @@ export class FormComponent implements OnInit { @ViewChild('replyForm', { static: false }) replyForm: NgForm; + @ViewChild('replyInput', { static: false }) + replyInput: ElementRef; + @ViewChild('fileInput', { static: false }) fileInput: ElementRef; @@ -30,6 +33,10 @@ export class FormComponent implements OnInit { ngOnInit() {} + focus(): void { + this.replyInput.nativeElement.focus(); + } + onSend(event: Event) { event.preventDefault();