[ACS-7768] unify inputs and selects across the app (#3845)

* ACS-7768 Style inputs in create from template dialog * ACS-7768 Used globally configured outline appearance for inputs * ACS-7768 Style inputs for profile page * ACS-7768 Style inputs for library metadata form * ACS-7768 Style inputs for folder rules dialog * ACS-7768 Style inputs for manage rules page * ACS-7768 Set outline appearance for input, fix small issue * ACS-7768 Addressed comment
Alfresco · May 17, 2024 · 6a5ef73 · 6a5ef73
1 parent 1ba2b29
commit 6a5ef73
Show file tree

Hide file tree

Showing 15 changed files with 135 additions and 91 deletions.
diff --git a/app/src/app/app.module.ts b/app/src/app/app.module.ts
@@ -64,6 +64,7 @@ import { ShellModule, SHELL_APP_SERVICE, SHELL_AUTH_TOKEN } from '@alfresco/adf-
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { APP_ROUTES } from './app.routes';
 import { MatIconRegistry } from '@angular/material/icon';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
 registerLocaleData(localeFr);
 registerLocaleData(localeDe);
@@ -122,6 +123,12 @@ registerLocaleData(localeSv);
         name: 'app',
         source: 'assets'
       }
+    },
+    {
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      useValue: {
+        appearance: 'outline'
+      }
     }
   ],
   declarations: [AppComponent],

diff --git a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss
@@ -8,13 +8,13 @@
       margin-top: -15px;
 
       .adf-property-list {
-        padding: 8px;
+        padding: 15px 8px 8px;
         background: unset;
       }
 
       .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
         display: inline-block;
-        width: 300px;
+        width: 100%;
 
         .adf-textitem-clickable {
           padding-top: 0;

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" appearance="outline" subscriptSizing="dynamic" class="aca-rule-composite-condition-form-field">
       <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" appearance="outline" subscriptSizing="dynamic" class="aca-rule-composite-condition-form-field">
       <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
@@ -40,6 +40,10 @@
       & > :nth-child(2) {
         flex: 1;
       }
+
+      .aca-rule-composite-condition-form-field {
+        min-width: unset;
+      }
     }
   }
 }
diff --git a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html
@@ -53,7 +53,7 @@
     </aca-rule-action-list>
   </div>
 
-  <div class="aca-rule-details__form__row" *ngIf="showOptionsSection">
+  <div class="aca-rule-details__form__row aca-rule-details__form__options" *ngIf="showOptionsSection">
     <div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</div>
     <aca-rule-options
       formControlName="options"

diff --git a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
@@ -6,6 +6,7 @@
       padding: 8px 20px;
       width: 100%;
       box-sizing: border-box;
+      overflow-x: auto;
 
       &.aca-rule-details__form__description {
         padding-top: 0;
@@ -16,7 +17,6 @@
 
     &__row {
       display: flex;
-      align-items: baseline;
       gap: 8px;
 
       & > label,
@@ -28,6 +28,10 @@
         padding: 0.75em 0;
       }
 
+      & > label {
+        margin-top: 11px;
+      }
+
       & > div {
         flex-grow: 1;
       }
@@ -41,6 +45,19 @@
           min-height: 4em;
         }
       }
+
+      &.aca-rule-details__form__actions {
+        .aca-label {
+          margin-top: 14px;
+        }
+      }
+
+      &.aca-rule-details__form__triggers,
+      &.aca-rule-details__form__options {
+        .aca-label {
+          padding-top: 2px;
+        }
+      }
     }
 
     &:not(:nth-child(1)) {

diff --git a/.../src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html b/.../src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html
@@ -2,12 +2,12 @@
   <mat-card-content>
     <form [formGroup]="form" autocomplete="off">
       <mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper" class="app-library-metadata-form-field">
+        <mat-label>{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
         <input
           matInput
           [cdkTrapFocusAutoCapture]="form.enabled"
           [cdkTrapFocus]="form.enabled"
           required
-          placeholder="{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}"
           formControlName="title"
           [errorStateMatcher]="matcher"
         />
@@ -18,21 +18,23 @@
       </mat-form-field>
 
       <mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper" class="app-library-metadata-form-field">
-        <input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" />
+        <mat-label>{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
+        <input matInput formControlName="id" />
       </mat-form-field>
 
       <mat-form-field floatLabel="auto" data-automation-id="library-visibility-properties-wrapper" class="app-library-metadata-form-field">
-        <mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
+        <mat-label>{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}</mat-label>
+        <mat-select formControlName="visibility">
           <mat-option [value]="type.value" *ngFor="let type of libraryType">
             {{ type.label | translate }}
           </mat-option>
         </mat-select>
       </mat-form-field>
 
       <mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper" class="app-library-metadata-form-field">
+        <mat-label>{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
         <textarea
           matInput
-          placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
           rows="3"
           formControlName="description"
           [errorStateMatcher]="matcher"

diff --git a/...ontent/src/lib/components/search/search-input-control/search-input-control.component.html b/...ontent/src/lib/components/search/search-input-control/search-input-control.component.html
@@ -9,6 +9,7 @@
     <mat-icon class="app-search-input-control-icon app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
   </button>
   <mat-form-field class="app-input-form-field" floatLabel="auto">
+    <mat-label>{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-label>
     <input
       matInput
       #searchInput
@@ -19,7 +20,6 @@
       (ngModelChange)="inputChange($event)"
       (keyup.enter)="searchSubmit($event)"
       class="app-input-form-field-input"
-      [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
       autocomplete="off"
     />
     <div matSuffix class="app-suffix-search-icon-wrapper">

diff --git a/...ontent/src/lib/components/search/search-input-control/search-input-control.component.scss b/...ontent/src/lib/components/search/search-input-control/search-input-control.component.scss
@@ -9,11 +9,6 @@
     font-size: 24px;
     cursor: pointer;
   }
-
-  .app-clear-icon {
-    font-size: 18px;
-    margin: 3px;
-  }
 }
 
 .app-search-container {
@@ -30,7 +25,6 @@
 
   .app-input-form-field {
     letter-spacing: -0.7px;
-    font-size: 16px;
     width: calc(100% - 56px);
 
     &-input {
@@ -44,23 +38,12 @@
         display: none;
       }
     }
-
-    /* stylelint-disable selector-class-pattern */
-    .mat-mdc-form-field-icon-suffix {
-      position: relative;
-      right: -14px;
-    }
   }
 
   .mat-mdc-form-field-flex {
     background: #fff;
   }
 
-  .mat-mdc-text-field-wrapper {
-    height: 44px;
-    padding-left: 0;
-  }
-
   .app-input-form-field-readonly {
     .mat-mdc-text-field-wrapper,
     .mat-mdc-form-field-flex {
@@ -74,6 +57,7 @@
     &-icon {
       font-size: 24px;
       padding-right: 0;
+      margin-top: -10px;
     }
   }
 }
diff --git a/projects/aca-content/src/lib/components/search/search-input/search-input.component.html b/projects/aca-content/src/lib/components/search/search-input/search-input.component.html
@@ -7,15 +7,15 @@
   <button mat-icon-button class="app-search-button" (click)="searchByOption()" [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
     <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
   </button>
-  <mat-form-field class="app-input-form-field app-input-form-field-readonly" [floatLabel]="'auto'">
+  <mat-form-field class="app-input-form-field app-input-form-field-readonly" [floatLabel]="'auto'" appearance="fill">
+    <mat-label>{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-label>
     <input
       matInput
       [attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
       class="app-input-form-field-input"
       [type]="'text'"
       [readonly]="true"
       [value]="searchedWord"
-      [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
     />
 
     <div matSuffix class="app-suffix-search-icon-wrapper app-icon-arrow">

diff --git a/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss b/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss
@@ -36,12 +36,6 @@ $top-margin: 12px;
       caret-color: var(--theme-text-color);
     }
   }
-
-  &:focus-within {
-    label {
-      display: none;
-    }
-  }
 }
 
 /* stylelint-disable-next-line */
@@ -86,6 +80,7 @@ $top-margin: 12px;
   font-size: 16px;
   letter-spacing: -0.7px;
   margin-bottom: -8px;
+  margin-top: 23px;
 
   /* stylelint-disable-next-line */
  .mat-mdc-checkbox {