-
-
+
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 28b8729..8af2e67 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -7,6 +7,7 @@ import { DashboardConfigService } from '../services/config.service';
import { HttpClient } from '@angular/common/http';
import { delay, retryWhen, tap } from 'rxjs/operators';
import { FSMUpdateService } from '../services/fsmupdate.service';
+import { MessagesComponent } from '../messages/messages.component';
@Component({
selector: 'app-dashboard',
@@ -18,7 +19,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
polling = new BehaviorSubject(false);
deploymentNotificationSubscription: Subscription;
@ViewChild('webiframe', {static: false}) webiframe: ElementRef;
- @ViewChild('tfwmessages', {static: false}) messages: ElementRef;
+ @ViewChild(MessagesComponent, {static: false}) messages: MessagesComponent;
@ViewChild('urlbar', {static: false}) urlbar: ElementRef;
layout = this.configService.layout;
@@ -69,7 +70,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
subscribeResizeOnLayoutChange() {
this.configService.layout.subscribe(() => {
this.emitResizeEvent();
- setTimeout(() => this.scrollMessagesToBottom(), 0);
+ setTimeout(() => this.messages.scrollToBottom(), 0);
});
}
@@ -132,13 +133,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
this.terminalMenuItem.next(item);
}
- scrollMessagesToBottom() {
- const element = this.messages.nativeElement;
- // This must be done in the Angular event loop to avoid messing up
- // change detection (not in the template like ConsoleComponent does)
- element.scrollTop = element.scrollHeight;
- }
-
iframeLoad() {
if (this.webiframe && this.iframeUrl.value) {
const href = this.webiframe.nativeElement.contentWindow.frames.location.href;
diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts
index 9600c1a..3cd25b7 100644
--- a/src/app/messages/messages.component.ts
+++ b/src/app/messages/messages.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output, ElementRef } from '@angular/core';
import { MessageData, Message } from '../message-types/bot-messages';
import { MarkdownService } from '../services/markdown.service';
import { WebSocketService } from '../services/websocket.service';
@@ -19,7 +19,8 @@ export class MessagesComponent implements OnInit {
constructor(
private markdownService: MarkdownService,
private websocketService: WebSocketService,
- private changeDetectorRef: ChangeDetectorRef
+ private changeDetectorRef: ChangeDetectorRef,
+ private ref: ElementRef
) {}
ngOnInit() {
@@ -27,6 +28,7 @@ export class MessagesComponent implements OnInit {
message => {
this.writeMessage(message);
this.newMessageEvent.emit();
+ this.scrollToBottom();
});
this.websocketService.connect();
@@ -41,6 +43,11 @@ export class MessagesComponent implements OnInit {
this.changeDetectorRef.detectChanges();
}
+ scrollToBottom() {
+ const element = this.ref.nativeElement.parentElement;
+ element.scrollTop = element.scrollHeight;
+ }
+
transformMessage(message: MessageData) {
message.message = this.convertMarkdownToHTML(message.message);
if (!message.timestamp) {