Merge pull request #3199 from IgniteUI/snovoselski/add-theme-switcher-finjs

fix(finjs): add option to hide theme switch for sample

Author: hanastasov

projects/app-lob/src/app/grid-finjs/controllers.component.html

@@ -1,6 +1,11 @@
 <div class="controls-wrapper">
     <div class="controls-holder">
         <div class="switches">
+            <div class="test" *ngIf="isThemeSwitchVisible">
+                <div class="control-item" >
+                    <igx-switch class="theme-switch" [checked]="false" [(ngModel)]="theme" (change)="onChange('theme', $event)">Dark</igx-switch>
+                </div>
+            </div>
             <div class="control-item">
                 <igx-switch [checked]="true" (change)="onChange('grouped', $event)" color="blue"
                     cssClass="finjs-sample-switch">
@@ -33,4 +38,4 @@
             ~{{volume/5}} records updated.</span>
     </div>
     <igx-toast #toast (onClosed)="handleHidden()"></igx-toast>
-</div>
+</div>

projects/app-lob/src/app/grid-finjs/controllers.component.ts

@@ -1,4 +1,5 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import {
     IButtonGroupEventArgs, IChangeSwitchEventArgs, IgxButtonGroupComponent,
     IgxSliderComponent, IgxToastComponent, ISliderValueChangeEventArgs, VerticalAlignment }
@@ -23,6 +24,8 @@ export class ControllerComponent implements OnInit, OnDestroy {
     @Output() public playAction = new EventEmitter<{ action: string }>();
 
     public volume = 1000;
+    public theme = false;
+    public isThemeSwitchVisible = true;
     public frequency = 500;
     public controls = [
         {
@@ -51,6 +54,8 @@ export class ControllerComponent implements OnInit, OnDestroy {
     private frequencyChanged$: Observable<ISliderValueChangeEventArgs>;
     private frequencyChangedSubscription: Subscription;
 
+    constructor(private router: ActivatedRoute, private elRef: ElementRef) {}
+
     public ngOnInit(): void {
         this.volumeChanged$ = this.volumeSlider.valueChange.pipe(debounce(() => timer(200)));
         this.volumeChangedSubscription = this.volumeChanged$.subscribe(x => this.volumeChanged.emit(this.volumeSlider.value as number));
@@ -60,6 +65,11 @@ export class ControllerComponent implements OnInit, OnDestroy {
             .subscribe(() => this.frequencyChanged.emit(this.intervalSlider.value as number));
 
         this.toast.positionSettings.verticalDirection = VerticalAlignment.Middle;
+
+        // Hide theme switcher
+        if (this.router.snapshot.queryParamMap.get('theme-switch') === 'false') {
+            this.isThemeSwitchVisible = false;
+        }
     }
 
     public ngOnDestroy(): void {

projects/app-lob/src/app/grid-finjs/main.component.html

@@ -1,4 +1,4 @@
-<div class="main__wrapper igx-scrollbar">
+<div class="main__wrapper igx-scrollbar" [class.fin-dark-theme]="darkTheme">
     <app-finjs-controllers #controllers
         (switchChanged)="onSwitchChanged($event)"
         (volumeChanged)="onVolumeChanged($event)"

projects/app-lob/src/app/grid-finjs/main.component.ts

@@ -1,4 +1,5 @@
 import { AfterViewInit, Component, HostBinding, OnDestroy, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
 import { IgxDialogComponent, IgxOverlayOutletDirective, OverlaySettings } from 'igniteui-angular';
 import { IgxCategoryChartComponent } from 'igniteui-angular-charts';
 import { Stock } from '../data/financialData';
@@ -22,12 +23,17 @@ export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
         closeOnOutsideClick: true
     };
 
+    @HostBinding('class.dark-theme')
+    public darkTheme = false;  
+
+
     public properties = ['price', 'country'];
     public chartData: Stock[] = [];
     public volume = 1000;
     public frequency = 500;
     private _timer: ReturnType<typeof setInterval>;
 
+    
     public onSwitchChanged(event: { action: string; value: boolean }): void {
         switch (event.action) {
             case 'toolbar': {
@@ -38,6 +44,10 @@ export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
                 this.finGrid.toggleGrouping();
                 break;
             }
+            case 'theme': {
+                this.darkTheme = event.value;
+                break;
+            }
             default: break;
         }
     }

projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.scss

@@ -1,6 +1,18 @@
 @use '../../variables' as *;
 
 :host ::ng-deep {
+    .fin-dark-theme {
+		.finjs-slider,
+		.sample-toolbar,
+		.group-drop-area {
+			color: contrast-color(null, 'gray', 900);
+		}
+
+		.group-drop-area {
+			background: color(null, 'surface', 500);
+		}
+	}
+    
 	.finjs-icons {
 		display: flex;
 		align-items: center;

projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.ts

@@ -21,6 +21,9 @@ export class TreeGridFinJSComponent implements OnDestroy, OnInit {
     @ViewChild('slider2', { static: true }) public intervalSlider!: IgxSliderComponent;
     @ViewChild(IgxOverlayOutletDirective, { static: true }) public outlet!: IgxOverlayOutletDirective;
 
+    @HostBinding('class.dark-theme')
+    public theme = false;
+
     public showToolbar = true;
     public selectionMode = 'multiple';
     public volume = 1000;
@@ -159,6 +162,19 @@ export class TreeGridFinJSComponent implements OnDestroy, OnInit {
         return value ? '$' + value.toFixed(3) : '';
     }
 
+    /**
+     * the below code is needed when accessing the sample through the navigation
+     * it will style all the space below the sample component element, but not the navigation menu
+     */
+     public onThemeChanged(event: any) {
+        const parentEl = this.parentComponentEl();
+        if (event.checked && parentEl.classList.contains('main')) {
+            parentEl.classList.add('fin-dark-theme');
+        } else {
+            parentEl.classList.remove('fin-dark-theme');
+        }
+    }
+    
     public ngOnDestroy() {
         this.stopFeed();
     }

projects/app-lob/src/styles.scss

@@ -1,18 +1,41 @@
 @use 'igniteui-angular/theming' as *;
 @use 'variables' as *;
 @use 'app-layout';
-
 /* autoprefixer grid: on */
 html,
 body {
     height: 100%;
     overflow: hidden;
     margin: 0;
 }
-
 @include core();
 @include typography();
 @include theme(
     $palette: $palette,
     $schema: $schema
 );
+:root {
+    @include palette($palette);
+}
+.light-theme {
+    @include light-theme($palette);
+}
+.dark-theme {
+    background: #333;
+    color: #fff;
+    @include dark-theme(
+        $palette: $green-palette
+    );
+    .grid-chart-contextmenu-wrapper {
+        @include fluent-dark-theme($fluent-excel-palette);
+    }
+}
+
+.fin-dark-theme {
+    @include dark-theme($green-palette);
+    background: #333;
+
+    ::-moz-placeholder {
+        opacity: 1;
+    }
+}