inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2026-09-09 18:02:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-7768] Form fields cleanup (#4956)

Browse Source 
* [ACS-7768] Form fields cleanup

* [ACS-7768] Move hint styling from ADF

* [ACS-7768] CR fixes

* [ACS-7768] Use latest ADF version

* [ACS-7768] E2E locator fix

* [ACS-7768] CR fix

* [ACS-7768] E2E locator fix
This commit is contained in:
Michal Kinas
2026-01-27 11:17:27 +01:00
committed by GitHub
parent 3fad8cce74
commit e13be780fb
37 changed files with 386 additions and 674 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/app/app.config.ts
+5
View File
@@ -50,6 +50,7 @@ import { CONTENT_LAYOUT_ROUTES, ContentServiceExtensionModule } from '@alfresco/
import { SHELL_APP_SERVICE, SHELL_AUTH_TOKEN, provideShellRoutes } from '@alfresco/adf-core/shell'; import { SHELL_APP_SERVICE, SHELL_AUTH_TOKEN, provideShellRoutes } from '@alfresco/adf-core/shell';
import { APP_ROUTES } from './app.routes'; import { APP_ROUTES } from './app.routes';
import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar'; import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
registerLocaleData(localeFr); registerLocaleData(localeFr);
registerLocaleData(localeDe); registerLocaleData(localeDe);
@@ -95,6 +96,10 @@ export const AppConfig: ApplicationConfig = {
duration: 10000, duration: 10000,
politeness: 'polite' politeness: 'polite'
} }
},
{
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: { appearance: 'outline', floatLabel: 'always', subscriptSizing: 'dynamic' }
} }
] ]
}; };
package-lock.json
Generated
+30 -30
View File
@@ -9,11 +9,11 @@
"version": "7.3.0", "version": "7.3.0",
"license": "LGPL-3.0", "license": "LGPL-3.0",
"dependencies": { "dependencies": {
"@alfresco/adf-content-services": "8.4.0-21353303004", "@alfresco/adf-content-services": "8.4.0-21387976035",
"@alfresco/adf-core": "8.4.0-21353303004", "@alfresco/adf-core": "8.4.0-21387976035",
"@alfresco/adf-extensions": "8.4.0-21353303004", "@alfresco/adf-extensions": "8.4.0-21387976035",
"@alfresco/eslint-plugin-eslint-angular": "8.4.0-21353303004", "@alfresco/eslint-plugin-eslint-angular": "8.4.0-21387976035",
"@alfresco/js-api": "9.4.0-21353303004", "@alfresco/js-api": "9.4.0-21387976035",
"@angular/animations": "19.2.18", "@angular/animations": "19.2.18",
"@angular/cdk": "19.2.18", "@angular/cdk": "19.2.18",
"@angular/common": "19.2.18", "@angular/common": "19.2.18",
@@ -46,7 +46,7 @@
"zone.js": "0.15.0" "zone.js": "0.15.0"
}, },
"devDependencies": { "devDependencies": {
"@alfresco/adf-cli": "8.4.0-21353303004", "@alfresco/adf-cli": "8.4.0-21387976035",
"@angular-devkit/build-angular": "19.2.19", "@angular-devkit/build-angular": "19.2.19",
"@angular-devkit/core": "19.2.18", "@angular-devkit/core": "19.2.18",
"@angular-devkit/schematics": "19.2.18", "@angular-devkit/schematics": "19.2.18",
@@ -103,13 +103,13 @@
} }
}, },
"node_modules/@alfresco/adf-cli": { "node_modules/@alfresco/adf-cli": {
"version": "8.4.0-21353303004", "version": "8.4.0-21387976035",
"resolved": "https://registry.npmjs.org/@alfresco/adf-cli/-/adf-cli-8.4.0-21353303004.tgz", "resolved": "https://registry.npmjs.org/@alfresco/adf-cli/-/adf-cli-8.4.0-21387976035.tgz",
"integrity": "sha512-MYFQOjFo509kgM07H3nskyvkBVeEpVpGEdeyHZyODvG4/lIQrKTIb3P32cw6dfY7JR4nud/8ntLE5qPB3sdUDw==", "integrity": "sha512-sqnEZwBQ+3IVg+UISIO48JbpmGbciDc04hNfj27q1WAQojH+j3LBrUr0KejFcRR6HvM8JiJZeLL/fhHVsMj7zg==",
"dev": true, "dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"@alfresco/js-api": ">=9.4.0-21353303004", "@alfresco/js-api": ">=9.4.0-21387976035",
"ejs": "^3.1.10", "ejs": "^3.1.10",
"license-checker": "^25.0.1", "license-checker": "^25.0.1",
"node-fetch": "^2.7.0", "node-fetch": "^2.7.0",
@@ -121,16 +121,16 @@
} }
}, },
"node_modules/@alfresco/adf-content-services": { "node_modules/@alfresco/adf-content-services": {
"version": "8.4.0-21353303004", "version": "8.4.0-21387976035",
"resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-8.4.0-21353303004.tgz", "resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-8.4.0-21387976035.tgz",
"integrity": "sha512-TYYcuxeI5/z1BTyXp8sispik6lCY9tj3jYiAG6MTH0gn+lleRe0Tj36WUtq/ELbvAcsnGKKsQsQ+S7dB5VHmjQ==", "integrity": "sha512-PkmB4a6LZgukqg4oEoiTyKCR+i36E4rxVxEiQrX3k5DA31k1ql1AIwybOEQNkopX9+WZor8SlkAQwO5pRQQ8eA==",
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"tslib": "^2.3.0" "tslib": "^2.3.0"
}, },
"peerDependencies": { "peerDependencies": {
"@alfresco/adf-core": ">=8.4.0-21353303004", "@alfresco/adf-core": ">=8.4.0-21387976035",
"@alfresco/js-api": ">=9.4.0-21353303004", "@alfresco/js-api": ">=9.4.0-21387976035",
"@angular/animations": ">=14.1.3", "@angular/animations": ">=14.1.3",
"@angular/cdk": ">=14.1.2", "@angular/cdk": ">=14.1.2",
"@angular/common": ">=14.1.3", "@angular/common": ">=14.1.3",
@@ -145,9 +145,9 @@
} }
}, },
"node_modules/@alfresco/adf-core": { "node_modules/@alfresco/adf-core": {
"version": "8.4.0-21353303004", "version": "8.4.0-21387976035",
"resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-8.4.0-21353303004.tgz", "resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-8.4.0-21387976035.tgz",
"integrity": "sha512-ggpioX5W70ytFsDWBoRqblEglO916FY5bi7NMryI8u5TYw6/WuDoVCNh3Mm5gAe+OccZokRTfpp5K6Z2ErtqIw==", "integrity": "sha512-vPGeuYRJpqfXDTPBuEtv/dwKg85r5onOW8AR+PxcepcUhbiIbCMcZ2vMBrZ9vorJG51CUtc1rXgpMG1sATfWLg==",
"license": "Apache-2.0", "license": "Apache-2.0",
"peer": true, "peer": true,
"dependencies": { "dependencies": {
@@ -159,8 +159,8 @@
"tslib": "^2.3.0" "tslib": "^2.3.0"
}, },
"peerDependencies": { "peerDependencies": {
"@alfresco/adf-extensions": ">=8.4.0-21353303004", "@alfresco/adf-extensions": ">=8.4.0-21387976035",
"@alfresco/js-api": ">=9.4.0-21353303004", "@alfresco/js-api": ">=9.4.0-21387976035",
"@angular/animations": ">=16.0.0", "@angular/animations": ">=16.0.0",
"@angular/cdk": ">=16.0.0", "@angular/cdk": ">=16.0.0",
"@angular/common": ">=16.0.0", "@angular/common": ">=16.0.0",
@@ -193,30 +193,30 @@
} }
}, },
"node_modules/@alfresco/adf-extensions": { "node_modules/@alfresco/adf-extensions": {
"version": "8.4.0-21353303004", "version": "8.4.0-21387976035",
"resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-8.4.0-21353303004.tgz", "resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-8.4.0-21387976035.tgz",
"integrity": "sha512-ncrYLaX/ZIsrsmXIL+g6PmjP2iU22bE+0735RbmVeiQEr/9nVH+DO2JvHwnaGyb6bp9FIPkj+N8iO52MjXdzvQ==", "integrity": "sha512-QoPANGBMjItW5vp8xl/LKWoTDNlyHtyaYYExVMPY8A6DZADNQgzop2MMiC8fN38tLOPlG/is8keqR0lqvgfJiA==",
"license": "Apache-2.0", "license": "Apache-2.0",
"peer": true, "peer": true,
"dependencies": { "dependencies": {
"tslib": "^2.3.0" "tslib": "^2.3.0"
}, },
"peerDependencies": { "peerDependencies": {
"@alfresco/js-api": ">=9.4.0-21353303004", "@alfresco/js-api": ">=9.4.0-21387976035",
"@angular/common": ">=14.1.3", "@angular/common": ">=14.1.3",
"@angular/core": ">=14.1.3" "@angular/core": ">=14.1.3"
} }
}, },
"node_modules/@alfresco/eslint-plugin-eslint-angular": { "node_modules/@alfresco/eslint-plugin-eslint-angular": {
"version": "8.4.0-21353303004", "version": "8.4.0-21387976035",
"resolved": "https://registry.npmjs.org/@alfresco/eslint-plugin-eslint-angular/-/eslint-plugin-eslint-angular-8.4.0-21353303004.tgz", "resolved": "https://registry.npmjs.org/@alfresco/eslint-plugin-eslint-angular/-/eslint-plugin-eslint-angular-8.4.0-21387976035.tgz",
"integrity": "sha512-yTwIHidZ5uEFOJ4CLc0rojVgwEB431Lq4eXTwi8TYvcgFXX1FYuD34DV89/8JTYDH+2mw5aocVTgrTp1oGVvcQ==", "integrity": "sha512-WB3rzF5NzZzDhwKKxk41Aya9gWM1CeQ280FQikCcQGmIeMK2ORgRsczpGl7/mUDGWjT0wmK1Y9N57F9tR+TdLQ==",
"license": "Apache-2.0" "license": "Apache-2.0"
}, },
"node_modules/@alfresco/js-api": { "node_modules/@alfresco/js-api": {
"version": "9.4.0-21353303004", "version": "9.4.0-21387976035",
"resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-9.4.0-21353303004.tgz", "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-9.4.0-21387976035.tgz",
"integrity": "sha512-fZicgF65bFYx2sylPZofCsNdLfM+P328K5fi51JW+lNezSoPX6GeQ6Vpvdap4gumDZvN+glJ9QoyLGOapkwlGA==", "integrity": "sha512-6+vC5mFJIVt34YIPp1PPy/ezqpYy08/+FAFj3HNAtHtiri95UkpP2d/ARDEZdi83QZkSDwEPtTWyyEfKTQE5ag==",
"license": "Apache-2.0", "license": "Apache-2.0",
"peer": true, "peer": true,
"dependencies": { "dependencies": {
package.json
+6 -6
View File
@@ -41,11 +41,11 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@alfresco/adf-content-services": "8.4.0-21353303004", "@alfresco/adf-content-services": "8.4.0-21387976035",
"@alfresco/adf-core": "8.4.0-21353303004", "@alfresco/adf-core": "8.4.0-21387976035",
"@alfresco/adf-extensions": "8.4.0-21353303004", "@alfresco/adf-extensions": "8.4.0-21387976035",
"@alfresco/eslint-plugin-eslint-angular": "8.4.0-21353303004", "@alfresco/eslint-plugin-eslint-angular": "8.4.0-21387976035",
"@alfresco/js-api": "9.4.0-21353303004", "@alfresco/js-api": "9.4.0-21387976035",
"@angular/animations": "19.2.18", "@angular/animations": "19.2.18",
"@angular/cdk": "19.2.18", "@angular/cdk": "19.2.18",
"@angular/common": "19.2.18", "@angular/common": "19.2.18",
@@ -78,7 +78,7 @@
"zone.js": "0.15.0" "zone.js": "0.15.0"
}, },
"devDependencies": { "devDependencies": {
"@alfresco/adf-cli": "8.4.0-21353303004", "@alfresco/adf-cli": "8.4.0-21387976035",
"@angular-devkit/build-angular": "19.2.19", "@angular-devkit/build-angular": "19.2.19",
"@angular-devkit/core": "19.2.18", "@angular-devkit/core": "19.2.18",
"@angular-devkit/schematics": "19.2.18", "@angular-devkit/schematics": "19.2.18",
projects/aca-content/assets/i18n/en.json
+2 -8
View File
@@ -52,19 +52,13 @@
"LOCATION": "Location", "LOCATION": "Location",
"TELEPHONE": "Telephone", "TELEPHONE": "Telephone",
"MOBILE": "Mobile", "MOBILE": "Mobile",
"LOGIN": "Login",
"USERNAME": "Username",
"EMAIL": "Email", "EMAIL": "Email",
"PASSWORD": "Password",
"OLD_PASSWORD": "Old Password",
"FORGOT_PASSWORD": "Forgot Password",
"NEW_PASSWORD": "New Password",
"VERIFY_PASSWORD": "Verify Password",
"COMPANY_DETAILS": "Company details", "COMPANY_DETAILS": "Company details",
"NAME": "Name", "NAME": "Name",
"ADDRESS": "Address", "ADDRESS": "Address",
"POSTCODE": "Postcode", "POSTCODE": "Postcode",
"INVALID_INPUT": "Invalid Input", "INVALID_PHONE_FORMAT": "Please enter a valid phone number",
"INVALID_EMAIL_FORMAT": "Please enter a valid email address",
"GO_TO_PERSONAL_FILES_BUTTON_LABEL": "Go to Personal Files" "GO_TO_PERSONAL_FILES_BUTTON_LABEL": "Go to Personal Files"
}, },
"LOCKED_BY": "Locked by: ", "LOCKED_BY": "Locked by: ",
projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.html
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="aca-rule-action-list__item " [attr.aria-labelledby]="'rule-actions-label'" *ngFor="let control of formControls"> <div class="aca-rule-action-list__item" [attr.aria-labelledby]="'rule-actions-label'" *ngFor="let control of formControls">
<aca-rule-action <aca-rule-action
[actionDefinitions]="actionDefinitions" [actionDefinitions]="actionDefinitions"
[parameterConstraints]="parameterConstraints" [parameterConstraints]="parameterConstraints"
projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss
+1 -9
View File
@@ -4,10 +4,6 @@
.aca-rule-action-list { .aca-rule-action-list {
min-width: 0; min-width: 0;
.aca-rule-action-list__item .aca-rule-action .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
padding-top: 24px;
}
.aca-rule-action-list-add-action-button { .aca-rule-action-list-add-action-button {
margin: 4px 0 20px; margin: 4px 0 20px;
@@ -24,16 +20,12 @@
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
margin: 10px; margin: 10px;
padding: 10px 10px 0; padding: 10px;
& > .aca-rule-action { & > .aca-rule-action {
flex: 1; flex: 1;
} }
#{ms.$mat-text-field-disabled}#{ms.$mat-text-field-filled} {
background: transparent;
}
&:nth-child(2n) { &:nth-child(2n) {
background-color: hsl(0deg, 0%, 95%); background-color: hsl(0deg, 0%, 95%);
projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.html
+2 -2
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 aca-rule-action-form-field" appearance="fill" subscriptSizing="dynamic"> <mat-form-field class="aca-rule-action-full-width aca-rule-action-form-field">
<mat-select <mat-select
formControlName="actionDefinitionId" formControlName="actionDefinitionId"
data-automation-id="rule-action-select" data-automation-id="rule-action-select"
@@ -18,7 +18,7 @@
*ngIf="cardViewItems?.length > 0" *ngIf="cardViewItems?.length > 0"
data-automation-id="rule-action-card-view" data-automation-id="rule-action-card-view"
[properties]="cardViewItems" [properties]="cardViewItems"
class="aca-rule-action-full-width aca-rule-action-card-view" class="aca-rule-action-full-width"
[editable]="!readOnly" /> [editable]="!readOnly" />
</form> </form>
projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss
-7
View File
@@ -9,8 +9,6 @@
gap: 20px; gap: 20px;
adf-card-view { adf-card-view {
margin-top: -15px;
.adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem { .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
@@ -44,10 +42,5 @@
min-height: 22.5px; min-height: 22.5px;
} }
} }
&.aca-rule-action-card-view {
overflow: hidden;
margin-top: 11px;
}
} }
} }
projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.html
+2 -2
View File
@@ -12,7 +12,7 @@
[attr.aria-labelledby]="'conditions-group-label-' + (childCondition ? 'nested' : 'main')" [attr.aria-labelledby]="'conditions-group-label-' + (childCondition ? 'nested' : 'main')"
class="aca-rule-composite-condition__form__row" class="aca-rule-composite-condition__form__row"
*ngFor="let control of conditionFormControls; let i = index"> *ngFor="let control of conditionFormControls; let i = index">
<mat-form-field *ngIf="i === 0" subscriptSizing="dynamic"> <mat-form-field *ngIf="i === 0">
<mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.LOGIC_OPERATOR' | translate }}</mat-label> <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.LOGIC_OPERATOR' | translate }}</mat-label>
<mat-select <mat-select
[formControl]="invertedControl" [formControl]="invertedControl"
@@ -22,7 +22,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="i > 0" subscriptSizing="dynamic" class="aca-rule-composite-condition__boolean-mode-control"> <mat-form-field *ngIf="i > 0" class="aca-rule-composite-condition__boolean-mode-control">
<mat-select <mat-select
[formControl]="booleanModeControl"> [formControl]="booleanModeControl">
<mat-option value="and">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LOGIC_OPERATORS.AND' | translate }}</mat-option> <mat-option value="and">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LOGIC_OPERATORS.AND' | translate }}</mat-option>
projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss
-6
View File
@@ -28,12 +28,6 @@
display: flex; display: flex;
gap: 8px; gap: 8px;
#{ms.$mat-form-field} {
#{ms.$mat-form-field-infix} {
padding-bottom: 4px;
}
}
& > :nth-child(1) { & > :nth-child(1) {
width: 7em; width: 7em;
height: fit-content; height: fit-content;
projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html
+3 -3
View File
@@ -1,5 +1,5 @@
<form class="aca-rule-simple-condition__form" [formGroup]="form"> <form class="aca-rule-simple-condition__form" [formGroup]="form">
<mat-form-field class="aca-rule-simple-condition__form__field-input" subscriptSizing="dynamic"> <mat-form-field class="aca-rule-simple-condition__form__field-input">
<mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.FIELD' | translate }}</mat-label> <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.FIELD' | translate }}</mat-label>
<mat-select formControlName="field" data-automation-id="field-select" <mat-select formControlName="field" data-automation-id="field-select"
(selectionChange)="onChangeField()"> (selectionChange)="onChangeField()">
@@ -12,7 +12,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__comparator-input" subscriptSizing="dynamic" <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"> [class]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
<mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.COMPARATOR' | translate }}</mat-label> <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.COMPARATOR' | translate }}</mat-label>
<mat-select formControlName="comparator" data-automation-id="comparator-select"> <mat-select formControlName="comparator" data-automation-id="comparator-select">
@@ -25,7 +25,7 @@
</mat-form-field> </mat-form-field>
<mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__parameter-input" <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__parameter-input"
subscriptSizing="dynamic" [ngSwitch]="selectedField.type"> [ngSwitch]="selectedField.type">
<mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.VALUE' | translate }}</mat-label> <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.VALUE' | translate }}</mat-label>
<mat-select formControlName="parameter" data-automation-id="simple-condition-value-select" *ngSwitchCase="'mimeType'"> <mat-select formControlName="parameter" data-automation-id="simple-condition-value-select" *ngSwitchCase="'mimeType'">
<mat-option *ngFor="let mimeType of mimeTypes" <mat-option *ngFor="let mimeType of mimeTypes"
projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html
-2
View File
@@ -10,8 +10,6 @@
<mat-form-field <mat-form-field
data-automation-id="rule-option-form-field-errorScript" data-automation-id="rule-option-form-field-errorScript"
floatLabel="always"
appearance="fill"
class="aca-rule-options__error-script-dropdown" class="aca-rule-options__error-script-dropdown"
[ngClass]="{ 'aca-hide-error-script-dropdown': hideErrorScriptDropdown }"> [ngClass]="{ 'aca-hide-error-script-dropdown': hideErrorScriptDropdown }">
<mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.ERROR_SCRIPT' | translate }}</mat-label> <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.ERROR_SCRIPT' | translate }}</mat-label>
projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss
+13 -1
View File
@@ -1,3 +1,5 @@
@use '@angular/material' as mat;
.aca-rule-options { .aca-rule-options {
fieldset { fieldset {
display: flex; display: flex;
@@ -14,7 +16,17 @@
} }
&__error-script-dropdown { &__error-script-dropdown {
margin-top: 4px; margin-top: 8px;
@include mat.form-field-overrides(
(
outlined-label-text-populated-size: 16px
)
);
mat-label {
line-height: 18px;
}
} }
&.aca-read-only &__checkbox > div > div:first-child { &.aca-read-only &__checkbox > div > div:first-child {
projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.spec.ts
-1
View File
@@ -168,7 +168,6 @@ describe('RuleOptionsUiComponent', () => {
const matFormField = getErrorScriptFormField(); const matFormField = getErrorScriptFormField();
fixture.detectChanges(); fixture.detectChanges();
expect(matFormField).not.toBeNull(); expect(matFormField).not.toBeNull();
expect(matFormField.componentInstance['floatLabel']).toBe('always');
}); });
it('should properly update formFields on only isAsynchronous and errorScript changes', () => { it('should properly update formFields on only isAsynchronous and errorScript changes', () => {
projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html
+7 -4
View File
@@ -4,11 +4,14 @@
<div class="aca-rule-details__form__row"> <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> <label class="aca-rule-details__name__label" for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
<div> <div>
<mat-form-field appearance="fill" floatLabel='always' class="aca-rule-details__form__row__field"> <mat-form-field class="aca-rule-details__form__row__field">
<mat-label *ngIf="!name.value">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.PLACEHOLDER.NAME' | translate }}</mat-label>
<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"
[placeholder]="'ACA_FOLDER_RULES.RULE_DETAILS.PLACEHOLDER.NAME' | translate"
data-automation-id="rule-details-name-input">
<mat-error>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.REQUIRED' | translate }}</mat-error> <mat-error>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.REQUIRED' | translate }}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@@ -17,7 +20,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='auto' appearance="fill" class="aca-rule-details__form__row__field"> <mat-form-field 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"
projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
+5 -41
View File
@@ -1,14 +1,8 @@
@use '../styles/mat-selectors' as ms;
.aca-rule-details { .aca-rule-details {
.aca-rule-details__form__triggers { .aca-rule-details__form__triggers {
margin-top: 10px; margin-top: 10px;
} }
.aca-rule-details__name__label {
padding-top: 1.5em;
}
.aca-rule-details__form__others { .aca-rule-details__form__others {
margin-bottom: 12px; margin-bottom: 12px;
} }
@@ -51,6 +45,11 @@
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
font-size: inherit; font-size: inherit;
margin-bottom: 15px;
&:first-of-type {
margin-top: 10px;
}
label[for='rule-details-name-input'] { label[for='rule-details-name-input'] {
transform: translateY(-20%) scale(1); transform: translateY(-20%) scale(1);
@@ -86,40 +85,5 @@
flex: 1; flex: 1;
} }
} }
&.aca-read-only,
#{ms.$mat-form-field-disabled} {
#{ms.$mat-notched-outline-leading},
#{ms.$mat-notched-outline-trailing},
#{ms.$mat-notched-outline-notch} {
border: none;
}
#{ms.$mat-line-ripple} {
&::before,
&::after {
display: none;
}
}
*:disabled,
#{ms.$mat-select-disabled} #{ms.$mat-select-value} {
color: inherit;
}
#{ms.$mat-select-arrow-wrapper} {
display: none;
}
}
.aca-rule-details__form__row #{ms.$mat-form-field-flex} #{ms.$mat-form-field-infix} {
padding-bottom: 0.375em;
padding-top: 24px;
}
.aca-rule-details__form__row aca-rule-action #{ms.$mat-form-field-flex} #{ms.$mat-form-field-infix} {
padding-top: 0.1em;
padding-bottom: 0.1em;
}
} }
} }
projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.html
-2
View File
@@ -1,8 +1,6 @@
<mat-form-field <mat-form-field
*ngIf="items?.length" *ngIf="items?.length"
[title]="tooltip" [title]="tooltip"
appearance="outline"
subscriptSizing="dynamic"
class="aca-bulk-actions-form-field" class="aca-bulk-actions-form-field"
data-automation-id="aca-bulk-actions-form-field" data-automation-id="aca-bulk-actions-form-field"
> >
projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss
-7
View File
@@ -3,13 +3,6 @@
.aca-bulk-actions-form-field { .aca-bulk-actions-form-field {
margin-left: 24px; margin-left: 24px;
width: 295px; width: 295px;
#{ms.$mat-form-field-flex},
#{ms.$mat-select-value} {
height: 48px;
display: flex;
align-items: center;
}
} }
.aca-bulk-actions-option-content { .aca-bulk-actions-option-content {
projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html
+8 -8
View File
@@ -2,8 +2,8 @@
<mat-card appearance="raised"> <mat-card appearance="raised">
<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 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> <mat-label>{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
<input <input
#libraryNameInput #libraryNameInput
data-automation-id="app-library-metadata-form-name-input" data-automation-id="app-library-metadata-form-name-input"
@@ -21,13 +21,13 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper" class="app-library-metadata-form-field"> <mat-form-field 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> <mat-label>{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
<input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" /> <input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" />
</mat-form-field> </mat-form-field>
<mat-form-field floatLabel="auto" data-automation-id="library-visibility-properties-wrapper" class="app-library-metadata-form-field"> <mat-form-field 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-label>{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}</mat-label>
<mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility"> <mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
<mat-option [value]="type.value" [attr.data-automation-id]="'library-visibility-option-' + 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 }} {{ type.label | translate }}
@@ -35,8 +35,8 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper" class="app-library-metadata-form-field"> <mat-form-field 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> <mat-label>{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
<textarea <textarea
matInput matInput
placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}" placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.scss
+1 -47
View File
@@ -1,52 +1,6 @@
/* stylelint-disable selector-class-pattern */
app-library-metadata-form { app-library-metadata-form {
.app-library-metadata-form-field { .app-library-metadata-form-field {
width: 100%; width: 100%;
margin-bottom: 15px;
.mat-mdc-form-field-flex {
border-bottom: 1px solid;
.mat-mdc-form-field-infix {
padding-bottom: 3px;
min-height: unset;
}
}
&.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;
} }
} }
projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html
+1 -1
View File
@@ -1,5 +1,5 @@
<div class="app-search-container"> <div class="app-search-container">
<mat-form-field class="app-input-form-field" appearance="outline"> <mat-form-field class="app-input-form-field">
<button <button
mat-icon-button mat-icon-button
projects/aca-content/src/lib/components/search/search-input/search-input.component.html
+1 -1
View File
@@ -4,7 +4,7 @@
(menuOpened)="onMenuOpened()" (menuOpened)="onMenuOpened()"
(menuClosed)="syncInputValues()" (menuClosed)="syncInputValues()"
> >
<mat-form-field class="app-input-form-field" appearance="outline"> <mat-form-field class="app-input-form-field">
<button class="aca-search-input--search-button" mat-icon-button matPrefix (click)="searchByOption()" [title]="'SEARCH.BUTTON.TOOLTIP' | translate"> <button class="aca-search-input--search-button" mat-icon-button matPrefix (click)="searchByOption()" [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon> <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button> </button>
projects/aca-content/src/lib/components/search/search-save/dialog/edit/saved-search-edit-dialog.component.scss
+1
View File
@@ -1,6 +1,7 @@
.aca-saved-search-edit-dialog { .aca-saved-search-edit-dialog {
.aca-saved-search-edit-dialog__form-field { .aca-saved-search-edit-dialog__form-field {
width: 100%; width: 100%;
margin-bottom: 15px;
} }
.aca-saved-search-edit-dialog__header { .aca-saved-search-edit-dialog__header {
projects/aca-content/src/lib/components/search/search-save/dialog/save-search-dialog.component.scss
+1
View File
@@ -1,6 +1,7 @@
.aca-save-search-dialog { .aca-save-search-dialog {
.aca-save-search-dialog__form-field { .aca-save-search-dialog__form-field {
width: 100%; width: 100%;
margin-bottom: 15px;
} }
.aca-save-search-dialog__header { .aca-save-search-dialog__header {
projects/aca-content/src/lib/components/view-profile/view-profile.component.html
+138 -211
View File
@@ -26,17 +26,17 @@
<div class="app-profile-general-section"> <div class="app-profile-general-section">
<button <button
mat-icon-button mat-icon-button
(click)="toggleGeneralDropdown()" (click)="toggleGeneralSection()"
[attr.title]="`APP.TOOLTIPS.${generalSectionDropdown ? 'COLLAPSE' : 'EXPAND'}_SECTION` | translate" [attr.title]="generalSectionButtonTooltip | translate"
[attr.aria-label]="`APP.TOOLTIPS.${generalSectionDropdown ? 'COLLAPSE' : 'EXPAND'}_SECTION` | translate"> [attr.aria-label]="generalSectionButtonTooltip | translate">
<mat-icon>{{ generalSectionDropdown ? 'expand_more' : 'chevron_right'}}</mat-icon> <mat-icon>{{ generalSectionExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>
</button> </button>
<h4 class="app-general-title">{{'APP.EDIT_PROFILE.GENERAL' | translate}}</h4> <h4 class="app-general-title">{{'APP.EDIT_PROFILE.GENERAL' | translate}}</h4>
</div> </div>
@if (generalSectionButtonsToggle) { @if (!generalSectionEditMode) {
<button <button
mat-icon-button mat-icon-button
(click)="toggleGeneralButtons()" (click)="toggleGeneralSectionEditMode()"
class="app-general-edit" class="app-general-edit"
[attr.title]="'APP.TOOLTIPS.EDIT' | translate" [attr.title]="'APP.TOOLTIPS.EDIT' | translate"
[attr.aria-label]="'APP.TOOLTIPS.EDIT' | translate"> [attr.aria-label]="'APP.TOOLTIPS.EDIT' | translate">
@@ -48,7 +48,7 @@
class="app-general-cancel-btn" class="app-general-cancel-btn"
[attr.title]="'APP.TOOLTIPS.CANCEL' | translate" [attr.title]="'APP.TOOLTIPS.CANCEL' | translate"
[attr.aria-label]="'APP.TOOLTIPS.CANCEL' | translate" [attr.aria-label]="'APP.TOOLTIPS.CANCEL' | translate"
(click)="toggleGeneralButtons()"> (click)="toggleGeneralSectionEditMode()">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
<button <button
@@ -62,103 +62,76 @@
</button> </button>
} }
</div> </div>
@if (generalSectionDropdown) { @if (generalSectionExpanded) {
<mat-divider class="app-divider" aria-hidden="true" /> <mat-divider class="app-divider" aria-hidden="true" />
<div class="app-general-dropdown"> <div class="app-general-dropdown">
<div class="app-general-dropdown-details"> <mat-form-field class="app-form-field">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.FIRST_NAME' | translate}}</h4> <mat-label>{{ 'APP.EDIT_PROFILE.FIRST_NAME' | translate }}</mat-label>
<p class="app-profile-general-dropdown-details">{{personDetails?.firstName}}</p> <input
</div> matInput
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" /> readonly
<div class="app-general-dropdown-details"> placeholder="{{ 'APP.EDIT_PROFILE.FIRST_NAME' | translate }}"
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LAST_NAME' | translate}}</h4> formControlName="firstName"
<p class="app-profile-general-dropdown-details">{{personDetails?.lastName}}</p> />
</div> </mat-form-field>
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
<div class="app-general-dropdown-details"> <mat-form-field class="app-form-field">
<label <mat-label>{{ 'APP.EDIT_PROFILE.LAST_NAME' | translate }}</mat-label>
class="app-profile-general-dropdown-heading" <input
for="app-view-profile-job-title"> matInput
{{'APP.EDIT_PROFILE.JOB_TITLE' | translate}} readonly
</label> placeholder="{{ 'APP.EDIT_PROFILE.LAST_NAME' | translate }}"
@if (generalSectionButtonsToggle) { formControlName="lastName"
<p class="app-profile-general-dropdown-details">{{personDetails?.jobTitle}}</p> />
} @else { </mat-form-field>
<input
type="text" <mat-form-field class="app-form-field">
value="" <mat-label>{{ 'APP.EDIT_PROFILE.JOB_TITLE' | translate }}</mat-label>
formControlName="jobTitle" <input
class="app-profile-general-dropdown-input-details app-selected" matInput
id="app-view-profile-job-title"> [readonly]="!generalSectionEditMode"
} placeholder="{{ 'APP.EDIT_PROFILE.JOB_TITLE' | translate }}"
</div> formControlName="jobTitle"
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" /> />
<div class="app-general-dropdown-details"> </mat-form-field>
<label
class="app-profile-general-dropdown-heading" <mat-form-field class="app-form-field">
for="app-view-profile-location"> <mat-label>{{ 'APP.EDIT_PROFILE.LOCATION' | translate }}</mat-label>
{{'APP.EDIT_PROFILE.LOCATION' | translate}} <input
</label> matInput
@if (generalSectionButtonsToggle) { [readonly]="!generalSectionEditMode"
<p class="app-profile-general-dropdown-details">{{personDetails?.location}}</p> placeholder="{{ 'APP.EDIT_PROFILE.LOCATION' | translate }}"
} @else { formControlName="location"
<input />
type="text" </mat-form-field>
value=""
formControlName="location" <mat-form-field class="app-form-field">
class="app-profile-general-dropdown-input-details app-selected" <mat-label>{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}</mat-label>
id="app-view-profile-location"> <input
} matInput
</div> [type]="'tel'"
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" /> [readonly]="!generalSectionEditMode"
<div class="app-general-dropdown-details"> placeholder="{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}"
<label formControlName="telephone"
class="app-profile-general-dropdown-heading" />
for="app-view-profile-telephone"> <mat-error>
{{'APP.EDIT_PROFILE.TELEPHONE' | translate}} {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}
</label> </mat-error>
@if (generalSectionButtonsToggle) { </mat-form-field>
<p class="app-profile-general-dropdown-details">{{personDetails?.telephone}}</p>
} @else { <mat-form-field class="app-form-field">
<input <mat-label>{{ 'APP.EDIT_PROFILE.MOBILE' | translate }}</mat-label>
type="tel" <input
name="Telephone" matInput
value="" [type]="'tel'"
formControlName="telephone" [readonly]="!generalSectionEditMode"
class="app-profile-general-dropdown-input-details app-selected" placeholder="{{ 'APP.EDIT_PROFILE.MOBILE' | translate }}"
aria-describedby="app-view-profile-phone-error-message" formControlName="mobile"
id="app-view-profile-telephone"> />
} <mat-error>
@if (profileForm.controls['telephone'].errors) { {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}
<mat-error class="app-error-message" role="alert" id="app-view-profile-phone-error-message"> </mat-error>
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }} </mat-form-field>
</mat-error>
}
</div>
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
<div class="app-general-dropdown-details">
<label
class="app-profile-general-dropdown-heading"
for="app-view-profile-mobile">
{{'APP.EDIT_PROFILE.MOBILE' | translate}}
</label>
@if (generalSectionButtonsToggle) {
<p class="app-profile-general-dropdown-details">{{personDetails?.mobile}}</p>
} @else {
<input
type="tel"
value=""
formControlName="mobile"
class="app-profile-general-dropdown-input-details app-selected"
aria-describedby="app-view-profile-mobile-error-message"
id="app-view-profile-mobile">
}
@if (profileForm.controls['mobile'].errors) {
<mat-error class="app-error-message" role="alert" id="app-view-profile-mobile-error-message">
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
</mat-error>
}
</div>
</div> </div>
} }
</div> </div>
@@ -168,17 +141,17 @@
<div class="app-profile-general-section"> <div class="app-profile-general-section">
<button <button
mat-icon-button mat-icon-button
(click)="toggleContactDropdown()" (click)="toggleContactSection()"
[attr.title]="`APP.TOOLTIPS.${contactSectionDropdown ? 'COLLAPSE' : 'EXPAND'}_SECTION` | translate" [attr.title]="contactSectionButtonTooltip | translate"
[attr.aria-label]="`APP.TOOLTIPS.${contactSectionDropdown ? 'COLLAPSE' : 'EXPAND'}_SECTION` | translate"> [attr.aria-label]="contactSectionButtonTooltip | translate">
<mat-icon>{{ contactSectionDropdown ? 'expand_more' : 'chevron_right'}}</mat-icon> <mat-icon>{{ contactSectionExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>
</button> </button>
<h4 class="app-general-title">{{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}</h4> <h4 class="app-general-title">{{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}</h4>
</div> </div>
@if (contactSectionButtonsToggle) { @if (!contactSectionEditMode) {
<button <button
mat-icon-button mat-icon-button
(click)="toggleContactButtons()" (click)="toggleContactSectionEditMode()"
class="app-general-edit" class="app-general-edit"
[attr.title]="'APP.TOOLTIPS.EDIT' | translate" [attr.title]="'APP.TOOLTIPS.EDIT' | translate"
[attr.aria-label]="'APP.TOOLTIPS.EDIT' | translate"> [attr.aria-label]="'APP.TOOLTIPS.EDIT' | translate">
@@ -190,7 +163,7 @@
class="app-general-cancel-btn" class="app-general-cancel-btn"
[attr.title]="'APP.TOOLTIPS.CANCEL' | translate" [attr.title]="'APP.TOOLTIPS.CANCEL' | translate"
[attr.aria-label]="'APP.TOOLTIPS.CANCEL' | translate" [attr.aria-label]="'APP.TOOLTIPS.CANCEL' | translate"
(click)="toggleContactButtons()"> (click)="toggleContactSectionEditMode()">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
<button <button
@@ -204,110 +177,64 @@
</button> </button>
} }
</div> </div>
@if (contactSectionDropdown) { @if (contactSectionExpanded) {
<mat-divider class="app-divider" aria-hidden="true" /> <mat-divider class="app-divider" aria-hidden="true" />
<div class="app-general-dropdown"> <div class="app-general-dropdown">
<div class="app-general-dropdown-details"> <mat-form-field class="app-form-field">
<label <mat-label>{{ 'APP.EDIT_PROFILE.NAME' | translate }}</mat-label>
class="app-profile-general-dropdown-heading" <input
for="app-view-profile-company-name"> matInput
{{'APP.EDIT_PROFILE.NAME' | translate}} [readonly]="!contactSectionEditMode"
</label> placeholder="{{ 'APP.EDIT_PROFILE.NAME' | translate }}"
@if (contactSectionButtonsToggle) { formControlName="companyName"
<p class="app-profile-general-dropdown-details">{{personDetails?.company?.organization}}</p> />
} @else { </mat-form-field>
<input
type="text" <mat-form-field class="app-form-field">
value="" <mat-label>{{ 'APP.EDIT_PROFILE.ADDRESS' | translate }}</mat-label>
formControlName="companyName" <input
class="app-profile-general-dropdown-input-details app-selected" matInput
id="app-view-profile-company-name"> [readonly]="!contactSectionEditMode"
} placeholder="{{ 'APP.EDIT_PROFILE.ADDRESS' | translate }}"
</div> formControlName="companyAddress"
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" /> />
<div class="app-general-dropdown-details"> </mat-form-field>
<label
class="app-profile-general-dropdown-heading" <mat-form-field class="app-form-field">
for="app-view-profile-company-address"> <mat-label>{{ 'APP.EDIT_PROFILE.POSTCODE' | translate }}</mat-label>
{{'APP.EDIT_PROFILE.ADDRESS' | translate}} <input
</label> matInput
@if (contactSectionButtonsToggle) { [readonly]="!contactSectionEditMode"
<p class="app-profile-general-dropdown-details">{{personDetails?.company?.address1}}</p> placeholder="{{ 'APP.EDIT_PROFILE.POSTCODE' | translate }}"
} @else { formControlName="companyPostCode"
<input />
type="text" </mat-form-field>
value=""
formControlName="companyAddress" <mat-form-field class="app-form-field">
class="app-profile-general-dropdown-input-details app-selected" <mat-label>{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}</mat-label>
id="app-view-profile-company-address"> <input
} matInput
</div> [readonly]="!contactSectionEditMode"
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" /> placeholder="{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}"
<div class="app-general-dropdown-details"> formControlName="companyTelephone"
<label />
class="app-profile-general-dropdown-heading" <mat-error>
for="app-view-profile-company-post-code"> {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}
{{'APP.EDIT_PROFILE.POSTCODE' | translate}} </mat-error>
</label> </mat-form-field>
@if (contactSectionButtonsToggle) {
<p class="app-profile-general-dropdown-details">{{personDetails?.company?.postcode}}</p> <mat-form-field class="app-form-field">
} @else { <mat-label>{{ 'APP.EDIT_PROFILE.EMAIL' | translate }}</mat-label>
<input <input
type="text" matInput
value="" [readonly]="!contactSectionEditMode"
formControlName="companyPostCode" placeholder="{{ 'APP.EDIT_PROFILE.EMAIL' | translate }}"
class="app-profile-general-dropdown-input-details app-selected" formControlName="companyEmail"
id="app-view-profile-company-post-code"> />
} <mat-error>
</div> {{ 'APP.EDIT_PROFILE.INVALID_EMAIL_FORMAT' | translate }}
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" /> </mat-error>
<div class="app-general-dropdown-details"> </mat-form-field>
<label
class="app-profile-general-dropdown-heading"
for="app-view-profile-company-telephone">
{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}
</label>
@if (contactSectionButtonsToggle) {
<p class="app-profile-general-dropdown-details">{{personDetails?.company?.telephone}}</p>
} @else {
<input
type="tel"
value=""
formControlName="companyTelephone"
class="app-profile-general-dropdown-input-details app-selected"
aria-describedby="app-view-profile-company-phone-error-message"
id="app-view-profile-company-telephone">
}
@if (profileForm.controls['companyTelephone'].errors) {
<mat-error class="app-error-message" role="alert" id="app-view-profile-company-phone-error-message">
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
</mat-error>
}
</div>
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
<div class="app-general-dropdown-details">
<label
class="app-profile-general-dropdown-heading"
for="app-view-profile-company-email">
{{'APP.EDIT_PROFILE.EMAIL' | translate}}
</label>
@if (contactSectionButtonsToggle) {
<p class="app-profile-general-dropdown-details">{{personDetails?.company?.email}}</p>
} @else {
<input
type="text"
value=""
formControlName="companyEmail"
class="app-profile-general-dropdown-input-details app-selected"
aria-describedby="app-view-profile-company-email-error-message"
id="app-view-profile-company-email">
}
@if (profileForm.controls['companyEmail'].errors) {
<mat-error class="app-error-message" role="alert" id="app-view-profile-company-email-error-message">
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
</mat-error>
}
</div>
</div> </div>
} }
</div> </div>
projects/aca-content/src/lib/components/view-profile/view-profile.component.scss
+5 -80
View File
@@ -42,15 +42,6 @@ app-view-profile {
border-radius: 1rem; border-radius: 1rem;
} }
.app-profile-general-icon {
padding: 0 0.5rem 0 1rem;
cursor: pointer;
}
.app-profile-text {
letter-spacing: 0.5px;
}
.app-profile-general { .app-profile-general {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -83,75 +74,14 @@ app-view-profile {
padding-right: 1px; padding-right: 1px;
} }
.app-selected:focus {
border: 2px solid var(--theme-blue-button-color);
border-radius: 6px;
outline: none;
box-shadow: 0 0 2px var(--theme-blue-button-color);
}
.app-general-dropdown-divider {
border-top-color: var(--theme-grey-divider-color);
}
.app-general-dropdown { .app-general-dropdown {
padding: 0 1rem;
}
.app-general-dropdown-details {
display: flex; display: flex;
} flex-direction: column;
padding: 21.5px 1rem 0;
.app-profile-general-dropdown-heading { .app-form-field {
color: var(--theme-heading-color); margin-bottom: 15px;
width: 20%; }
font-weight: 400;
letter-spacing: 0.5px;
margin-top: 1.33em;
margin-bottom: 1.33em;
}
.app-profile-general-dropdown-details {
margin-top: 1.3rem;
letter-spacing: 0.5px;
}
.app-profile-general-dropdown-input-details {
width: 24%;
height: 25px;
border: none;
margin-top: 1.3rem;
background-color: var(--theme-dropdown-color);
}
.app-profile-login-row {
margin: 2rem 0 0 2rem;
width: 70%;
border: 1px solid var(--theme-grey-background-color);
border-radius: 1rem;
}
.app-profile-login {
display: flex;
padding-left: 1rem;
}
.app-profile-login-dropdown-details {
width: 24%;
height: 25px;
border: none;
margin-top: 1.3rem;
background-color: var(--theme-dropdown-color);
}
.app-profile-login-dropdown-heading-forgot {
margin-top: 1.3rem;
color: var(--theme-heading-color);
margin-left: 16rem;
}
.app-profile-company-row {
margin-top: 2rem;
} }
.app-profile-contact-row { .app-profile-contact-row {
@@ -160,9 +90,4 @@ app-view-profile {
border: 1px solid var(--theme-grey-background-color); border: 1px solid var(--theme-grey-background-color);
border-radius: 1rem; border-radius: 1rem;
} }
.app-error-message {
padding-top: 2rem;
padding-left: 0.5rem;
}
} }
projects/aca-content/src/lib/components/view-profile/view-profile.component.spec.ts
+48 -46
View File
@@ -66,9 +66,9 @@ describe('ViewProfileComponent', () => {
router.initialNavigation(); router.initialNavigation();
}); });
it('should company dropdown remains close', async () => { it('should expand only general section by default', async () => {
expect(component.loginSectionDropdown).toBe(false); expect(component.generalSectionExpanded).toBe(true);
expect(component.contactSectionDropdown).toBe(false); expect(component.contactSectionExpanded).toBe(false);
}); });
it('should toggle the appService toggleAppNavBar$ Subject', () => { it('should toggle the appService toggleAppNavBar$ Subject', () => {
@@ -77,18 +77,17 @@ describe('ViewProfileComponent', () => {
expect(appServiceMock.toggleAppNavBar$.next).toHaveBeenCalled(); expect(appServiceMock.toggleAppNavBar$.next).toHaveBeenCalled();
}); });
it('should save button is disabled if form has invalid mobile number', () => { it('should disable save button if form is invalid', () => {
component.ngOnInit(); component.ngOnInit();
const profileFormGroup = component.profileForm; const profileFormGroup = component.profileForm;
profileFormGroup.setValue({ profileFormGroup.setValue({
firstName: 'John',
lastName: 'Doe',
jobTitle: 'Developer', jobTitle: 'Developer',
location: 'US', location: 'US',
telephone: '2744245', telephone: '2744245',
mobile: 'AB8866322112', mobile: 'invalid',
oldPassword: 'admin@123',
newPassword: 'admin@1234',
verifyPassword: 'admin@1234',
companyName: 'test Name', companyName: 'test Name',
companyPostCode: '12345', companyPostCode: '12345',
companyAddress: 'test address', companyAddress: 'test address',
@@ -97,44 +96,54 @@ describe('ViewProfileComponent', () => {
}); });
expect(profileFormGroup.valid).toEqual(false); expect(profileFormGroup.valid).toEqual(false);
expect(component.isSaveButtonDisabled()).toBeTruthy(); expect(component.isSaveButtonDisabled()).toBeTrue();
});
it('should save button is disabled if form has invalid email', () => {
component.ngOnInit();
const profileFormGroup = component.profileForm;
profileFormGroup.setValue({ profileFormGroup.setValue({
firstName: 'John',
lastName: 'Doe',
jobTitle: 'Developer', jobTitle: 'Developer',
location: 'US', location: 'US',
telephone: '27442445', telephone: '274-424-55',
mobile: '457554', mobile: '886-632-2112',
oldPassword: 'admin@123',
newPassword: 'admin@1234',
verifyPassword: 'admin@1234',
companyName: 'test Name', companyName: 'test Name',
companyPostCode: '12345', companyPostCode: '12345',
companyAddress: 'test address', companyAddress: 'test address',
companyTelephone: '27442266', companyTelephone: '274-42-266',
companyEmail: 'email' companyEmail: 'invalid'
}); });
expect(profileFormGroup.valid).toEqual(false); expect(profileFormGroup.valid).toEqual(false);
expect(component.isSaveButtonDisabled()).toBeTruthy(); expect(component.isSaveButtonDisabled()).toBeTrue();
profileFormGroup.setValue({
firstName: 'John',
lastName: 'Doe',
jobTitle: 'Developer',
location: 'US',
telephone: 'invalid',
mobile: '886-632-2112',
companyName: 'test Name',
companyPostCode: '12345',
companyAddress: 'test address',
companyTelephone: '274-42-266',
companyEmail: 'test@test.com'
});
expect(profileFormGroup.valid).toEqual(false);
expect(component.isSaveButtonDisabled()).toBeTrue();
}); });
it('should save button is enabled if form has valid inputs', () => { it('should enable save button if form has valid inputs', () => {
component.ngOnInit(); component.ngOnInit();
const profileFormGroup = component.profileForm; const profileFormGroup = component.profileForm;
profileFormGroup.setValue({ profileFormGroup.setValue({
firstName: 'John',
lastName: 'Doe',
jobTitle: 'Developer', jobTitle: 'Developer',
location: 'US', location: 'US',
telephone: '274-422-55', telephone: '274-422-55',
mobile: '886-632-2112', mobile: '886-632-2112',
oldPassword: 'test@123',
newPassword: 'test@1234',
verifyPassword: 'test@1234',
companyName: 'testCompany', companyName: 'testCompany',
companyPostCode: '12345', companyPostCode: '12345',
companyAddress: 'test address', companyAddress: 'test address',
@@ -143,40 +152,33 @@ describe('ViewProfileComponent', () => {
}); });
expect(profileFormGroup.valid).toEqual(true); expect(profileFormGroup.valid).toEqual(true);
expect(component.isSaveButtonDisabled()).toBeFalsy(); expect(component.isSaveButtonDisabled()).toBeFalse();
});
it('should navigate to personal files when back button is clicked', () => {
const navigateSpy = spyOn(router, 'navigate');
component.navigateToPersonalFiles();
expect(navigateSpy).toHaveBeenCalledWith(['/personal-files'], { replaceUrl: true });
}); });
it('should expand or compress general dropdown when arrow button is clicked', () => { it('should expand or compress general dropdown when arrow button is clicked', () => {
spyOn(component, 'toggleGeneralDropdown').and.callThrough(); spyOn(component, 'toggleGeneralSection').and.callThrough();
component.generalSectionDropdown = false; component.generalSectionExpanded = false;
fixture.detectChanges(); fixture.detectChanges();
unitTestingUtils.clickByCSS('#general-dropdown button'); unitTestingUtils.clickByCSS('#general-dropdown button');
expect(component.toggleGeneralDropdown).toHaveBeenCalled(); expect(component.toggleGeneralSection).toHaveBeenCalled();
expect(component.generalSectionButtonsToggle).toBe(true); expect(component.generalSectionExpanded).toBe(true);
}); });
it('should expand or compress contact dropdown when arrow button is clicked', () => { it('should expand or compress contact dropdown when arrow button is clicked', () => {
spyOn(component, 'toggleContactDropdown').and.callThrough(); spyOn(component, 'toggleContactSection').and.callThrough();
component.contactSectionDropdown = false; component.contactSectionExpanded = false;
fixture.detectChanges(); fixture.detectChanges();
unitTestingUtils.clickByCSS('#contact-dropdown button'); unitTestingUtils.clickByCSS('#contact-dropdown button');
expect(component.toggleContactDropdown).toHaveBeenCalled(); expect(component.toggleContactSection).toHaveBeenCalled();
expect(component.contactSectionButtonsToggle).toBe(true); expect(component.contactSectionExpanded).toBe(true);
}); });
it('should toggle form view when edit or cancel buttons is clicked for general form', () => { it('should toggle form view when edit or cancel buttons is clicked for general form', () => {
spyOn(component, 'toggleGeneralButtons').and.callThrough(); spyOn(component, 'toggleGeneralSectionEditMode').and.callThrough();
fixture.detectChanges(); fixture.detectChanges();
unitTestingUtils.clickByCSS('#general-dropdown .app-general-edit'); unitTestingUtils.clickByCSS('#general-dropdown .app-general-edit');
@@ -184,11 +186,11 @@ describe('ViewProfileComponent', () => {
unitTestingUtils.clickByCSS('#general-dropdown .app-general-cancel-btn'); unitTestingUtils.clickByCSS('#general-dropdown .app-general-cancel-btn');
expect(component.toggleGeneralButtons).toHaveBeenCalledTimes(2); expect(component.toggleGeneralSectionEditMode).toHaveBeenCalledTimes(2);
}); });
it('should toggle form view when edit or cancel buttons is clicked for contact form', () => { it('should toggle form view when edit or cancel buttons is clicked for contact form', () => {
spyOn(component, 'toggleContactButtons').and.callThrough(); spyOn(component, 'toggleContactSectionEditMode').and.callThrough();
fixture.detectChanges(); fixture.detectChanges();
unitTestingUtils.clickByCSS('#contact-dropdown .app-general-edit'); unitTestingUtils.clickByCSS('#contact-dropdown .app-general-edit');
@@ -196,7 +198,7 @@ describe('ViewProfileComponent', () => {
unitTestingUtils.clickByCSS('#contact-dropdown .app-general-cancel-btn'); unitTestingUtils.clickByCSS('#contact-dropdown .app-general-cancel-btn');
expect(component.toggleContactButtons).toHaveBeenCalledTimes(2); expect(component.toggleContactSectionEditMode).toHaveBeenCalledTimes(2);
}); });
it('should navigate to personal files when go to personal files button is clicked', async () => { it('should navigate to personal files when go to personal files button is clicked', async () => {
projects/aca-content/src/lib/components/view-profile/view-profile.component.ts
+53 -58
View File
@@ -37,6 +37,7 @@ import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { DynamicExtensionComponent } from '@alfresco/adf-extensions'; import { DynamicExtensionComponent } from '@alfresco/adf-extensions';
import { MatInputModule } from '@angular/material/input';
@Component({ @Component({
imports: [ imports: [
@@ -47,6 +48,7 @@ import { DynamicExtensionComponent } from '@alfresco/adf-extensions';
MatIconModule, MatIconModule,
MatDividerModule, MatDividerModule,
MatFormFieldModule, MatFormFieldModule,
MatInputModule,
DynamicExtensionComponent DynamicExtensionComponent
], ],
selector: 'app-view-profile', selector: 'app-view-profile',
@@ -56,22 +58,35 @@ import { DynamicExtensionComponent } from '@alfresco/adf-extensions';
}) })
export class ViewProfileComponent implements OnInit { export class ViewProfileComponent implements OnInit {
peopleApi: PeopleApi; peopleApi: PeopleApi;
profileForm = new FormGroup({
profileForm: FormGroup; firstName: new FormControl(''),
lastName: new FormControl(''),
jobTitle: new FormControl(''),
location: new FormControl(''),
telephone: new FormControl('', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
mobile: new FormControl('', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
companyName: new FormControl(''),
companyPostCode: new FormControl(''),
companyAddress: new FormControl(''),
companyTelephone: new FormControl('', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
companyEmail: new FormControl('', [Validators.email])
});
personDetails: Person; personDetails: Person;
generalSectionExpanded = true;
generalSectionDropdown = true; generalSectionEditMode = false;
generalSectionButtonsToggle = true; contactSectionExpanded = false;
contactSectionEditMode = false;
loginSectionDropdown = false;
loginSectionButtonsToggle = true;
passwordSectionDropdown = false;
contactSectionDropdown = false;
contactSectionButtonsToggle = true;
appNavNarMode$: Observable<'collapsed' | 'expanded'>; appNavNarMode$: Observable<'collapsed' | 'expanded'>;
sections: UserProfileSection[] = []; sections: UserProfileSection[] = [];
get generalSectionButtonTooltip(): string {
return `APP.TOOLTIPS.${this.generalSectionExpanded ? 'COLLAPSE' : 'EXPAND'}_SECTION`;
}
get contactSectionButtonTooltip(): string {
return `APP.TOOLTIPS.${this.contactSectionExpanded ? 'COLLAPSE' : 'EXPAND'}_SECTION`;
}
constructor( constructor(
private router: Router, private router: Router,
private readonly apiService: AlfrescoApiService, private readonly apiService: AlfrescoApiService,
@@ -105,19 +120,18 @@ export class ViewProfileComponent implements OnInit {
} }
populateForm(userInfo: Person) { populateForm(userInfo: Person) {
this.profileForm = new FormGroup({ this.profileForm.setValue({
jobTitle: new FormControl(userInfo?.jobTitle || ''), firstName: userInfo?.firstName || '',
location: new FormControl(userInfo?.location || ''), lastName: userInfo?.lastName || '',
telephone: new FormControl(userInfo?.telephone || '', [Validators.pattern('^([0-9]+-)*[0-9]+$')]), jobTitle: userInfo?.jobTitle || '',
mobile: new FormControl(userInfo?.mobile || '', [Validators.pattern('^([0-9]+-)*[0-9]+$')]), location: userInfo?.location || '',
oldPassword: new FormControl(''), telephone: userInfo?.telephone || '',
newPassword: new FormControl(''), mobile: userInfo?.mobile || '',
verifyPassword: new FormControl(''), companyName: userInfo?.company?.organization || '',
companyName: new FormControl(userInfo?.company?.organization || ''), companyPostCode: userInfo?.company?.postcode || '',
companyPostCode: new FormControl(userInfo?.company?.postcode || ''), companyAddress: userInfo?.company?.address1 || '',
companyAddress: new FormControl(userInfo?.company?.address1 || ''), companyTelephone: userInfo?.company?.telephone || '',
companyTelephone: new FormControl(userInfo?.company?.telephone || '', [Validators.pattern('^([0-9]+-)*[0-9]+$')]), companyEmail: userInfo?.company?.email || ''
companyEmail: new FormControl(userInfo?.company?.email || '', [Validators.email])
}); });
} }
@@ -127,56 +141,37 @@ export class ViewProfileComponent implements OnInit {
}); });
} }
toggleGeneralDropdown() { toggleGeneralSection() {
this.generalSectionDropdown = !this.generalSectionDropdown; this.generalSectionExpanded = !this.generalSectionExpanded;
} }
toggleGeneralButtons() { toggleGeneralSectionEditMode() {
this.generalSectionButtonsToggle = !this.generalSectionButtonsToggle; this.generalSectionEditMode = !this.generalSectionEditMode;
if (!this.generalSectionButtonsToggle) { if (this.generalSectionEditMode) {
this.generalSectionDropdown = true; this.generalSectionExpanded = true;
} }
} }
onSaveGeneralData(event) { onSaveGeneralData(event) {
this.generalSectionButtonsToggle = !this.generalSectionButtonsToggle; this.generalSectionEditMode = false;
this.updatePersonDetails(event); this.updatePersonDetails(event);
} }
onSaveLoginData() {
this.passwordSectionDropdown = !this.passwordSectionDropdown;
this.loginSectionButtonsToggle = !this.loginSectionButtonsToggle;
}
onSaveCompanyData(event) { onSaveCompanyData(event) {
this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle; this.contactSectionEditMode = false;
this.updatePersonDetails(event); this.updatePersonDetails(event);
} }
toggleLoginDropdown() { toggleContactSection() {
this.loginSectionDropdown = !this.loginSectionDropdown; this.contactSectionExpanded = !this.contactSectionExpanded;
} }
toggleLoginButtons() { toggleContactSectionEditMode() {
this.loginSectionButtonsToggle = !this.loginSectionButtonsToggle; this.contactSectionEditMode = !this.contactSectionEditMode;
this.passwordSectionDropdown = !this.passwordSectionDropdown;
if (!this.loginSectionButtonsToggle) { if (this.contactSectionEditMode) {
this.loginSectionDropdown = true; this.contactSectionExpanded = true;
this.passwordSectionDropdown = true;
}
}
toggleContactDropdown() {
this.contactSectionDropdown = !this.contactSectionDropdown;
}
toggleContactButtons() {
this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle;
if (!this.contactSectionButtonsToggle) {
this.contactSectionDropdown = true;
} }
} }
projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.scss
+5 -27
View File
@@ -23,45 +23,23 @@ app-create-from-template-dialog {
&-field { &-field {
width: 100%; width: 100%;
margin-bottom: 15px;
&:first-of-type {
margin-bottom: 9.5px;
}
&:nth-of-type(2) {
margin-bottom: 6.5px;
}
} }
&-content { &-content {
margin: 0 2px; margin: 0 2px;
overflow: hidden; overflow: hidden;
form:first-child {
margin-top: 5px;
}
.app-create-from-template-field { .app-create-from-template-field {
.mdc-floating-label { .mdc-floating-label {
-webkit-font-smoothing: subpixel-antialiased; -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 { .mat-mdc-form-field-error-wrapper {
margin-left: -2px;
font-size: 10.5px; font-size: 10.5px;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
} }
projects/aca-content/src/lib/ui/mat-selectors.scss
+1
View File
@@ -99,4 +99,5 @@ $mat-select-disabled: '.mat-mdc-select-disabled';
$mat-select-value: '.mat-mdc-select-value'; $mat-select-value: '.mat-mdc-select-value';
$mat-checkbox-native-control: '.mdc-checkbox__native-control'; $mat-checkbox-native-control: '.mdc-checkbox__native-control';
$mat-card-header: '.mat-mdc-card-header'; $mat-card-header: '.mat-mdc-card-header';
$mat-form-field-hint-wrapper: '.mat-mdc-form-field-hint-wrapper';
$mat-expansion-panel-body: '.mat-expansion-panel-body'; $mat-expansion-panel-body: '.mat-expansion-panel-body';
projects/aca-content/src/lib/ui/overrides/adf-variables.scss
-2
View File
@@ -81,11 +81,9 @@
--adf-theme-spacing: 8px, --adf-theme-spacing: 8px,
// components // components
--adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12), --adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12),
--adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05),
--adf-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698), --adf-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698),
--adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7), --adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7),
--adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24), --adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24),
--adf-metadata-property-panel-title-color: rgb(33, 33, 33),
--adf-error-color: #ba1b1b, --adf-error-color: #ba1b1b,
--adf-secondary-button-background: #2121210d, --adf-secondary-button-background: #2121210d,
--adf-secondary-modal-text-color: #212121, --adf-secondary-modal-text-color: #212121,
projects/aca-content/src/lib/ui/theme.scss
+43 -20
View File
@@ -18,6 +18,43 @@
--mdc-checkbox-selected-hover-icon-color: var(--theme-blue-checkbox-color); --mdc-checkbox-selected-hover-icon-color: var(--theme-blue-checkbox-color);
--mdc-checkbox-selected-focus-icon-color: var(--theme-blue-checkbox-color); --mdc-checkbox-selected-focus-icon-color: var(--theme-blue-checkbox-color);
--mat-dialog-container-max-width: 100%; --mat-dialog-container-max-width: 100%;
@include mat.form-field-overrides(
(
outlined-label-text-populated-size: 18px,
outlined-label-text-color: var(--theme-selected-text-color),
outlined-hover-label-text-color: var(--adf-theme-foreground-text-color),
outlined-disabled-input-text-color: var(--adf-theme-foreground-text-color-040),
outlined-disabled-label-text-color: var(--adf-theme-foreground-text-color-040),
outlined-disabled-outline-color: var(--adf-theme-foreground-text-color-040),
subscript-text-size: 12px
)
);
}
.adf-search-properties-form,
.adf-search-date-range {
@include mat.form-field-overrides(
(
outlined-label-text-populated-size: 14px
)
);
#{ms.$mat-form-field} .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
line-height: 18px;
}
}
.adf-property-readonly-value {
color: var(--adf-theme-foreground-text-color-040);
.adf-dateitem-editable-controls {
color: var(--adf-theme-foreground-text-color-040);
}
}
#{ms.$mat-form-field} .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
line-height: 22px;
} }
mat-toolbar { mat-toolbar {
@@ -28,20 +65,6 @@ mat-toolbar {
color: var(--theme-secondary-text); color: var(--theme-secondary-text);
} }
#{ms.$mat-text-field-filled}:not(#{ms.$mat-text-field-disabled}) {
padding: 0;
}
#{ms.$mat-form-field-error-wrapper}:is(div) {
padding: 0;
font-size: 10px;
#{ms.$mat-form-field-error} {
position: relative;
top: -3px;
}
}
#{ms.$mat-checkbox} { #{ms.$mat-checkbox} {
#{ms.$mat-checkbox-box}:has(div) { #{ms.$mat-checkbox-box}:has(div) {
padding-right: 2px; padding-right: 2px;
@@ -316,12 +339,6 @@ adf-dynamic-component {
} }
} }
#{ms.$mat-notched-outline-trailing},
#{ms.$mat-notched-outline-notch},
#{ms.$mat-notched-outline-leading} {
border-color: var(--adf-theme-foreground-text-color-014);
}
#{ms.$mat-menu-surface}#{ms.$mat-autocomplete-panel}:is(div) { #{ms.$mat-menu-surface}#{ms.$mat-autocomplete-panel}:is(div) {
padding: 0; padding: 0;
@@ -358,3 +375,9 @@ adf-dynamic-component {
right: 6px; right: 6px;
transform: translateY(-50%); transform: translateY(-50%);
} }
#{ms.$mat-form-field-hint-wrapper} {
/* stylelint-disable-next-line declaration-no-important */
padding-left: 0 !important;
color: var(--adf-theme-foreground-secondary-text-color);
}
projects/aca-content/src/lib/ui/variables/variables.scss
-2
View File
@@ -65,7 +65,6 @@ $defaults: (
--theme-tab-active-text-color: mat.m2-get-color-from-palette($foreground, text), --theme-tab-active-text-color: mat.m2-get-color-from-palette($foreground, text),
--theme-text-bold-color: mat.m2-get-color-from-palette($foreground, text, 0.87), --theme-text-bold-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
--theme-title-color: mat.m2-get-color-from-palette($foreground, text, 0.87), --theme-title-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
--theme-text-disabled-color: mat.m2-get-color-from-palette($foreground, text, 0.38),
--theme-border-color: mat.m2-get-color-from-palette($foreground, text, 0.07), --theme-border-color: mat.m2-get-color-from-palette($foreground, text, 0.07),
--theme-card-background-color: mat.m2-get-color-from-palette($background, card), --theme-card-background-color: mat.m2-get-color-from-palette($background, card),
--theme-foreground-text-color: mat.m2-get-color-from-palette($foreground, text, 0.72), --theme-foreground-text-color: mat.m2-get-color-from-palette($foreground, text, 0.72),
@@ -83,7 +82,6 @@ $defaults: (
--theme-warning-snackbar-background: $warning-snackbar-background, --theme-warning-snackbar-background: $warning-snackbar-background,
--theme-blue-checkbox-color: $blue-checkbox-background, --theme-blue-checkbox-color: $blue-checkbox-background,
--theme-blue-active-table-row-color: $blue-active-table-row, --theme-blue-active-table-row-color: $blue-active-table-row,
--theme-heading-color: $black-heading,
--theme-content-color: $light-grey-content, --theme-content-color: $light-grey-content,
--theme-dropdown-color: $theme-dropdown-background, --theme-dropdown-color: $theme-dropdown-background,
--theme-dropdown-background-hover: $theme-dropdown-background-hover, --theme-dropdown-background-hover: $theme-dropdown-background-hover,
projects/aca-playwright-shared/src/page-objects/components/actions-dropdown.component.ts
+1 -1
View File
@@ -77,7 +77,7 @@ export class ActionsDropdownComponent extends BaseComponent {
private actionSimpleWorkflowLabelApproveLocator = `[data-automation-id="card-boolean-label-approve-move"]`; private actionSimpleWorkflowLabelApproveLocator = `[data-automation-id="card-boolean-label-approve-move"]`;
private actionSimpleWorkflowSRejectStepLocator = '[data-automation-id="header-reject-step"] input'; private actionSimpleWorkflowSRejectStepLocator = '[data-automation-id="header-reject-step"] input';
private actionSimpleWorkflowRejectFolderLocator = `[data-automation-id="header-reject-folder"] input`; private actionSimpleWorkflowRejectFolderLocator = `[data-automation-id="header-reject-folder"] input`;
private readonly mimeTypeDropdownLocator = this.getChild('[data-automation-class="select-box"][aria-label="Mimetype *"]'); private readonly mimeTypeDropdownLocator = this.getChild('[data-automation-id="select-box"][aria-label="Mimetype *"]');
private readonly actionTransformAndCopyContentDestinationFolderLocator = '[data-automation-id="card-textitem-value-destination-folder"]'; private readonly actionTransformAndCopyContentDestinationFolderLocator = '[data-automation-id="card-textitem-value-destination-folder"]';
private readonly contentNodeSelectorSearchInput = '[data-automation-id="content-node-selector-search-input"]'; private readonly contentNodeSelectorSearchInput = '[data-automation-id="content-node-selector-search-input"]';
projects/aca-playwright-shared/src/page-objects/components/manageRules/manage-rules.component.ts
+1 -1
View File
@@ -35,7 +35,7 @@ export class ManageRules extends BaseComponent {
public ruleDetailsDeleteButton = this.getChild('#delete-rule-btn'); public ruleDetailsDeleteButton = this.getChild('#delete-rule-btn');
public ruleDetailsEditButton = this.getChild('#edit-rule-btn'); public ruleDetailsEditButton = this.getChild('#edit-rule-btn');
public ruleDetailsWhenText = this.getChild('[data-automation-id="rule-details-triggers-component"]'); public ruleDetailsWhenText = this.getChild('[data-automation-id="rule-details-triggers-component"]');
public ruleDetailsPerformActionsDiv = this.getChild('adf-card-view-selectitem .adf-property-read-only'); public ruleDetailsPerformActionsDiv = this.getChild('adf-card-view-selectitem [data-automation-id="select-box"]');
public rulesEmptyListTitle = this.getChild('.adf-empty-content__title'); public rulesEmptyListTitle = this.getChild('.adf-empty-content__title');
public ruleActions = this.getChild('aca-rule-action'); public ruleActions = this.getChild('aca-rule-action');
public ruleConditionsInGroup = this.getChild('aca-rule-composite-condition aca-rule-simple-condition'); public ruleConditionsInGroup = this.getChild('aca-rule-composite-condition aca-rule-simple-condition');
projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.scss
-28
View File
@@ -1,28 +0,0 @@
@use '../../styles/mat-selectors' as ms;
aca-info-drawer {
.aca-info-drawer {
.adf-card-view-textitem {
.adf-property-value-not-editable {
color: var(--adf-metadata-property-panel-title-color);
}
}
.adf-card-view-selectitem #{ms.$mat-form-field-infix} {
padding-left: 0;
padding-right: 0;
}
.adf-property-list .adf-property-value {
#{ms.$mat-select-trigger} {
background-color: var(--adf-metadata-buttons-background-color);
border-radius: 3px;
padding: 2%;
#{ms.$mat-select-arrow-wrapper} {
margin-top: 16px;
}
}
}
}
}
projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts
+1 -9
View File
@@ -37,7 +37,6 @@ import { A11yModule } from '@angular/cdk/a11y';
import { ToolbarComponent } from '../toolbar/toolbar.component'; import { ToolbarComponent } from '../toolbar/toolbar.component';
import { ContentService, NodesApiService } from '@alfresco/adf-content-services'; import { ContentService, NodesApiService } from '@alfresco/adf-content-services';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
@Component({ @Component({
imports: [ imports: [
@@ -52,14 +51,7 @@ import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
], ],
selector: 'aca-info-drawer', selector: 'aca-info-drawer',
templateUrl: './info-drawer.component.html', templateUrl: './info-drawer.component.html',
styleUrl: './info-drawer.component.scss', encapsulation: ViewEncapsulation.None
encapsulation: ViewEncapsulation.None,
providers: [
{
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: { appearance: 'fill', floatLabel: 'always' }
}
]
}) })
export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy { export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
@Input() @Input()