[ACS-7533] - Advanced search chips dropdowns (#9618)

Alfresco · Jul 8, 2024 · 61a803f · 61a803f
1 parent 2568344
commit 61a803f
Show file tree

Hide file tree

Showing 18 changed files with 254 additions and 61 deletions.
diff --git a/...h/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html b/...h/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
@@ -24,6 +24,7 @@
             [matChipInputFor]="chipList"
             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
             [attr.aria-label]="placeholder | translate"
+            class="adf-search-properties-file-input"
             (matChipInputTokenEnd)="add($event)"
             (blur)="activeAnyOption = false"
             data-automation-id="adf-search-chip-autocomplete-input">

diff --git a/...h/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss b/...h/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
@@ -6,16 +6,40 @@ adf-search-chip-autocomplete-input {
         width: 100%;
     }
 
+    .adf-chip-list:has(#{$mat-notched-outline}) {
+        margin-top: 4px;
+    }
+
     #{$mat-form--text-field-infix} {
         border: none;
     }
 
+    .adf-chip-list#{$mat-form-field} {
+        #{$mat-form-field-infix} {
+            padding-top: 14px;
+            padding-bottom: 14px;
+            min-height: unset;
+        }
+    }
+
+    .adf-search-properties-file-input {
+        margin-left: 3px;
+    }
+
     .adf-autocomplete-added-option-chips.adf-option-chips {
         border: 1px solid var(--theme-text-color);
         border-radius: 10px;
         background-color: var(--theme-primary-color-default-contrast);
         height: auto;
         word-break: break-word;
+        padding: 4px 0;
+    }
+
+    #{$mat-evolution-chip-set} {
+        #{$mat-evolution-chip} {
+            margin-left: 0;
+            margin-right: 4px;
+        }
     }
 
     .adf-option-chips-delete-button.adf-autocomplete-added-option-chips-delete-button {

diff --git a/...rc/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.scss b/...rc/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.scss
@@ -0,0 +1,7 @@
+@import 'styles/mat-selectors';
+
+adf-search-date-range-tabbed {
+    #{$mat-tab-header} {
+        margin-top: -5px;
+    }
+}
diff --git a/.../src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.ts b/.../src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.ts
@@ -42,6 +42,7 @@ const DEFAULT_DATE_DISPLAY_FORMAT = 'dd-MMM-yy';
 @Component({
   selector: 'adf-search-date-range-tabbed',
   templateUrl: './search-date-range-tabbed.component.html',
+  styleUrls: [ './search-date-range-tabbed.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class SearchDateRangeTabbedComponent implements SearchWidget, OnInit {

diff --git a/...ch/components/search-date-range-tabbed/search-date-range/search-date-range.component.html b/...ch/components/search-date-range-tabbed/search-date-range/search-date-range.component.html
@@ -9,26 +9,26 @@
       <mat-radio-button [value]="DateRangeType.IN_LAST" data-automation-id="date-range-in-last">
         {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.IN_LAST' | translate }}
       </mat-radio-button>
-      <mat-form-field class="adf-search-date-range-form-field adf-search-date-range-input-field">
+      <mat-form-field class="adf-search-date-range-form-field adf-search-date-range-input-field" subscriptSizing="dynamic">
         <input matInput [attr.aria-label]="'SEARCH.DATE_RANGE_ADVANCED.ARIA_LABEL.NUMBER_INPUT' | translate"
                type="number" min="1" formControlName="inLastValue"
                data-automation-id="date-range-in-last-input" (input)="narrowDownAllowedCharacters($event)"
                (keydown)="preventIncorrectNumberCharacters($event)">
         <mat-error *ngIf="form.controls.inLastValue.errors?.required">{{ 'SEARCH.DATE_RANGE_ADVANCED.ERROR.IN_LAST' | translate }}</mat-error>
       </mat-form-field>
-      <mat-form-field class="adf-search-date-range-form-field">
+      <mat-form-field class="adf-search-date-range-form-field adf-search-date-range-form-field-select" subscriptSizing="dynamic">
         <mat-select formControlName="inLastValueType" data-automation-id="date-range-in-last-dropdown">
           <mat-option data-automation-id="date-range-in-last-option-days" [value]="InLastDateType.DAYS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.DAYS' | translate }}</mat-option>
           <mat-option data-automation-id="date-range-in-last-option-weeks" [value]="InLastDateType.WEEKS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.WEEKS' | translate }}</mat-option>
           <mat-option data-automation-id="date-range-in-last-option-months" [value]="InLastDateType.MONTHS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.MONTHS' | translate }}</mat-option>
         </mat-select>
       </mat-form-field>
     </span>
-    <span class="adf-search-date-range-container-row">
+    <span class="adf-search-date-range-container-row adf-search-date-range-container-row-date">
       <mat-radio-button [value]="DateRangeType.BETWEEN" data-automation-id="date-range-between">
         {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }}
       </mat-radio-button>
-      <mat-form-field class="adf-search-date-range-form-field">
+      <mat-form-field class="adf-search-date-range-form-field" subscriptSizing="dynamic">
         <mat-date-range-input [rangePicker]="$any(picker)" [max]="convertedMaxDate">
           <input matStartDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.START_DATE' | translate }}"
                  data-automation-id="date-range-between-start-input" [formControl]="betweenStartDateFormControl" (change)="dateChanged($event, betweenStartDateFormControl)">

diff --git a/...ch/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss b/...ch/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss
@@ -1,22 +1,53 @@
+@import 'styles/mat-selectors';
+
 adf-search-date-range {
+    #{$mat-icon-button}:is(button),
+    #{$mat-icon-button}#{$mat-button-base} {
+        height: 24px;
+    }
+
     .adf-search-date-range-container {
         margin-top: 20px;
         padding: 10px;
 
+        .adf-search-date-range-form-field-select {
+            width: 180px;
+            min-width: 180px;
+        }
+
         &-row {
             display: flex;
             flex-direction: row;
-            padding-bottom: 15px;
+            padding-bottom: 21px;
             align-items: center;
 
+            &-date {
+                margin-top: 8px;
+            }
+
+            #{$mat-select-arrow-wrapper} {
+                height: unset;
+            }
+
             .adf-search-date-range-input-field {
                 width: 75px;
             }
 
             .adf-search-date-range-form-field {
                 padding-left: 10px;
                 flex: 1;
+                margin-bottom: 12px;
+
+                #{$mat-form-field-flex} {
+                    #{$mat-form-field-infix} {
+                        padding: 0.375em 0 4px 0;
+                    }
+                }
             }
         }
     }
+
+    .adf-search-widget-extra-width {
+        max-width: 500px;
+    }
 }
diff --git a/...t-services/src/lib/search/components/search-facet-field/search-facet-field.component.html b/...t-services/src/lib/search/components/search-facet-field/search-facet-field.component.html
@@ -4,7 +4,7 @@
             <button mat-icon-button class="adf-facet-search-icon" tabindex="-1">
                 <mat-icon class="adf-search-field-icon">search</mat-icon>
             </button>
-            <mat-form-field class="adf-facet-search-field" >
+            <mat-form-field class="adf-facet-search-field" subscriptSizing="dynamic">
                 <input
                     matInput
                     placeholder="{{ 'SEARCH.FILTER.ACTIONS.SEARCH' | translate }}"

diff --git a/...t-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss b/...t-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss
@@ -27,7 +27,7 @@
 
             .adf-facet-search-icon {
                 width: 27px;
-                margin-top: -4px;
+                margin-top: -3px;
 
                 .adf-search-field-icon {
                     font-size: var(--theme-subheading-1-font-size);

diff --git a/...ents/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss b/...ents/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss
@@ -1,15 +1,21 @@
+@import 'styles/mat-selectors';
+
 adf-search-facet-chip-tabbed {
     .adf-search-filter-chip-tabbed {
         &[disabled] {
             pointer-events: none;
         }
+
+        #{$mat-evolution-chip-graphic} {
+            display: none;
+        }
     }
 
     .adf-search-filter-chip-icon {
         padding-top: 2px;
     }
+}
 
-    .adf-search-widget-extra-width {
-        max-width: 500px;
-    }
+.adf-search-widget-extra-width.mat-mdc-menu-panel {
+    max-width: 500px;
 }
diff --git a/.../search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.scss b/.../search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.scss
@@ -1,4 +1,10 @@
+@import 'styles/mat-selectors';
+
 .adf-search-filter-chip {
+    #{$mat-evolution-chip-graphic} {
+        display: none;
+    }
+
     &[disabled] {
         pointer-events: none;
     }

diff --git a/...services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss b/...services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss
@@ -3,7 +3,6 @@
 
 .adf-search-filter-chip,
 .adf-search-filter-chip-tabbed {
-    border: 2px solid transparent;
     transition: border 500ms ease-in-out;
     height: 32px;
     max-width: 320px;
@@ -46,6 +45,10 @@
         min-width: 320px;
         border-radius: 12px;
 
+        &:has(.adf-search-properties-file-size-operator) {
+            min-width: 365px;
+        }
+
         @include mat.elevation(2);
     }
 }
@@ -58,3 +61,7 @@
 #{$mat-standard-chip} {
     -webkit-font-smoothing: unset;
 }
+
+#{$mat-evolution-chip-set} {
+    margin-top: -4px;
+}
diff --git a/...onents/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss b/...onents/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss
@@ -5,6 +5,7 @@
     .adf-search-filter-title {
         display: flex;
         justify-content: space-between;
+        color: var(--adf-theme-foreground-text-color-054);
         align-items: center;
         padding: 16px 12px;
         height: 32px;
@@ -14,6 +15,7 @@
         font-style: inherit;
 
         &-action {
+            color: var(--adf-theme-foreground-text-color-087);
             float: right;
         }
     }

diff --git a/.../search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts b/.../search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts
@@ -26,7 +26,7 @@ import { SearchWidgetContainerComponent } from '../../search-widget-container/se
   templateUrl: './search-widget-chip.component.html',
   styles: [
       `
-                .adf-search-widget-extra-width {
+                .adf-search-widget-extra-width.adf-search-filter-chip-menu-panel {
                   max-width: 500px;
                 }
               `

diff --git a/...rvices/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss b/...rvices/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss
@@ -1,6 +1,16 @@
+@import 'styles/mat-selectors';
+
 adf-search-filter-tabbed {
+    #{$mat-tab-header} {
+        margin-top: 0;
+    }
+
     .adf-search-tab-label-active {
-        border-bottom: 2px solid var(--theme-primary-color);
+        border-bottom: 1px solid var(--theme-primary-color);
+
+        #{$mat-tab-label-text} {
+            color: var(--adf-theme-foreground-secondary-text-color);
+        }
     }
 
     // The important tag is used here as a workaround for a bug in angular material, when MatTabs are used in conjunction with MatMenu

diff --git a/...ent-services/src/lib/search/components/search-properties/search-properties.component.html b/...ent-services/src/lib/search/components/search-properties/search-properties.component.html
@@ -1,45 +1,48 @@
-<form [formGroup]="form">
-    <label
-        for="adf-search-properties-file-size"
-        class="adf-search-properties-file-size-label">
-        {{ 'SEARCH.SEARCH_PROPERTIES.FILE_SIZE' | translate }}
-    </label>
-    <mat-form-field
-        [style.width.px]="fileSizeOperatorsMaxWidth"
-        class="adf-search-properties-file-size-operator">
-        <mat-select
-            data-automation-id="adf-search-properties-file-size-operator-select"
-            [formControl]="form.controls.fileSizeOperator"
-            #fileSizeOperatorSelect>
-            <mat-option
-                *ngFor="let fileSizeOperator of fileSizeOperators"
-                [value]="fileSizeOperator">
-                {{ fileSizeOperator | translate }}
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
-    <input
-        [formControl]="form.controls.fileSize"
-        type="number"
-        min="0"
-        step="any"
-        (input)="narrowDownAllowedCharacters($event)"
-        (keydown)="preventIncorrectNumberCharacters($event)"
-        id="adf-search-properties-file-size"
-        [placeholder]="'SEARCH.SEARCH_PROPERTIES.FILE_SIZE_PLACEHOLDER' | translate"
-        (blur)="clearNumberFieldWhenInvalid($event)"
-        data-automation-id="adf-search-properties-file-size-input" />
-    <mat-form-field class="adf-search-properties-file-size-unit">
-        <mat-select
-            [formControl]="form.controls.fileSizeUnit"
-            data-automation-id="adf-search-properties-file-size-unit-select">
-            <mat-option
-                *ngFor="let fileSizeUnit of fileSizeUnits"
-                [value]="fileSizeUnit">
-                {{ fileSizeUnit.abbreviation | translate }}
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
+<form [formGroup]="form" class="adf-search-properties-form">
+    <div class="adf-search-properties-file-size-container">
+        <label
+            for="adf-search-properties-file-size"
+            class="adf-search-properties-file-size-label">
+            {{ 'SEARCH.SEARCH_PROPERTIES.FILE_SIZE' | translate }}
+        </label>
+        <mat-form-field
+            [style.width.px]="fileSizeOperatorsMaxWidth"
+            subscriptSizing="dynamic"
+            class="adf-search-properties-file-size-operator">
+            <mat-select
+                data-automation-id="adf-search-properties-file-size-operator-select"
+                [formControl]="form.controls.fileSizeOperator"
+                #fileSizeOperatorSelect>
+                <mat-option
+                    *ngFor="let fileSizeOperator of fileSizeOperators"
+                    [value]="fileSizeOperator">
+                    {{ fileSizeOperator | translate }}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+        <input
+            [formControl]="form.controls.fileSize"
+            type="number"
+            min="0"
+            step="any"
+            (input)="narrowDownAllowedCharacters($event)"
+            (keydown)="preventIncorrectNumberCharacters($event)"
+            id="adf-search-properties-file-size"
+            [placeholder]="'SEARCH.SEARCH_PROPERTIES.FILE_SIZE_PLACEHOLDER' | translate"
+            (blur)="clearNumberFieldWhenInvalid($event)"
+            data-automation-id="adf-search-properties-file-size-input" />
+        <mat-form-field class="adf-search-properties-file-size-unit" subscriptSizing="dynamic">
+            <mat-select
+                [formControl]="form.controls.fileSizeUnit"
+                data-automation-id="adf-search-properties-file-size-unit-select">
+                <mat-option
+                    *ngFor="let fileSizeUnit of fileSizeUnits"
+                    [value]="fileSizeUnit">
+                    {{ fileSizeUnit.abbreviation | translate }}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+    </div>
     <p class="adf-search-properties-file-type-label">{{ 'SEARCH.SEARCH_PROPERTIES.FILE_TYPE' | translate }}</p>
     <adf-search-chip-autocomplete-input
         [autocompleteOptions]="autocompleteOptions"