mirror of
https://github.com/avatao-content/frontend-tutorial-framework
synced 2025-06-28 23:25:13 +00:00
Fix manual and instumented layout changes (force event 'resize')
This commit is contained in:
@ -17,7 +17,7 @@
|
||||
<app-terminal></app-terminal>
|
||||
</div>
|
||||
<div class="tfw-sidebar">
|
||||
<app-sidebar [layout]="layout"></app-sidebar>
|
||||
<app-sidebar (layoutChanged)="setLayout($event)" [layout]="layout"></app-sidebar>
|
||||
</div>
|
||||
|
||||
<div class="tfw-terminal-footer"></div>
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { Component, OnDestroy, OnInit, ChangeDetectorRef, ViewChild, AfterViewInit } from '@angular/core';
|
||||
import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core';
|
||||
import { DeploymentNotificationService } from '../services/deployment-notification.service';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { WebSocketService } from '../services/websocket.service';
|
||||
@ -11,16 +11,13 @@ import { SidebarComponent } from '../sidebar/sidebar.component';
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboard.component.scss']
|
||||
})
|
||||
export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||
export class DashboardComponent implements OnInit, OnDestroy {
|
||||
deploying = false;
|
||||
deploymentNotificationSubscription: Subscription;
|
||||
enabledLayouts: Set<string> = config.dashboard.enabledLayouts;
|
||||
layout: string = config.dashboard.currentLayout ;
|
||||
layout: string = config.dashboard.currentLayout;
|
||||
command_handlers = {'layout': this.layoutHandler.bind(this)};
|
||||
|
||||
@ViewChild(SidebarComponent)
|
||||
private sidebarComponent: SidebarComponent;
|
||||
|
||||
constructor(private deploymentNotificationService: DeploymentNotificationService,
|
||||
private webSocketService: WebSocketService,
|
||||
private changeDetectorRef: ChangeDetectorRef) {}
|
||||
@ -36,19 +33,22 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||
);
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.layout = this.sidebarComponent.layout;
|
||||
}
|
||||
|
||||
layoutHandler(data: LayoutCommand) {
|
||||
if (this.enabledLayouts.has(data.layout)) {
|
||||
this.layout = data.layout;
|
||||
this.setLayout(data.layout);
|
||||
}
|
||||
else {
|
||||
console.log('Invalid ide layout "' + data.layout + '" received!');
|
||||
}
|
||||
}
|
||||
|
||||
setLayout(layout: string) {
|
||||
this.layout = layout;
|
||||
// We need to trigger a 'resize' event manually, otherwise ace editor stays collapsed
|
||||
// Ace editors 'resize' event listener requires a parameter of force=true
|
||||
setTimeout(() => window.dispatchEvent(new Event('resize', {force: true} as any)), 0);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.deploymentNotificationSubscription) {
|
||||
this.deploymentNotificationSubscription.unsubscribe();
|
||||
|
Reference in New Issue
Block a user