Merge pull request #2880 from IgniteUI/snovoselski/grid-finjs-dock-manager-vnext

fix(dock-manager): update logic for toggle dark theme

Author: zdrawku

projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.html

@@ -1,7 +1,7 @@
 <igc-dockmanager #dock class="dock-m-position igx-scrollbar" [layout]="docLayout">
-    <div slot="actionPane" style="height: 100%; padding: 20px;">
+    <div class="actionPane" slot="actionPane" style="height: 100%; padding: 20px;">
         <div class="actionItem">
-            Change theme: <br/> <igx-switch [(ngModel)]="theme">Dark Mode</igx-switch>
+            Change theme: <br/> <igx-switch [(ngModel)]="isDarkTheme">Dark Mode</igx-switch>
         </div>
         <div class="actionItem">
             Start/Stop live data: <igx-switch [(ngModel)]="liveData" (change)="streamData($event)">{{ liveData ===
@@ -166,4 +166,4 @@
     <ng-template #host gridHost>
     </ng-template>
 </igc-dockmanager>
-<div class="{{theme ? 'dark-theme' : 'light-theme'}}" #filteringOverlayOutlet="overlay-outlet" igxOverlayOutlet></div>
+<div class="dark-theme" #filteringOverlayOutlet="overlay-outlet" igxOverlayOutlet></div>

projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-import { AfterViewInit, ChangeDetectorRef, Component, ComponentFactoryResolver, ElementRef, HostBinding, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ComponentFactoryResolver, ElementRef, Renderer2, OnDestroy, OnInit, DoCheck, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStrategy, IgxColumnComponent, IgxGridComponent, IgxOverlayOutletDirective, IgxSelectComponent, OverlaySettings, SortingDirection } from 'igniteui-angular';
 import { IgcDockManagerLayout, IgcDockManagerPaneType, IgcSplitPane, IgcSplitPaneOrientation } from 'igniteui-dockmanager';
 import { Subject } from 'rxjs';
@@ -14,7 +14,7 @@ import { DockSlotComponent, GridHostDirective } from './dock-slot.component';
   templateUrl: './grid-finjs-dock-manager.component.html',
   styleUrls: ['./grid-finjs-dock-manager.component.scss']
 })
-export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterViewInit {
+export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterViewInit, DoCheck {
     @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
     @ViewChild('grid2', { static: true }) public grid2: IgxGridComponent;
     @ViewChild(GridHostDirective) public host: GridHostDirective;
@@ -25,8 +25,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
     @ViewChild('freq', { read: IgxSelectComponent }) public selectFrequency: IgxSelectComponent;
     @ViewChild(IgxOverlayOutletDirective) outlet: IgxOverlayOutletDirective;
 
-    @HostBinding('class')
-    public theme = 'dark-theme';
+    public isDarkTheme = true;
 
     public frequencyItems: number[] = [300, 600, 900];
     public frequency = this.frequencyItems[1];
@@ -143,7 +142,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
 
     private destroy$ = new Subject<any>();
 
-    constructor(public dataService: SignalRService, private paneService: FloatingPanesService, private cdr: ChangeDetectorRef, private componentFactoryResolver: ComponentFactoryResolver) {}
+    constructor(public dataService: SignalRService, private paneService: FloatingPanesService, private cdr: ChangeDetectorRef, private componentFactoryResolver: ComponentFactoryResolver, private elementRef: ElementRef, private renderer:Renderer2) {}
 
     public ngOnInit() {
         this.dataService.startConnection(this.frequency, this.dataVolume, true, false);
@@ -161,6 +160,17 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
         this.destroy$.complete();
     }
 
+    public ngDoCheck() {
+        if (this.isDarkTheme) {
+            this.renderer.removeClass(this.elementRef.nativeElement, 'light-theme');
+            this.renderer.addClass(this.elementRef.nativeElement, 'dark-theme');
+        }
+        else {
+            this.renderer.removeClass(this.elementRef.nativeElement, 'dark-theme');
+            this.renderer.addClass(this.elementRef.nativeElement, 'light-theme');
+        }
+    }
+
     public ngAfterViewInit() {
         // This 500ms timeout is used as a workaround for StackBlitz ExpressionChangedAfterItHasBeenChecked Error
         setTimeout(() => {

projects/app-lob/src/styles.scss

@@ -43,6 +43,10 @@ $dark-grid-theme: igx-grid-theme(
     .grid-chart-contextmenu-wrapper {
         @include igx-fluent-dark-theme($fluent-excel-palette);
     }
+
+    .actionPane {
+        background-color: #212121;
+    }
 }
 
 .fin-dark-theme {