inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-12 17:04:46 +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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 90 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
e2e/playwright/library-actions/src/tests/library-actions.e2e.ts
View File

@ -397,7 +397,7 @@ test.describe('Library actions ', () => {
const libraryMenu = myLibrariesPage.matMenu;
await myLibrariesHeader.searchButton.click();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await searchPage.searchOverlay.searchLibrariesOption.click();
await searchPage.searchOverlay.searchFor(adminLibrary4);
@ -415,7 +415,7 @@ test.describe('Library actions ', () => {
const libraryMenu = searchPage.matMenu;
await searchHeader.searchButton.click();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await searchPage.searchOverlay.searchLibrariesOption.click();
await searchPage.searchOverlay.searchFor(user2Library4);

2
e2e/playwright/list-views/src/tests/empty-list.e2e.ts
View File

@ -57,7 +57,7 @@ test.describe('Empty list views', () => {
test('[C290123] [C290031] Empty Search results - pagination controls not displayed', async ({ personalFiles, searchPage }) => {
await personalFiles.acaHeader.searchButton.click();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await searchPage.searchOverlay.checkFilesAndFolders();
await searchPage.searchOverlay.searchFor('InvalidText');
await searchPage.reload({ waitUntil: 'domcontentloaded' });

4
e2e/playwright/list-views/src/tests/permissions.e2e.ts
View File

@ -112,7 +112,7 @@ test.describe('Special permissions', () => {
test('[C290122] on Search Results', async ({ personalFiles, searchPage }) => {
await personalFiles.acaHeader.searchButton.click();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await searchPage.searchOverlay.checkFilesAndFolders();
await searchPage.searchOverlay.searchFor(fileName);
await searchPage.dataTable.spinnerWaitForReload();
@ -185,7 +185,7 @@ test.describe('Special permissions', () => {
test('[C306868] on Search results', async ({ personalFiles, searchPage }) => {
await personalFiles.acaHeader.searchButton.click();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await searchPage.searchOverlay.checkFilesAndFolders();
await searchPage.searchOverlay.searchFor(fileName);
await searchPage.dataTable.spinnerWaitForReload();

2
e2e/playwright/navigation/src/tests/sidebar.e2e.ts
View File

@ -76,7 +76,7 @@ test.describe('Sidebar', () => {
test('[C277224] sidenav returns to the default state when navigating away from the Search Results page', async ({ personalFiles, searchPage }) => {
await personalFiles.navigate({ remoteUrl: `#/search;q=test` });
await searchPage.searchInput.getIconByName('close').click();
await searchPage.searchInput.searchCloseButton.click();
await searchPage.sidenav.expandedSidenav.waitFor({ state: 'attached' });
expect(await personalFiles.sidenav.isSidenavExpanded(), 'Sidebar not expanded').toBe(true);
});

6
e2e/playwright/search/src/tests/search-input.e2e.ts
View File

@ -44,14 +44,14 @@ test.describe('Search - Input', () => {
test('[C289847] Search icon is displayed in toolbar and clicking on it displays search input container', async ({ searchPage }) => {
await searchPage.acaHeader.searchButton.click();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await expect(searchPage.searchOverlay.searchInputControl).toBeVisible();
});
test('[C289848] Search options are displayed when clicking in the search input', async ({ searchPage }) => {
await searchPage.acaHeader.searchButton.click();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await expect(searchPage.searchOverlay.searchOptions).toBeVisible();
await expect(searchPage.searchOverlay.searchFilesOption).toBeEnabled();
@ -64,7 +64,7 @@ test.describe('Search - Input', () => {
test('[C289849] Search options are correctly enabled / disabled', async ({ searchPage }) => {
await searchPage.acaHeader.searchButton.click();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await searchPage.searchOverlay.searchFilesOption.click();
await expect(searchPage.searchOverlay.searchFoldersOption).toBeEnabled();

2
e2e/playwright/search/src/tests/search-results-general.e2e.ts
View File

@ -98,7 +98,7 @@ test.describe('Search Results - General', () => {
expect(await searchPage.dataTable.isItemPresent(file)).toBeTruthy();
expect(await searchPage.dataTable.isItemPresent(folder)).toBeFalsy();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await searchPage.searchOverlay.searchFor(folder);
await searchPage.dataTable.progressBarWaitForReload();

12
e2e/playwright/share-action/src/tests/share/unshare-file-search-results.e2e.ts
View File

@ -112,7 +112,7 @@ test.describe('Unshare a file from Search Results', () => {
test('[C306995] Unshare dialog UI', async ({ personalFiles, searchPage }) => {
await personalFiles.acaHeader.searchButton.click();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await searchPage.searchOverlay.checkFilesAndFolders();
await searchPage.searchOverlay.searchFor(file1);
@ -133,7 +133,7 @@ test.describe('Unshare a file from Search Results', () => {
test('[C306996] Unshare a file', async ({ personalFiles, searchPage, nodesApiAction, page }) => {
await personalFiles.acaHeader.searchButton.click();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await searchPage.searchOverlay.checkFilesAndFolders();
await searchPage.searchOverlay.searchFor(file2);
@ -152,7 +152,7 @@ test.describe('Unshare a file from Search Results', () => {
test('[C306997] Cancel the Unshare action', async ({ personalFiles, searchPage }) => {
await personalFiles.acaHeader.searchButton.click();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await searchPage.searchOverlay.checkFilesAndFolders();
await searchPage.searchOverlay.searchFor(file3);
@ -170,7 +170,7 @@ test.describe('Unshare a file from Search Results', () => {
test('[C306999] Unshare a file from the context menu', async ({ personalFiles, searchPage, nodesApiAction, page }) => {
await personalFiles.acaHeader.searchButton.click();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await searchPage.searchOverlay.checkFilesAndFolders();
await searchPage.searchOverlay.searchFor(file4);
@ -189,7 +189,7 @@ test.describe('Unshare a file from Search Results', () => {
test('[C306998] Consumer - on Search Results - file shared by other user', async ({ personalFiles, searchPage, nodesApiAction }) => {
await personalFiles.acaHeader.searchButton.click();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await searchPage.searchOverlay.checkFilesAndFolders();
await searchPage.searchOverlay.searchFor(fileSite1);
@ -204,7 +204,7 @@ test.describe('Unshare a file from Search Results', () => {
test('[C307000] Consumer - on Search Results - file shared by the user', async ({ personalFiles, searchPage, nodesApiAction, page }) => {
await personalFiles.acaHeader.searchButton.click();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await searchPage.searchOverlay.checkFilesAndFolders();
await searchPage.searchOverlay.searchFor(fileSite2);

2
e2e/playwright/upload-download-actions/src/tests/version-actions.e2e.ts
View File

@ -186,7 +186,7 @@ test.describe('Version actions', () => {
test.beforeEach(async ({ loginPage, searchPage }) => {
await Utils.tryLoginUser(loginPage, username, username, 'beforeEach failed');
await searchPage.navigate();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await searchPage.searchOverlay.searchFor(filenameAfterUpdate);
await viewFirstFileVersion(searchPage);
});

2
e2e/playwright/viewer/src/tests/viewer.e2e.ts
View File

@ -141,7 +141,7 @@ test.describe('viewer file', () => {
test('[C279175] Viewer opens for a file from Search Results', async ({ personalFiles, searchPage }) => {
await personalFiles.acaHeader.searchButton.click();
await searchPage.searchInput.searchButton.click();
await searchPage.clickSearchButton();
await searchPage.searchOverlay.checkFilesAndFolders();
await searchPage.searchOverlay.searchFor(randomDocxName);
await searchPage.reload({ waitUntil: 'domcontentloaded' });

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

2
projects/aca-playwright-shared/src/page-objects/components/aca-header.component.ts
View File

@ -33,7 +33,7 @@ export class AcaHeader extends BaseComponent {
public createButton = this.getChild('[id="app.toolbar.create"]');
public viewDetails = this.getChild('[title="View Details"]');
public viewButton = this.getChild('button[title="View"]');
public searchButton = this.getChild('button[title="Search"]');
public searchButton = this.getChild('button[id="app.toolbar.search"]');
public fullScreenButton = this.getChild('button[id="app.viewer.fullscreen"]');
public shareButton = this.getChild('button[id="share-action-button"]');
public downloadButtonViewer = this.getChild('button[id="app.viewer.download"]');

5
projects/aca-playwright-shared/src/page-objects/components/search/search-input.component.ts
View File

@ -29,9 +29,8 @@ import { timeouts } from '../../../utils';
export class SearchInputComponent extends BaseComponent {
private static rootElement = 'aca-page-layout';
public searchInput = this.page.locator('#app-control-input');
public searchButton = this.page.locator('.app-search-button');
getIconByName = (name: string): Locator => this.getChild('.mat-icon', { hasText: name });
public searchButton = this.page.locator('.aca-search-input--search-button');
public searchCloseButton = this.page.locator('.aca-search-input--close-button');
/**
* Method used in cases where user have possibility to navigate "inside" the element (it's clickable and has link attribute).

6
projects/aca-playwright-shared/src/page-objects/components/search/search-overlay.components.ts
View File

@ -32,9 +32,9 @@ export class SearchOverlayComponent extends BaseComponent {
public searchFoldersOption = this.getChild('input#folder-input');
public searchLibrariesOption = this.getChild('input#libraries-input');
public searchInput = this.page.locator('#app-control-input');
public searchButton = this.page.locator('#app-search-button');
public searchButton = this.page.locator('.aca-search-input--search-button');
public searchInputControl = this.page.locator('.app-search-control');
public searchOptions = this.page.locator('#search-options');
public searchOptions = this.page.locator('.app-search-options');
constructor(page: Page, rootElement = SearchOverlayComponent.rootElement) {
super(page, rootElement);
@ -90,6 +90,6 @@ export class SearchOverlayComponent extends BaseComponent {
async searchFor(input: string): Promise<void> {
await this.searchInput.fill(input);
await this.searchButton.click();
await this.searchButton.click({ force: true });
}
}

6
projects/aca-playwright-shared/src/page-objects/pages/search.page.ts
View File

@ -74,7 +74,7 @@ export class SearchPage extends BasePage {
async searchWithin(searchText: string, searchType: SearchType): Promise<void> {
await this.acaHeader.searchButton.click();
await this.searchInput.searchButton.click();
await this.clickSearchButton();
switch (searchType) {
case 'files':
await this.searchOverlay.checkOnlyFiles();
@ -94,4 +94,8 @@ export class SearchPage extends BasePage {
await this.searchOverlay.searchFor(searchText);
await this.dataTable.progressBarWaitForReload();
}
async clickSearchButton() {
await this.searchInput.searchButton.click({ force: true });
}
}