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

[ACS-6693] Angular 15 migration initial point

Browse Source
This commit is contained in:
MichalKinas
2024-03-13 09:19:19 +01:00
parent 7982c1e7e7
commit 698b53d522
15 changed files with 101 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/app/app.module.ts
View File

@@ -92,8 +92,7 @@ registerLocaleData(localeSv);
!environment.production ? StoreDevtoolsModule.instrument({ maxAge: 25 }) : [], !environment.production ? StoreDevtoolsModule.instrument({ maxAge: 25 }) : [],
RouterModule.forRoot(APP_ROUTES, { RouterModule.forRoot(APP_ROUTES, {
useHash: true, useHash: true,
enableTracing: false, // enable for debug only enableTracing: false // enable for debug only
relativeLinkResolution: 'legacy'
}), }),
AppExtensionsModule, AppExtensionsModule,
ShellModule.withRoutes({ ShellModule.withRoutes({

42
package.json
View File

@@ -34,24 +34,24 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@alfresco/adf-content-services": "6.9.0-8694813215", "@alfresco/adf-content-services": "6.8.0-8186121470",
"@alfresco/adf-core": "6.9.0-8694813215", "@alfresco/adf-core": "6.8.0-8186121470",
"@alfresco/adf-extensions": "6.9.0-8694813215", "@alfresco/adf-extensions": "6.8.0-8186121470",
"@alfresco/eslint-plugin-eslint-angular": "6.9.0-8694813215", "@alfresco/eslint-plugin-eslint-angular": "6.8.0-8186121470",
"@alfresco/js-api": "7.8.0-8694813215", "@alfresco/js-api": "7.7.0-8186121470",
"@angular/animations": "14.1.3", "@angular/animations": "15.2.10",
"@angular/cdk": "14.1.3", "@angular/cdk": "15.2.9",
"@angular/common": "14.1.3", "@angular/common": "15.2.10",
"@angular/compiler": "14.1.3", "@angular/compiler": "15.2.10",
"@angular/core": "14.1.3", "@angular/core": "15.2.10",
"@angular/forms": "14.1.3", "@angular/forms": "15.2.10",
"@angular/material": "14.1.3", "@angular/material": "15.2.9",
"@angular/material-date-fns-adapter": "14.1.3", "@angular/material-date-fns-adapter": "15.2.9",
"@angular/platform-browser": "14.1.3", "@angular/platform-browser": "15.2.10",
"@angular/platform-browser-dynamic": "14.1.3", "@angular/platform-browser-dynamic": "15.2.10",
"@angular/router": "14.1.3", "@angular/router": "15.2.10",
"@fontsource/open-sans": "^5.0.27", "@fontsource/open-sans": "^5.0.27",
"@mat-datetimepicker/core": "^10.1.1", "@mat-datetimepicker/core": "11.0.3",
"@ngrx/effects": "^14.2.0", "@ngrx/effects": "^14.2.0",
"@ngrx/router-store": "^14.2.0", "@ngrx/router-store": "^14.2.0",
"@ngrx/store": "^14.2.0", "@ngrx/store": "^14.2.0",
@@ -66,7 +66,7 @@
"zone.js": "0.11.8" "zone.js": "0.11.8"
}, },
"devDependencies": { "devDependencies": {
"@alfresco/adf-cli": "6.9.0-8694813215", "@alfresco/adf-cli": "6.8.0-8186121470",
"@angular-devkit/build-angular": "14.2.11", "@angular-devkit/build-angular": "14.2.11",
"@angular-devkit/core": "14.1.2", "@angular-devkit/core": "14.1.2",
"@angular-devkit/schematics": "14.1.2", "@angular-devkit/schematics": "14.1.2",
@@ -76,8 +76,8 @@
"@angular-eslint/schematics": "14.4.0", "@angular-eslint/schematics": "14.4.0",
"@angular-eslint/template-parser": "^15.2.1", "@angular-eslint/template-parser": "^15.2.1",
"@angular/cli": "14.1.3", "@angular/cli": "14.1.3",
"@angular/compiler-cli": "14.1.3", "@angular/compiler-cli": "15.2.10",
"@angular/language-service": "14.1.3", "@angular/language-service": "15.2.10",
"@cspell/eslint-plugin": "^8.3.2", "@cspell/eslint-plugin": "^8.3.2",
"@nx/angular": "17.0.2", "@nx/angular": "17.0.2",
"@nx/eslint-plugin": "17.0.2", "@nx/eslint-plugin": "17.0.2",
@@ -128,7 +128,7 @@
"stylelint-config-standard-scss": "^7.0.1", "stylelint-config-standard-scss": "^7.0.1",
"ts-node": "^10.9.2", "ts-node": "^10.9.2",
"tsconfig-paths": "4.2.0", "tsconfig-paths": "4.2.0",
"typescript": "4.7.4", "typescript": "4.9.5",
"webdriver-manager": "12.1.8" "webdriver-manager": "12.1.8"
} }
} }

2
projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.html
View File

@@ -1,6 +1,6 @@
<form class="aca-rule-action__form" [formGroup]="form"> <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">
<mat-select <mat-select
formControlName="actionDefinitionId" formControlName="actionDefinitionId"
data-automation-id="rule-action-select" data-automation-id="rule-action-select"

4
projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.spec.ts
View File

@@ -62,7 +62,7 @@ describe('RuleOptionsUiComponent', () => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [FormsModule, ReactiveFormsModule, CoreTestingModule, RuleOptionsUiComponent], 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); fixture = TestBed.createComponent(RuleOptionsUiComponent);
@@ -153,7 +153,7 @@ describe('RuleOptionsUiComponent', () => {
expect((await matOptions[2].getText()).trim()).toBe('Script 2'); 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 even when MAT_FORM_FIELD_DEFAULT_OPTIONS sets floatLabel to auto', () => {
component.writeValue({ component.writeValue({
isEnabled: true, isEnabled: true,
isInheritable: false, isInheritable: false,

4
projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html
View File

@@ -4,7 +4,7 @@
<div class="aca-rule-details__form__row aca-rule-details__form__name"> <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> <label for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
<div> <div>
<mat-form-field floatLabel='never' class="aca-rule-details__form__row__field"> <mat-form-field floatLabel='auto' class="aca-rule-details__form__row__field">
<input <input
id="rule-details-name-input" id="rule-details-name-input"
matInput type="text" formControlName="name" data-automation-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"> <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> <label for="rule-details-description-textarea">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.DESCRIPTION' | translate }}</label>
<div> <div>
<mat-form-field floatLabel='never' class="aca-rule-details__form__row__field"> <mat-form-field floatLabel='auto' class="aca-rule-details__form__row__field">
<textarea <textarea
class="aca-rule-details__form__row__field__textarea" class="aca-rule-details__form__row__field__textarea"
id="rule-details-description-textarea" id="rule-details-description-textarea"

12
projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
View File

@@ -75,14 +75,16 @@
/* stylelint-disable selector-class-pattern */ /* stylelint-disable selector-class-pattern */
&.aca-read-only, &.aca-read-only,
.mat-form-field-disabled { .mat-mdc-form-field-disabled {
.mat-form-field-underline, .mdc-line-ripple {
.mat-select-arrow-wrapper { &::before,
display: none; &::after {
display: none;
}
} }
*:disabled, *:disabled,
.mat-select-disabled .mat-select-value { .mat-mdc-select-disabled .mat-mdc-select-value {
color: inherit; color: inherit;
} }
} }

2
projects/aca-content/src/lib/components/info-drawer/comments-tab/comments-tab.component.ts
View File

@@ -32,7 +32,7 @@ import { NodeCommentsModule } from '@alfresco/adf-content-services';
standalone: true, standalone: true,
imports: [MatCardModule, NodeCommentsModule], imports: [MatCardModule, NodeCommentsModule],
selector: 'app-comments-tab', selector: 'app-comments-tab',
template: `<mat-card><adf-node-comments [readOnly]="!canUpdateNode" [nodeId]="node?.id"></adf-node-comments></mat-card>`, template: `<mat-card appearance="raised"><adf-node-comments [readOnly]="!canUpdateNode" [nodeId]="node?.id"></adf-node-comments></mat-card>`,
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class CommentsTabComponent implements OnInit { export class CommentsTabComponent implements OnInit {

2
projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html
View File

@@ -1,4 +1,4 @@
<mat-card *ngIf="node"> <mat-card appearance="raised" *ngIf="node">
<mat-card-content> <mat-card-content>
<form [formGroup]="form" autocomplete="off"> <form [formGroup]="form" autocomplete="off">
<mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper" class="app-library-metadata-form-field"> <mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper" class="app-library-metadata-form-field">

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

@@ -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> <mat-icon class="app-search-input-control-icon app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button> </button>
<mat-form-field class="app-input-form-field" [floatLabel]="'never'"> <mat-form-field class="app-input-form-field" [floatLabel]="'auto'">
<input <input
matInput matInput
#searchInput #searchInput

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

@@ -24,11 +24,6 @@ $top-margin: 12px;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 12px; margin-bottom: 12px;
/* stylelint-disable-next-line selector-class-pattern */
.mat-form-field-underline {
display: none;
}
.app-input-form-field-input + span { .app-input-form-field-input + span {
cursor: text; cursor: text;
pointer-events: auto; pointer-events: auto;
@@ -41,6 +36,14 @@ $top-margin: 12px;
&-input { &-input {
letter-spacing: -0.7px; letter-spacing: -0.7px;
} }
/* stylelint-disable selector-class-pattern */
.mdc-line-ripple {
&::before,
&::after {
display: none;
}
}
} }
.app-search-button { .app-search-button {

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

@@ -7,7 +7,7 @@
<button mat-icon-button class="app-search-button" (click)="searchByOption()" [title]="'SEARCH.BUTTON.TOOLTIP' | translate"> <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> <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button> </button>
<mat-form-field class="app-input-form-field" [floatLabel]="'never'"> <mat-form-field class="app-input-form-field" [floatLabel]="'auto'">
<input <input
matInput matInput
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate" [attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"

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

@@ -85,12 +85,6 @@ $top-margin: 12px;
&-checkbox { &-checkbox {
padding: 3px 24px 3px 19px; padding: 3px 24px 3px 19px;
/* stylelint-disable-next-line selector-class-pattern */
.mat-checkbox-inner-container {
height: 18px;
width: 18px;
}
/* stylelint-disable-next-line no-descending-specificity */ /* stylelint-disable-next-line no-descending-specificity */
label { label {
padding: 0 0 0 11px; padding: 0 0 0 11px;

23
projects/aca-content/src/lib/ui/custom-theme.scss
View File

@@ -11,24 +11,19 @@ $mat-accent-palette: mat.define-palette($aca-accent-green, A200);
$mat-warn-palette: mat.define-palette($aca-warn, A100); $mat-warn-palette: mat.define-palette($aca-warn, A100);
$app-typography: mat.define-typography-config( $app-typography: mat.define-typography-config(
$font-family: 'Open Sans', $font-family: 'Open Sans',
$display-4: mat.define-typography-level(112px, 112px, 300), $headline-1: mat.define-typography-level(112px, 112px, 300),
$display-3: mat.define-typography-level(56px, 56px, 400), $headline-2: mat.define-typography-level(56px, 56px, 400),
$display-2: mat.define-typography-level(45px, 48px, 400), $headline-3: mat.define-typography-level(45px, 48px, 400),
$display-1: mat.define-typography-level(34px, 40px, 400), $headline-4: mat.define-typography-level(34px, 40px, 400),
$headline: mat.define-typography-level(24px, 32px, 400), $headline-5: mat.define-typography-level(24px, 32px, 400),
$title: mat.define-typography-level(20px, 32px, 500), $headline-6: mat.define-typography-level(20px, 32px, 400),
$subheading-2: mat.define-typography-level(16px, 28px, 400), $subtitle-1: mat.define-typography-level(16px, 28px, 400),
$subheading-1: mat.define-typography-level(15px, 24px, 400), $subtitle-2: mat.define-typography-level(14px, 24px, 500),
$body-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), $body-1: mat.define-typography-level(14px, 20px, 400),
$caption: mat.define-typography-level(12px, 20px, 400), $caption: mat.define-typography-level(12px, 20px, 400),
$button: mat.define-typography-level(14px, 14px, 500), $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)
); );
@include mat.core($app-typography);
$custom-theme: mat.define-light-theme( $custom-theme: mat.define-light-theme(
( (
color: ( color: (

65
projects/aca-content/src/lib/ui/overrides/ay11.scss
View File

@@ -1,23 +1,24 @@
/* stylelint-disable selector-class-pattern */ /* stylelint-disable selector-class-pattern */
@mixin ay11-theme() { @mixin ay11-theme() {
.mat-icon-button, .mat-mdc-icon-button,
.mat-button, .mat-mdc-button,
.mat-checkbox, .mat-mdc-checkbox,
.mat-raised-button { .mat-mdc-raised-button {
&:focus-visible { &:focus-visible {
@include rounded-outline; @include rounded-outline;
} }
.mat-ripple-element { .mat-ripple {
display: none; display: none;
} }
// TODO check if still applies
&.cdk-keyboard-focused { &.cdk-keyboard-focused {
.mat-button-focus-overlay { .mat-button-focus-overlay {
display: none; display: none;
} }
.mat-checkbox-ripple { .mat-mdc-checkbox-ripple {
@include rounded-outline; @include rounded-outline;
height: 22px; height: 22px;
@@ -28,25 +29,29 @@
} }
} }
.mat-mdc-form-field-focus-overlay {
background-color: transparent;
}
.adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected.mat-icon > svg { .adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected.mat-icon > svg {
fill: var(--theme-blue-button-color); fill: var(--theme-blue-button-color);
} }
.mat-list-base .mat-list-option { .mat-mdc-list-base .mat-mdc-list-option {
.mat-list-item-content { .mdc-list-item__content {
@include rounded-border(transparent); @include rounded-border(transparent);
} }
&:focus-visible { &:focus-visible {
background-color: white; background-color: white;
.mat-list-item-content { .mdc-list-item__content {
@include rounded-border; @include rounded-border;
} }
} }
} }
.adf-search-user-button.mat-button, .adf-search-user-button.mat-mdc-button,
.app-search-button { .app-search-button {
line-height: 36px; line-height: 36px;
@@ -59,9 +64,9 @@
} }
} }
.mat-menu-content { .mat-mdc-menu-content {
.mat-menu-item { .mat-mdc-menu-item {
.mat-menu-ripple { .mat-ripple {
display: none; display: none;
} }
@@ -83,15 +88,17 @@
padding: 2px; padding: 2px;
} }
.mat-option { .mat-mdc-option {
&.cdk-keyboard-focused { &.cdk-keyboard-focused {
.mat-option-ripple { .mat-mdc-option-ripple {
@include rounded-outline; @include rounded-outline;
} }
} }
} }
.mat-slide-toggle { // TODO investigate after app is run
.mat-mdc-slide-toggle {
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
.mat-slide-toggle-thumb { .mat-slide-toggle-thumb {
width: 15px; width: 15px;
height: 15px; height: 15px;
@@ -99,40 +106,46 @@
background-color: #484a4d; background-color: #484a4d;
} }
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
.mat-slide-toggle-bar { .mat-slide-toggle-bar {
border-radius: 15px; border-radius: 15px;
height: 20px; height: 20px;
} }
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
.mat-slide-toggle-thumb-container { .mat-slide-toggle-thumb-container {
top: -5px; top: -5px;
} }
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
.mat-slide-toggle-ripple { .mat-slide-toggle-ripple {
display: none; display: none;
} }
&.cdk-keyboard-focused { &.cdk-keyboard-focused {
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
.mat-slide-toggle-bar { .mat-slide-toggle-bar {
outline: 2px solid var(--theme-blue-button-color); outline: 2px solid var(--theme-blue-button-color);
} }
} }
&.mat-primary.mat-checked:not(.mat-disabled) { &.mat-primary.mat-checked:not(.mat-disabled) {
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
.mat-slide-toggle-bar { .mat-slide-toggle-bar {
background-color: var(--theme-blue-button-color); background-color: var(--theme-blue-button-color);
} }
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
.mat-slide-toggle-thumb { .mat-slide-toggle-thumb {
background-color: white; background-color: white;
} }
} }
} }
.mat-stroked-button, .mat-mdc-outlined-button,
.mat-flat-button { .mat-mdc-unelevated-button {
&.cdk-keyboard-focused { &.cdk-keyboard-focused {
.mat-button-ripple.mat-ripple { .mat-mdc-button-ripple.mat-ripple {
outline: 2px solid var(--theme-blue-button-color); outline: 2px solid var(--theme-blue-button-color);
inset: -4px; inset: -4px;
} }
@@ -160,7 +173,7 @@
box-sizing: border-box; box-sizing: border-box;
border: 2px solid transparent; border: 2px solid transparent;
.mat-button-base.mat-button { .mat-mdc-button-base.mat-mdc-button {
outline: none; outline: none;
@include rounded-border(transparent); @include rounded-border(transparent);
@@ -182,8 +195,8 @@
.adf-error-snackbar { .adf-error-snackbar {
background-color: #ba1b1b; background-color: #ba1b1b;
.mat-simple-snackbar, .mat-mdc-simple-snack-bar,
.mat-simple-snackbar-action { .mat-mdc-snack-bar-action {
color: white; color: white;
} }
} }
@@ -191,13 +204,13 @@
.adf-info-snackbar { .adf-info-snackbar {
background-color: var(--theme-blue-button-color); background-color: var(--theme-blue-button-color);
.mat-simple-snackbar, .mat-mdc-simple-snack-bar,
.mat-simple-snackbar-action { .mat-mdc-snack-bar-action {
color: white; color: white;
} }
} }
.mat-button-base { .mat-mdc-button-base {
&.adf-filter-button { &.adf-filter-button {
margin-left: -2px; margin-left: -2px;
} }
@@ -207,7 +220,7 @@
&__perpage-block, &__perpage-block,
&__actualinfo-block { &__actualinfo-block {
/* stylelint-disable-next-line no-descending-specificity */ /* stylelint-disable-next-line no-descending-specificity */
.mat-icon-button { .mat-mdc-icon-button {
left: 3px; left: 3px;
&:focus-visible { &:focus-visible {

16
projects/aca-content/src/lib/ui/theme.scss
View File

@@ -13,19 +13,17 @@ mat-toolbar {
color: var(--theme-secondary-text); color: var(--theme-secondary-text);
} }
.mat-tab-list { .mat-mdc-tab-list {
.mat-tab-labels { .mat-mdc-tab-labels {
.mat-tab-label { .mdc-tab--active {
&.mat-tab-label-active { color: #212121;
color: #212121;
}
} }
} }
} }
.mat-form-field-label-wrapper .mat-form-field-label, .mdc-floating-label,
.mat-tab-list .mat-tab-labels .mat-tab-label, .mat-mdc-tab-list .mat-mdc-tab-labels .mdc-tab,
.mat-checkbox-label, .mat-mdc-checkbox label,
mat-toolbar.mat-toolbar.mat-toolbar-multiple-row, mat-toolbar.mat-toolbar.mat-toolbar-multiple-row,
mat-toolbar.mat-toolbar.mat-toolbar-single-row { mat-toolbar.mat-toolbar.mat-toolbar-single-row {
color: var(--theme-secondary-text); color: var(--theme-secondary-text);