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 b4b705285830ce234b8424889b2f8972fb29d519..5275c294543a0743a845ac0022090821f5160188 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 b4b59c342377dd4650a0da6ada32ed26261a0621..44fa60bd243c9e040eb1420b1df8335bb2135bc8 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 559e50345f7b1f725f5a31e10f9e1835c18e9050..5b83688621709a0525694dbe30e7261ec44d203a 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 c8baac522cdfdfd356b138661bfdc4bf56879afb..d95cf649b57f013d5eb3b9b43cebac5dfee6d867 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 77ed9a879173fa07af1b9d77d57ba30b5e2cda47..52da3fd2ec178100965f8c45e1e18fe415e9ade1 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 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..dac479e10cf68b8bfad2187cdfb5feff2f38e9da 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; +}