mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-05-12 17:04:46 +00:00
[ACS-6693] Migration to NG15 (#3959)
* [ACS-6693] Angular 15 migration initial point * [ACS-6693] Angular 15 - update ADF dependencies from the ng15-start branch (#3712) * [ACS-6693] Angular 15 - adding mat core (#3715) * Stylelint fix * Migration - added stylePrepocessor for material selectors * Skip unit tests from branch release until errors are fixed * [ACS-7285] - [ACA] Angular 15 - Left sidebar + table (#3719) * [ACS-7286] Fix topbar user info issues (#3720) * [ACS-6693] Bump peerDependencies in ACA libs * [ACS-7330] edit rules dialog fixes (#3723) * [ACS-6693] Fix peer dependencies in ACA packages * [ACS-7328] Fix searchbar display (#3729) * [ACS-7631] Fix broken filters (#3735) * [ACS-7331] - Angular 15 - Edit aspects modal [ACA] * [ACS-7449] Fix broken filter labels styling (#3745) * [ACS-7351] ng15 Manage rules fixes (#3751) * [ACS-7351] ng15 manage rules fixes * [ACS-7351] cr fix * [ACS-7351] cr fix * [ACS-7370] - [ACA] Leave library dialog misses some padding (#3749) * [ACS-6693] Bump ADF version * [ACS-7372] - user profile page issues (#3757) * [ACS-7372] - [ACA] User profile page issues * [ACS-7415] - Move file dialog (#3755) * [ACS-7452] - Small screen notification banner [ACS-7418] About page (#3760) * [ACS-7452] - Small screen notification banner * [ACS-7452] - Small screen notification banner [ACS-7418] About page * [ACS-7511] Subfont for dialogs, make darker (#3765) * [ACS-7448] Fix wrong notifications colors (#3761) * [ACS-7448] Fix notifications colors, move them from adf to aca (#3771) * [ACS-7375] - Share link dialog issues (#3774) * [ACS-7517] - Notifications box (#3775) * [ACS-7373] ng15 permission tab fixes (#3762) * [ACS-7368] Fix unit tests for aca-content (#3779) * [ACS-7410] - Locked files overflow issues (#3780) * [ACS-7528] - Notification and user icons are a bit different (#3782) * [ACS-7529] - Columns visibility dropdown has broken styles (#3783) * [ACS-7537] - Share dialog (#3789) * Use latest ADF alpha * Post rebase unit test fix * Disable stylelint * Calendar button fix * [ACS-7369] ng15 migration - fix e2es (#3796) * [ACS-7369] e2e fixes * [ACS-7369] cr fix * [ACS-7331] - Angular 15 - View details sidebar (#3731) * [ACS-7542] - Upload new version dialog (#3800) * [ACS-7575] create library dialog e2e fix (#3803) * [ACS-7534] folder dialog e2e fixes (#3804) * [ACS-7574] Rules dialog edit (#3801) * [ACS-7571] Comments (#3810) * [ACS-7555] Added blue outline to focused checkboxes (#3813) * [ACS-7582] File upload dialog, fix button weight label globally (#3814) * [ACS-7531] - Search page (#3816) * [ACS-7559] Conext menus icons (#3818) * [ACS-6693] Bump ADF * Temporary lint disable * [ACS-7572] link rules dialog (#3817) * [ACS-7533] - Advanced search chips dropdowns (#3821) * [ACS-7560] Corrected background color for info snackbar (#3824) * [ACS-7558] - Toolbar and buttons (#3833) * [ACS-7573] folder rules fixes (#3836) * [ACS-7573] folder rules fixes * [ACS-7573] cr fix * [ACS-7561] - Permissions page (#3840) * [ACS-7768] unify inputs and selects across the app (#3845) * ACS-7768 Style inputs in create from template dialog * ACS-7768 Used globally configured outline appearance for inputs * ACS-7768 Style inputs for profile page * ACS-7768 Style inputs for library metadata form * ACS-7768 Style inputs for folder rules dialog * ACS-7768 Style inputs for manage rules page * ACS-7768 Set outline appearance for input, fix small issue * ACS-7768 Addressed comment * Revert "[ACS-7768] unify inputs and selects across the app (#3845)" (#3850) This reverts commit 6a5ef7328381b06162e4b06687a250e56c185934. * [ACS-8043] fix js api dependencies (#3855) * [ACS-8020] Fixed inputs for create from template dialog (#3857) * [ACS-8027] Inputs for create rules (#3860) * [ACS-8052] inputs for general info for libraries (#3863) * [ACS-8052] Inputs for general info for libraries * Fix after CR * [ACS-8059] Inputs for view rules (#3865) * [ACS-8026] Fixed Task form rendering (#3864) * Updating to the latest package of 6.10 from ADF * Updating to the latest ADF/JS-API - updating dependency rule * Regenerated package lock * [ACS-8082] fix search e2e (#3876) * Using latest ADF with BC of ConfirmDialogComponent * [ACS-8099] [ACA] Testing Angular 15 - Accessibility for search text area (#3883) * [ACS-8100] [ACA] Testing Angular 15 - Accessibility for search facet and filter (#3887) * [ACS-8158] Resolved issue where long tag names were not getting word wrapped in ACA. Fixed alignment issue with tag chip cross button (#3890) * [ACS-8101] [ACA] Testing Angular 15 - Manage rule popup visual changes (#3891) * [ACS-8191] Updated codebase to use variables from mat-selectors.scss file (#3889) * [ACS-8191] Updated ACA codebase to use selectors from mat-selectors.scss file instead of hardcoded selectors * [ACS-8191] Resolved configuration issue where running unit test on aca-shared failed due to not finding adf-core styles * Update ADF dependencies (#3897) * Upgrading ADF packages * Use latest ADF * Updated packages version * Updated packages version * Updated packages version * Updated packages version * Updated packages version * Updated packages version * Updated packages version * [ACS-8253] viewer file name change position on navigation (#3914) * Updated ADF version * Use latest ADF * Package lock fix * Build fix * Restore release branch build and unit tests * E2Es fix * Fix SonarCloud issues * Stylelint fix * Stylelint fix * [ACS-8442] Remove additional checkbox label * First batch of E2E fixes * Bump ADF * Second round of E2E locators fixes * Locator fix * [ACS-8443] Fix incorrect focus style for checkboxes * E2Es locators fixes * E2E locator fixes * [ACS-6693] locator fix upload new version title * E2E locator fix * E2E locator fix * [ACS-6693] locator fix upload new version file --------- Co-authored-by: jacekpluta <73617938+jacekpluta@users.noreply.github.com> Co-authored-by: Vito Albano <vito.albano@hyland.com> Co-authored-by: tomson <nastalytomasz@gmail.com> Co-authored-by: Mykyta Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com> Co-authored-by: Jacek Pluta <jacek.pluta@hyland.com> Co-authored-by: dominikiwanekhyland <141320833+dominikiwanekhyland@users.noreply.github.com> Co-authored-by: tomson <tomasz.nastaly@hyland.com> Co-authored-by: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com> Co-authored-by: swapnil-verma-gl <92505353+swapnil-verma-gl@users.noreply.github.com> Co-authored-by: VitoAlbano <vito.albano.123@gmail.com> Co-authored-by: Akash Rathod <41251473+akashrathod28@users.noreply.github.com> Co-authored-by: Ehsan Rezaei <ehsan.rezaei@hyland.com> Co-authored-by: akash.rathod@hyland.com <akash.rathod@hyland.com>
This commit is contained in:
MichalKinas
GitHub
parent
847fcf4c36
commit
02b6757ea3
@ -14,7 +14,7 @@
|
||||
"polyfills": "app/src/polyfills.ts",
|
||||
"allowedCommonJsDependencies": ["minimatch", "cropperjs"],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": ["projects/aca-content/src/lib/ui", "node_modules"]
|
||||
"includePaths": ["projects/aca-content/src/lib/ui", "node_modules", "node_modules/@alfresco/adf-core/lib"]
|
||||
},
|
||||
"assets": [
|
||||
{
|
||||
|
||||
@ -85,8 +85,7 @@ registerLocaleData(localeSv);
|
||||
!environment.production ? StoreDevtoolsModule.instrument({ maxAge: 25 }) : [],
|
||||
RouterModule.forRoot(APP_ROUTES, {
|
||||
useHash: true,
|
||||
enableTracing: false, // enable for debug only
|
||||
relativeLinkResolution: 'legacy'
|
||||
enableTracing: false // enable for debug only
|
||||
}),
|
||||
AppExtensionsModule,
|
||||
ShellModule.withRoutes({
|
||||
|
||||
@ -29,21 +29,5 @@ import 'zone.js/testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: {
|
||||
context(
|
||||
path: string,
|
||||
deep?: boolean,
|
||||
filter?: RegExp
|
||||
): {
|
||||
<T>(id: string): T;
|
||||
keys(): string[];
|
||||
};
|
||||
};
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
|
||||
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().forEach(context);
|
||||
|
||||
@ -79,7 +79,7 @@ test.describe('Create folders', () => {
|
||||
|
||||
test('[C216345] Create new folder dialog check', async () => {
|
||||
await expect(folderDialog.getLabelText('Name')).toBeVisible();
|
||||
await expect(folderDialog.getLabelText('*')).toBeVisible();
|
||||
await expect(folderDialog.getRequiredMarker('Name')).toBeVisible();
|
||||
await expect(folderDialog.folderNameInputLocator).toBeVisible();
|
||||
await expect(folderDialog.getLabelText('Title')).toBeVisible();
|
||||
await expect(folderDialog.folderTitleInput).toBeVisible();
|
||||
|
||||
@ -49,8 +49,8 @@ test.describe('Create Libraries ', () => {
|
||||
let randomLibraryId: string;
|
||||
let randomLibraryDescription: string;
|
||||
const libraryDialogTitle = 'Create Library';
|
||||
const libraryNameLabel = 'Name *';
|
||||
const libraryIdLabel = 'Library ID *';
|
||||
const libraryNameLabel = 'Name';
|
||||
const libraryIdLabel = 'Library ID';
|
||||
const libraryDescriptionLabel = 'Description';
|
||||
const publicVisibility = 'Public';
|
||||
const moderatedVisibility = 'Moderated';
|
||||
@ -96,7 +96,9 @@ test.describe('Create Libraries ', () => {
|
||||
test('[C280024] Create Library dialog UI', async () => {
|
||||
await expect(libraryDialog.getDialogTitle(libraryDialogTitle)).toBeVisible();
|
||||
await expect(libraryDialog.getLabelText(libraryNameLabel)).toBeVisible();
|
||||
await expect(libraryDialog.getRequiredMarker(libraryNameLabel)).toBeVisible();
|
||||
await expect(libraryDialog.getLabelText(libraryIdLabel)).toBeVisible();
|
||||
await expect(libraryDialog.getRequiredMarker(libraryIdLabel)).toBeVisible();
|
||||
await expect(libraryDialog.getLabelText(libraryDescriptionLabel)).toBeVisible();
|
||||
await expect(libraryDialog.getLabelText(publicVisibility)).toBeVisible();
|
||||
await expect(libraryDialog.getLabelText(publicVisibility)).toBeChecked();
|
||||
@ -157,10 +159,11 @@ test.describe('Create Libraries ', () => {
|
||||
await expect(libraryTable.getCellLinkByName(randomLibraryName).and(myLibrariesPage.page.getByTitle(randomLibraryDescription))).toBeVisible();
|
||||
await libraryTable.getRowByName(randomLibraryName).click();
|
||||
await libraryViewDetails.click();
|
||||
await expect(libraryDetails.getNameField('Name').locator('input')).toHaveValue(randomLibraryName);
|
||||
await expect(libraryDetails.getIdField('Library ID').locator('input')).toHaveValue(randomLibraryId);
|
||||
await expect(libraryDetails.getVisibilityField('Visibility').getByText(publicVisibility)).toBeVisible();
|
||||
await expect(libraryDetails.getDescriptionField).toHaveValue(randomLibraryDescription);
|
||||
expect(await libraryDetails.getNameField('Name').inputValue()).toBe(randomLibraryName);
|
||||
expect(await libraryDetails.getIdField('Library ID').inputValue()).toBe(randomLibraryId);
|
||||
// eslint-disable-next-line @alfresco/eslint-angular/no-angular-material-selectors
|
||||
await expect(libraryDetails.getVisibilityField('Visibility').locator('.mat-mdc-select-min-line').getByText(publicVisibility)).toBeVisible();
|
||||
expect(await libraryDetails.getDescriptionField.inputValue()).toBe(randomLibraryDescription);
|
||||
|
||||
createdLibrariesIds.push(randomLibraryId);
|
||||
});
|
||||
|
||||
@ -63,15 +63,15 @@ test.describe('Search - Filters - Date', () => {
|
||||
await searchPage.searchFilters.dateFilter.click();
|
||||
await searchPage.searchFiltersDate.betweenButton.click();
|
||||
await expect(searchPage.searchFiltersDate.betweenRadioButton).toBeChecked();
|
||||
await expect(searchPage.searchFiltersDate.modifiedTabTitle).toHaveCSS('color', 'rgba(0, 0, 0, 0.54)');
|
||||
expect(await searchPage.searchFiltersDate.isModifiedTabSelected()).toBe('false');
|
||||
await searchPage.searchFiltersDate.openCreatedModifiedTab(searchPage, 'Modified');
|
||||
|
||||
await expect(searchPage.searchFiltersDate.anytimeRadioButton).toBeChecked();
|
||||
await expect(searchPage.searchFiltersDate.modifiedTabTitle).toHaveCSS('color', 'rgb(33, 33, 33)');
|
||||
expect(await searchPage.searchFiltersDate.isModifiedTabSelected()).toBe('true');
|
||||
await searchPage.searchFiltersDate.openCreatedModifiedTab(searchPage, 'Created');
|
||||
|
||||
await expect(searchPage.searchFiltersDate.betweenRadioButton).toBeChecked();
|
||||
await expect(searchPage.searchFiltersDate.createdTabTitle).toHaveCSS('color', 'rgb(33, 33, 33)');
|
||||
expect(await searchPage.searchFiltersDate.isSearchTabSelected()).toBe('true');
|
||||
});
|
||||
|
||||
test('[C699048-2] Filter by date - Created anytime', async ({ searchPage }) => {
|
||||
|
||||
@ -124,7 +124,7 @@ test.describe('Upload new version', () => {
|
||||
|
||||
test('[C307006] file is not updated when clicking Cancel', async ({ searchPage }) => {
|
||||
await searchPage.searchWithin(fileSearch3, 'files');
|
||||
await uploadNewVersion(searchPage, fileSearch3, fileSearch3);
|
||||
await uploadNewVersion(searchPage, fileSearch3, TEST_FILES.DOCX2.path);
|
||||
|
||||
await searchPage.uploadNewVersionDialog.description.fill('new version description');
|
||||
await searchPage.uploadNewVersionDialog.cancelButton.click();
|
||||
|
||||
18969
package-lock.json
generated
18969
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
73
package.json
73
package.json
@ -34,28 +34,28 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@alfresco/adf-content-services": "6.10.0-9869321642",
|
||||
"@alfresco/adf-core": "6.10.0-9869321642",
|
||||
"@alfresco/adf-extensions": "6.10.0-9869321642",
|
||||
"@alfresco/eslint-plugin-eslint-angular": "6.10.0-9869321642",
|
||||
"@alfresco/js-api": "7.9.0-9869321642",
|
||||
"@angular/animations": "14.1.3",
|
||||
"@angular/cdk": "14.1.3",
|
||||
"@angular/common": "14.1.3",
|
||||
"@angular/compiler": "14.1.3",
|
||||
"@angular/core": "14.1.3",
|
||||
"@angular/forms": "14.1.3",
|
||||
"@angular/material": "14.1.3",
|
||||
"@angular/material-date-fns-adapter": "14.1.3",
|
||||
"@angular/platform-browser": "14.1.3",
|
||||
"@angular/platform-browser-dynamic": "14.1.3",
|
||||
"@angular/router": "14.1.3",
|
||||
"@fontsource/open-sans": "^5.0.28",
|
||||
"@mat-datetimepicker/core": "^10.1.1",
|
||||
"@ngrx/effects": "^14.2.0",
|
||||
"@ngrx/router-store": "^14.2.0",
|
||||
"@ngrx/store": "^14.2.0",
|
||||
"@ngrx/store-devtools": "^14.2.0",
|
||||
"@alfresco/adf-content-services": "6.10.0-10006186111",
|
||||
"@alfresco/adf-core": "6.10.0-10006186111",
|
||||
"@alfresco/adf-extensions": "6.10.0-10006186111",
|
||||
"@alfresco/eslint-plugin-eslint-angular": "6.10.0-10006186111",
|
||||
"@alfresco/js-api": "7.9.0-10006186111",
|
||||
"@angular/animations": "15.2.10",
|
||||
"@angular/cdk": "15.2.9",
|
||||
"@angular/common": "15.2.10",
|
||||
"@angular/compiler": "15.2.10",
|
||||
"@angular/core": "15.2.10",
|
||||
"@angular/forms": "15.2.10",
|
||||
"@angular/material": "15.2.9",
|
||||
"@angular/material-date-fns-adapter": "15.2.9",
|
||||
"@angular/platform-browser": "15.2.10",
|
||||
"@angular/platform-browser-dynamic": "15.2.10",
|
||||
"@angular/router": "15.2.10",
|
||||
"@fontsource/open-sans": "^5.0.27",
|
||||
"@mat-datetimepicker/core": "11.0.3",
|
||||
"@ngrx/effects": "^15.2.0",
|
||||
"@ngrx/router-store": "^15.2.0",
|
||||
"@ngrx/store": "^15.2.0",
|
||||
"@ngrx/store-devtools": "^15.2.0",
|
||||
"@ngx-translate/core": "^14.0.0",
|
||||
"date-fns": "^2.30.0",
|
||||
"material-icons": "^1.13.12",
|
||||
@ -66,29 +66,29 @@
|
||||
"zone.js": "0.11.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@alfresco/adf-cli": "6.10.0-9869321642",
|
||||
"@angular-devkit/build-angular": "14.2.11",
|
||||
"@angular-devkit/core": "14.1.2",
|
||||
"@angular-devkit/schematics": "14.1.2",
|
||||
"@angular-eslint/builder": "^14.1.2",
|
||||
"@alfresco/adf-cli": "6.10.0-10006186111",
|
||||
"@angular-devkit/build-angular": "15.2.10",
|
||||
"@angular-devkit/core": "15.2.10",
|
||||
"@angular-devkit/schematics": "15.2.10",
|
||||
"@angular-eslint/builder": "^15.2.1",
|
||||
"@angular-eslint/eslint-plugin": "^16.1.2",
|
||||
"@angular-eslint/eslint-plugin-template": "^16.0.2",
|
||||
"@angular-eslint/schematics": "14.4.0",
|
||||
"@angular-eslint/schematics": "15.2.1",
|
||||
"@angular-eslint/template-parser": "^15.2.1",
|
||||
"@angular/cli": "14.1.3",
|
||||
"@angular/compiler-cli": "14.1.3",
|
||||
"@angular/language-service": "14.1.3",
|
||||
"@cspell/eslint-plugin": "^8.8.4",
|
||||
"@angular/cli": "15.2.10",
|
||||
"@angular/compiler-cli": "15.2.10",
|
||||
"@angular/language-service": "15.2.10",
|
||||
"@cspell/eslint-plugin": "^8.3.2",
|
||||
"@nx/angular": "17.0.2",
|
||||
"@nx/eslint-plugin": "17.0.2",
|
||||
"@nx/workspace": "17.0.2",
|
||||
"@playwright/test": "^1.42.1",
|
||||
"@reportportal/agent-js-playwright": "^5.1.9",
|
||||
"@schematics/angular": "14.1.2",
|
||||
"@schematics/angular": "15.2.10",
|
||||
"@types/event-emitter": "^0.3.3",
|
||||
"@types/jasmine": "~3.6.0",
|
||||
"@types/jasminewd2": "^2.0.8",
|
||||
"@types/node": "^14.14.12",
|
||||
"@types/node": "^15.14.9",
|
||||
"@types/selenium-webdriver": "^4.0.9",
|
||||
"@types/superagent": "^4.1.10",
|
||||
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
||||
@ -111,12 +111,11 @@
|
||||
"karma": "^6.4.3",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "^2.2.0",
|
||||
"karma-coverage-istanbul-reporter": "^3.0.3",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "^2.0.0",
|
||||
"karma-mocha-reporter": "^2.2.5",
|
||||
"lint-staged": "^15.2.7",
|
||||
"ng-packagr": "^14.2.2",
|
||||
"ng-packagr": "^15.2.1",
|
||||
"node-stream-zip": "^1.14.0",
|
||||
"nx": "17.3.1",
|
||||
"prettier": "2.8.8",
|
||||
@ -129,7 +128,7 @@
|
||||
"stylelint-config-standard-scss": "^7.0.1",
|
||||
"ts-node": "^10.9.2",
|
||||
"tsconfig-paths": "4.2.0",
|
||||
"typescript": "4.7.4",
|
||||
"typescript": "4.9.5",
|
||||
"webdriver-manager": "12.1.8"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,14 @@
|
||||
@import '@alfresco/adf-core/lib/styles/mat-selectors';
|
||||
|
||||
.aca-manage-rules {
|
||||
#{$mat-slide-toggle}:is(mat-slide-toggle) #{$mat-switch}:enabled #{$mat-switch-track}::after {
|
||||
background: var(--mdc-switch-selected-track-color);
|
||||
}
|
||||
|
||||
#{$mat-slide-toggle} #{$mat-switch} #{$mat-switch-handle}::before {
|
||||
background: var(--mdc-switch-selected-pressed-handle-color);
|
||||
}
|
||||
|
||||
&__actions-bar {
|
||||
padding: 0 30px;
|
||||
display: flex;
|
||||
@ -75,7 +85,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
.aca-manage-rules__container__rule-details__header__buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
@ -86,7 +96,16 @@
|
||||
|
||||
&#delete-rule-btn {
|
||||
padding: 0 8px;
|
||||
margin: 0;
|
||||
min-width: unset;
|
||||
|
||||
mat-icon {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,8 +32,7 @@ import { NodeInfo } from '@alfresco/aca-shared/store';
|
||||
import { delay, takeUntil } from 'rxjs/operators';
|
||||
import { EditRuleDialogUiComponent } from '../rule-details/edit-rule-dialog.ui-component';
|
||||
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
|
||||
import { ConfirmDialogComponent } from '@alfresco/adf-content-services';
|
||||
import { NotificationService, TemplateModule, ToolbarModule } from '@alfresco/adf-core';
|
||||
import { NotificationService, TemplateModule, ToolbarModule, ConfirmDialogComponent } from '@alfresco/adf-core';
|
||||
import { ActionDefinitionTransformed } from '../model/rule-action.model';
|
||||
import { ActionsService } from '../services/actions.service';
|
||||
import { FolderRuleSetsService } from '../services/folder-rule-sets.service';
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
</mat-menu>
|
||||
</div>
|
||||
|
||||
<button mat-button data-automation-id="rule-action-list-add-action-button" (click)="addAction()" *ngIf="!readOnly">
|
||||
<mat-icon>add</mat-icon>
|
||||
<button mat-flat-button class="aca-rule-action-list-add-action-button" data-automation-id="rule-action-list-add-action-button" (click)="addAction()" *ngIf="!readOnly">
|
||||
<mat-icon class="aca-rule-action-list-add-action-button-icon">add</mat-icon>
|
||||
<span>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ACTION_BUTTONS.ADD_ACTION' | translate }}</span>
|
||||
</button>
|
||||
|
||||
@ -1,6 +1,26 @@
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
.aca-rule-action-list {
|
||||
.aca-rule-action-list__item .aca-rule-action .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aca-rule-action-list-add-action-button {
|
||||
margin: 4px 0 20px;
|
||||
|
||||
.aca-rule-action-list-add-action-button-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 24px;
|
||||
margin-right: 0;
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
|
||||
@ -10,6 +30,10 @@
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: hsl(0deg, 0%, 95%);
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<form class="aca-rule-action__form" [formGroup]="form">
|
||||
|
||||
<mat-form-field class="aca-rule-action-full-width" appearance="standard">
|
||||
<mat-form-field class="aca-rule-action-full-width" appearance="fill" subscriptSizing="dynamic">
|
||||
<mat-select
|
||||
formControlName="actionDefinitionId"
|
||||
data-automation-id="rule-action-select"
|
||||
|
||||
@ -4,13 +4,26 @@
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
|
||||
adf-card-view .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
adf-card-view {
|
||||
margin-top: -15px;
|
||||
|
||||
.adf-property-list {
|
||||
background: var(--adf-card-view-background);
|
||||
}
|
||||
|
||||
.adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
|
||||
.adf-textitem-clickable {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-full-width {
|
||||
height: fit-content;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -192,8 +192,13 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
const readOnly = changes['readOnly']?.currentValue;
|
||||
if (readOnly !== undefined && readOnly !== null) {
|
||||
this.readOnly = readOnly;
|
||||
this.setDisabledState(readOnly);
|
||||
if (readOnly) {
|
||||
this.readOnly = true;
|
||||
this.form.disable();
|
||||
} else {
|
||||
this.readOnly = false;
|
||||
this.form.enable();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -360,16 +365,6 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
|
||||
});
|
||||
}
|
||||
|
||||
setDisabledState(isDisabled: boolean) {
|
||||
if (isDisabled) {
|
||||
this.readOnly = true;
|
||||
this.form.disable();
|
||||
} else {
|
||||
this.readOnly = false;
|
||||
this.form.enable();
|
||||
}
|
||||
}
|
||||
|
||||
private parseConstraintsToSelectOptions(constraints: ConstraintValue[]): CardViewSelectItemOption<unknown>[] {
|
||||
return constraints
|
||||
.sort((a, b) => {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
class="aca-rule-composite-condition__form__row"
|
||||
*ngFor="let control of conditionFormControls; let i = index">
|
||||
|
||||
<mat-form-field *ngIf="i === 0">
|
||||
<mat-form-field *ngIf="i === 0" subscriptSizing="dynamic">
|
||||
<mat-select
|
||||
[formControl]="invertedControl"
|
||||
[disabled]="readOnly">
|
||||
@ -16,9 +16,8 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="i > 0">
|
||||
<mat-form-field *ngIf="i > 0" subscriptSizing="dynamic">
|
||||
<mat-select
|
||||
[disabled]="!isOrImplemented || i > 1 || readOnly"
|
||||
[formControl]="booleanModeControl">
|
||||
<mat-option value="and">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LOGIC_OPERATORS.AND' | translate }}</mat-option>
|
||||
<mat-option value="or">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LOGIC_OPERATORS.OR' | translate }}</mat-option>
|
||||
@ -56,12 +55,12 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-rule-composite-condition__form__actions" *ngIf="!readOnly" data-automation-id="add-actions">
|
||||
<button mat-button (click)="addSimpleCondition()" data-automation-id="add-condition-button">
|
||||
<mat-icon>add</mat-icon>
|
||||
<button mat-flat-button (click)="addSimpleCondition()" data-automation-id="add-condition-button">
|
||||
<mat-icon class="aca-rule-composite-condition__form__actions-add">add</mat-icon>
|
||||
<span>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.CONDITION_BUTTONS.ADD_CONDITION' | translate }}</span>
|
||||
</button>
|
||||
<button mat-button (click)="addCompositeCondition()" data-automation-id="add-group-button">
|
||||
<mat-icon>add</mat-icon>
|
||||
<button mat-flat-button (click)="addCompositeCondition()" data-automation-id="add-group-button">
|
||||
<mat-icon class="aca-rule-composite-condition__form__actions-add">add</mat-icon>
|
||||
<span>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.CONDITION_BUTTONS.ADD_GROUP' | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import '@alfresco/adf-core/lib/styles/mat-selectors';
|
||||
|
||||
.aca-rule-composite-condition {
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
@ -16,17 +18,19 @@
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
&__no-conditions {
|
||||
color: var(--theme-disabled-text-color);
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
&__row {
|
||||
.aca-rule-composite-condition__form__row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
#{$mat-form-field} {
|
||||
#{$mat-form-field-infix} {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
& > :nth-child(1) {
|
||||
width: 5em;
|
||||
width: 7em;
|
||||
height: fit-content;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
@ -34,5 +38,25 @@
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__no-conditions {
|
||||
color: var(--theme-disabled-text-color);
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
padding-left: 8px;
|
||||
|
||||
button:not(:disabled) {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.aca-rule-composite-condition__form__actions-add {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 24px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,7 +76,7 @@ describe('RuleCompositeConditionUiComponent', () => {
|
||||
|
||||
describe('Read only mode', () => {
|
||||
it('should hide the add buttons in read only mode', () => {
|
||||
fixture.componentInstance.setDisabledState(true);
|
||||
fixture.componentInstance.readOnly = true;
|
||||
fixture.detectChanges();
|
||||
const actionsElement = fixture.debugElement.query(By.css(`[data-automation-id="add-actions"]`));
|
||||
|
||||
@ -85,7 +85,7 @@ describe('RuleCompositeConditionUiComponent', () => {
|
||||
|
||||
it('should hide the more actions button on the right side of the condition', () => {
|
||||
fixture.componentInstance.writeValue(compositeConditionWithOneGroupMock);
|
||||
fixture.componentInstance.setDisabledState(true);
|
||||
fixture.componentInstance.readOnly = true;
|
||||
fixture.detectChanges();
|
||||
const actionsButtonElements = fixture.debugElement.queryAll(By.css(`[data-automation-id="condition-actions-button"]`));
|
||||
|
||||
|
||||
@ -68,18 +68,17 @@ export class RuleCompositeConditionUiComponent implements ControlValueAccessor,
|
||||
@HostBinding('class.aca-childCompositeCondition')
|
||||
@Input()
|
||||
childCondition = false;
|
||||
|
||||
form = new FormGroup({
|
||||
inverted: new FormControl(),
|
||||
booleanMode: new FormControl(),
|
||||
compositeConditions: new FormArray([]),
|
||||
simpleConditions: new FormArray([])
|
||||
});
|
||||
@Input()
|
||||
readOnly = false;
|
||||
|
||||
readonly isOrImplemented = false;
|
||||
|
||||
@Input()
|
||||
public readOnly = false;
|
||||
form = new FormGroup({
|
||||
inverted: new FormControl(),
|
||||
booleanMode: new FormControl({ value: 'and', disabled: !this.isOrImplemented || this.readOnly }),
|
||||
compositeConditions: new FormArray([]),
|
||||
simpleConditions: new FormArray([])
|
||||
});
|
||||
|
||||
private formSubscription = this.form.valueChanges.subscribe((value: any) => {
|
||||
this.onChange(value);
|
||||
@ -120,16 +119,6 @@ export class RuleCompositeConditionUiComponent implements ControlValueAccessor,
|
||||
this.onTouch = fn;
|
||||
}
|
||||
|
||||
setDisabledState(isDisabled: boolean) {
|
||||
if (isDisabled) {
|
||||
this.readOnly = true;
|
||||
this.form.disable();
|
||||
} else {
|
||||
this.readOnly = false;
|
||||
this.form.enable();
|
||||
}
|
||||
}
|
||||
|
||||
isFormControlSimpleCondition(control: FormControl): boolean {
|
||||
// eslint-disable-next-line no-prototype-builtins
|
||||
return control.value.hasOwnProperty('field');
|
||||
@ -164,11 +153,17 @@ export class RuleCompositeConditionUiComponent implements ControlValueAccessor,
|
||||
this.formSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
const readOnly = changes['readOnly'].currentValue;
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
const readOnly = changes['readOnly']?.currentValue;
|
||||
|
||||
if (readOnly !== undefined && readOnly !== null) {
|
||||
this.readOnly = readOnly;
|
||||
this.setDisabledState(readOnly);
|
||||
if (this.readOnly) {
|
||||
this.readOnly = true;
|
||||
this.form.disable();
|
||||
} else {
|
||||
this.readOnly = false;
|
||||
this.form.enable();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<form class="aca-rule-simple-condition__form" [formGroup]="form">
|
||||
<mat-form-field class="aca-rule-simple-condition__form__field-input">
|
||||
<mat-form-field class="aca-rule-simple-condition__form__field-input" subscriptSizing="dynamic">
|
||||
<mat-select formControlName="field" data-automation-id="field-select"
|
||||
(selectionChange)="onChangeField()">
|
||||
<mat-option *ngIf="!isSelectedFieldKnown" [value]="selectedField.name" data-automation-id="unknown-field-option">
|
||||
@ -11,7 +11,8 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__comparator-input" [class]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
|
||||
<mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__comparator-input" subscriptSizing="dynamic"
|
||||
[class]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
|
||||
<mat-select formControlName="comparator" data-automation-id="comparator-select">
|
||||
<mat-option
|
||||
*ngFor="let comparator of selectedFieldComparators"
|
||||
@ -21,7 +22,8 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__parameter-input" [ngSwitch]="selectedField.type">
|
||||
<mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__parameter-input"
|
||||
subscriptSizing="dynamic" [ngSwitch]="selectedField.type">
|
||||
<mat-select formControlName="parameter" data-automation-id="simple-condition-value-select" *ngSwitchCase="'mimeType'">
|
||||
<mat-option *ngFor="let mimeType of mimeTypes"
|
||||
[value]="mimeType.value">
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { Component, forwardRef, inject, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Component, forwardRef, inject, Input, OnDestroy, OnInit, ViewEncapsulation, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { AbstractControl, ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
|
||||
import { RuleSimpleCondition } from '../../model/rule-simple-condition.model';
|
||||
import { comparatorHiddenForConditionFieldType, RuleConditionField, ruleConditionFields } from './rule-condition-fields';
|
||||
@ -75,7 +75,7 @@ const AUTOCOMPLETE_OPTIONS_DEBOUNCE_TIME = 500;
|
||||
}
|
||||
]
|
||||
})
|
||||
export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAccessor, OnDestroy {
|
||||
export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAccessor, OnChanges, OnDestroy {
|
||||
private appSettings = inject(AppSettingsService);
|
||||
private categoryService = inject(CategoryService);
|
||||
private tagService = inject(TagService);
|
||||
@ -90,17 +90,10 @@ export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAcces
|
||||
autoCompleteOptions: AutoCompleteOption[] = [];
|
||||
showLoadingSpinner: boolean;
|
||||
|
||||
@Input() readOnly = false;
|
||||
|
||||
private onDestroy$ = new Subject<void>();
|
||||
private autoCompleteOptionsSubscription: Subscription;
|
||||
private _readOnly = false;
|
||||
|
||||
@Input()
|
||||
get readOnly(): boolean {
|
||||
return this._readOnly;
|
||||
}
|
||||
set readOnly(isReadOnly: boolean) {
|
||||
this.setDisabledState(isReadOnly);
|
||||
}
|
||||
|
||||
private readonly disabledTags = !this.tagService.areTagsEnabled();
|
||||
private readonly disabledCategories = !this.categoryService.areCategoriesEnabled();
|
||||
@ -171,16 +164,6 @@ export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAcces
|
||||
this.onTouch = fn;
|
||||
}
|
||||
|
||||
setDisabledState(isDisabled: boolean) {
|
||||
if (isDisabled) {
|
||||
this._readOnly = true;
|
||||
this.form.disable();
|
||||
} else {
|
||||
this._readOnly = false;
|
||||
this.form.enable();
|
||||
}
|
||||
}
|
||||
|
||||
onChangeField() {
|
||||
if (!this.selectedFieldComparators.find((comparator) => comparator.name === this.comparatorControl.value)) {
|
||||
this.comparatorControl.setValue('equals');
|
||||
@ -221,6 +204,20 @@ export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAcces
|
||||
});
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
const readOnly = changes['readOnly']?.currentValue;
|
||||
|
||||
if (readOnly !== undefined && readOnly !== null) {
|
||||
if (this.readOnly) {
|
||||
this.readOnly = true;
|
||||
this.form.disable();
|
||||
} else {
|
||||
this.readOnly = false;
|
||||
this.form.enable();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private getCategories(categoryName: string) {
|
||||
this.showLoadingSpinner = true;
|
||||
this.categoryService
|
||||
|
||||
@ -5,7 +5,11 @@
|
||||
.aca-edit-rule-dialog {
|
||||
margin: -24px;
|
||||
|
||||
&__header {
|
||||
input {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.aca-edit-rule-dialog__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: -43px -24px 0;
|
||||
@ -26,7 +30,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
.aca-edit-rule-dialog__content {
|
||||
margin: 0 -24px;
|
||||
padding: 0;
|
||||
|
||||
@ -38,8 +42,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
margin: 0 -24px -43px;
|
||||
.aca-edit-rule-dialog__footer {
|
||||
margin: 0 -24px -27px;
|
||||
padding: var(--edit-rule-dialog-padding);
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid var(--theme-border-color);
|
||||
|
||||
@ -11,15 +11,17 @@
|
||||
<mat-form-field
|
||||
data-automation-id="rule-option-form-field-errorScript"
|
||||
floatLabel="always"
|
||||
appearance="fill"
|
||||
class="aca-rule-options__error-script-dropdown"
|
||||
[ngClass]="{ 'aca-hide-error-script-dropdown': hideErrorScriptDropdown }">
|
||||
|
||||
<mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.ERROR_SCRIPT' | translate }}</mat-label>
|
||||
<mat-select
|
||||
formControlName="errorScript"
|
||||
placeholder="{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.ERROR_SCRIPT' | translate}}"
|
||||
data-automation-id="rule-option-select-errorScript">
|
||||
|
||||
<mat-option value="">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.NO_SCRIPT' | translate }}</mat-option>
|
||||
<mat-option class="aca-rule-options__error-script-option" value="">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.NO_SCRIPT' | translate }}</mat-option>
|
||||
<mat-option *ngFor="let option of errorScriptOptions"
|
||||
class="aca-rule-options__error-script-option"
|
||||
[value]="option.value">
|
||||
{{ option.label }}
|
||||
</mat-option>
|
||||
|
||||
@ -8,10 +8,18 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.aca-read-only &__checkbox label > span:first-child {
|
||||
&__error-script-dropdown {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
&.aca-read-only &__checkbox > div > div:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.aca-read-only &__error-script-dropdown {
|
||||
margin-left: -13px;
|
||||
}
|
||||
|
||||
.aca-hide-error-script-dropdown {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@ -43,7 +43,7 @@ describe('RuleOptionsUiComponent', () => {
|
||||
fixture.debugElement.query(By.css(`[data-automation-id="${dataAutomationId}"]`));
|
||||
|
||||
const toggleMatCheckbox = (dataAutomationId: string) => {
|
||||
((getByDataAutomationId(dataAutomationId).nativeElement as HTMLElement).children[0] as HTMLElement).click();
|
||||
(getByDataAutomationId(dataAutomationId).nativeElement as HTMLElement).querySelector('input').click();
|
||||
};
|
||||
|
||||
const testErrorScriptFormFieldVisibility = (isVisible: boolean) => {
|
||||
@ -62,7 +62,7 @@ describe('RuleOptionsUiComponent', () => {
|
||||
TestBed.configureTestingModule({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
imports: [FormsModule, ReactiveFormsModule, CoreTestingModule, RuleOptionsUiComponent],
|
||||
providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'never' } }]
|
||||
providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'auto' } }]
|
||||
});
|
||||
|
||||
fixture = TestBed.createComponent(RuleOptionsUiComponent);
|
||||
@ -153,7 +153,7 @@ describe('RuleOptionsUiComponent', () => {
|
||||
expect((await matOptions[2].getText()).trim()).toBe('Script 2');
|
||||
});
|
||||
|
||||
it('should always show a label for the error script dropdown even when MAT_FORM_FIELD_DEFAULT_OPTIONS sets floatLabel to never', () => {
|
||||
it('should always show a label for the error script dropdown', () => {
|
||||
component.writeValue({
|
||||
isEnabled: true,
|
||||
isInheritable: false,
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<form class="aca-rule-details__form" [ngClass]="{ 'aca-read-only': readOnly }" [formGroup]="form">
|
||||
|
||||
<ng-container *ngIf="!preview">
|
||||
<div class="aca-rule-details__form__row aca-rule-details__form__name">
|
||||
<label for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
|
||||
<div class="aca-rule-details__form__row">
|
||||
<label class="aca-rule-details__name__label" for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
|
||||
<div>
|
||||
<mat-form-field floatLabel='never' class="aca-rule-details__form__row__field">
|
||||
<mat-form-field appearance="fill" floatLabel='auto' class="aca-rule-details__form__row__field">
|
||||
<input
|
||||
id="rule-details-name-input"
|
||||
matInput type="text" formControlName="name" data-automation-id="rule-details-name-input"
|
||||
@ -17,7 +17,7 @@
|
||||
<div class="aca-rule-details__form__row aca-rule-details__form__description">
|
||||
<label for="rule-details-description-textarea">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.DESCRIPTION' | translate }}</label>
|
||||
<div>
|
||||
<mat-form-field floatLabel='never' class="aca-rule-details__form__row__field">
|
||||
<mat-form-field floatLabel='auto' appearance="fill" class="aca-rule-details__form__row__field">
|
||||
<textarea
|
||||
class="aca-rule-details__form__row__field__textarea"
|
||||
id="rule-details-description-textarea"
|
||||
@ -38,7 +38,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-rule-details__form__conditions">
|
||||
<aca-rule-composite-condition formControlName="conditions"></aca-rule-composite-condition>
|
||||
<aca-rule-composite-condition [readOnly]="readOnly" formControlName="conditions"></aca-rule-composite-condition>
|
||||
<mat-error class="aca-rule-details-error" *ngIf="conditions.hasError('ruleCompositeConditionInvalid')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.RULE_COMPOSITE_CONDITION_INVALID' | translate }}</mat-error>
|
||||
</div>
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
</aca-rule-action-list>
|
||||
</div>
|
||||
|
||||
<div class="aca-rule-details__form__row" *ngIf="showOptionsSection">
|
||||
<div class="aca-rule-details__form__row aca-rule-details__form__others" *ngIf="showOptionsSection">
|
||||
<div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</div>
|
||||
<aca-rule-options
|
||||
formControlName="options"
|
||||
|
||||
@ -1,16 +1,25 @@
|
||||
@import '@alfresco/adf-core/lib/styles/mat-selectors';
|
||||
|
||||
.aca-rule-details {
|
||||
.aca-rule-details__form__triggers {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.aca-rule-details__name__label {
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
|
||||
.aca-rule-details__form__others {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&__form {
|
||||
position: relative;
|
||||
|
||||
& > div {
|
||||
padding: 8px 20px;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
|
||||
&.aca-rule-details__form__name {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.aca-rule-details__form__description {
|
||||
padding-top: 0;
|
||||
@ -30,7 +39,7 @@
|
||||
width: 20%;
|
||||
min-width: 100px;
|
||||
max-width: 150px;
|
||||
padding: 0.75em 0;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
& > div {
|
||||
@ -40,7 +49,6 @@
|
||||
&__field {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-top: -11px;
|
||||
font-size: inherit;
|
||||
|
||||
&__textarea {
|
||||
@ -55,6 +63,7 @@
|
||||
|
||||
&__conditions {
|
||||
width: 100%;
|
||||
margin: 14px 0 36px;
|
||||
|
||||
& > .aca-rule-details-error {
|
||||
margin-left: 16px;
|
||||
@ -73,18 +82,39 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
&.aca-read-only,
|
||||
.mat-form-field-disabled {
|
||||
.mat-form-field-underline,
|
||||
.mat-select-arrow-wrapper {
|
||||
display: none;
|
||||
#{$mat-form-field-disabled} {
|
||||
#{$mat-notched-outline-leading},
|
||||
#{$mat-notched-outline-trailing},
|
||||
#{$mat-notched-outline-notch} {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#{$mat-line-ripple} {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
*:disabled,
|
||||
.mat-select-disabled .mat-select-value {
|
||||
#{$mat-select-disabled} #{$mat-select-value} {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#{$mat-select-arrow-wrapper} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.aca-rule-details__form__row #{$mat-form-field-flex} #{$mat-form-field-infix} {
|
||||
padding-top: 0.375em;
|
||||
padding-bottom: 0.375em;
|
||||
}
|
||||
|
||||
.aca-rule-details__form__row aca-rule-action #{$mat-form-field-flex} #{$mat-form-field-infix} {
|
||||
padding-top: 0.1em;
|
||||
padding-bottom: 0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@ describe('RuleTriggerUiComponent', () => {
|
||||
fixture.debugElement.query(By.css(`[data-automation-id="${dataAutomationId}"]`));
|
||||
|
||||
const toggleMatCheckbox = (dataAutomationId: string) => {
|
||||
((getByDataAutomationId(dataAutomationId).nativeElement as HTMLElement).children[0] as HTMLElement).click();
|
||||
(getByDataAutomationId(dataAutomationId).nativeElement as HTMLElement).querySelector('input').click();
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
@import '@alfresco/adf-core/lib/styles/mat-selectors';
|
||||
|
||||
.aca-rule-set-picker-container {
|
||||
--rule-set-picker-padding: 8px 20px;
|
||||
|
||||
& > * {
|
||||
#{$mdc-dialog} #{$mat-dialog-surface} {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.aca-rule-set-picker {
|
||||
&__header {
|
||||
& &__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
@ -28,7 +30,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
& &__content {
|
||||
position: relative;
|
||||
height: 80vh;
|
||||
margin: 0;
|
||||
@ -66,7 +68,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
& &__footer {
|
||||
margin: 0;
|
||||
padding: var(--rule-set-picker-padding);
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -3,16 +3,16 @@
|
||||
"version": "0.0.1",
|
||||
"license": "LGPL-3.0",
|
||||
"peerDependencies": {
|
||||
"@angular/common": ">=14.1.0",
|
||||
"@angular/core": ">=14.1.0",
|
||||
"@angular/common": ">=15.2",
|
||||
"@angular/core": ">=15.2",
|
||||
"@alfresco/adf-core": ">=6.10.0-0",
|
||||
"@alfresco/adf-content-services": ">=6.10.0-0",
|
||||
"@alfresco/adf-extensions": ">=6.10.0-0",
|
||||
"@alfresco/js-api": ">=7.9.0-0",
|
||||
"@angular/animations": ">=14.1.3",
|
||||
"@angular/cdk": ">=14.1.3",
|
||||
"@angular/forms": ">=14.1.3",
|
||||
"@angular/material": ">=14.1.3",
|
||||
"@angular/animations": ">=15.2",
|
||||
"@angular/cdk": ">=15.2",
|
||||
"@angular/forms": ">=15.2",
|
||||
"@angular/material": ">=15.2",
|
||||
"@ngx-translate/core": ">=14.0.0",
|
||||
"rxjs": ">=6.6.6",
|
||||
"zone.js": ">=0.11.8"
|
||||
|
||||
@ -28,7 +28,10 @@
|
||||
"main": "projects/aca-content/test.ts",
|
||||
"tsConfig": "projects/aca-content/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/aca-content/karma.conf.js",
|
||||
"styles": ["projects/aca-content/src/lib/ui/application.scss"]
|
||||
"styles": ["projects/aca-content/src/lib/ui/application.scss"],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": ["projects/aca-content/src/lib/ui", "node_modules", "node_modules/@alfresco/adf-core/lib"]
|
||||
}
|
||||
},
|
||||
"configurations": {
|
||||
"adfprod": {
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
<div mat-menu-item class="aca-user-info" [routerLink]="['/profile']" title="{{ 'APP.TOOLTIPS.MY_PROFILE' | translate }}">
|
||||
<ng-container *ngIf="user$ | async as user">
|
||||
<button class="aca-user-info-button">
|
||||
<div>{{ user.initials || 'U' }}</div>
|
||||
</button>
|
||||
<div class="aca-user-info-details">
|
||||
<div>{{ user.userName }}</div>
|
||||
<div>{{ user.email }}</div>
|
||||
<div class="aca-user-info-content">
|
||||
<button class="aca-user-info-button">
|
||||
<div>{{ user.initials || 'U' }}</div>
|
||||
</button>
|
||||
<div class="aca-user-info-details">
|
||||
<div>{{ user.userName }}</div>
|
||||
<div>{{ user.email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
@ -3,6 +3,11 @@
|
||||
height: 66px;
|
||||
align-items: center;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-button {
|
||||
border-radius: 90%;
|
||||
height: 32px;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<ng-container *ngSwitchCase="'menu'">
|
||||
<button mat-menu-item [id]="actionRef.id" [matMenuTriggerFor]="childMenu">
|
||||
<adf-icon [value]="actionRef.icon"></adf-icon>
|
||||
<span>{{ actionRef.title | translate }}</span>
|
||||
<span [attr.data-automation-id]="actionRef.id + '-label'">{{ actionRef.title | translate }}</span>
|
||||
</button>
|
||||
|
||||
<mat-menu #childMenu="matMenu">
|
||||
@ -24,7 +24,7 @@
|
||||
<ng-container *ngSwitchDefault>
|
||||
<button mat-menu-item color="primary" [id]="actionRef.id" (click)="runAction()">
|
||||
<adf-icon [value]="actionRef.icon"></adf-icon>
|
||||
<span>{{ actionRef.title | translate }}</span>
|
||||
<span [attr.data-automation-id]="actionRef.id + '-label'">{{ actionRef.title | translate }}</span>
|
||||
</button>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { TestBed, ComponentFixture } from '@angular/core/testing';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { AppTestingModule } from '../../testing/app-testing.module';
|
||||
import { ContextMenuItemComponent } from './context-menu-item.component';
|
||||
import { AppExtensionService } from '@alfresco/aca-shared';
|
||||
@ -62,7 +62,7 @@ describe('ContextMenuComponent', () => {
|
||||
fixture.detectChanges();
|
||||
|
||||
const buttonElement = fixture.nativeElement.querySelector('button');
|
||||
expect(buttonElement.querySelector('span').innerText.trim()).toBe(contextItem.title);
|
||||
expect(buttonElement.querySelector('[data-automation-id="action-button-label"]').innerText.trim()).toBe(contextItem.title);
|
||||
});
|
||||
|
||||
it('should not run action when entry has no click attribute defined', () => {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<ng-container *ngSwitchDefault>
|
||||
<button mat-menu-item [id]="entry.id" (click)="runAction(entry)">
|
||||
<adf-icon [value]="entry.icon"></adf-icon>
|
||||
<span>{{ entry.title | translate }}</span>
|
||||
<span [attr.data-automation-id]="entry.id + '-label'">{{ entry.title | translate }}</span>
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<ng-container *ngSwitchCase="'menu'">
|
||||
<button mat-menu-item [id]="entry.id" [matMenuTriggerFor]="childMenu">
|
||||
<adf-icon [value]="entry.icon"></adf-icon>
|
||||
<span>{{ entry.title | translate }}</span>
|
||||
<span [attr.data-automation-id]="entry.id + '-label'">{{ entry.title | translate }}</span>
|
||||
</button>
|
||||
|
||||
<mat-menu #childMenu="matMenu">
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { TestBed, ComponentFixture } from '@angular/core/testing';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { AppTestingModule } from '../../testing/app-testing.module';
|
||||
import { ContextMenuComponent } from './context-menu.component';
|
||||
import { ContextMenuOverlayRef } from './context-menu-overlay';
|
||||
@ -89,9 +89,10 @@ describe('ContextMenuComponent', () => {
|
||||
await fixture.whenStable();
|
||||
|
||||
const contextMenuElements = document.body.querySelector('.aca-context-menu')?.querySelectorAll('button');
|
||||
const actionButtonLabel: HTMLElement = contextMenuElements?.[0].querySelector('[data-automation-id="action-button-label"]');
|
||||
|
||||
expect(contextMenuElements?.length).toBe(1);
|
||||
expect(contextMenuElements?.[0].querySelector('span')?.innerText).toBe(contextItem.title);
|
||||
expect(actionButtonLabel.innerText).toBe(contextItem.title);
|
||||
});
|
||||
|
||||
it('should run action with provided action id and correct payload', () => {
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-tab-group [selectedIndex]="activeTab" class="aca-details-tabs" animationDuration="0">
|
||||
<mat-tab-group [selectedIndex]="activeTab" class="aca-details-tabs" animationDuration="0" mat-stretch-tabs="false" mat-align-tabs="start">
|
||||
<mat-tab label="{{ 'APP.INFO_DRAWER.TABS.PROPERTIES' | translate }}">
|
||||
<ng-template matTabContent>
|
||||
<app-metadata-tab *ngIf="node && !isLoading; else loading" [node]="node"></app-metadata-tab>
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
.adf-comments-tab-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.adf-comments-form-field {
|
||||
div:first-child {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@ -32,8 +32,12 @@ import { NodeCommentsModule } from '@alfresco/adf-content-services';
|
||||
standalone: true,
|
||||
imports: [MatCardModule, NodeCommentsModule],
|
||||
selector: 'app-comments-tab',
|
||||
template: `<mat-card><adf-node-comments [readOnly]="!canUpdateNode" [nodeId]="node?.id"></adf-node-comments></mat-card>`,
|
||||
encapsulation: ViewEncapsulation.None
|
||||
template: `<mat-card class="adf-comments-tab-container" appearance="raised"
|
||||
><adf-node-comments [readOnly]="!canUpdateNode" [nodeId]="node?.id"></adf-node-comments
|
||||
></mat-card>`,
|
||||
styles: ['app-comments-tab mat-card { padding: 16px }'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
styleUrls: ['./comments-tab.component.scss']
|
||||
})
|
||||
export class CommentsTabComponent implements OnInit {
|
||||
@Input()
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<mat-card *ngIf="node">
|
||||
<mat-card appearance="raised" *ngIf="node">
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" autocomplete="off">
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[cdkTrapFocusAutoCapture]="form.enabled"
|
||||
@ -18,18 +19,21 @@
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
|
||||
<input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-visibility-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}</mat-label>
|
||||
<mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
|
||||
<mat-option [value]="type.value" *ngFor="let type of libraryType">
|
||||
<mat-option [value]="type.value" [attr.data-automation-id]="'library-visibility-option-' + type.value" *ngFor="let type of libraryType">
|
||||
{{ type.label | translate }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
|
||||
|
||||
@ -1,5 +1,51 @@
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
|
||||
app-library-metadata-form {
|
||||
.app-library-metadata-form-field {
|
||||
width: 100%;
|
||||
|
||||
.mat-mdc-form-field-flex {
|
||||
border-bottom: 1px solid;
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-form-field-disabled {
|
||||
.mat-mdc-form-field-flex {
|
||||
border-bottom: 1px dotted var(--theme-text-disabled-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-focused {
|
||||
.mat-mdc-form-field-flex {
|
||||
border-bottom: 2px solid var(--theme-blue-button-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-text-field--disabled.mdc-text-field--filled {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mat-mdc-card-content:first-child {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.app-library-metadata-form-field-label {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
|
||||
.mdc-text-field {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mdc-line-ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
>
|
||||
<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]="'never'">
|
||||
<mat-form-field class="app-input-form-field" floatLabel="auto">
|
||||
<input
|
||||
matInput
|
||||
#searchInput
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
$top-margin: 12px;
|
||||
@import '@alfresco/adf-core/lib/styles/mat-selectors';
|
||||
|
||||
.app-suffix-search-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 6px;
|
||||
margin: 14px 1px;
|
||||
float: left;
|
||||
@ -17,17 +19,11 @@ $top-margin: 12px;
|
||||
}
|
||||
|
||||
.app-search-container {
|
||||
margin-top: -$top-margin;
|
||||
padding-top: 2px;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
font-size: 16px;
|
||||
padding-left: 15px;
|
||||
padding-left: 19px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 12px;
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.mat-form-field-underline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-input-form-field-input + span {
|
||||
cursor: text;
|
||||
@ -36,16 +32,44 @@ $top-margin: 12px;
|
||||
|
||||
.app-input-form-field {
|
||||
letter-spacing: -0.7px;
|
||||
font-size: 16px;
|
||||
width: calc(100% - 56px);
|
||||
|
||||
&-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 {
|
||||
top: -2px;
|
||||
left: -8px;
|
||||
left: -12px;
|
||||
|
||||
&-icon {
|
||||
font-size: 24px;
|
||||
|
||||
@ -7,18 +7,18 @@
|
||||
<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" [floatLabel]="'never'">
|
||||
<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'"
|
||||
[disabled]="true"
|
||||
[readonly]="true"
|
||||
[value]="searchedWord"
|
||||
[placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
|
||||
/>
|
||||
|
||||
<div matSuffix class="app-suffix-search-icon-wrapper">
|
||||
<div matSuffix class="app-suffix-search-icon-wrapper app-icon-arrow">
|
||||
<mat-icon>arrow_drop_down</mat-icon>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import '@alfresco/adf-core/lib/styles/mat-selectors';
|
||||
|
||||
$search-width: 594px;
|
||||
$search-height: 32px;
|
||||
$search-background: var(--theme-search-background-color);
|
||||
@ -10,7 +12,7 @@ $top-margin: 12px;
|
||||
max-width: $search-width;
|
||||
height: $search-height + $top-margin;
|
||||
|
||||
.app-search-button {
|
||||
.app-search-button:is(button) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: 0;
|
||||
@ -19,6 +21,10 @@ $top-margin: 12px;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
@ -30,10 +36,6 @@ $top-margin: 12px;
|
||||
|
||||
&-input {
|
||||
caret-color: var(--theme-text-color);
|
||||
|
||||
&:disabled {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,12 +46,19 @@ $top-margin: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-search-options-menu {
|
||||
.app-search-options-menu#{$mat-menu-panel} {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
margin-top: 2px;
|
||||
background-color: var(--theme-dialog-background-color);
|
||||
width: $search-width;
|
||||
max-width: unset;
|
||||
border-radius: $search-border-radius;
|
||||
margin-top: 3px;
|
||||
|
||||
#{$mdc-list} {
|
||||
padding-top: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.aca-search-input {
|
||||
@ -62,7 +71,7 @@ $top-margin: 12px;
|
||||
padding-bottom: 26px;
|
||||
|
||||
.app-search-container {
|
||||
margin: 0;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -73,23 +82,32 @@ $top-margin: 12px;
|
||||
.app-search-options {
|
||||
color: var(--theme-text-color);
|
||||
border-top: 1px solid var(--theme-divider-color);
|
||||
padding: 20px 0;
|
||||
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 24px 3px 19px;
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.mat-checkbox-inner-container {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
padding: 3px 36px 3px 20px;
|
||||
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
label {
|
||||
|
||||
@ -30,10 +30,26 @@ aca-search-results {
|
||||
border-bottom: 1px solid var(--theme-border-color);
|
||||
|
||||
.aca-content__advanced-filters {
|
||||
/* stylelint-disable-next-line */
|
||||
.mat-mdc-chip-action {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line */
|
||||
.mdc-evolution-chip__text-label {
|
||||
padding-top: 4px;
|
||||
color: var(--theme-selected-text-color);
|
||||
}
|
||||
|
||||
.adf-search-filter-chip,
|
||||
.adf-search-filter-chip-tabbed {
|
||||
background-color: var(--theme-dropdown-color);
|
||||
color: var(--theme-selected-text-color);
|
||||
height: 32px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@ -45,10 +61,10 @@ aca-search-results {
|
||||
color: var(--theme-search-chip-icon-color);
|
||||
}
|
||||
|
||||
.adf-search-filter-chip-icon {
|
||||
color: var(--theme-search-chip-icon-color);
|
||||
.adf-search-filter-chip-icon {
|
||||
color: var(--theme-search-chip-icon-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-filter-placeholder {
|
||||
color: var(--theme-selected-text-color);
|
||||
@ -132,6 +148,8 @@ aca-search-results {
|
||||
}
|
||||
|
||||
&__reset-action {
|
||||
margin-top: 5px;
|
||||
margin-right: 2px;
|
||||
line-height: 33px;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
<div class="aca-sidenav__section">
|
||||
<div *ngFor="let group of groups; trackBy: trackByGroupId" class="aca-sidenav__section__actions">
|
||||
<mat-list-item *ngFor="let item of group.items; trackBy: trackByLinkId">
|
||||
<mat-list-item class="aca-sidenav__section__actions__item" *ngFor="let item of group.items; trackBy: trackByLinkId">
|
||||
<ng-container *ngIf="!item.component">
|
||||
<app-expand-menu [item]="item"></app-expand-menu>
|
||||
</ng-container>
|
||||
|
||||
@ -96,11 +96,13 @@
|
||||
}
|
||||
|
||||
.aca-action-button {
|
||||
cursor: pointer;
|
||||
color: var(--theme-action-button-text-color);
|
||||
height: 32px;
|
||||
padding: 0 24px;
|
||||
border-radius: 0;
|
||||
line-height: 32px;
|
||||
justify-content: start;
|
||||
|
||||
&--active {
|
||||
color: var(--theme-sidenav-active-text-color);
|
||||
@ -113,8 +115,18 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__actions:last-child {
|
||||
border-bottom: 0;
|
||||
&__actions {
|
||||
&__item:has(span) {
|
||||
padding: 0;
|
||||
|
||||
span {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
.aca-user-menu-button {
|
||||
border-radius: 90%;
|
||||
height: 32px;
|
||||
margin-right: 0;
|
||||
min-width: 32px;
|
||||
padding: 0;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: var(--theme-about-panel-border-color);
|
||||
color: var(--theme-sidenav-user-menu-color);
|
||||
border: none;
|
||||
.aca-user-menu {
|
||||
.aca-user-menu-button {
|
||||
border-radius: 90%;
|
||||
height: 32px;
|
||||
margin-right: 0;
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
padding: 0;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: var(--theme-about-panel-border-color);
|
||||
color: var(--theme-sidenav-user-menu-color);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { Component, Input, OnInit, ViewEncapsulation, inject } from '@angular/core';
|
||||
import { Component, inject, Input, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { ContentActionRef } from '@alfresco/adf-extensions';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
@ -38,7 +38,8 @@ import { Store } from '@ngrx/store';
|
||||
selector: 'aca-user-menu',
|
||||
templateUrl: './user-menu.component.html',
|
||||
styleUrls: ['./user-menu.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'aca-user-menu' }
|
||||
})
|
||||
export class UserMenuComponent implements OnInit {
|
||||
private store = inject<Store<AppStore>>(Store<AppStore>);
|
||||
|
||||
@ -73,6 +73,30 @@ app-view-profile {
|
||||
.app-general-edit-btn {
|
||||
width: 60%;
|
||||
text-align: end;
|
||||
|
||||
.app-general-edit {
|
||||
background: var(--theme-grey-text-background-color);
|
||||
height: 30px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.app-general-cancel-btn {
|
||||
height: 30px;
|
||||
margin: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
background-color: var(--theme-grey-text-background-color);
|
||||
padding-top: 0.25px;
|
||||
}
|
||||
|
||||
.app-general-save-btn {
|
||||
width: 75px;
|
||||
height: 30px;
|
||||
margin: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
color: white;
|
||||
background-color: var(--theme-blue-button-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.app-divider {
|
||||
@ -89,33 +113,10 @@ app-view-profile {
|
||||
box-shadow: 0 0 2px var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.app-general-edit {
|
||||
background: var(--theme-grey-text-background-color);
|
||||
height: 30px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.app-general-edit:hover {
|
||||
background: var(--theme-grey-hover-background-color);
|
||||
}
|
||||
|
||||
.app-general-cancel-btn {
|
||||
height: 30px;
|
||||
margin: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
background-color: var(--theme-grey-text-background-color);
|
||||
padding-top: 0.25px;
|
||||
}
|
||||
|
||||
.app-general-save-btn {
|
||||
width: 75px;
|
||||
height: 30px;
|
||||
margin: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
color: white;
|
||||
background-color: var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.app-general-dropdown-divider {
|
||||
border-top-color: var(--theme-grey-divider-color);
|
||||
}
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
<div mat-dialog-content class="app-create-from-template-content">
|
||||
<form [formGroup]="form" novalidate>
|
||||
<mat-form-field class="app-create-from-template-field">
|
||||
<mat-label>{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.NAME' | translate }}</mat-label>
|
||||
<input
|
||||
cdkFocusInitial
|
||||
placeholder="{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.NAME' | translate }}"
|
||||
matInput
|
||||
formControlName="name"
|
||||
required
|
||||
@ -16,8 +16,8 @@
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="app-create-from-template-field">
|
||||
<mat-label>{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.TITLE' | translate }}</mat-label>
|
||||
<input
|
||||
placeholder="{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.TITLE' | translate }}"
|
||||
matInput
|
||||
formControlName="title"
|
||||
/>
|
||||
@ -27,10 +27,10 @@
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="app-create-from-template-field">
|
||||
<mat-form-field class="app-create-from-template-field app-create-from-template-field-description">
|
||||
<mat-label>{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.DESCRIPTION' | translate }}</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
placeholder="{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.DESCRIPTION' | translate }}"
|
||||
rows="2"
|
||||
formControlName="description"
|
||||
></textarea>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
|
||||
app-create-from-template-dialog {
|
||||
overflow: visible;
|
||||
display: block;
|
||||
@ -22,14 +24,48 @@ app-create-from-template-dialog {
|
||||
&-field {
|
||||
width: 100%;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 20px;
|
||||
&:first-of-type {
|
||||
margin-bottom: 9.5px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
margin-bottom: 6.5px;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
margin: 0 2px;
|
||||
overflow: hidden;
|
||||
|
||||
.app-create-from-template-field {
|
||||
.mdc-floating-label {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
&.mat-form-field-hide-placeholder {
|
||||
.mdc-floating-label {
|
||||
padding-top: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
&.app-create-from-template-field-description {
|
||||
&.mat-form-field-hide-placeholder {
|
||||
.mdc-floating-label {
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
padding-bottom: 3.5px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-error-wrapper {
|
||||
margin-left: -2px;
|
||||
font-size: 10.5px;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
|
||||
@ -45,7 +45,6 @@ import {
|
||||
ViewNodeVersionAction
|
||||
} from '@alfresco/aca-shared/store';
|
||||
import {
|
||||
ConfirmDialogComponent,
|
||||
FolderDialogComponent,
|
||||
LibraryDialogComponent,
|
||||
NewVersionUploaderData,
|
||||
@ -56,7 +55,7 @@ import {
|
||||
NodesApiService,
|
||||
ShareDialogComponent
|
||||
} from '@alfresco/adf-content-services';
|
||||
import { NotificationService, TranslationService } from '@alfresco/adf-core';
|
||||
import { NotificationService, TranslationService, ConfirmDialogComponent } from '@alfresco/adf-core';
|
||||
import { DeletedNodesPaging, Node, NodeEntry, PathInfo, SiteBodyCreate, SiteEntry } from '@alfresco/js-api';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
|
||||
|
||||
@ -11,24 +11,19 @@ $mat-accent-palette: mat.define-palette($aca-accent-green, A200);
|
||||
$mat-warn-palette: mat.define-palette($aca-warn, A100);
|
||||
$app-typography: mat.define-typography-config(
|
||||
$font-family: 'Open Sans',
|
||||
$display-4: mat.define-typography-level(112px, 112px, 300),
|
||||
$display-3: mat.define-typography-level(56px, 56px, 400),
|
||||
$display-2: mat.define-typography-level(45px, 48px, 400),
|
||||
$display-1: mat.define-typography-level(34px, 40px, 400),
|
||||
$headline: mat.define-typography-level(24px, 32px, 400),
|
||||
$title: mat.define-typography-level(20px, 32px, 500),
|
||||
$subheading-2: mat.define-typography-level(16px, 28px, 400),
|
||||
$subheading-1: mat.define-typography-level(15px, 24px, 400),
|
||||
$headline-1: mat.define-typography-level(112px, 112px, 300),
|
||||
$headline-2: mat.define-typography-level(56px, 56px, 400),
|
||||
$headline-3: mat.define-typography-level(45px, 48px, 400),
|
||||
$headline-4: mat.define-typography-level(34px, 40px, 400),
|
||||
$headline-5: mat.define-typography-level(24px, 32px, 400),
|
||||
$headline-6: mat.define-typography-level(20px, 32px, 400),
|
||||
$subtitle-1: mat.define-typography-level(16px, 28px, 400),
|
||||
$subtitle-2: mat.define-typography-level(14px, 24px, 500),
|
||||
$body-2: mat.define-typography-level(14px, 24px, 500),
|
||||
$body-1: mat.define-typography-level(14px, 20px, 400),
|
||||
$caption: mat.define-typography-level(12px, 20px, 400),
|
||||
$button: mat.define-typography-level(14px, 14px, 500),
|
||||
// Line-height must be unit-less fraction of the font-size.
|
||||
$input: mat.define-typography-level(inherit, 1.25, 400)
|
||||
$button: mat.define-typography-level(14px, 14px, 500)
|
||||
);
|
||||
|
||||
@include mat.core($app-typography);
|
||||
|
||||
$custom-theme: mat.define-light-theme(
|
||||
(
|
||||
color: (
|
||||
|
||||
@ -1,17 +1,24 @@
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
@import '@alfresco/adf-core/lib/styles/mat-selectors';
|
||||
|
||||
@mixin adf-about-theme($theme) {
|
||||
adf-about {
|
||||
/* custom ADF About Component Theme */
|
||||
|
||||
#{$mat-data-table-header-cell} {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
background-color: var(--theme-about-panel-background-color);
|
||||
overflow: auto;
|
||||
|
||||
.mat-accordion {
|
||||
#{$mat-accordion} {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
|
||||
&.adf-about-panel {
|
||||
.mat-expansion-panel {
|
||||
#{$mat-expansion-panel} {
|
||||
box-shadow: none;
|
||||
border-radius: 12px;
|
||||
margin: 24px;
|
||||
@ -21,7 +28,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header {
|
||||
#{$mat-expansion-panel-header} {
|
||||
height: 80px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
@ -1,52 +1,76 @@
|
||||
@import '../colors';
|
||||
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
@mixin ay11-theme() {
|
||||
.mat-icon-button,
|
||||
.mat-button,
|
||||
.mat-checkbox,
|
||||
.mat-raised-button {
|
||||
.mat-mdc-icon-button,
|
||||
.mat-mdc-button,
|
||||
.mat-mdc-checkbox,
|
||||
.mat-mdc-raised-button {
|
||||
&:focus-visible {
|
||||
@include rounded-outline;
|
||||
}
|
||||
|
||||
.mat-ripple-element {
|
||||
.mat-ripple,
|
||||
.mdc-icon-button__ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// TODO check if still applies
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-button-focus-overlay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-checkbox-ripple {
|
||||
.mdc-checkbox__native-control:focus-visible {
|
||||
& ~ .mat-mdc-checkbox-ripple {
|
||||
@include rounded-outline;
|
||||
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
left: calc(50% - 11px);
|
||||
top: calc(50% - 11px);
|
||||
top: calc(50% - 10px);
|
||||
display: block;
|
||||
}
|
||||
|
||||
& ~ .mdc-checkbox__background {
|
||||
opacity: 0.57;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-checkbox__ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-focus-overlay {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.mdc-menu-surface.mat-mdc-autocomplete-panel:is(div),
|
||||
.mdc-menu-surface.mat-mdc-select-panel:is(div) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected.mat-icon > svg {
|
||||
fill: var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.mat-list-base .mat-list-option {
|
||||
.mat-list-item-content {
|
||||
.mat-mdc-list-base .mat-mdc-list-option {
|
||||
.mdc-list-item__content {
|
||||
@include rounded-border(transparent);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: white;
|
||||
|
||||
.mat-list-item-content {
|
||||
.mdc-list-item__content {
|
||||
@include rounded-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-user-button.mat-button,
|
||||
.adf-search-user-button.mat-mdc-button,
|
||||
.app-search-button {
|
||||
line-height: 36px;
|
||||
|
||||
@ -59,9 +83,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mat-menu-content {
|
||||
.mat-menu-item {
|
||||
.mat-menu-ripple {
|
||||
.mat-mdc-menu-content {
|
||||
.mat-mdc-menu-item {
|
||||
.mat-ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -83,56 +107,59 @@
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.mat-option {
|
||||
.mat-mdc-option {
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-option-ripple {
|
||||
.mat-mdc-option-ripple {
|
||||
@include rounded-outline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-slide-toggle {
|
||||
.mat-slide-toggle-thumb {
|
||||
.mat-mdc-slide-toggle .mdc-form-field {
|
||||
.mdc-switch .mdc-switch__handle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
transform: translate(20%, 50%);
|
||||
background-color: #484a4d;
|
||||
}
|
||||
|
||||
.mat-slide-toggle-bar {
|
||||
.mdc-switch .mdc-switch__track {
|
||||
border-radius: 15px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.mat-slide-toggle-thumb-container {
|
||||
top: -5px;
|
||||
.mdc-switch__handle-track {
|
||||
top: -15px;
|
||||
}
|
||||
|
||||
.mat-slide-toggle-ripple {
|
||||
.mdc-switch__ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-slide-toggle-bar {
|
||||
outline: 2px solid var(--theme-blue-button-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-primary.mat-checked:not(.mat-disabled) {
|
||||
.mat-slide-toggle-bar {
|
||||
background-color: var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.mat-slide-toggle-thumb {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-stroked-button,
|
||||
.mat-flat-button {
|
||||
.mat-mdc-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked:not(.mat-disabled) .mdc-form-field .mdc-switch {
|
||||
.mdc-switch__track::after {
|
||||
background-color: var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.mdc-switch__shadow {
|
||||
background-color: var(--theme-primary-color-default-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-tab:focus {
|
||||
/* stylelint-disable-next-line scss/no-global-function-names */
|
||||
background: map-get($aca-primary-blue, 50);
|
||||
}
|
||||
|
||||
.mat-mdc-slide-toggle.cdk-keyboard-focused .mdc-form-field .mdc-switch .mdc-switch__track {
|
||||
outline: 2px solid var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.mat-mdc-outlined-button,
|
||||
.mat-mdc-unelevated-button {
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-button-ripple.mat-ripple {
|
||||
.mat-mdc-button-ripple.mat-ripple {
|
||||
outline: 2px solid var(--theme-blue-button-color);
|
||||
inset: -4px;
|
||||
}
|
||||
@ -160,7 +187,7 @@
|
||||
box-sizing: border-box;
|
||||
border: 2px solid transparent;
|
||||
|
||||
.mat-button-base.mat-button {
|
||||
.mat-mdc-button-base.mat-mdc-button {
|
||||
outline: none;
|
||||
|
||||
@include rounded-border(transparent);
|
||||
@ -182,22 +209,13 @@
|
||||
.adf-error-snackbar {
|
||||
background-color: #ba1b1b;
|
||||
|
||||
.mat-simple-snackbar,
|
||||
.mat-simple-snackbar-action {
|
||||
.mat-mdc-simple-snack-bar,
|
||||
.mat-mdc-snack-bar-action {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-info-snackbar {
|
||||
background-color: var(--theme-blue-button-color);
|
||||
|
||||
.mat-simple-snackbar,
|
||||
.mat-simple-snackbar-action {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-button-base {
|
||||
.mat-mdc-button-base {
|
||||
&.adf-filter-button {
|
||||
margin-left: -2px;
|
||||
}
|
||||
@ -207,7 +225,7 @@
|
||||
&__perpage-block,
|
||||
&__actualinfo-block {
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
.mat-icon-button {
|
||||
.mat-mdc-icon-button {
|
||||
left: 3px;
|
||||
|
||||
&:focus-visible {
|
||||
|
||||
@ -1,33 +1,178 @@
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
@use '@angular/material' as mat;
|
||||
@import '@alfresco/adf-core/theming';
|
||||
@import '@alfresco/adf-core/lib/styles/mat-selectors';
|
||||
@import 'custom-theme';
|
||||
@import 'variables/variables';
|
||||
@include custom-theme($custom-theme);
|
||||
@include mat.core;
|
||||
|
||||
mat-toolbar {
|
||||
color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.adf-name-location-cell-location.adf-datatable-cell-value {
|
||||
color: var(--theme-secondary-text);
|
||||
}
|
||||
|
||||
.mat-tab-list {
|
||||
.mat-tab-labels {
|
||||
.mat-tab-label {
|
||||
&.mat-tab-label-active {
|
||||
color: #212121;
|
||||
#{$mat-text-field-filled}:not(#{$mat-text-field-disabled}) {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#{$mat-button} > #{$mat-icon} {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#{$mat-button} {
|
||||
#{$mat-button-label} {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
&#{$mat-primary} {
|
||||
#{$mat-button-label} {
|
||||
-webkit-font-smoothing: initial;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-button}:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#{$mat-form-field-error-wrapper}:is(div) {
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
|
||||
#{$mat-form-field-error} {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-checkbox} {
|
||||
#{$mat-checkbox-box}:has(div) {
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
#{$mdc-form-field} {
|
||||
height: auto;
|
||||
|
||||
#{$mat-checkbox-box} {
|
||||
padding: 0;
|
||||
margin-right: 2px;
|
||||
|
||||
input {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#{$mat-checkbox-background} {
|
||||
top: 1px;
|
||||
left: 0;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-checkbox-touch-target} {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-switch}:is(button)#{$mat-switch-selected}#{$mat-switch-checked} #{$mat-switch-handle-track} #{$mat-switch-handle}::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#{$mat-slide-toggle}:is(mat-slide-toggle) #{$mat-switch}:enabled #{$mat-switch-track}::after {
|
||||
background-color: var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
mat-slide-toggle {
|
||||
#{$mat-switch-icons} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#{$mat-switch-unselected}#{$mat-switch}:enabled #{$mat-switch-track}::before,
|
||||
#{$mat-switch-unselected}#{$mat-switch}:enabled:active #{$mat-switch-track}::before,
|
||||
#{$mat-switch-unselected}#{$mat-switch}:enabled:focus:not(:active) #{$mat-switch-track}::before,
|
||||
#{$mat-switch-unselected}#{$mat-switch}:enabled:hover:not(:focus:active) #{$mat-switch-track}::before {
|
||||
background: var(--adf-theme-foreground-disabled-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-list-item-primary-text} {
|
||||
color: var(--adf-theme-foreground-text-color-087);
|
||||
}
|
||||
|
||||
#{$mat-chip}#{$mat-evolution-chip}#{$mat-standard-chip} {
|
||||
height: auto;
|
||||
|
||||
#{$mat-evolution-chip-text-label} {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
#{$mat-evolution-chip-action}#{$mat-chip-action} {
|
||||
#{$mat-evolution-chip-graphic}#{$mat-chip-graphic} {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$mdc-dialog} {
|
||||
#{$mat-dialog-title} {
|
||||
margin-bottom: 20px;
|
||||
padding: 0;
|
||||
|
||||
&::before {
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-dialog-actions} {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
#{$mat-slide-toggle} #{$mdc-form-field} {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
#{$mat-data-table-row}:last-child #{$mat-data-table-cell} {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
#{$mat-dialog-content} {
|
||||
padding: 16px 0;
|
||||
color: var(--adf-theme-foreground-text-color-087);
|
||||
|
||||
--mdc-dialog-supporting-text-color: var(--theme-primary-text);
|
||||
}
|
||||
|
||||
#{$mat-dialog-surface} {
|
||||
padding: 24px 24px 8px;
|
||||
|
||||
#{$mat-button} {
|
||||
width: auto;
|
||||
|
||||
#{$mat-button-label} {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field-label-wrapper .mat-form-field-label,
|
||||
.mat-tab-list .mat-tab-labels .mat-tab-label,
|
||||
.mat-checkbox-label,
|
||||
mat-toolbar.mat-toolbar.mat-toolbar-multiple-row,
|
||||
mat-toolbar.mat-toolbar.mat-toolbar-single-row {
|
||||
#{$mat-floating-label},
|
||||
#{$mat-tab-list} #{$mat-tab-labels} #{$mat-tab-label},
|
||||
#{$mat-checkbox} label,
|
||||
mat-toolbar#{$mat-toolbar}#{$mat-toolbar-multiple-row},
|
||||
mat-toolbar#{$mat-toolbar}#{$mat-toolbar-single-row} {
|
||||
color: var(--theme-secondary-text);
|
||||
opacity: 1;
|
||||
}
|
||||
@ -50,7 +195,7 @@ mat-toolbar.mat-toolbar.mat-toolbar-single-row {
|
||||
}
|
||||
|
||||
.adf-property-field {
|
||||
.adf-textitem-edit-icon.mat-icon {
|
||||
.adf-textitem-edit-icon#{$mat-icon} {
|
||||
color: var(--theme-secondary-text);
|
||||
}
|
||||
}
|
||||
@ -62,3 +207,122 @@ mat-toolbar.mat-toolbar.mat-toolbar-single-row {
|
||||
.adf-empty-content__icon {
|
||||
color: var(--theme-secondary-text);
|
||||
}
|
||||
|
||||
.aca-details-tabs {
|
||||
#{$mat-tab-label-text} {
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
mat-snack-bar-container {
|
||||
#{$mat-button}#{$mat-unthemed} {
|
||||
--mdc-text-button-label-text-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-warning-snackbar,
|
||||
.adf-info-snackbar,
|
||||
.adf-error-snackbar {
|
||||
--mat-mdc-snack-bar-button-color: #fff;
|
||||
--mdc-snackbar-supporting-text-color: #fff;
|
||||
--mdc-text-button-label-text-color: #fff;
|
||||
}
|
||||
|
||||
.adf-warning-snackbar {
|
||||
--mdc-snackbar-container-color: var(--theme-accent-color);
|
||||
}
|
||||
|
||||
.adf-info-snackbar {
|
||||
--mdc-snackbar-container-color: var(--theme-info-snackbar-background);
|
||||
}
|
||||
|
||||
.adf-error-snackbar {
|
||||
--mdc-snackbar-container-color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
#{$mat-calendar} {
|
||||
#{$mat-calendar-period-button}:is(button) {
|
||||
width: unset;
|
||||
height: unset;
|
||||
padding: 0 16px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-radio-button} #{$mat-radio}:is(div) {
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
|
||||
#{$mdc-form-field} > label:is(label) {
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
#{$mat-tab-ripple} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#{$mat-form-field-infix} {
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
#{$mat-tab-labels} {
|
||||
border-bottom: 1px solid var(--adf-theme-foreground-text-color-014);
|
||||
}
|
||||
|
||||
#{$mat-tab-list} {
|
||||
#{$mat-tab-labels} {
|
||||
#{$mat-tab-label-active} {
|
||||
color: var($selected-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-tab-label}:not(#{$mat-tab-disabled})#{$mat-tab-label-active} #{$mat-tab-label-text} {
|
||||
color: var(--theme-sidenav-active-text-color);
|
||||
}
|
||||
|
||||
adf-dynamic-component {
|
||||
mat-icon#{$mat-icon}#{$mat-submenu-icon} {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-menu-item} #{$mat-icon-no-color},
|
||||
#{$mat-mdc-submenu-icon} {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
|
||||
#{$mat-notched-outline-trailing},
|
||||
#{$mat-notched-outline-notch},
|
||||
#{$mat-notched-outline-leading} {
|
||||
border-color: var(--adf-theme-foreground-text-color-014);
|
||||
}
|
||||
|
||||
#{$mat-menu-surface}#{$mat-autocomplete-panel}:is(div) {
|
||||
padding: 0;
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-list-item}#{$mat-list-item-disabled} {
|
||||
#{$mat-list-item-primary-text}:is(div) {
|
||||
color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-tab-group}#{$mat-tab-group-stretch} > #{$mat-tab-header} {
|
||||
#{$mat-tab-label}:is(div) {
|
||||
flex-grow: unset;
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-row {
|
||||
.adf-datatable-checkbox {
|
||||
#{$mat-checkbox} label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,6 +42,7 @@ $search-chip-icon-color: #757575;
|
||||
$disabled-chip-background-color: #f5f5f5;
|
||||
$contrast-gray: mat.get-color-from-palette($foreground, 'secondary-tex');
|
||||
$search-highlight-background-color: #ffd180;
|
||||
$info-snackbar-background: #1f74db;
|
||||
|
||||
// CSS Variables
|
||||
$defaults: (
|
||||
@ -67,6 +68,7 @@ $defaults: (
|
||||
--theme-grey-background-color: $grey-background,
|
||||
--theme-grey-hover-background-color: $grey-hover-background,
|
||||
--theme-blue-button-color: $blue-save-button-background,
|
||||
--theme-info-snackbar-background: $info-snackbar-background,
|
||||
--theme-heading-color: $black-heading,
|
||||
--theme-dropdown-color: $theme-dropdown-background,
|
||||
--theme-dropdown-background-hover: $theme-dropdown-background-hover,
|
||||
|
||||
@ -29,22 +29,7 @@ import 'zone.js/testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: {
|
||||
context(
|
||||
path: string,
|
||||
deep?: boolean,
|
||||
filter?: RegExp
|
||||
): {
|
||||
keys(): string[];
|
||||
<T>(id: string): T;
|
||||
};
|
||||
};
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
|
||||
teardown: { destroyAfterEach: false }
|
||||
});
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().forEach(context);
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
|
||||
.adf-toolbar-divider {
|
||||
display: inline;
|
||||
|
||||
@ -29,21 +29,5 @@ import 'zone.js/testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: {
|
||||
context(
|
||||
path: string,
|
||||
deep?: boolean,
|
||||
filter?: RegExp
|
||||
): {
|
||||
<T>(id: string): T;
|
||||
keys(): string[];
|
||||
};
|
||||
};
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
|
||||
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().forEach(context);
|
||||
|
||||
@ -52,8 +52,7 @@ export enum ActionType {
|
||||
export class ActionsDropdownComponent extends BaseComponent {
|
||||
private static rootElement = 'aca-edit-rule-dialog aca-rule-action-list';
|
||||
|
||||
private getOptionLocator = (optionName: string): Locator =>
|
||||
this.page.locator('.mat-select-panel .mat-option-text', { hasText: optionName }).first();
|
||||
private getOptionLocator = (optionName: string): Locator => this.page.locator('.mat-mdc-select-panel .mdc-list-item__primary-text', { hasText: optionName }).first();
|
||||
private ruleActionLocator = this.getChild('aca-rule-action');
|
||||
private addActionButtonLocator = this.getChild('[data-automation-id="rule-action-list-add-action-button"]');
|
||||
private actionDropdownLocator = this.getChild('[data-automation-id="rule-action-select"]');
|
||||
@ -61,7 +60,7 @@ export class ActionsDropdownComponent extends BaseComponent {
|
||||
private actionCheckInInputLocator = '[data-automation-id="header-description"] input';
|
||||
private actionAutoDeclareLocator = '[data-automation-id="header-version"] mat-select';
|
||||
private actionSimpleWorkflowStepInputLocator = '[data-automation-id="header-approve-step"] input';
|
||||
private actionSimpleWorkflowApproveFolderLocator = `[data-automation-id="header-approve-folder"] input`;
|
||||
private actionSimpleWorkflowApproveFolderLocator = `[data-automation-id="header-approve-folder"] mat-icon`;
|
||||
private actionSimpleWorkflowActionChoiceLocator = '[data-automation-id="content-node-selector-actions-choose"]';
|
||||
private actionSimpleWorkflowLabelApproveLocator = `[data-automation-id="card-boolean-label-approve-move"]`;
|
||||
private actionSimpleWorkflowSRejectStepLocator = '[data-automation-id="header-reject-step"] input';
|
||||
|
||||
@ -32,10 +32,10 @@ export class AdfInfoDrawerComponent extends BaseComponent {
|
||||
super(page, AdfInfoDrawerComponent.rootElement);
|
||||
}
|
||||
|
||||
public getNameField = (labelText: string) => this.getChild('[data-automation-id="library-name-properties-wrapper"]', { hasText: labelText });
|
||||
public getIdField = (labelText: string) => this.getChild('[data-automation-id="library-id-properties-wrapper"]', { hasText: labelText });
|
||||
public getNameField = (labelText: string) => this.getChild(`[data-automation-id="library-name-properties-wrapper"] input[placeholder='${labelText}']`);
|
||||
public getIdField = (labelText: string) => this.getChild(`[data-automation-id="library-id-properties-wrapper"] input[placeholder='${labelText}']`);
|
||||
public getVisibilityField = (labelText: string) =>
|
||||
this.getChild('[data-automation-id="library-visibility-properties-wrapper"]', { hasText: labelText });
|
||||
this.getChild(`[data-automation-id="library-visibility-properties-wrapper"] mat-select[ng-reflect-placeholder='${labelText}']`);
|
||||
public getDescriptionField = this.getChild('[data-automation-id="library-description-properties-wrapper"] textarea');
|
||||
public propertiesTab = this.page.getByRole('tab', { name: 'Properties' });
|
||||
public commentsTab = this.page.getByRole('tab', { name: 'Comments' });
|
||||
@ -52,14 +52,14 @@ export class AdfInfoDrawerComponent extends BaseComponent {
|
||||
public editButton = this.page.getByRole('button', { name: 'Edit' });
|
||||
public cancelButton = this.page.getByRole('button', { name: 'Cancel' });
|
||||
public updateButton = this.page.getByRole('button', { name: 'Update' });
|
||||
public hintMessage = this.page.locator('.mat-hint');
|
||||
public errorMessage = this.page.locator('.mat-error');
|
||||
public hintMessage = this.page.locator('mat-hint');
|
||||
public errorMessage = this.page.locator('mat-error');
|
||||
public expandDetailsButton = this.getChild(`button[title='Expand panel']`);
|
||||
public expandedDetailsTabs = this.page.locator('.aca-details-container .mat-tab-label-content');
|
||||
public expandedDetailsTabs = this.page.locator('.aca-details-container .mdc-tab__text-label');
|
||||
public expandedDetailsPermissionsTab = this.expandedDetailsTabs.getByText('Permissions');
|
||||
public nameField = this.page.locator('label', { hasText: 'Name' });
|
||||
public idField = this.page.locator('label', { hasText: 'Library ID' });
|
||||
public descriptionField = this.page.locator('label', { hasText: 'Description' });
|
||||
public nameField = this.page.locator('input[placeholder=Name]');
|
||||
public idField = this.page.locator(`input[placeholder='Library ID']`);
|
||||
public descriptionField = this.page.locator('textarea[placeholder=Description]');
|
||||
public visibilityField = this.infoDrawerPanel.getByRole('combobox');
|
||||
public selectVisibility = (visibilityOption: string) => this.page.getByRole('listbox').getByRole('option', { name: visibilityOption }).click();
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@ export enum Comparator {
|
||||
}
|
||||
|
||||
export class ConditionComponent extends ManageRulesDialogComponent {
|
||||
private getOptionLocator = (optionName: string): Locator => this.page.locator(`.cdk-overlay-pane .mat-option span`, { hasText: optionName });
|
||||
private getOptionLocator = (optionName: string): Locator => this.page.locator(`.cdk-overlay-pane .mat-mdc-option span`, { hasText: optionName });
|
||||
|
||||
private async selectField(fields: Partial<Field>, index: number): Promise<void> {
|
||||
await this.fieldDropDown.nth(index).click();
|
||||
|
||||
@ -135,7 +135,7 @@ export class DataTableComponent extends BaseComponent {
|
||||
*
|
||||
* @returns reference to checkbox placed in row localized by the name
|
||||
*/
|
||||
getCheckboxForElement = (item: string): Locator => this.getRowByName(item).locator('mat-checkbox');
|
||||
getCheckboxForElement = (item: string): Locator => this.getRowByName(item).locator('.mat-mdc-checkbox');
|
||||
|
||||
getColumnHeaderByTitleLocator = (headerTitle: string): Locator => this.getChild('[role="columnheader"]', { hasText: headerTitle });
|
||||
|
||||
@ -241,23 +241,23 @@ export class DataTableComponent extends BaseComponent {
|
||||
const isSelected = await this.isRowSelected(name);
|
||||
if (!isSelected) {
|
||||
let row = this.getRowByName(name);
|
||||
await row.locator('mat-checkbox').click();
|
||||
await row.locator('.mat-checkbox-checked').waitFor({ state: 'attached' });
|
||||
await row.locator('.mat-mdc-checkbox').click();
|
||||
await row.locator('.mat-mdc-checkbox-checked').waitFor({ state: 'attached' });
|
||||
}
|
||||
}
|
||||
|
||||
async selectMultiItem(...names: string[]): Promise<void> {
|
||||
for (const name of names) {
|
||||
let row = this.getRowByName(name);
|
||||
await row.locator('mat-checkbox').click();
|
||||
await row.locator('.mat-checkbox-checked').waitFor({ state: 'attached' });
|
||||
await row.locator('.mat-mdc-checkbox').click();
|
||||
await row.locator('.mat-mdc-checkbox-checked').waitFor({ state: 'attached' });
|
||||
await this.page.waitForTimeout(1000);
|
||||
}
|
||||
}
|
||||
|
||||
async isRowSelected(itemName: string): Promise<boolean> {
|
||||
const row = this.getRowByName(itemName);
|
||||
return await row.locator('.adf-datatable-checkbox .mat-checkbox-checked').isVisible();
|
||||
return await row.locator('.adf-datatable-checkbox .mat-mdc-checkbox-checked').isVisible();
|
||||
}
|
||||
|
||||
async getColumnHeaders(): Promise<Array<string>> {
|
||||
|
||||
@ -26,7 +26,7 @@ import { Page, expect } from '@playwright/test';
|
||||
import { BaseComponent } from '../base.component';
|
||||
|
||||
export class MatMenuComponent extends BaseComponent {
|
||||
private static rootElement = '.mat-menu-content';
|
||||
private static rootElement = '.mat-mdc-menu-content';
|
||||
|
||||
constructor(page: Page) {
|
||||
super(page, MatMenuComponent.rootElement);
|
||||
@ -39,8 +39,8 @@ export class MatMenuComponent extends BaseComponent {
|
||||
public createFileFromTemplate = this.getChild('[id="app.create.fileFromTemplate"]');
|
||||
public createLibrary = this.getChild('[id="app.create.library"]');
|
||||
public getButtonByText = (text: string) => this.getChild('button', { hasText: text });
|
||||
public cancelEditingAction = this.getChild(`.mat-menu-item[title='Cancel Editing']`);
|
||||
public editOfflineAction = this.getChild(`.mat-menu-item[title='Edit Offline']`);
|
||||
public cancelEditingAction = this.getChild(`.mat-mdc-menu-item[title='Cancel Editing']`);
|
||||
public editOfflineAction = this.getChild(`.mat-mdc-menu-item[title='Edit Offline']`);
|
||||
|
||||
async clickMenuItem(menuItem: string): Promise<void> {
|
||||
const menuElement = this.getButtonByText(menuItem);
|
||||
@ -56,11 +56,11 @@ export class MatMenuComponent extends BaseComponent {
|
||||
}
|
||||
|
||||
async verifyActualMoreActions(expectedToolbarMore: string[]): Promise<void> {
|
||||
await this.page.locator('.mat-menu-content').waitFor({ state: 'attached' });
|
||||
let menus = await this.page.$$('.mat-menu-content .mat-menu-item');
|
||||
await this.page.locator('.mat-mdc-menu-content').waitFor({ state: 'attached' });
|
||||
let menus = await this.page.$$('.mat-mdc-menu-content .mat-mdc-menu-item');
|
||||
let actualMoreActions: string[] = await Promise.all(
|
||||
menus.map(async (button) => {
|
||||
const title = await (await button.$('span')).innerText();
|
||||
const title = await (await button.$('.mdc-list-item__primary-text span')).innerText();
|
||||
return title || '';
|
||||
})
|
||||
);
|
||||
|
||||
@ -40,6 +40,7 @@ export class AdfFolderDialogComponent extends BaseComponent {
|
||||
}
|
||||
|
||||
public getLabelText = (text: string) => this.getChild('label', { hasText: text });
|
||||
public getRequiredMarker = (text: string) => this.getLabelText(text).locator('.mat-mdc-form-field-required-marker');
|
||||
|
||||
/**
|
||||
* This method is used when we want to fill in Create new Folder Dialog and choose Create button
|
||||
|
||||
@ -37,7 +37,8 @@ export class AdfLibraryDialogComponent extends BaseComponent {
|
||||
}
|
||||
|
||||
public getLabelText = (text: string) => this.getChild('label', { hasText: text });
|
||||
public getDialogTitle = (text: string) => this.getChild('.mat-dialog-title', { hasText: text });
|
||||
public getRequiredMarker = (text: string) => this.getLabelText(text).locator('.mat-mdc-form-field-required-marker');
|
||||
public getDialogTitle = (text: string) => this.getChild('.mat-mdc-dialog-title', { hasText: text });
|
||||
public getErrorByText = (text: string): Locator => this.page.locator('mat-error', {hasText: text});
|
||||
|
||||
/**
|
||||
@ -49,9 +50,9 @@ export class AdfLibraryDialogComponent extends BaseComponent {
|
||||
* @param visibility visibility of the library
|
||||
*/
|
||||
async createLibraryWithNameAndId(nameInput: string, libraryIdInput: string, descriptionInput?: string, visibility?: string): Promise<void> {
|
||||
await this.getLabelText('Name *').fill(nameInput);
|
||||
await this.getLabelText('Library ID *').clear();
|
||||
await this.getLabelText('Library ID *').fill(libraryIdInput);
|
||||
await this.getLabelText('Name').fill(nameInput);
|
||||
await this.getLabelText('Library ID').clear();
|
||||
await this.getLabelText('Library ID').fill(libraryIdInput);
|
||||
if (descriptionInput) { await this.getLabelText('Description').fill(descriptionInput); }
|
||||
if (visibility) { await this.getLabelText(visibility).click(); }
|
||||
await this.createButton.click();
|
||||
|
||||
@ -34,9 +34,9 @@ export class ContentNodeSelectorDialog extends BaseComponent {
|
||||
|
||||
public cancelButton = this.getChild('[data-automation-id="content-node-selector-actions-cancel"]');
|
||||
public actionButton = this.getChild('[data-automation-id="content-node-selector-actions-choose"]');
|
||||
public locationDropDown = this.getChild('[id="site-dropdown-container"]');
|
||||
public locationDropDown = this.getChild('[id="site-dropdown-container"] mat-form-field');
|
||||
private selectedRow = this.getChild('.adf-is-selected');
|
||||
getOptionLocator = (optionName: string): Locator => this.page.locator('.mat-select-panel .mat-option-text', { hasText: optionName });
|
||||
getOptionLocator = (optionName: string): Locator => this.page.locator('.mat-mdc-select-panel .mdc-list-item__primary-text', { hasText: optionName });
|
||||
private getRowByName = (name: string | number): Locator => this.getChild(`adf-datatable-row`, { hasText: name.toString() });
|
||||
getDialogTitle = (text: string) => this.getChild('[data-automation-id="content-node-selector-title"]', { hasText: text });
|
||||
getBreadcrumb = (text: string) => this.getChild('[data-automation-id="current-folder"]', { hasText: text });
|
||||
|
||||
@ -35,7 +35,7 @@ export class LinkRulesDialog extends BaseComponent {
|
||||
cancelButton = this.getChild('[data-automation-id="content-node-selector-actions-cancel"]');
|
||||
selectFolderButton = this.getChild('button', { hasText: ' Select folder ' });
|
||||
emptyLinkRules = this.getChild('.adf-empty-content__title');
|
||||
getOptionLocator = (optionName: string): Locator => this.page.locator('.mat-select-panel .mat-option-text', { hasText: optionName });
|
||||
getOptionLocator = (optionName: string): Locator => this.page.locator('.mat-mdc-select-panel .mdc-list-item__primary-text', { hasText: optionName });
|
||||
private getRowByName = (name: string | number): Locator => this.getChild(`adf-datatable-row`, { hasText: name.toString() });
|
||||
getDialogTitle = (text: string) => this.getChild('[data-automation-id="content-node-selector-title"]', { hasText: text });
|
||||
getBreadcrumb = (text: string) => this.getChild('[data-automation-id="current-folder"]', { hasText: text });
|
||||
|
||||
@ -33,7 +33,7 @@ export class UploadNewVersionDialog extends BaseComponent {
|
||||
public majorOption = this.getChild('#adf-new-version-major');
|
||||
public minorOption = this.getChild('#adf-new-version-minor');
|
||||
public description = this.getChild('#adf-new-version-text-area');
|
||||
public title = this.getChild(' .mat-dialog-title');
|
||||
public title = this.getChild(' [data-automation-id="new-version-uploader-dialog-title"]');
|
||||
|
||||
constructor(page: Page) {
|
||||
super(page, UploadNewVersionDialog.rootElement);
|
||||
|
||||
@ -29,8 +29,8 @@ export class ManageRules extends BaseComponent {
|
||||
private static rootElement = '.aca-manage-rules';
|
||||
|
||||
public getGroupsList = (optionName: string): Locator => this.getChild('.aca-rule-list-item__header', { hasText: optionName });
|
||||
public ruleToggle = this.getChild('.aca-manage-rules__container .mat-slide-toggle-bar').first();
|
||||
public ruleToggleFalse = this.getChild('aca-rule-list-grouping input[type="checkbox"][aria-checked="false"]').first();
|
||||
public ruleToggle = this.getChild('.aca-manage-rules__container .mdc-switch').first();
|
||||
public ruleToggleFalse = this.getChild('aca-rule-list-grouping aca-rule-list-item .mdc-switch--unselected').first();
|
||||
public ruleDetailsTitle = this.getChild('.aca-manage-rules__container__rule-details__header__title__name');
|
||||
public ruleDetailsDeleteButton = this.getChild('#delete-rule-btn');
|
||||
public ruleDetailsEditButton = this.getChild('#edit-rule-btn');
|
||||
@ -59,7 +59,7 @@ export class ManageRules extends BaseComponent {
|
||||
async checkIfRuleIsOnTheList(ruleName: string): Promise<void> {
|
||||
await expect(this.getGroupsList(ruleName)).toBeVisible({ timeout: 5000 });
|
||||
}
|
||||
|
||||
|
||||
async countConditionsInGroup(): Promise<number> {
|
||||
return await this.ruleConditionsInGroup.count();
|
||||
}
|
||||
|
||||
@ -100,7 +100,7 @@ export class SearchFiltersDate extends BaseComponent {
|
||||
startDay,
|
||||
endDay
|
||||
} = params;
|
||||
|
||||
|
||||
await searchPage.searchWithin(searchPhrase, searchType);
|
||||
await searchPage.searchFilters.dateFilter.click();
|
||||
|
||||
@ -139,4 +139,12 @@ export class SearchFiltersDate extends BaseComponent {
|
||||
await expect(searchPage.searchFilters.dateFilter).toContainText(dateText, { ignoreCase: true });
|
||||
}
|
||||
}
|
||||
|
||||
async isModifiedTabSelected(): Promise<string> {
|
||||
return this.modifiedTab.getAttribute('aria-selected');
|
||||
}
|
||||
|
||||
async isSearchTabSelected(): Promise<string> {
|
||||
return this.createdTab.getAttribute('aria-selected');
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,13 +37,13 @@ export class SearchFiltersProperties extends BaseComponent {
|
||||
public fileSizeInput = this.getChild(`[placeholder$='Enter file size']`);
|
||||
public unitButton = this.getChild(`.adf-search-properties-file-size-unit`);
|
||||
public fileTypeInput = this.getChild(`[placeholder$='File Type']`);
|
||||
public atLeastOption = this.page.locator(`.mat-option`, { hasText: 'At Least' });
|
||||
public atMostOption = this.page.locator(`.mat-option`, { hasText: 'At Most' });
|
||||
public exactlyOption = this.page.locator(`.mat-option`, { hasText: 'Exactly' });
|
||||
public kbUnit = this.page.locator(`.mat-option`, { hasText: 'KB' });
|
||||
public mbUnit = this.page.locator(`.mat-option`, { hasText: 'MB' });
|
||||
public gbUnit = this.page.locator(`.mat-option`, { hasText: 'GB' });
|
||||
public dropdownOptions = this.page.locator(`.mat-option`);
|
||||
public atLeastOption = this.page.locator(`mat-option`, { hasText: 'At Least' });
|
||||
public atMostOption = this.page.locator(`mat-option`, { hasText: 'At Most' });
|
||||
public exactlyOption = this.page.locator(`mat-option`, { hasText: 'Exactly' });
|
||||
public kbUnit = this.page.locator(`mat-option`, { hasText: 'KB' });
|
||||
public mbUnit = this.page.locator(`mat-option`, { hasText: 'MB' });
|
||||
public gbUnit = this.page.locator(`mat-option`, { hasText: 'GB' });
|
||||
public dropdownOptions = this.page.locator(`mat-option`);
|
||||
|
||||
async setPropertiesParameters(
|
||||
page: SearchPage,
|
||||
|
||||
@ -28,9 +28,9 @@ import { BaseComponent } from '.././base.component';
|
||||
export class SearchOverlayComponent extends BaseComponent {
|
||||
private static rootElement = '.cdk-overlay-pane';
|
||||
|
||||
public searchFilesOption = this.getChild('label[for="content-input"]');
|
||||
public searchFoldersOption = this.getChild('label[for="folder-input"]');
|
||||
public searchLibrariesOption = this.getChild('label[for="libraries-input"]');
|
||||
public searchFilesOption = this.getChild('input#content-input');
|
||||
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 searchInputControl = this.page.locator('.app-search-control');
|
||||
@ -42,17 +42,17 @@ export class SearchOverlayComponent extends BaseComponent {
|
||||
|
||||
async isFoldersOptionChecked() {
|
||||
const optClass = await this.searchFoldersOption.getAttribute('class');
|
||||
return optClass.includes('mat-checkbox-checked');
|
||||
return optClass.includes('.mat-mdc-checkbox-checked');
|
||||
}
|
||||
|
||||
async isFilesOptionChecked() {
|
||||
const optClass = await this.searchFilesOption.getAttribute('class');
|
||||
return optClass.includes('mat-checkbox-checked');
|
||||
return optClass.includes('.mat-mdc-checkbox-checked');
|
||||
}
|
||||
|
||||
async isLibrariesOptionChecked() {
|
||||
const optClass = await this.searchLibrariesOption.getAttribute('class');
|
||||
return optClass.includes('mat-checkbox-checked');
|
||||
return optClass.includes('.mat-mdc-checkbox-checked');
|
||||
}
|
||||
|
||||
async clearOptions() {
|
||||
|
||||
@ -33,8 +33,8 @@ export class SearchSortingPicker extends BaseComponent {
|
||||
|
||||
public actionMenu = this.page.locator('[data-automation-id="auto_header_content_id_$thumbnail"]');
|
||||
public sortOrderButton = this.page.locator('#aca-button-sorting-menu');
|
||||
public sortByDropdownExpanded = this.page.locator('.mat-menu-panel').first();
|
||||
public sortByList = this.page.locator('.mat-menu-panel button');
|
||||
public sortByDropdownExpanded = this.page.locator('.mat-mdc-menu-panel').first();
|
||||
public sortByList = this.page.locator('.mat-mdc-menu-panel button');
|
||||
|
||||
constructor(page: Page, rootElement = SearchSortingPicker.rootElement) {
|
||||
super(page, rootElement);
|
||||
@ -76,7 +76,7 @@ export class SearchSortingPicker extends BaseComponent {
|
||||
await this.clickSortByDropdown();
|
||||
}
|
||||
const elem = this.sortByList.getByText(option);
|
||||
const optionId = await elem.getAttribute('id');
|
||||
const optionId = await elem.locator("..").getAttribute('id');
|
||||
await elem.click();
|
||||
const directionSortElement = this.page.locator(`[id="${optionId}-${direction.toLocaleLowerCase()}"]`);
|
||||
await directionSortElement.click();
|
||||
|
||||
@ -9,15 +9,15 @@
|
||||
"@alfresco/adf-core": ">=6.10.0-0",
|
||||
"@alfresco/adf-extensions": ">=6.10.0-0",
|
||||
"@alfresco/js-api": ">=7.9.0-0",
|
||||
"@angular/animations": ">=14.1.3",
|
||||
"@angular/common": ">=14.1.3",
|
||||
"@angular/compiler": ">=14.1.3",
|
||||
"@angular/core": ">=14.1.3",
|
||||
"@angular/forms": ">=14.1.3",
|
||||
"@angular/material": ">=14.1.3",
|
||||
"@ngrx/effects": ">=14.2.0",
|
||||
"@ngrx/router-store": ">=14.2.0",
|
||||
"@ngrx/store": ">=14.2.0",
|
||||
"@angular/animations": ">=15.2",
|
||||
"@angular/common": ">=15.2",
|
||||
"@angular/compiler": ">=15.2",
|
||||
"@angular/core": ">=15.2",
|
||||
"@angular/forms": ">=15.2",
|
||||
"@angular/material": ">=15.2",
|
||||
"@ngrx/effects": ">=15.2.0",
|
||||
"@ngrx/router-store": ">=15.2",
|
||||
"@ngrx/store": ">=15.2",
|
||||
"@ngx-translate/core": ">=14.0.0",
|
||||
"rxjs": ">=6.6.6",
|
||||
"tslib": ">=2.0.0",
|
||||
|
||||
@ -25,7 +25,10 @@
|
||||
"codeCoverage": true,
|
||||
"main": "projects/aca-shared/test.ts",
|
||||
"tsConfig": "projects/aca-shared/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/aca-shared/karma.conf.js"
|
||||
"karmaConfig": "projects/aca-shared/karma.conf.js",
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": ["node_modules"]
|
||||
}
|
||||
},
|
||||
"configurations": {
|
||||
"adfprod": {
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
min-width: 14px;
|
||||
}
|
||||
|
||||
&--label,
|
||||
|
||||
@ -1,18 +1,22 @@
|
||||
<div class="aca-mobile-application-container">
|
||||
<span>{{ 'APP.DIALOGS.MOBILE_APP.OPEN_ALFRESCO_MOBILE_APP' | translate }}</span>
|
||||
<button mat-button class="aca-cross-button" (click)="onCloseDialog()">
|
||||
<mat-icon class="aca-cross-button-icon">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="aca-open-in-app">
|
||||
<div class="aca-mobile-application-container">
|
||||
<span>{{ 'APP.DIALOGS.MOBILE_APP.OPEN_ALFRESCO_MOBILE_APP' | translate }}</span>
|
||||
<button mat-icon-button mat-dialog-close class="aca-cross-button" (click)="onCloseDialog()" >
|
||||
<mat-icon class="aca-cross-button-icon">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="aca-open-in-app-container">
|
||||
<button mat-button (click)="openInApp()" data-automation-id="open-in-app-button" class="aca-open-in-app-container-button" cdkFocusInitial>
|
||||
<span>{{ 'APP.DIALOGS.MOBILE_APP.MOBILE_APP_BUTTON_LABEL' | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="aca-open-in-app-button-container">
|
||||
<button mat-button (click)="openInApp()"
|
||||
data-automation-id="open-in-app-button"
|
||||
class="aca-open-in-app-button-container" cdkFocusInitial>
|
||||
<span>{{ 'APP.DIALOGS.MOBILE_APP.MOBILE_APP_BUTTON_LABEL' | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="aca-download-app-container" *ngIf="appStoreUrl">
|
||||
<button mat-button data-automation-id="download-app-button" class="aca-download-app-container-button" (click)="downloadIosApp()">
|
||||
<span>{{ 'APP.DIALOGS.MOBILE_APP.DOWNLOAD_APP_BUTTON_LABEL' | translate }}</span>
|
||||
</button>
|
||||
<div class="aca-download-app-container" *ngIf="appStoreUrl">
|
||||
<button mat-button data-automation-id="download-app-button" class="aca-download-app-container-button" (click)="downloadIosApp()">
|
||||
<span>{{ 'APP.DIALOGS.MOBILE_APP.DOWNLOAD_APP_BUTTON_LABEL' | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,60 +1,65 @@
|
||||
aca-open-in-app {
|
||||
.aca-open-in-app-container {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
background-color: var(--theme-primary-color);
|
||||
color: var(--theme-about-panel-background-color);
|
||||
margin-top: 12px;
|
||||
@import '@alfresco/adf-core/lib/styles/mat-selectors';
|
||||
|
||||
&-button {
|
||||
aca-open-in-app {
|
||||
.aca-open-in-app {
|
||||
.aca-open-in-app-button-container {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
background-color: var(--theme-primary-color);
|
||||
height: 48px;
|
||||
overflow-x: hidden;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
height: 48px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
border-radius: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aca-download-app-container {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
margin-top: 12px;
|
||||
.aca-download-app-container {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&-button {
|
||||
background: var(--theme-dialog-background-color);
|
||||
color: var(--theme-primary-color);
|
||||
&-button {
|
||||
background: var(--theme-dialog-background-color);
|
||||
color: var(--theme-primary-color);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.aca-mobile-application-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.aca-mobile-application-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.aca-cross-button {
|
||||
padding-right: 0;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
border-radius: unset;
|
||||
padding: 6px 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-weight: bold;
|
||||
font-size: 21px;
|
||||
height: 21px;
|
||||
.aca-cross-button {
|
||||
padding-right: 0;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
border-radius: unset;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-button} {
|
||||
--mat-mdc-button-persistent-ripple-color: unset;
|
||||
--mat-mdc-button-ripple-color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
*/
|
||||
|
||||
import { Component, Inject, ViewEncapsulation } from '@angular/core';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
@ -36,7 +36,7 @@ export interface OpenInAppDialogOptions {
|
||||
}
|
||||
@Component({
|
||||
standalone: true,
|
||||
imports: [CommonModule, TranslateModule, MatButtonModule, MatIconModule, A11yModule],
|
||||
imports: [CommonModule, TranslateModule, MatButtonModule, MatIconModule, A11yModule, MatDialogModule],
|
||||
selector: 'aca-open-in-app',
|
||||
templateUrl: './open-in-app.component.html',
|
||||
styleUrls: ['./open-in-app.component.scss'],
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<div class="aca-content-header">
|
||||
<button *ngIf="(appNavNarMode$ | async) === 'collapsed'"
|
||||
mat-icon-button
|
||||
class="aca-content-header-button"
|
||||
(click)="toggleClick()"
|
||||
title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">
|
||||
<mat-icon>keyboard_double_arrow_right</mat-icon>
|
||||
|
||||
@ -9,6 +9,10 @@
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-button {
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.aca-page-layout-header {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<ng-container [ngSwitch]="actionRef.type">
|
||||
<ng-container *ngSwitchCase="'default'">
|
||||
<div *ngSwitchCase="'default'" class="aca-toolbar-action-container">
|
||||
<app-toolbar-button [type]="type" [actionRef]="actionRef" [color]="color"> </app-toolbar-button>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<ng-container *ngSwitchCase="'button'">
|
||||
<div *ngSwitchCase="'button'" class="aca-toolbar-action-container">
|
||||
<app-toolbar-button [type]="data?.buttonType || type" [actionRef]="actionRef" [color]="color" [data]="actionRef.data"> </app-toolbar-button>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<div *ngSwitchCase="'separator'" [id]="actionRef.id" class="aca-toolbar-divider"></div>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<app-toolbar-menu [actionRef]="actionRef" [color]="color" [data]="actionRef.data"></app-toolbar-menu>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'custom'">
|
||||
<div *ngSwitchCase="'custom'" class="aca-toolbar-action-container">
|
||||
<adf-dynamic-component [data]="actionRef.data" [id]="actionRef.component"></adf-dynamic-component>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
.aca-toolbar-action {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.aca-toolbar-action-container {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
@import '@alfresco/adf-core/lib/styles/mat-selectors';
|
||||
|
||||
.app-toolbar-menu-item:last-child > #{$mat-divider-horizontal} {
|
||||
display: none;
|
||||
}
|
||||
@ -36,13 +36,7 @@ import { IconComponent } from '@alfresco/adf-core';
|
||||
imports: [CommonModule, TranslateModule, MatMenuModule, MatDividerModule, IconComponent, DynamicExtensionComponent],
|
||||
selector: 'app-toolbar-menu-item',
|
||||
templateUrl: './toolbar-menu-item.component.html',
|
||||
styles: [
|
||||
`
|
||||
.app-toolbar-menu-item:last-child > .mat-divider-horizontal {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
],
|
||||
styleUrls: ['./toolbar-menu-item.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'app-toolbar-menu-item' }
|
||||
})
|
||||
|
||||
@ -29,13 +29,7 @@ import 'zone.js/testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: any;
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
|
||||
teardown: { destroyAfterEach: false }
|
||||
});
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().map(context);
|
||||
|
||||
@ -31,8 +31,8 @@ export class ContentNodeSelectorDialog extends GenericDialog {
|
||||
copyButton = this.childElement(by.cssContainingText('[data-automation-id="content-node-selector-actions-choose"]', 'Copy'));
|
||||
|
||||
locationDropDown = this.rootElem.element(by.id('site-dropdown-container'));
|
||||
locationPersonalFiles = browser.element(by.cssContainingText('.mat-option .mat-option-text', 'Personal Files'));
|
||||
locationFileLibraries = browser.element(by.cssContainingText('.mat-option .mat-option-text', 'My Libraries'));
|
||||
locationPersonalFiles = browser.element(by.cssContainingText('.mat-mdc-option .mdc-list-item__primary-text', 'Personal Files'));
|
||||
locationFileLibraries = browser.element(by.cssContainingText('.mat-mdc-option .mdc-list-item__primary-text', 'My Libraries'));
|
||||
|
||||
searchInput = this.rootElem.element(by.css('#searchInput'));
|
||||
|
||||
@ -47,7 +47,7 @@ export class ContentNodeSelectorDialog extends GenericDialog {
|
||||
}
|
||||
|
||||
async waitForDropDownToClose(): Promise<void> {
|
||||
await waitForStaleness(browser.$('.mat-option .mat-option-text'));
|
||||
await waitForStaleness(browser.$('.mat-mdc-option .mdc-list-item__primary-text'));
|
||||
}
|
||||
|
||||
async selectLocation(location: string): Promise<void> {
|
||||
|
||||
@ -27,13 +27,13 @@ import { GenericDialog } from './generic-dialog';
|
||||
import { click, getInputValue, isPresentAndDisplayed, isPresentAndEnabled, typeText, waitUntilElementIsClickable } from '../../utilities';
|
||||
|
||||
export class CreateOrEditFolderDialog extends GenericDialog {
|
||||
createButton = this.childElement(by.cssContainingText('.mat-dialog-actions button', 'Create'));
|
||||
createButton = this.childElement(by.cssContainingText('.mat-mdc-dialog-actions button', 'Create'));
|
||||
cancelButton = this.childElement(by.id('adf-folder-cancel-button'));
|
||||
updateButton = this.childElement(by.cssContainingText('.mat-dialog-actions button', 'Update'));
|
||||
updateButton = this.childElement(by.cssContainingText('.mat-mdc-dialog-actions button', 'Update'));
|
||||
|
||||
nameInput = this.rootElem.element(by.id('adf-folder-name-input'));
|
||||
descriptionTextArea = this.rootElem.element(by.id('adf-folder-description-input'));
|
||||
validationMessage = this.rootElem.element(by.css('.mat-hint span'));
|
||||
validationMessage = this.rootElem.element(by.css('.mat-mdc-form-field-hint span'));
|
||||
|
||||
constructor() {
|
||||
super('adf-folder-dialog');
|
||||
|
||||
@ -33,11 +33,11 @@ export abstract class GenericDialog {
|
||||
}
|
||||
|
||||
get title(): ElementFinder {
|
||||
return this.rootElem.element(by.css('.mat-dialog-title'));
|
||||
return this.rootElem.element(by.css('.mat-mdc-dialog-title'));
|
||||
}
|
||||
|
||||
get content(): ElementFinder {
|
||||
return this.rootElem.element(by.css('.mat-dialog-content'));
|
||||
return this.rootElem.element(by.css('.mat-mdc-dialog-content'));
|
||||
}
|
||||
|
||||
async getText(): Promise<string> {
|
||||
|
||||
@ -27,26 +27,26 @@ import { Component } from '../component';
|
||||
import { waitForPresence, waitForStaleness, typeText, click } from '../../utilities';
|
||||
|
||||
export class LibraryMetadata extends Component {
|
||||
visibilityDropDown = this.component.element(by.css('.mat-select'));
|
||||
visibilityPublic = this.byCssText('.mat-option .mat-option-text', 'Public', browser);
|
||||
visibilityPrivate = this.byCssText('.mat-option .mat-option-text', 'Private', browser);
|
||||
visibilityModerated = this.byCssText('.mat-option .mat-option-text', 'Moderated', browser);
|
||||
visibilityValue = this.byCss('[data-automation-id="library-visibility-properties-wrapper"] .mat-select');
|
||||
visibilityDropDown = this.component.element(by.css('.mat-mdc-select'));
|
||||
visibilityPublic = this.byCssText('.mat-mdc-option .mdc-list-item__primary-text', 'Public', browser);
|
||||
visibilityPrivate = this.byCssText('.mat-mdc-option .mdc-list-item__primary-text', 'Private', browser);
|
||||
visibilityModerated = this.byCssText('.mat-mdc-option .mdc-list-item__primary-text', 'Moderated', browser);
|
||||
visibilityValue = this.byCss('[data-automation-id="library-visibility-properties-wrapper"] .mat-mdc-select');
|
||||
|
||||
hint = this.byCss('.mat-hint');
|
||||
error = this.byCss('.mat-error');
|
||||
hint = this.byCss('.mat-mdc-form-field-hint');
|
||||
error = this.byCss('.mat-mdc-form-field-error');
|
||||
|
||||
constructor(ancestor?: string) {
|
||||
super('app-library-metadata-form', ancestor);
|
||||
}
|
||||
|
||||
private getLabelWrapper(label: string) {
|
||||
return this.byCssText('.mat-form-field-label-wrapper', label);
|
||||
return this.byCssText('.mat-mdc-floating-label', label);
|
||||
}
|
||||
|
||||
private getFieldByName(fieldName: string) {
|
||||
const wrapper = this.getLabelWrapper(fieldName);
|
||||
return wrapper.element(by.xpath('..')).element(by.css('.mat-input-element'));
|
||||
return wrapper.element(by.xpath('..')).element(by.css('.mat-mdc-input-element'));
|
||||
}
|
||||
|
||||
private async isFieldDisplayed(fieldName: string) {
|
||||
@ -67,7 +67,7 @@ export class LibraryMetadata extends Component {
|
||||
}
|
||||
|
||||
private getButton(button: string) {
|
||||
return this.byCssText('.mat-card-actions .mat-button', button);
|
||||
return this.byCssText('.mat-mdc-card-actions .mat-mdc-button', button);
|
||||
}
|
||||
|
||||
private async isButtonDisplayed(button: string) {
|
||||
@ -83,7 +83,7 @@ export class LibraryMetadata extends Component {
|
||||
}
|
||||
|
||||
async waitForVisibilityDropDownToClose() {
|
||||
await waitForStaleness(browser.$('.mat-option .mat-option-text'));
|
||||
await waitForStaleness(browser.$('.mat-mdc-option .mdc-list-item__primary-text'));
|
||||
}
|
||||
|
||||
async isMessageDisplayed() {
|
||||
@ -136,7 +136,7 @@ export class LibraryMetadata extends Component {
|
||||
|
||||
async isVisibilityEnabled() {
|
||||
const wrapper = this.getLabelWrapper('Visibility');
|
||||
const field = wrapper.element(by.xpath('..')).element(by.css('.mat-select'));
|
||||
const field = wrapper.element(by.xpath('..')).element(by.css('.mat-mdc-select'));
|
||||
return field.isEnabled();
|
||||
}
|
||||
|
||||
|
||||
@ -27,28 +27,28 @@ import { Component } from '../component';
|
||||
import { click, waitForPresence, waitForStaleness, waitUntilElementIsVisible } from '../../utilities';
|
||||
|
||||
export class Menu extends Component {
|
||||
items = this.allByCss('.mat-menu-item');
|
||||
items = this.allByCss('.mat-mdc-menu-item');
|
||||
uploadFilesInput = this.byId('app-upload-files', browser);
|
||||
cancelEditingAction = this.byCss(`.mat-menu-item[title='Cancel Editing']`);
|
||||
cancelEditingAction = this.byCss(`.mat-mdc-menu-item[title='Cancel Editing']`);
|
||||
copyAction = this.byTitleAttr('Copy');
|
||||
editFolderAction = this.byCss(`.mat-menu-item[id$='editFolder']`);
|
||||
editOfflineAction = this.byCss(`.mat-menu-item[title='Edit Offline']`);
|
||||
editFolderAction = this.byCss(`.mat-mdc-menu-item[id$='editFolder']`);
|
||||
editOfflineAction = this.byCss(`.mat-mdc-menu-item[title='Edit Offline']`);
|
||||
|
||||
constructor(ancestor?: string) {
|
||||
super('.mat-menu-panel', ancestor);
|
||||
super('.mat-mdc-menu-panel', ancestor);
|
||||
}
|
||||
|
||||
async waitForMenuToOpen(): Promise<void> {
|
||||
await waitForPresence(browser.element(by.css('.cdk-overlay-container .mat-menu-panel')));
|
||||
await waitForPresence(browser.element(by.css('.cdk-overlay-container .mat-mdc-menu-panel')));
|
||||
await waitUntilElementIsVisible(this.items.get(0));
|
||||
}
|
||||
|
||||
async waitForMenuToClose(): Promise<void> {
|
||||
await waitForStaleness(browser.element(by.css('.cdk-overlay-container .mat-menu-panel')));
|
||||
await waitForStaleness(browser.element(by.css('.cdk-overlay-container .mat-mdc-menu-panel')));
|
||||
}
|
||||
|
||||
private getItemByLabel(menuItem: string): ElementFinder {
|
||||
return this.byCssText('.mat-menu-item', menuItem);
|
||||
return this.byCssText('.mat-mdc-menu-item', menuItem);
|
||||
}
|
||||
|
||||
async getItemIconText(menuItem: string): Promise<string> {
|
||||
|
||||
@ -27,8 +27,8 @@ import { GenericFilter } from './generic-filter';
|
||||
|
||||
export class AutocompleteChipsFilter extends GenericFilter {
|
||||
private readonly locators = {
|
||||
selectedOption: '.mat-chip span',
|
||||
input: '.mat-menu-content input',
|
||||
selectedOption: '.mat-mdc-chip span',
|
||||
input: '.mat-mdc-menu-content input',
|
||||
};
|
||||
|
||||
constructor(filterName: string) {
|
||||
|
||||
@ -27,10 +27,10 @@ import { GenericFilter } from './generic-filter';
|
||||
|
||||
export class FacetFilter extends GenericFilter {
|
||||
private readonly locators = {
|
||||
checkbox: '.mat-menu-content .mat-checkbox',
|
||||
checkboxChecked: '.mat-menu-content .mat-checkbox.mat-checkbox-checked',
|
||||
categoryInput: '.mat-menu-content input[data-automation-id^="facet-result-filter"]',
|
||||
facetsFilter: '.mat-menu-content .adf-facet-result-filter'
|
||||
checkbox: '.mat-mdc-menu-content .mat-mdc-checkbox',
|
||||
checkboxChecked: '.mat-mdc-menu-content .mat-mdc-checkbox.mat-mdc-checkbox-checked',
|
||||
categoryInput: '.mat-mdc-menu-content input[data-automation-id^="facet-result-filter"]',
|
||||
facetsFilter: '.mat-mdc-menu-content .adf-facet-result-filter'
|
||||
};
|
||||
|
||||
get facets(): ElementArrayFinder {
|
||||
|
||||
@ -32,8 +32,8 @@ export class FacetTabbedFilter extends GenericFilter {
|
||||
chipList: '.mat-tab-body-active .adf-chip-list',
|
||||
chipListInput: '.mat-tab-body-active .adf-chip-list input',
|
||||
currentTabLabel: '.mat-tab-label-active .mat-tab-label-content',
|
||||
chip: '.mat-chip span',
|
||||
option: '.mat-option-text'
|
||||
chip: '.mat-mdc-chip span',
|
||||
option: '.mdc-list-item__primary-text'
|
||||
};
|
||||
|
||||
chips: ElementArrayFinder = this.filterDialogOpened.all(by.css(this.locators.chip));
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user