inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jacekpluta 2024-04-29 14:02:46 +02:00 committed by VitoAlbano
parent f2b235afbd
commit c68fb2b627
18 changed files with 255 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
View File

@ -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">

24
lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
View File

@ -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 {

7
lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.scss Normal file
View File

@ -0,0 +1,7 @@
@import 'styles/mat-selectors';
adf-search-date-range-tabbed {
#{$mat-tab-header} {
margin-top: -5px;
}
}

1
lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.ts
View File

@ -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 {

8
lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html
View File

@ -9,14 +9,14 @@
<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>
@ -24,11 +24,11 @@
</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)">

33
lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss
View File

@ -1,14 +1,34 @@
@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;
}
@ -16,7 +36,18 @@ adf-search-date-range {
.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;
}
}

2
lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html
View File

@ -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 }}"

2
lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss
View File

@ -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);

14
lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss
View File

@ -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;
}

6
lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.scss
View File

@ -1,4 +1,10 @@
@import 'styles/mat-selectors';
.adf-search-filter-chip {
#{$mat-evolution-chip-graphic} {
display: none;
}
&[disabled] {
pointer-events: none;
}

9
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss
View File

@ -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;
}

2
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss
View File

@ -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;
}
}

2
lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts
View File

@ -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;
}
`

12
lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss
View File

@ -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

87
lib/content-services/src/lib/search/components/search-properties/search-properties.component.html
View File

@ -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"

65
lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss
View File

@ -2,12 +2,65 @@
@import 'styles/mat-selectors';
adf-search-properties {
.adf-search-properties-file-size-label {
display: block;
margin-top: 4px;
.adf-search-properties-form {
.adf-search-properties-file-size-container {
.adf-search-properties-file-size-label {
margin-top: 4px;
display: block;
}
#{$mat-text-field--no-label} {
#{$mat-form-field-infix} {
padding-top: 9px;
padding-bottom: 9px;
display: inline-block;
}
}
#{$mat-form-field-infix} {
height: 37.5px;
min-height: 37.5px;
}
#{$mat-select-trigger} {
height: 17.5px;
}
#{$mat-select-arrow-wrapper} {
width: 16px;
}
#{$mat-form-field-underline} {
&::before {
display: none;
}
}
#{$mat-form-field-infix} {
display: inline-block;
}
#{$mat-select-arrow} {
margin-left: 5px;
}
#{$mat-form-field} {
margin-bottom: 18px;
}
}
adf-search-chip-autocomplete-input {
#{$mat-notched-outline-leading} {
border-color: var(--adf-theme-foreground-text-color-027) !important;
}
#{$mat-notched-outline-trailing} {
border-color: var(--adf-theme-foreground-text-color-027) !important;
}
}
}
input {
input, .mat-form-field-infix.mat-form-field-infix {
height: 25px;
border: 1px solid var(--adf-theme-mat-grey-color-a400);
border-radius: 5px;
@ -21,14 +74,14 @@ adf-search-properties {
.adf-search-properties-file-size-operator,
.adf-search-properties-file-size-unit {
#{$mat-form--text-field-infix} {
#{$mat-form-field-infix} {
border: 1px solid var(--adf-theme-mat-grey-color-a400);
border-radius: 5px;
padding: 9px;
}
&#{$mat-focused} {
#{$mat-form--text-field-infix} {
#{$mat-form-field-infix} {
outline: 2px auto -webkit-focus-ring-color;
}
}

32
lib/content-services/src/lib/search/components/search-text/search-text.component.scss
View File

@ -1,7 +1,39 @@
@import 'styles/mat-selectors';
.adf-search-text {
padding: 0;
#{$mat-form-field-wrapper} {
margin-top: -5px;
padding: 0;
#{$mat-form-field-infix} {
padding-bottom: 6px;
}
}
#{$mat-notched-outline} {
#{$mat-notched-outline-trailing},
#{$mat-notched-outline-notch} {
border-top: 0 solid;
border-left: 0 solid;
border-right: 0 solid;
border-bottom: 1px solid var(--adf-theme-foreground-secondary-text-color);
#{$mat-floating-label} {
left: 0;
}
}
}
#{$mat-notched-outline-leading} {
display: none;
}
.adf-search-text-form-field {
width: 100%;
height: 58.5px;
margin-top: 5px;
&-clear-button {
min-width: unset;

10
lib/core/src/lib/styles/_mat-selectors.scss
View File

@ -112,4 +112,14 @@ $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';
$mat-notched-outline: '.mdc-notched-outline';
$mat-evolution-chip-graphic: '.mdc-evolution-chip__graphic';
$mat-select-trigger: '.mat-mdc-select-trigger';
$mat-select-arrow: '.mat-mdc-select-arrow';
$mat-notched-outline-leading: '.mdc-notched-outline__leading';
$mat-notched-outline-trailing: '.mdc-notched-outline__trailing';
$mat-notched-outline-notch: '.mdc-notched-outline__notch';
$mat-evolution-chip-set: '.mdc-evolution-chip-set';
$mat-button-base: '.mat-mdc-button-base';
$mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label';
$cdk-overlay-pane: '.cdk-overlay-pane';