From 49ff9f5fb98f283be50224210be87181fa72e6ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Agneray?= <francois.agneray@lam.fr>
Date: Mon, 13 Sep 2021 16:35:47 +0200
Subject: [PATCH] Custom color for search-multiple
---
.../progress-bar-multiple.component.html | 29 ++++++++++++-------
.../progress-bar-multiple.component.scss | 13 ---------
.../progress-bar-multiple.component.ts | 23 +++++++++++++++
3 files changed, 41 insertions(+), 24 deletions(-)
diff --git a/client/src/app/instance/search-multiple/components/progress-bar-multiple.component.html b/client/src/app/instance/search-multiple/components/progress-bar-multiple.component.html
index 4e9fec69..7ac8fc5b 100644
--- a/client/src/app/instance/search-multiple/components/progress-bar-multiple.component.html
+++ b/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
diff --git a/client/src/app/instance/search-multiple/components/progress-bar-multiple.component.scss b/client/src/app/instance/search-multiple/components/progress-bar-multiple.component.scss
index 0a42a748..0cf65486 100644
--- a/client/src/app/instance/search-multiple/components/progress-bar-multiple.component.scss
+++ b/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 {
diff --git a/client/src/app/instance/search-multiple/components/progress-bar-multiple.component.ts b/client/src/app/instance/search-multiple/components/progress-bar-multiple.component.ts
index d3c3d510..ece49254 100644
--- a/client/src/app/instance/search-multiple/components/progress-bar-multiple.component.ts
+++ b/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;
+ }
}
--
GitLab