Merge pull request #3326 from IgniteUI/vkombov/fix-3296

fix(dock-manager): change outlet's class when the theme is toggled

Author: hanastasov

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

@@ -9,7 +9,7 @@
         </div>
         <div class="actionItem">
             <!-- Change volume -->
-            <igx-select [(ngModel)]="dataVolume" (ngModelChange)="paramsChanged()" [overlaySettings]="customOverlaySettings">
+            <igx-select [(ngModel)]="dataVolume" (ngModelChange)="paramsChanged()" [overlaySettings]="customOverlaySettings" [displayDensity]="'compact'">
                 <label igxLabel>Change data volume</label>
                 <igx-prefix>
                     <igx-icon>view_list</igx-icon>
@@ -21,7 +21,7 @@
         </div>
         <div class="actionItem">
             <!-- Change frequency -->
-            <igx-select [(ngModel)]="frequency" (ngModelChange)="paramsChanged()" [overlaySettings]="freqOverlaySettings" #freq>
+            <igx-select [(ngModel)]="frequency" (ngModelChange)="paramsChanged()" [overlaySettings]="freqOverlaySettings" [displayDensity]="'compact'" #freq>
                 <label igxLabel>Change update frequency</label>
                 <igx-prefix>
                     <igx-icon>cell_wifi</igx-icon>
@@ -166,4 +166,4 @@
     <ng-template #host gridHost>
     </ng-template>
 </igc-dockmanager>
-<div class="dark-theme" #filteringOverlayOutlet="overlay-outlet" igxOverlayOutlet></div>
+<div [class]="isDarkTheme ? 'dark-theme' : 'light-theme'" #filteringOverlayOutlet="overlay-outlet" igxOverlayOutlet></div>

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

@@ -127,7 +127,7 @@
 	}
 }
 
-:host ::ng-deep {
+igx-grid {
 	.grid-area {
 		margin-block-start: 1rem;
 		overflow-y: hidden;

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

@@ -2,7 +2,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { IgxButtonModule, IgxDialogModule, IgxDividerModule, IgxGridModule, IgxSliderModule,
+import { IgxButtonModule, IgxDialogModule, IgxDividerModule, IgxGridModule, IgxIconModule, IgxSelectModule, IgxSliderModule,
     IgxSwitchModule, IgxTabsModule, IgxToggleModule } from 'igniteui-angular';
 import { GridFinJSDockManagerRoutingModule } from './grid-finjs-dock-manager-routing.module';
 import { GridFinJSDockManagerComponent } from './grid-finjs-dock-manager.component';
@@ -27,7 +27,9 @@ import { IgxPreventDocumentScrollModule } from '../../../../../src/app/directive
         IgxDialogModule,
         IgxDividerModule,
         IgxTabsModule,
-        IgxToggleModule
+        IgxToggleModule,
+        IgxSelectModule,
+        IgxIconModule
     ],
     providers: [],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]

projects/app-lob/src/styles.scss

@@ -29,8 +29,15 @@ body {
     .grid-chart-contextmenu-wrapper {
         @include fluent-dark-theme($fluent-excel-palette);
     }
+    igx-grid,
+    igx-hierarchical-grid,
+    igx-pivot-grid,
+    igx-tree-grid {
+        --igx-chip-disabled-background: #616161;
+        --igx-chip-disabled-border-color: #616161;
+        --igx-chip-disabled-text-color: #BDBDBD;
+    }
 }
-
 .fin-dark-theme {
     @include dark-theme($green-palette);
     background: #333;