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
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
[actionDefinitions]="actionDefinitions"
[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 {
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 {
margin: 4px 0 20px;
@@ -24,16 +20,12 @@
border-radius: 8px;
display: flex;
margin: 10px;
padding: 10px 10px 0;
padding: 10px;
& > .aca-rule-action {
flex: 1;
}
#{ms.$mat-text-field-disabled}#{ms.$mat-text-field-filled} {
background: transparent;
}
&:nth-child(2n) {
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">
<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
formControlName="actionDefinitionId"
data-automation-id="rule-action-select"
@@ -18,7 +18,7 @@
*ngIf="cardViewItems?.length > 0"
data-automation-id="rule-action-card-view"
[properties]="cardViewItems"
class="aca-rule-action-full-width aca-rule-action-card-view"
class="aca-rule-action-full-width"
[editable]="!readOnly" />
</form>
projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss
-7
View File
@@ -9,8 +9,6 @@
gap: 20px;
adf-card-view {
margin-top: -15px;
.adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
display: inline-block;
width: 100%;
@@ -44,10 +42,5 @@
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')"
class="aca-rule-composite-condition__form__row"
*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-select
[formControl]="invertedControl"
@@ -22,7 +22,7 @@
</mat-select>
</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
[formControl]="booleanModeControl">
<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;
gap: 8px;
#{ms.$mat-form-field} {
#{ms.$mat-form-field-infix} {
padding-bottom: 4px;
}
}
& > :nth-child(1) {
width: 7em;
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">
<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-select formControlName="field" data-automation-id="field-select"
(selectionChange)="onChangeField()">
@@ -12,7 +12,7 @@
</mat-select>
</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">
<mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.COMPARATOR' | translate }}</mat-label>
<mat-select formControlName="comparator" data-automation-id="comparator-select">
@@ -25,7 +25,7 @@
</mat-form-field>
<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-select formControlName="parameter" data-automation-id="simple-condition-value-select" *ngSwitchCase="'mimeType'">
<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
data-automation-id="rule-option-form-field-errorScript"
floatLabel="always"
appearance="fill"
class="aca-rule-options__error-script-dropdown"
[ngClass]="{ 'aca-hide-error-script-dropdown': hideErrorScriptDropdown }">
<mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.ERROR_SCRIPT' | translate }}</mat-label>
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 {
fieldset {
display: flex;
@@ -14,7 +16,17 @@
}
&__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 {
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();
fixture.detectChanges();
expect(matFormField).not.toBeNull();
expect(matFormField.componentInstance['floatLabel']).toBe('always');
});
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">
<label class="aca-rule-details__name__label" for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
<div>
<mat-form-field appearance="fill" floatLabel='always' class="aca-rule-details__form__row__field">
<mat-label *ngIf="!name.value">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.PLACEHOLDER.NAME' | translate }}</mat-label>
<mat-form-field class="aca-rule-details__form__row__field">
<input
id="rule-details-name-input"
matInput type="text" formControlName="name" data-automation-id="rule-details-name-input">
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-form-field>
</div>
@@ -17,7 +20,7 @@
<div class="aca-rule-details__form__row aca-rule-details__form__description">
<label for="rule-details-description-textarea">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.DESCRIPTION' | translate }}</label>
<div>
<mat-form-field floatLabel='auto' appearance="fill" class="aca-rule-details__form__row__field">
<mat-form-field class="aca-rule-details__form__row__field">
<textarea
class="aca-rule-details__form__row__field__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__form__triggers {
margin-top: 10px;
}
.aca-rule-details__name__label {
padding-top: 1.5em;
}
.aca-rule-details__form__others {
margin-bottom: 12px;
}
@@ -51,6 +45,11 @@
width: 100%;
max-width: 400px;
font-size: inherit;
margin-bottom: 15px;
&:first-of-type {
margin-top: 10px;
}
label[for='rule-details-name-input'] {
transform: translateY(-20%) scale(1);
@@ -86,40 +85,5 @@
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;
}
}
}