From 8cde8224f36925adf0306d867ecee3a62f7a60d3 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Mon, 2 Nov 2020 12:45:42 +0100
Subject: [PATCH] fix(search) : fix input + design
---
.../modal-filter/modal-filter.component.scss | 5 +--
.../components/search/search.component.html | 12 +++++--
.../components/search/search.component.scss | 35 +++++++++++--------
.../components/search/search.component.ts | 5 +++
src/assets/scss/_icons.scss | 24 +++++++++++--
src/assets/scss/_inputs.scss | 9 +++++
6 files changed, 69 insertions(+), 21 deletions(-)
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.scss b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
index b4b705285..5275c2945 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.scss
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
@@ -10,13 +10,13 @@
margin-left: 0;
}
- margin-left: 206px;
+ margin-left: 196px;
}
.modalplusFiltres {
@media #{$desktop} {
margin-left: 0;
}
- margin-left: 412px;
+ margin-left: 396px;
}
.modal {
max-height: 648px;
@@ -29,6 +29,7 @@
position: absolute;
border: 1px solid $grey-5;
border-radius: 6px;
+ margin-top: 3.5px;
@include background-hash;
::-webkit-scrollbar {
width: 10px;
diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index b4b59c342..44fa60bd2 100644
--- a/src/app/structure-list/components/search/search.component.html
+++ b/src/app/structure-list/components/search/search.component.html
@@ -9,10 +9,16 @@
fxLayoutGap="1.5vw"
(ngSubmit)="applyFilter(searchForm.value.searchTerm)"
>
- <div class="icon">
- <div class="ico-pin-search grey"></div>
+ <div class="inputSection" fxLayout="row" fxLayoutAlign="space-between center">
+ <input type="text" formControlName="searchTerm" placeholder="Rechercher une adresse, une association..." />
+ <div class="icon close" (click)="clearInput()">
+ <div class="ico-close grey"></div>
+ </div>
+ <div class="separator"></div>
+ <div class="icon pin">
+ <div class="ico-pin-search blue"></div>
+ </div>
</div>
- <input type="text" formControlName="searchTerm" placeholder="Rechercher une adresse, une association..." />
<div class="searchButton">
<button type="submit">Rechercher</button>
</div>
diff --git a/src/app/structure-list/components/search/search.component.scss b/src/app/structure-list/components/search/search.component.scss
index 559e50345..5b8368862 100644
--- a/src/app/structure-list/components/search/search.component.scss
+++ b/src/app/structure-list/components/search/search.component.scss
@@ -4,6 +4,7 @@
@import '../../../../assets/scss/breakpoint';
@import '../../../../assets/scss/shapes';
@import '../../../../assets/scss/buttons';
+@import '../../../../assets/scss/inputs';
.header {
.title {
@@ -17,24 +18,31 @@
.content {
margin: 10px 0 0px 0;
.icon {
- border: 1px solid $grey;
- padding: 4px 6px 8px 6px;
+ padding: 0 6px 0 6px;
border-radius: 4px;
cursor: pointer;
+ &.pin {
+ margin-bottom: 4px;
+ }
}
input {
- width: 100%;
- background-color: $grey-5;
- border: none;
@include cn-regular-14;
- display: flex;
- align-items: center;
- padding-left: 10px;
- text-overflow: ellipsis;
- color: $grey-1;
- outline: none;
+ @include input-search;
}
.searchSection {
+ .separator {
+ height: 100%;
+ width: 2px;
+ background-color: $grey-6;
+ margin: 0 5px 0 5px;
+ }
+ .inputSection {
+ padding: 6px 3px 6px 6px;
+ min-width: 463px;
+ border: 1px solid $grey-6;
+ background-color: $white;
+ height: 40px;
+ }
.searchButton {
border: 1px solid $grey-6;
border-radius: 6px;
@@ -47,7 +55,7 @@
}
}
.btnSection {
- padding: 16px 0 8px 0;
+ padding: 16px 0 0px 0;
button {
@include btn-filter;
.btnText {
@@ -134,8 +142,7 @@
}
}
.footerSearchSection {
- margin-bottom: 30px;
- margin-right: 20px;
+ margin: 17px 0px 17px 0px;
a {
@include cn-bold-14;
diff --git a/src/app/structure-list/components/search/search.component.ts b/src/app/structure-list/components/search/search.component.ts
index c8baac522..d95cf649b 100644
--- a/src/app/structure-list/components/search/search.component.ts
+++ b/src/app/structure-list/components/search/search.component.ts
@@ -38,6 +38,11 @@ export class SearchComponent implements OnInit {
this.checkedModulesFilter = new Array();
}
+ // Clear input search
+ public clearInput(): void {
+ this.searchForm.reset();
+ this.applyFilter(null);
+ }
// Sends an array containing all filters
public applyFilter(term: string): void {
diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss
index 77ed9a879..52da3fd2e 100644
--- a/src/assets/scss/_icons.scss
+++ b/src/assets/scss/_icons.scss
@@ -66,8 +66,8 @@
border-radius: 4px;
background-color: white;
}
- &.grey {
- background-color: #828282;
+ &.blue {
+ background-color: $secondary-color;
}
}
.ico-dot-available {
@@ -123,3 +123,23 @@
border-left: 2px solid $purple;
}
}
+
+.ico-close {
+ width: 15px;
+ height: 13px;
+ text-align: center;
+ &:before {
+ transform: rotate(45deg);
+ }
+ &:after {
+ transform: rotate(-45deg);
+ }
+}
+.ico-close:before,
+.ico-close:after {
+ position: absolute;
+ content: '';
+ height: 14px;
+ width: 2px;
+ background-color: $grey-6;
+}
diff --git a/src/assets/scss/_inputs.scss b/src/assets/scss/_inputs.scss
index e69de29bb..dac479e10 100644
--- a/src/assets/scss/_inputs.scss
+++ b/src/assets/scss/_inputs.scss
@@ -0,0 +1,9 @@
+@mixin input-search {
+ width: 100%;
+ border: none;
+ padding-left: 10px;
+ text-overflow: ellipsis;
+ color: $grey-1;
+ outline: none;
+ font-style: italic;
+}
--
GitLab