From 41b7a361c39a970a82d97ffa00be64b5bfdc99c4 Mon Sep 17 00:00:00 2001 From: jacekpluta <73617938+jacekpluta@users.noreply.github.com> Date: Thu, 25 Apr 2024 12:04:58 +0200 Subject: [PATCH] [ACS-7531] - Search page (#9606) --- .../search-facet-chip-tabbed.component.html | 2 +- .../search-facet-chip-tabbed.component.scss | 4 ++++ .../search-filter-chips.component.scss | 12 +++++++++++- .../search-form/search-form.component.html | 2 +- .../search-form/search-form.component.scss | 10 ++++++++-- .../dynamic-chip-list.component.scss | 12 ++++++++++++ lib/core/src/lib/styles/_mat-selectors.scss | 4 ++++ 7 files changed, 41 insertions(+), 5 deletions(-) diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.html index 0517cfa58e0..48470bb8d28 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.html +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.html @@ -18,7 +18,7 @@   {{ displayValue | translate }}  {{ 'SEARCH.FILTER.ANY' | translate }} - {{ chipIcon }} + {{ chipIcon }} remove diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss index fe421ccb654..ba248dbbde6 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss @@ -5,6 +5,10 @@ adf-search-facet-chip-tabbed { } } + .adf-search-filter-chip-icon { + padding-top: 2px; + } + .adf-search-widget-extra-width { max-width: 500px; } diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss index 44bdc060854..56c5d156f01 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss @@ -1,9 +1,11 @@ @use '@angular/material' as mat; +@import 'styles/mat-selectors'; .adf-search-filter-chip, .adf-search-filter-chip-tabbed { border: 2px solid transparent; transition: border 500ms ease-in-out; + height: 32px; max-width: 320px; text-overflow: ellipsis; overflow: hidden; @@ -37,7 +39,6 @@ } .adf-search-filter-chip-icon { - padding-top: 5px; padding-left: 5px; } @@ -48,3 +49,12 @@ @include mat.elevation(2); } } + +.adf-search-filter-chip#{$mat-evolution-chip}#{$mat-standard-chip} { + margin-top: 0; + margin-bottom: 0; +} + +#{$mat-standard-chip} { + -webkit-font-smoothing: unset; +} diff --git a/lib/content-services/src/lib/search/components/search-form/search-form.component.html b/lib/content-services/src/lib/search/components/search-form/search-form.component.html index 7e2976fe9ec..f2af1ddd60e 100644 --- a/lib/content-services/src/lib/search/components/search-form/search-form.component.html +++ b/lib/content-services/src/lib/search/components/search-form/search-form.component.html @@ -21,7 +21,7 @@ [matMenuTriggerRestoreFocus]="true"> {{ getSelected(forms) | translate }} - expand_more + expand_more diff --git a/lib/content-services/src/lib/search/components/search-form/search-form.component.scss b/lib/content-services/src/lib/search/components/search-form/search-form.component.scss index b908b35bec7..56d6262e4a4 100644 --- a/lib/content-services/src/lib/search/components/search-form/search-form.component.scss +++ b/lib/content-services/src/lib/search/components/search-form/search-form.component.scss @@ -1,7 +1,11 @@ @use '@angular/material' as mat; +@import 'styles/mat-selectors'; .adf-search-form { &.adf-search-form-button { + justify-content: space-between; + display: flex; + padding: 0 14px 0 16px; height: 35px; max-width: 190px; min-width: 190px; @@ -17,7 +21,6 @@ &-title { max-width: 120px; min-width: 120px; - font-weight: bold; font-size: var(--theme-body-1-font-size); line-height: 24px; padding-right: 12px; @@ -26,7 +29,10 @@ text-align: left; } - &-icon { + .adf-search-form-icon#{$mat-icon} { + font-size: 24px; + height: 24px; + width: 24px; border: 2px solid transparent; border-radius: 6px; transition: border 500ms ease-out; diff --git a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss b/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss index a8cf64eb9ae..14c4046dcca 100644 --- a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss +++ b/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf-dynamic-chip-list-container { display: flex; flex-direction: row; @@ -72,6 +74,16 @@ background-color: var(--theme-primary-color); height: auto; word-break: break-word; + margin-top: 0; + margin-bottom: 0; + + #{$mat-evolution-chip-action} { + padding: 2px 12px; + + #{$mat-evolution-chip-text-label} { + color: var(--adf-theme-foreground-text-color-054); + } + } } .adf-dynamic-chip-list-delete-icon { diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss index 3792818d04d..2c7c01cd5d6 100644 --- a/lib/core/src/lib/styles/_mat-selectors.scss +++ b/lib/core/src/lib/styles/_mat-selectors.scss @@ -108,3 +108,7 @@ $mdc-dialog: '.mdc-dialog'; $mat-text-filed-input: '.mdc-text-field__input'; $mat-floating-label-float-above: '.mdc-floating-label--float-above'; $mat-floating-label--required: '.mdc-floating-label--required'; +$mat-evolution-chip: '.mdc-evolution-chip'; +$mat-standard-chip: '.mat-mdc-standard-chip'; +$mat-evolution-chip-action: '.mdc-evolution-chip__action'; +$mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label'