Custom color for search-multiple

client/src/app/instance/search-multiple/components/progress-bar-multiple.component.html

@@ -6,12 +6,19 @@
 </div>
 <div class="progress-navigation">
     <div class="progress progress-with-circle">
-        <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="4" [ngClass]="getStepClass()"></div>
+        <div class="progress-bar" 
+            [ngClass]="getStepClass()"
+            [ngStyle]="{'background-color': instance.config.design.design_color }" 
+            role="progressbar" 
+            aria-valuenow="1" 
+            aria-valuemin="1" 
+            aria-valuemax="4">
+        </div>
     </div>
     <ul class="nav nav-pills">
         <li class="nav-item checked" [ngClass]="{'active': currentStep === 'position'}">
-            <a class="nav-link" routerLink="/instance/{{ instance.name }}/search-multiple/position" [queryParams]="queryParams" data-toggle="tab">
-                <div class="icon-circle">
+            <a class="nav-link" [ngStyle]="getNavItemAStyle('position', true)" routerLink="/instance/{{ instance.name }}/search-multiple/position" [queryParams]="queryParams" data-toggle="tab">
+                <div class="icon-circle" [ngStyle]="getNavItemIconCircleStyle('position', true)">
                     <span class="fas fa-drafting-compass"></span>
                 </div>
                 Position
@@ -19,14 +26,14 @@
         </li>
 
         <li class="nav-item" [ngClass]="{'active': currentStep === 'datasets', 'checked': datasetsStepChecked}">
-            <a *ngIf="coneSearch" class="nav-link" routerLink="/instance/{{ instance.name }}/search-multiple/datasets" [queryParams]="queryParams" data-toggle="tab">
-                <div class="icon-circle">
+            <a *ngIf="coneSearch" class="nav-link" [ngStyle]="getNavItemAStyle('datasets', datasetsStepChecked)" routerLink="/instance/{{ instance.name }}/search-multiple/datasets" [queryParams]="queryParams" data-toggle="tab">
+                <div class="icon-circle" [ngStyle]="getNavItemIconCircleStyle('datasets', datasetsStepChecked)">
                     <span class="fas fa-book"></span>
                 </div>
                 Datasets
             </a>
-            <a *ngIf="!coneSearch" class="nav-link disabled" data-toggle="tab">
-                <div class="icon-circle">
+            <a *ngIf="!coneSearch" class="nav-link disabled" [ngStyle]="getNavItemAStyle('datasets', datasetsStepChecked)" data-toggle="tab">
+                <div class="icon-circle" [ngStyle]="getNavItemIconCircleStyle('datasets', datasetsStepChecked)">
                     <span class="fas fa-book"></span>
                 </div>
                 Datasets
@@ -34,14 +41,14 @@
         </li>
 
         <li class="nav-item" [ngClass]="{'active': currentStep === 'result', 'checked': resultStepChecked}">
-            <a *ngIf="coneSearch && selectedDatasets.length > 0" class="nav-link" routerLink="/instance/{{ instance.name }}/search-multiple/result" [queryParams]="queryParams" data-toggle="tab">
-                <div class="icon-circle">
+            <a *ngIf="coneSearch && selectedDatasets.length > 0" class="nav-link" [ngStyle]="getNavItemAStyle('result', resultStepChecked)" routerLink="/instance/{{ instance.name }}/search-multiple/result" [queryParams]="queryParams" data-toggle="tab">
+                <div class="icon-circle" [ngStyle]="getNavItemIconCircleStyle('result', resultStepChecked)">
                     <span class="fas fa-table"></span>
                 </div>
                 Result
             </a>
-            <a *ngIf="!coneSearch || selectedDatasets.length < 1" class="nav-link disabled" data-toggle="tab">
-                <div class="icon-circle">
+            <a *ngIf="!coneSearch || selectedDatasets.length < 1" class="nav-link disabled" [ngStyle]="getNavItemAStyle('result', resultStepChecked)" data-toggle="tab">
+                <div class="icon-circle" [ngStyle]="getNavItemIconCircleStyle('result', resultStepChecked)">
                     <span class="fas fa-table"></span>
                 </div>
                 Result

client/src/app/instance/search-multiple/components/progress-bar-multiple.component.scss

@@ -25,7 +25,6 @@
     -webkit-transition: width .3s ease;
     -o-transition: width .3s ease;
     transition: width .3s ease;
-    background-color: #7AC29A;
 }
 
 .nav-pills {
@@ -67,24 +66,12 @@
     width: 33%;
 }
 
-.nav-item.checked .icon-circle {
-    border-color: #7AC29A;
-    color: #7AC29A;
-}
-
-.nav-item.checked a {
-    color: #7AC29A !important;
-}
-
 .nav-item.active a {
-    color: #7AC29A !important;
     background-color: transparent;
 }
 
 .nav-item.active .icon-circle {
     color: white !important;
-    border-color: #7AC29A;
-    background-color: #7AC29A;
 }
 
 .nav-link.disabled {

client/src/app/instance/search-multiple/components/progress-bar-multiple.component.ts

@@ -49,4 +49,27 @@ export class ProgressBarMultipleComponent {
                 return 'positionStep';
         }
     }
+
+    getNavItemAStyle(currentStep: string, checked: boolean) {
+        if (this.currentStep === currentStep || checked) {
+            return {
+                'color': this.instance.config.design.design_color
+            }
+        } else {
+            return null;
+        }
+    }
+
+    getNavItemIconCircleStyle(currentStep: string, checked: boolean) {
+        let style = {};
+        if (this.currentStep === currentStep) {
+            style['border-color'] = this.instance.config.design.design_color;
+            style['background-color'] = this.instance.config.design.design_color;
+        }
+        if (checked) {
+            style['border-color'] = this.instance.config.design.design_color;
+            style['color'] = this.instance.config.design.design_color;
+        }
+        return style;
+    }
 }