From 4dd91784c1d12a3866de6d54b71c5b5e874c0e58 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Mon, 12 Oct 2020 15:40:03 +0200
Subject: [PATCH] fix(search) : Fix btn design clicked + init modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Utilisation du TS plutôt que des propriétés CSS pour la gestion Activé/Désactivé des filtres
---
.../recherche/recherche.component.html | 7 ++--
.../recherche/recherche.component.scss | 39 ++++++++++++-------
.../recherche/recherche.component.ts | 37 ++++++++++++++++--
3 files changed, 62 insertions(+), 21 deletions(-)
diff --git a/src/app/structure/components/recherche/recherche.component.html b/src/app/structure/components/recherche/recherche.component.html
index bca3c4b6f..a1e2b199d 100644
--- a/src/app/structure/components/recherche/recherche.component.html
+++ b/src/app/structure/components/recherche/recherche.component.html
@@ -11,19 +11,20 @@
</div>
<div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center">
- <button type="button">
+ <button type="button" [className]="btnServicesChecked ? 'selected' : ''" (click)="openModal(this.modalType[0])">
<span class="btnText">Services</span>
<div class="arrow"></div>
</button>
- <button type="button">
+ <button type="button" [className]="btnHomeChecked ? 'selected' : ''" (click)="openModal(this.modalType[1])">
<span class="btnText">Accueil</span>
<div class="arrow"></div>
</button>
- <button type="button">
+ <button type="button" [className]="btnMoreFilterchecked ? 'selected' : ''" (click)="openModal(this.modalType[2])">
<span class="btnText">Plus de filtres</span>
<div class="arrow"></div>
</button>
</div>
+ <div *ngIf="modalOpened" class="modal"></div>
</div>
<div class="footer" fxLayout="row" fxLayoutAlign="space-between center">
<div class="checkbox">
diff --git a/src/app/structure/components/recherche/recherche.component.scss b/src/app/structure/components/recherche/recherche.component.scss
index 41a606c70..b1e1cac04 100644
--- a/src/app/structure/components/recherche/recherche.component.scss
+++ b/src/app/structure/components/recherche/recherche.component.scss
@@ -58,6 +58,8 @@
.btnSection {
padding: 16px 0 16px 0;
button {
+ outline: none;
+
border: 1px solid $grey;
border-radius: 33px;
background-color: $white;
@@ -65,7 +67,6 @@
align-items: center;
display: flex;
cursor: pointer;
-
.btnText {
justify-content: center;
font-family: Trebuchet MS;
@@ -76,19 +77,18 @@
display: flex;
align-items: center;
}
- &:focus {
- border: 1px solid $orange-light;
- color: $orange-light;
- outline: none;
- .arrow {
- background-color: transparent;
- border-bottom: 1px solid $orange-light;
- border-right: 1px solid $orange-light;
- transform: translateY(25%) rotate(-135deg);
- margin: 0 5px 0 10px;
- height: 7px;
- width: 7px;
- }
+ }
+ .selected {
+ border: 1px solid $orange-light;
+ color: $orange-light;
+ .arrow {
+ background-color: transparent;
+ border-bottom: 1px solid $orange-light;
+ border-right: 1px solid $orange-light;
+ transform: translateY(25%) rotate(-135deg);
+ margin: 0 5px 0 10px;
+ height: 7px;
+ width: 7px;
}
}
.arrow {
@@ -170,3 +170,14 @@
}
}
}
+.modal {
+ height: 500px;
+ width: 1100px;
+ background: $white;
+ border: 1px solid $purple;
+ box-sizing: border-box;
+ border-radius: 8px;
+ z-index: 1;
+ position: fixed;
+ margin-top: 80px;
+}
diff --git a/src/app/structure/components/recherche/recherche.component.ts b/src/app/structure/components/recherche/recherche.component.ts
index b37a52c87..f47084959 100644
--- a/src/app/structure/components/recherche/recherche.component.ts
+++ b/src/app/structure/components/recherche/recherche.component.ts
@@ -3,13 +3,42 @@ import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-recherche',
templateUrl: './recherche.component.html',
- styleUrls: ['./recherche.component.scss']
+ styleUrls: ['./recherche.component.scss'],
})
export class RechercheComponent implements OnInit {
-
- constructor() { }
-
+ constructor() {}
+ modalOpened: string;
+ modalType: string[] = ['services', 'accueil', 'plusFiltres'];
+ btnServicesChecked: boolean;
+ btnHomeChecked: boolean;
+ btnMoreFilterchecked: boolean;
ngOnInit(): void {
+ this.modalOpened = null;
+ this.btnServicesChecked = false;
}
+ openModal(option: string) {
+ this.modalOpened = null;
+ switch (option) {
+ case this.modalType[0]:
+ this.btnServicesChecked = !this.btnServicesChecked;
+ this.btnHomeChecked = false;
+ this.btnMoreFilterchecked = false;
+ if (this.btnServicesChecked) this.modalOpened = this.modalType[0];
+
+ break;
+ case this.modalType[1]:
+ this.btnHomeChecked = !this.btnHomeChecked;
+ this.btnMoreFilterchecked = false;
+ this.btnServicesChecked = false;
+ if (this.btnHomeChecked) this.modalOpened = this.modalType[1];
+ break;
+ case this.modalType[2]:
+ this.btnMoreFilterchecked = !this.btnMoreFilterchecked;
+ this.btnServicesChecked = false;
+ this.btnHomeChecked = false;
+ if (this.btnMoreFilterchecked) this.modalOpened = this.modalType[2];
+ break;
+ }
+ }
}
--
GitLab