From 10324619f2bc86fbfe2c810d18e095064712f021 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Thu, 12 Sep 2019 16:43:38 +0300
Subject: [PATCH] feature(theme-shared): add loader bar color input

---
 .../src/lib/plugins/config/config.plugin.ts   |  4 +---
 .../services/setting-management.service.ts    | 20 ++++++++++++-------
 .../loader-bar/loader-bar.component.scss      |  2 --
 .../loader-bar/loader-bar.component.ts        | 15 ++++++++++++--
 4 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/npm/ng-packs/packages/core/src/lib/plugins/config/config.plugin.ts b/npm/ng-packs/packages/core/src/lib/plugins/config/config.plugin.ts
index 97fa0461bf..5add16c31e 100644
--- a/npm/ng-packs/packages/core/src/lib/plugins/config/config.plugin.ts
+++ b/npm/ng-packs/packages/core/src/lib/plugins/config/config.plugin.ts
@@ -100,9 +100,7 @@ function flatRoutes(routes: ABP.FullRoute[]): ABP.FullRoute[] {
     return r.reduce((acc, val) => {
       let value: ABP.FullRoute[] = [val];
       if (val.children) {
-        const { children } = val;
-        delete val.children;
-        value = [val, ...flat(children)];
+        value = [val, ...flat(val.children)];
       }
 
       return [...acc, ...value];
diff --git a/npm/ng-packs/packages/setting-management/src/lib/services/setting-management.service.ts b/npm/ng-packs/packages/setting-management/src/lib/services/setting-management.service.ts
index 141ce3a03d..9ca9199e68 100644
--- a/npm/ng-packs/packages/setting-management/src/lib/services/setting-management.service.ts
+++ b/npm/ng-packs/packages/setting-management/src/lib/services/setting-management.service.ts
@@ -1,11 +1,10 @@
 import { SettingTab } from '@abp/ng.theme.shared';
 import { Injectable } from '@angular/core';
-import { Router, RouteConfigLoadEnd, NavigationEnd } from '@angular/router';
+import { RouteConfigLoadEnd, Router } from '@angular/router';
 import { Navigate } from '@ngxs/router-plugin';
 import { Store } from '@ngxs/store';
-import { filter } from 'rxjs/operators';
-import { takeUntilDestroy } from '@abp/ng.core';
-import { Subscription, timer } from 'rxjs';
+import { Subject, Subscription, timer } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
 
 @Injectable({ providedIn: 'root' })
 export class SettingManagementService {
@@ -13,22 +12,29 @@ export class SettingManagementService {
 
   selected = {} as SettingTab;
 
+  private destroy$ = new Subject();
+
   constructor(private router: Router, private store: Store) {
     let timeout: Subscription;
     this.router.events
       .pipe(
         filter(event => event instanceof RouteConfigLoadEnd),
-        takeUntilDestroy(this),
+        takeUntil(this.destroy$),
       )
       .subscribe(event => {
-        if (timeout) timeout.unsubscribe();
+        if (timeout) {
+          timeout.unsubscribe();
+          this.destroy$.next();
+        }
         timeout = timer(150).subscribe(() => {
           this.setSettings();
         });
       });
   }
 
-  ngOnDestroy() {}
+  ngOnDestroy() {
+    this.destroy$.next();
+  }
 
   setSettings() {
     setTimeout(() => {
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.scss
index a5031940a0..740e30a9a6 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.scss
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.scss
@@ -12,8 +12,6 @@
   }
 
   .abp-progress {
-    background: #77b6ff;
-    box-shadow: 0 0 10px rgba(119, 182, 255, 0.7);
     height: 2px;
     left: 0;
     position: fixed;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
index b6104263cb..8200642e26 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
@@ -9,7 +9,14 @@ import { filter } from 'rxjs/operators';
   selector: 'abp-loader-bar',
   template: `
     <div id="abp-loader-bar" [ngClass]="containerClass" [class.is-loading]="isLoading">
-      <div [ngClass]="progressClass" [style.width.vw]="progressLevel"></div>
+      <div
+        class="abp-progress"
+        [style.width.vw]="progressLevel"
+        [ngStyle]="{
+          'background-color': color,
+          'box-shadow': boxShadow
+        }"
+      ></div>
     </div>
   `,
   styleUrls: ['./loader-bar.component.scss'],
@@ -19,7 +26,7 @@ export class LoaderBarComponent implements OnDestroy {
   containerClass: string = 'abp-loader-bar';
 
   @Input()
-  progressClass: string = 'abp-progress';
+  color: string = '#77b6ff';
 
   @Input()
   isLoading: boolean = false;
@@ -31,6 +38,10 @@ export class LoaderBarComponent implements OnDestroy {
 
   interval: any;
 
+  get boxShadow(): string {
+    return `0 0 10px rgba(${this.color}, 0.5)`;
+  }
+
   constructor(private actions: Actions, private router: Router) {
     actions
       .pipe(