inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-24 17:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

ACS-8584: Fix for Search Input and icons (#4035)

Browse Source
This commit is contained in:
Denys Vuika
2024-08-19 12:00:19 -04:00
committed by GitHub
parent 85a682ed1a
commit 2edc48bc80
18 changed files with 90 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html
View File

@@ -1,14 +1,16 @@
<div class="app-search-container">
<button
mat-icon-button
id="app-search-button"
class="app-search-button"
(click)="searchSubmit(searchTerm)"
[title]="'SEARCH.BUTTON.TOOLTIP' | translate"
>
<mat-icon class="app-search-input-control-icon app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button>
<mat-form-field class="app-input-form-field" floatLabel="auto">
<mat-form-field class="app-input-form-field" appearance="outline">
<button
mat-icon-button
matPrefix
class="app-search-button"
(click)="searchSubmit(searchTerm)"
[title]="'SEARCH.BUTTON.TOOLTIP' | translate"
>
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button>
<input
matInput
#searchInput
@@ -18,12 +20,13 @@
[(ngModel)]="searchTerm"
(ngModelChange)="inputChange($event)"
(keyup.enter)="searchSubmit($event)"
class="app-input-form-field-input"
[placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
autocomplete="off"
/>
<div matSuffix class="app-suffix-search-icon-wrapper">
<mat-icon *ngIf="searchTerm.length" (click)="clear()" class="app-search-input-control-icon app-clear-icon">clear</mat-icon>
<div matSuffix>
<button mat-icon-button (click)="clear()">
<mat-icon *ngIf="searchTerm.length" class="app-suffix-icon">clear</mat-icon>
</button>
</div>
</mat-form-field>
</div>

79
projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss
View File

@@ -1,78 +1,33 @@
@import '@alfresco/adf-core/lib/styles/mat-selectors';
.app-suffix-search-icon-wrapper {
display: flex;
align-items: center;
margin: 14px 1px;
float: left;
.app-search-input-control-icon {
font-size: 24px;
cursor: pointer;
}
.app-clear-icon {
font-size: 18px;
margin: 3px;
}
}
$search-height: 64px;
.app-search-container {
position: relative;
top: -5px;
font-size: 16px;
padding-left: 19px;
box-sizing: border-box;
height: $search-height;
display: flex;
flex-direction: row;
align-items: center;
.app-input-form-field-input + span {
cursor: text;
pointer-events: auto;
.app-suffix-icon {
width: 18px;
height: 18px;
font-size: 18px;
}
/* stylelint-disable-next-line selector-class-pattern */
.mdc-notched-outline {
display: none;
}
.app-input-form-field {
letter-spacing: -0.7px;
font-size: 16px;
width: calc(100% - 56px);
width: 100%;
height: $search-height;
line-height: calc($search-height / 2);
&-input {
letter-spacing: -0.7px;
}
#{$mat-line-ripple} {
&::before,
&::after {
display: none;
}
}
#{$mat-form-field-icon-suffix} {
position: relative;
right: -14px;
}
}
#{$mat-form-field-flex} {
background: #fff;
}
#{$mat-form-field-wrapper} {
height: 44px;
padding-left: 0;
}
.app-input-form-field-readonly {
#{$mat-form-field-wrapper},
#{$mat-form-field-flex} {
background-color: var(--theme-search-background-color);
}
}
.app-search-button {
left: -12px;
&-icon {
font-size: 24px;
padding-right: 0;
}
}
}

27
projects/aca-content/src/lib/components/search/search-input/search-input.component.html
View File

@@ -1,30 +1,29 @@
<div class="app-search-container app-search-menu-trigger"
<div class="app-search-container"
[matMenuTriggerFor]="searchOptionsMenu"
(menuOpened)="onMenuOpened()"
(menuClosed)="syncInputValues()"
>
<mat-form-field class="app-input-form-field" appearance="outline">
<button class="aca-search-input--search-button" mat-icon-button matPrefix (click)="searchByOption()" [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button>
<button mat-icon-button class="app-search-button" (click)="searchByOption()" [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button>
<mat-form-field class="app-input-form-field app-input-form-field-readonly" [floatLabel]="'auto'">
<input
matInput
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
class="app-input-form-field-input"
[type]="'text'"
[readonly]="true"
[value]="searchedWord"
[placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
/>
<div matSuffix class="app-suffix-search-icon-wrapper app-icon-arrow">
<mat-icon>arrow_drop_down</mat-icon>
</div>
<div matSuffix>
<mat-icon class="app-suffix-icon">arrow_drop_down</mat-icon>
<button mat-icon-button matSuffix class="app-suffix-search-icon-wrapper app-close-button" (click)="exitSearch()">
<mat-icon class="app-close-icon">close</mat-icon>
</button>
<button class="aca-search-input--close-button" mat-icon-button (click)="exitSearch()">
<mat-icon class="app-suffix-icon">close</mat-icon>
</button>
</div>
</mat-form-field>
</div>
@@ -41,9 +40,7 @@
<mat-hint *ngIf="hasLibrariesConstraint" class="app-search-hint">{{ 'SEARCH.INPUT.HINT' | translate }}</mat-hint>
<div id="search-options" class="app-search-options">
<mat-checkbox
class="app-search-options-checkbox"
*ngFor="let option of searchOptions"
<mat-checkbox *ngFor="let option of searchOptions"
id="{{ option.id }}"
[(ngModel)]="option.value"
[disabled]="option.shouldDisable()"

101
projects/aca-content/src/lib/components/search/search-input/search-input.component.scss
View File

@@ -1,43 +1,13 @@
@import '@alfresco/adf-core/lib/styles/mat-selectors';
$search-width: 594px;
$search-height: 32px;
$search-height: 64px;
$search-background: var(--theme-search-background-color);
$search-border-radius: 4px;
$top-margin: 12px;
.app-search-container {
color: var(--theme-foreground-text-color);
width: 100%;
max-width: $search-width;
height: $search-height + $top-margin;
.app-search-button:is(button) {
width: 32px;
height: 32px;
margin-left: 0;
padding-left: 0;
margin-top: -4px;
}
.app-input-form-field {
.app-suffix-search-icon-wrapper.app-icon-arrow {
margin-top: 16px;
}
.app-suffix-search-icon-wrapper.app-close-button {
height: 6px;
.app-close-icon {
font-size: 18px;
line-height: 28px;
}
}
&-input {
caret-color: var(--theme-text-color);
}
}
height: $search-height;
&:focus-within {
label {
@@ -46,19 +16,12 @@ $top-margin: 12px;
}
}
.app-search-options-menu#{$mat-menu-panel} {
position: relative;
top: -5px;
margin-top: 2px;
.app-search-options-menu {
background-color: var(--theme-dialog-background-color);
width: $search-width;
max-width: unset;
/* stylelint-disable-next-line declaration-no-important */
min-width: $search-width !important;
border-radius: $search-border-radius;
#{$mdc-list} {
padding-top: 10px;
padding-right: 10px;
}
}
.aca-search-input {
@@ -67,55 +30,21 @@ $top-margin: 12px;
background-color: $search-background;
border-radius: $search-border-radius;
height: $search-height;
margin-bottom: 0;
padding-bottom: 26px;
.app-search-container {
margin: 10px 0 0;
.app-suffix-icon {
width: 18px;
height: 18px;
font-size: 18px;
}
}
.app-search-control {
margin-top: -$top-margin;
}
.app-search-options {
color: var(--theme-text-color);
border-top: 1px solid var(--theme-divider-color);
padding: 20px 10px;
font-size: 16px;
letter-spacing: -0.7px;
margin-bottom: -8px;
#{$mat-checkbox} {
#{$mdc-form-field} {
#{$mat-checkbox-box} {
#{$mat-checkbox-background} {
height: 18px;
width: 18px;
}
}
}
}
.app-search-options-checkbox label {
max-width: 155px;
font-size: 16px;
padding-left: 6px;
padding-top: 2px;
letter-spacing: -1px;
}
&-checkbox {
padding: 3px 36px 3px 20px;
/* stylelint-disable-next-line no-descending-specificity */
label {
padding: 0 0 0 11px;
overflow: hidden;
text-overflow: ellipsis;
}
}
padding: 10px;
display: flex;
flex-direction: row;
column-gap: 24px;
}
.app-search-hint {
@@ -139,7 +68,7 @@ $top-margin: 12px;
width: $search-width-small;
}
#search-options {
.app-search-options {
padding-left: 20px;
label {
@@ -171,7 +100,7 @@ $top-margin: 12px;
width: $search-width-xsmall;
}
#search-options label {
.app-search-options label {
max-width: 180px;
}
}

2
projects/aca-content/src/lib/components/search/search-input/search-input.component.spec.ts
View File

@@ -230,7 +230,7 @@ describe('SearchInputComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const closeIcon = fixture.debugElement.nativeElement.querySelector('.app-close-icon');
const closeIcon = fixture.debugElement.nativeElement.querySelector('.aca-search-input--close-button');
closeIcon.click();
fixture.detectChanges();