From b41b1a795ede7bb7fc036354ebb19375736a3b7d Mon Sep 17 00:00:00 2001 From: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com> Date: Wed, 24 Apr 2024 08:45:31 +0200 Subject: [PATCH] [ACS-7555] column filters (#9576) * Changed ng version before material migration * migration for material' * Upgrading NX and start fixing styles * Make all the part build * Fixed core unit test and excluded instable ones * Fixed most of unit tests failing * Fixed unit tests * Fixed last unit tests * fixed unit test problem and some other e2e * Fixed unit tests after rebase * [AAE-18267] change unit test setup for auth service (#9216) * [AAE-18267] change unit test setup for auth service * [AAE-18267] remove exclude * [AAE-18267] removed CoreTestingModule from imports * remaining unit test fixes for the Angular 15 update (#9218) * removing excludes from working tests * test fixes for CategoriesManagementComponent * [ci:force] reenabling tests / fixes * fixes in process-services-cloud * change html element type * fix selector in StartProcessComponent * Fixing unit test after last rebase + lint * ACS-7555 Fixed styles for node type filters * ACS-7555 Removed redundant padding * ACS-7555 Outlined input for text filter * ACS-7555 Resolved conflicts --------- Co-authored-by: Vito Albano Co-authored-by: Wojciech Duda <69160975+wojd0@users.noreply.github.com> --- .../search-check-list.component.scss | 14 ++++++++ .../search-filter-container.component.scss | 36 +++++++++++++------ .../search-text/search-text.component.html | 13 +++++-- .../search-text/search-text.component.scss | 13 +++++++ lib/core/src/lib/styles/_mat-selectors.scss | 1 + 5 files changed, 63 insertions(+), 14 deletions(-) diff --git a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss index 198ee758561..2c47984d464 100644 --- a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss +++ b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf-search-check-list > div { display: flex; flex-direction: column; @@ -9,6 +11,8 @@ text-overflow: ellipsis; overflow: hidden; width: 100%; + -webkit-font-smoothing: subpixel-antialiased; + margin-top: 1px; } .adf-facet-name { @@ -16,5 +20,15 @@ overflow: hidden; white-space: nowrap; } + + #{$mat-checkbox-box} { + margin-left: 4px; + margin-top: 5px; + margin-bottom: 4px; + } + + label { + padding-left: 0; + } } } diff --git a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss index 64b19121c78..922484007ef 100644 --- a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss @@ -1,3 +1,6 @@ +@use '@angular/material' as mat; +@import 'styles/mat-selectors'; + .adf-filter { &-button:has(.adf-filter-icon) { margin-left: -7px; @@ -23,7 +26,7 @@ &-container { display: flex; flex-direction: column; - padding: 15px 15px 10px; + padding: 15.5px 15px 10px; color: var(--adf-theme-foreground-text-color-087); .adf-facet-buttons { @@ -43,9 +46,20 @@ font-size: 1.1em; padding-bottom: 5px; color: var(--adf-theme-foreground-text-color-087); + -webkit-font-smoothing: subpixel-antialiased; + } +} + +.adf-search-filter-menu.adf-filter-menu { + min-width: 260px; + + @include mat.elevation(4); + + > div:first-child { + padding: 0; } - &-actions { + .adf-filter-actions { display: flex; justify-content: flex-end; padding: 15px; @@ -53,15 +67,15 @@ > button { font-size: 0.9em; - color: var(--adf-theme-foreground-text-color-087); - } - } -} - -.adf-search-filter-menu.adf-filter-menu { - min-width: 260px; + height: 36px; + width: auto; + padding-left: 16px; + padding-right: 16px; + -webkit-font-smoothing: subpixel-antialiased; - > div:first-child { - padding: 0; + #{$mat-button-label} { + font-weight: unset; + } + } } } diff --git a/lib/content-services/src/lib/search/components/search-text/search-text.component.html b/lib/content-services/src/lib/search/components/search-text/search-text.component.html index 759807ac5a2..3b97888693e 100644 --- a/lib/content-services/src/lib/search/components/search-text/search-text.component.html +++ b/lib/content-services/src/lib/search/components/search-text/search-text.component.html @@ -1,10 +1,17 @@ - + + {{ settings?.placeholder | translate }} - diff --git a/lib/content-services/src/lib/search/components/search-text/search-text.component.scss b/lib/content-services/src/lib/search/components/search-text/search-text.component.scss index 5fa8cd23f13..99014b30f86 100644 --- a/lib/content-services/src/lib/search/components/search-text/search-text.component.scss +++ b/lib/content-services/src/lib/search/components/search-text/search-text.component.scss @@ -1,5 +1,18 @@ .adf-search-text { .adf-search-text-form-field { width: 100%; + height: 58.5px; + + &-clear-button { + min-width: unset; + border-radius: 50%; + height: 1.5em; + width: 1.5em; + margin-right: 8px; + + mat-icon { + margin-right: 0; + } + } } } diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss index ff7c7192420..3792818d04d 100644 --- a/lib/core/src/lib/styles/_mat-selectors.scss +++ b/lib/core/src/lib/styles/_mat-selectors.scss @@ -23,6 +23,7 @@ $mat-chip: '.mat-mdc-chip'; $mat-chip-list: '.mat-mdc-chip-list'; $mat-chip-list-wrapper: '.mat-chip-list-wrapper'; $mat-checkbox: '.mat-mdc-checkbox'; +$mat-checkbox-box: '.mdc-checkbox'; $mat-checkbox-frame: '.mdc-checkbox__checkmark'; $mat-checkbox-label: '.mdc-label'; $mat-checkbox-checked: '.mat-mdc-checkbox-checked';