[ACS-8101] [ACA] Testing Angular 15 - Manage rule popup visual changes (

#3891)
Alfresco · Jun 14, 2024 · 3328606 · 3328606
1 parent dc28bcf
commit 3328606
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 20 deletions.
diff --git a/...ntent/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.html b/...ntent/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.html
@@ -7,7 +7,7 @@
     class="aca-rule-composite-condition__form__row"
     *ngFor="let control of conditionFormControls; let i = index">
 
-    <mat-form-field *ngIf="i === 0" appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field *ngIf="i === 0" subscriptSizing="dynamic">
       <mat-select
         [formControl]="invertedControl"
         [disabled]="readOnly">
@@ -16,7 +16,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field *ngIf="i > 0" appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field *ngIf="i > 0" subscriptSizing="dynamic">
       <mat-select
         [formControl]="booleanModeControl">
         <mat-option value="and">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LOGIC_OPERATORS.AND' | translate }}</mat-option>

diff --git a/...ntent/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss b/...ntent/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss
@@ -1,3 +1,5 @@
+@import '@alfresco/adf-core/lib/styles/mat-selectors';
+
 .aca-rule-composite-condition {
   display: block;
   border-radius: 8px;
@@ -16,6 +18,27 @@
     flex-direction: column;
     gap: 8px;
 
+    .aca-rule-composite-condition__form__row {
+      display: flex;
+      gap: 8px;
+
+      #{$mat-form-field} {
+        #{$mat-form-field-infix} {
+          padding-bottom: 4px;
+        }
+      }
+
+      & > :nth-child(1) {
+        width: 7em;
+        height: fit-content;
+        font-size: inherit;
+      }
+
+      & > :nth-child(2) {
+        flex: 1;
+      }
+    }
+
     &__no-conditions {
       color: var(--theme-disabled-text-color);
       margin: 0.5em 0;
@@ -35,20 +58,5 @@
         margin-right: 0;
       }
     }
-
-    &__row {
-      display: flex;
-      gap: 8px;
-
-      & > :nth-child(1) {
-        width: 7em;
-        height: fit-content;
-        font-size: inherit;
-      }
-
-      & > :nth-child(2) {
-        flex: 1;
-      }
-    }
   }
 }
diff --git a/...-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html b/...-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html
@@ -1,5 +1,5 @@
 <form class="aca-rule-simple-condition__form" [formGroup]="form">
-  <mat-form-field class="aca-rule-simple-condition__form__field-input" appearance="outline" subscriptSizing="dynamic">
+  <mat-form-field class="aca-rule-simple-condition__form__field-input" subscriptSizing="dynamic">
     <mat-select formControlName="field" data-automation-id="field-select"
       (selectionChange)="onChangeField()">
       <mat-option *ngIf="!isSelectedFieldKnown" [value]="selectedField.name" data-automation-id="unknown-field-option">
@@ -12,7 +12,7 @@
   </mat-form-field>
 
   <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__comparator-input" subscriptSizing="dynamic"
-                  [class]="{ 'aca-hidden': isComparatorHidden }" appearance="outline" data-automation-id="comparator-form-field">
+                  [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"
@@ -23,7 +23,7 @@
   </mat-form-field>
 
   <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__parameter-input"
-                  subscriptSizing="dynamic" appearance="outline" [ngSwitch]="selectedField.type">
+                  subscriptSizing="dynamic" [ngSwitch]="selectedField.type">
     <mat-select formControlName="parameter" data-automation-id="simple-condition-value-select" *ngSwitchCase="'mimeType'">
       <mat-option *ngFor="let mimeType of mimeTypes"
         [value]="mimeType.value">