mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-06-28 17:45:11 +00:00
Code Issues Releases Wiki Activity

Reverse order of messaging messages

Browse Source
This commit is contained in:
Kristóf Tóth
2018-06-26 14:13:29 +02:00
parent c6f9edc9f7
commit 8a2518fbd0
5 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/dashboard/dashboard.component.html
View File

@ -4,8 +4,10 @@
<div [attr.class]="layout">
<div class="tfw-grid-main-components">
<div class="tfw-header"><app-header></app-header></div>
<div [ngClass]="{'hide-attribute': hideMessages}" class="tfw-messages">
<app-messages></app-messages>
<div [ngClass]="{'hide-attribute': hideMessages}"
class="tfw-messages"
#tfwmessages>
<app-messages (newMessageEvent)="scrollMessagesToBottom()"></app-messages>
</div>
<div class="tfw-web tao-grid-top-left"
[ngClass]="{'deploy-blur': deploying}">

5
src/app/dashboard/dashboard.component.scss
View File

@ -58,6 +58,11 @@
}
}
.tfw-messages::-webkit-scrollbar {
width: 0px;
background: transparent;
}
.tfw-ide {
background-color: #1e1e1e; // vscode dark theme
}

8
src/app/dashboard/dashboard.component.ts
View File

@ -20,6 +20,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
deploying = false;
deploymentNotificationSubscription: Subscription;
@ViewChild('webiframe') webiframe: ElementRef;
@ViewChild('tfwmessages') messages: ElementRef;
layout: string = config.dashboard.currentLayout;
hideMessages: boolean = config.dashboard.hideMessages;
@ -125,4 +126,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
this.selectTerminalMenuItem('console');
}
}
scrollMessagesToBottom(): void {
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;
}
}