mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-31 17:38:28 +00:00
[ACS-6081] Reduce references to internal Angular material CSS classes (#3534)
* [ACS-6081] Reduce references to internal Angular material CSS classes * [ACS-6081] rollback default scrollable value [ci:force] * [ACS-6081] linting * [ACS-6081] fix e2es * [ACS-6081] cr fix * [ACS-6081] remove adf-cli logger from e2es
This commit is contained in:
committed by
GitHub
parent
7468111d19
commit
7c95b53c8b
@@ -4,8 +4,9 @@
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
|
||||
adf-card-view .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem .mat-form-field .mat-form-field-infix {
|
||||
width: 280px;
|
||||
adf-card-view .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -2,11 +2,11 @@
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
|
||||
&.childCompositeCondition {
|
||||
&.aca-childCompositeCondition {
|
||||
padding: 8px 16px;
|
||||
background-color: hsl(0deg, 0%, 100%);
|
||||
|
||||
&.secondaryBackground {
|
||||
&.aca-secondaryBackground {
|
||||
background-color: hsl(0deg, 0%, 95%);
|
||||
}
|
||||
}
|
||||
|
@@ -62,10 +62,10 @@ import { RuleSimpleConditionUiComponent } from './rule-simple-condition.ui-compo
|
||||
]
|
||||
})
|
||||
export class RuleCompositeConditionUiComponent implements ControlValueAccessor, OnDestroy, OnChanges {
|
||||
@HostBinding('class.secondaryBackground')
|
||||
@HostBinding('class.aca-secondaryBackground')
|
||||
@Input()
|
||||
secondaryBackground = false;
|
||||
@HostBinding('class.childCompositeCondition')
|
||||
@HostBinding('class.aca-childCompositeCondition')
|
||||
@Input()
|
||||
childCondition = false;
|
||||
|
||||
|
@@ -11,7 +11,7 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="aca-rule-simple-condition__form__comparator-input" [class]="{ hidden: isComparatorHidden }" data-automation-id="comparator-form-field">
|
||||
<mat-form-field class="aca-rule-simple-condition__form__comparator-input" [class]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
|
||||
<mat-select formControlName="comparator" data-automation-id="comparator-select">
|
||||
<mat-option
|
||||
*ngFor="let comparator of selectedFieldComparators"
|
||||
|
@@ -10,7 +10,7 @@
|
||||
}
|
||||
|
||||
&__comparator-input {
|
||||
&.hidden {
|
||||
&.aca-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
@@ -1,16 +1,14 @@
|
||||
.aca-edit-rule-dialog-container {
|
||||
--edit-rule-dialog-padding: 8px 20px;
|
||||
|
||||
.mat-dialog-container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.aca-edit-rule-dialog {
|
||||
margin: -24px;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
margin: -43px -24px 0;
|
||||
padding: var(--edit-rule-dialog-padding);
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid var(--theme-border-color);
|
||||
@@ -29,7 +27,7 @@
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin: 0;
|
||||
margin: 0 -24px;
|
||||
padding: 0;
|
||||
|
||||
&__spinner {
|
||||
@@ -41,7 +39,7 @@
|
||||
}
|
||||
|
||||
&__footer {
|
||||
margin: 0;
|
||||
margin: 0 -24px -43px;
|
||||
padding: var(--edit-rule-dialog-padding);
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid var(--theme-border-color);
|
||||
|
@@ -3,6 +3,7 @@
|
||||
<mat-checkbox
|
||||
formControlName="isAsynchronous"
|
||||
(change)="toggleErrorScriptDropdown($event)"
|
||||
class="aca-rule-options__checkbox"
|
||||
data-automation-id="rule-option-checkbox-asynchronous">
|
||||
{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.IS_ASYNCHRONOUS' | translate }}
|
||||
</mat-checkbox>
|
||||
@@ -10,7 +11,7 @@
|
||||
<mat-form-field
|
||||
data-automation-id="rule-option-form-field-errorScript"
|
||||
floatLabel="always"
|
||||
[ngClass]="{ 'hide-error-script-dropdown': hideErrorScriptDropdown }">
|
||||
[ngClass]="{ 'aca-hide-error-script-dropdown': hideErrorScriptDropdown }">
|
||||
|
||||
<mat-select
|
||||
formControlName="errorScript"
|
||||
@@ -31,6 +32,7 @@
|
||||
<div class="aca-rule-options__option" *ngIf="!readOnly || isInheritableChecked">
|
||||
<mat-checkbox
|
||||
formControlName="isInheritable"
|
||||
class="aca-rule-options__checkbox"
|
||||
data-automation-id="rule-option-checkbox-inheritable">
|
||||
{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.IS_INHERITABLE' | translate }}
|
||||
</mat-checkbox>
|
||||
@@ -39,6 +41,7 @@
|
||||
<div class="aca-rule-options__option" *ngIf="!readOnly">
|
||||
<mat-checkbox
|
||||
formControlName="isDisabled"
|
||||
class="aca-rule-options__checkbox"
|
||||
data-automation-id="rule-option-checkbox-disabled">
|
||||
{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.DISABLE_RULE' | translate }}
|
||||
</mat-checkbox>
|
||||
|
@@ -8,11 +8,11 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.read-only .mat-checkbox-inner-container {
|
||||
&.aca-read-only &__checkbox label > span:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide-error-script-dropdown {
|
||||
.aca-hide-error-script-dropdown {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
@@ -45,11 +45,11 @@ describe('RuleOptionsUiComponent', () => {
|
||||
const testErrorScriptFormFieldVisibility = (isVisible: boolean) => {
|
||||
if (isVisible) {
|
||||
expect((getByDataAutomationId('rule-option-form-field-errorScript').nativeElement as HTMLElement).classList).not.toContain(
|
||||
'hide-error-script-dropdown'
|
||||
'aca-hide-error-script-dropdown'
|
||||
);
|
||||
} else {
|
||||
expect((getByDataAutomationId('rule-option-form-field-errorScript').nativeElement as HTMLElement).classList).toContain(
|
||||
'hide-error-script-dropdown'
|
||||
'aca-hide-error-script-dropdown'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
@@ -74,7 +74,7 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnChanges,
|
||||
@Input()
|
||||
errorScriptConstraint: ActionParameterConstraint;
|
||||
|
||||
@HostBinding('class.read-only')
|
||||
@HostBinding('class.aca-read-only')
|
||||
readOnly = false;
|
||||
|
||||
onChange: (options: RuleOptions) => void = () => undefined;
|
||||
|
@@ -1,10 +1,10 @@
|
||||
<form class="aca-rule-details__form" [ngClass]="{ 'read-only': readOnly }" [formGroup]="form">
|
||||
<form class="aca-rule-details__form" [ngClass]="{ 'aca-read-only': readOnly }" [formGroup]="form">
|
||||
|
||||
<ng-container *ngIf="!preview">
|
||||
<div class="aca-rule-details__form__row aca-rule-details__form__name">
|
||||
<label for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
|
||||
<div>
|
||||
<mat-form-field floatLabel='never'>
|
||||
<mat-form-field floatLabel='never' class="aca-rule-details__form__row__field">
|
||||
<input
|
||||
id="rule-details-name-input"
|
||||
matInput type="text" formControlName="name" data-automation-id="rule-details-name-input"
|
||||
@@ -17,8 +17,9 @@
|
||||
<div class="aca-rule-details__form__row aca-rule-details__form__description">
|
||||
<label for="rule-details-description-textarea">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.DESCRIPTION' | translate }}</label>
|
||||
<div>
|
||||
<mat-form-field floatLabel='never'>
|
||||
<mat-form-field floatLabel='never' class="aca-rule-details__form__row__field">
|
||||
<textarea
|
||||
class="aca-rule-details__form__row__field__textarea"
|
||||
id="rule-details-description-textarea"
|
||||
matInput formControlName="description" data-automation-id="rule-details-description-textarea"
|
||||
[placeholder]="descriptionPlaceHolder | translate">
|
||||
@@ -29,20 +30,20 @@
|
||||
</ng-container>
|
||||
|
||||
<div class="aca-rule-details__form__row aca-rule-details__form__triggers">
|
||||
<div class="label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.WHEN' | translate }}</div>
|
||||
<div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.WHEN' | translate }}</div>
|
||||
<div>
|
||||
<aca-rule-triggers formControlName="triggers" data-automation-id="rule-details-triggers-component"></aca-rule-triggers>
|
||||
<mat-error class="rule-details-error" *ngIf="triggers.hasError('required')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.INSUFFICIENT_TRIGGERS_SELECTED' | translate }}</mat-error>
|
||||
<mat-error class="aca-rule-details-error" *ngIf="triggers.hasError('required')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.INSUFFICIENT_TRIGGERS_SELECTED' | translate }}</mat-error>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="aca-rule-details__form__conditions">
|
||||
<aca-rule-composite-condition formControlName="conditions"></aca-rule-composite-condition>
|
||||
<mat-error class="rule-details-error" *ngIf="conditions.hasError('ruleCompositeConditionInvalid')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.RULE_COMPOSITE_CONDITION_INVALID' | translate }}</mat-error>
|
||||
<mat-error class="aca-rule-details-error" *ngIf="conditions.hasError('ruleCompositeConditionInvalid')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.RULE_COMPOSITE_CONDITION_INVALID' | translate }}</mat-error>
|
||||
</div>
|
||||
|
||||
<div class="aca-rule-details__form__row aca-rule-details__form__actions">
|
||||
<div class="label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.PERFORM_ACTIONS' | translate }}</div>
|
||||
<div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.PERFORM_ACTIONS' | translate }}</div>
|
||||
<aca-rule-action-list
|
||||
formControlName="actions"
|
||||
[actionDefinitions]="actionDefinitions"
|
||||
@@ -53,7 +54,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-rule-details__form__row" *ngIf="showOptionsSection">
|
||||
<div class="label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</div>
|
||||
<div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</div>
|
||||
<aca-rule-options
|
||||
formControlName="options"
|
||||
data-automation-id="rule-details-options-component"
|
||||
|
@@ -25,7 +25,7 @@
|
||||
gap: 8px;
|
||||
|
||||
& > label,
|
||||
& > .label {
|
||||
& > .aca-label {
|
||||
font-weight: bold;
|
||||
width: 20%;
|
||||
min-width: 100px;
|
||||
@@ -35,15 +35,16 @@
|
||||
|
||||
& > div {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
font-size: inherit;
|
||||
&__field {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-top: -11px;
|
||||
font-size: inherit;
|
||||
|
||||
.mat-form-field-infix {
|
||||
border: none;
|
||||
}
|
||||
&__textarea {
|
||||
min-height: 4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -55,17 +56,13 @@
|
||||
&__conditions {
|
||||
width: 100%;
|
||||
|
||||
& > .rule-details-error {
|
||||
& > .aca-rule-details-error {
|
||||
margin-left: 16px;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 4em;
|
||||
}
|
||||
|
||||
.rule-details-error {
|
||||
.aca-rule-details-error {
|
||||
font-size: 75%;
|
||||
height: 1em;
|
||||
}
|
||||
@@ -76,7 +73,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.read-only,
|
||||
&.aca-read-only,
|
||||
.mat-form-field-disabled {
|
||||
.mat-form-field-underline,
|
||||
.mat-select-arrow-wrapper {
|
||||
|
Reference in New Issue
Block a user