[ACS-5171] Facets section - UI changes (#3195)

* [ACS-5171] facets section - ui changes * [ACS-5171] code improvements * [ACS-5171] set theme variable for border color
Alfresco · May 17, 2023 · f1d8b84 · f1d8b84
1 parent b04d0f2
commit f1d8b84
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 22 deletions.
diff --git a/projects/aca-content/assets/i18n/en.json b/projects/aca-content/assets/i18n/en.json
@@ -215,6 +215,9 @@
               "DUBLIN_CORE": "Dublin core",
               "EFFECTIVITY": "Effectivity",
               "TITLE": "Search Results",
+              "FILTER_SET": "Filter Set:",
+              "ADVANCED_FILTERS": "Advanced Filters:",
+              "RESET": "Reset",
               "RESET_ACTION": "Reset search filters",
                 "FOUND_RESULTS": "{{ number }} results found",
                 "FOUND_ONE_RESULT": "{{ number }} result found",

diff --git a/projects/aca-content/src/lib/components/search/search-results/search-results.component.html b/projects/aca-content/src/lib/components/search/search-results/search-results.component.html
@@ -14,21 +14,26 @@
       <div class="adf-search-results">
         <div class="adf-search-results__content">
           <mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate" aria-live="polite"> </mat-progress-bar>
-          <div class="adf-search-results__content-header content">
-            <adf-search-form class="content__side--left"></adf-search-form>
-
-            <mat-divider [vertical]="true" class="content__divider"></mat-divider>
-
-            <adf-search-filter-chips class="content__filter"></adf-search-filter-chips>
-
-            <button
-              mat-button
-              adf-reset-search
-              class="content__reset-action"
-              title="{{'APP.BROWSE.SEARCH.RESET_ACTION' | translate }}"
-              [attr.aria-label]="'APP.BROWSE.SEARCH.RESET_ACTION' | translate ">
-              <mat-icon> refresh </mat-icon>
-            </button>
+          <div class="adf-search-results__content-header aca-content">
+            <div class="aca-content__filter-set">
+              <p>{{ 'APP.BROWSE.SEARCH.FILTER_SET' | translate }}</p>
+              <adf-search-form></adf-search-form>
+            </div>
+            <mat-divider [vertical]="true" class="aca-content__divider"></mat-divider>
+            <div class="aca-content__advanced-filters">
+              <div class="aca-content__advanced-filters--header">
+                <p>{{ 'APP.BROWSE.SEARCH.ADVANCED_FILTERS' | translate }}</p>
+                <button
+                  mat-button
+                  adf-reset-search
+                  class="aca-content__reset-action"
+                  title="{{ 'APP.BROWSE.SEARCH.RESET_ACTION' | translate }}"
+                  [attr.aria-label]="'APP.BROWSE.SEARCH.RESET_ACTION' | translate ">
+                  {{ 'APP.BROWSE.SEARCH.RESET' | translate }}
+                </button>
+              </div>
+              <adf-search-filter-chips></adf-search-filter-chips>
+            </div>
           </div>
 
           <adf-document-list

diff --git a/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss b/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss
@@ -16,15 +16,16 @@ $contrast-gray: #646569;
   &__content {
     @include flex-column;
 
-    border-left: 1px solid #eee;
+    border-left: 1px solid var(--theme-border-color);
   }
 
   &__content-header {
     display: flex;
     padding: 0 25px;
     flex-direction: row;
     align-items: center;
-    border-bottom: 1px solid #eee;
+    border-top: 1px solid var(--theme-border-color);
+    border-bottom: 1px solid var(--theme-border-color);
 
     .adf-search-filter-chip {
       &.mat-chip {
@@ -85,28 +86,37 @@ $contrast-gray: #646569;
     }
   }
 
-  .content {
+  .aca-content {
     box-sizing: border-box;
     display: flex;
     place-content: flex-start space-between;
     align-items: flex-start;
     padding: 16px 12px;
+    background-color: var(--theme-primary-color-default-contrast);
 
-    &__button {
-      padding: 0 12px;
+    &__filter-set {
+      p {
+        padding: 0 16px;
+      }
     }
 
     &__divider {
       height: 100%;
     }
 
-    &__filter {
+    &__advanced-filters {
+      width: 100%;
       padding: 0 12px;
-      flex: 1 1 auto;
+
+      &--header {
+        display: flex;
+        justify-content: space-between;
+      }
     }
 
     &__reset-action {
       line-height: 33px;
+      font-weight: lighter;
     }
 
     &__sort-picker {