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

…3850) This reverts commit 6a5ef73.
Alfresco · Jun 6, 2024 · 5fbbf4c · 5fbbf4c
1 parent e1f2122
commit 5fbbf4c
Show file tree

Hide file tree

Showing 15 changed files with 91 additions and 135 deletions.
diff --git a/app/src/app/app.module.ts b/app/src/app/app.module.ts
@@ -64,7 +64,6 @@ 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);
@@ -123,12 +122,6 @@ 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: 15px 8px 8px;
+        padding: 8px;
         background: unset;
       }
 
       .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
         display: inline-block;
-        width: 100%;
+        width: 300px;
 
         .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" class="aca-rule-composite-condition-form-field">
+    <mat-form-field *ngIf="i === 0" appearance="outline" 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" class="aca-rule-composite-condition-form-field">
+    <mat-form-field *ngIf="i > 0" appearance="outline" 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
@@ -40,10 +40,6 @@
       & > :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 aca-rule-details__form__options" *ngIf="showOptionsSection">
+  <div class="aca-rule-details__form__row" *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,7 +6,6 @@
       padding: 8px 20px;
       width: 100%;
       box-sizing: border-box;
-      overflow-x: auto;
 
       &.aca-rule-details__form__description {
         padding-top: 0;
@@ -17,6 +16,7 @@
 
     &__row {
       display: flex;
+      align-items: baseline;
       gap: 8px;
 
       & > label,
@@ -28,10 +28,6 @@
         padding: 0.75em 0;
       }
 
-      & > label {
-        margin-top: 11px;
-      }
-
       & > div {
         flex-grow: 1;
       }
@@ -45,19 +41,6 @@
           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,23 +18,21 @@
       </mat-form-field>
 
       <mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper" class="app-library-metadata-form-field">
-        <mat-label>{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
-        <input matInput formControlName="id" />
+        <input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" />
       </mat-form-field>
 
       <mat-form-field floatLabel="auto" data-automation-id="library-visibility-properties-wrapper" class="app-library-metadata-form-field">
-        <mat-label>{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}</mat-label>
-        <mat-select formControlName="visibility">
+        <mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" 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,7 +9,6 @@
     <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
@@ -20,6 +19,7 @@
       (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,6 +9,11 @@
     font-size: 24px;
     cursor: pointer;
   }
+
+  .app-clear-icon {
+    font-size: 18px;
+    margin: 3px;
+  }
 }
 
 .app-search-container {
@@ -25,6 +30,7 @@
 
   .app-input-form-field {
     letter-spacing: -0.7px;
+    font-size: 16px;
     width: calc(100% - 56px);
 
     &-input {
@@ -38,12 +44,23 @@
         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 {
@@ -57,7 +74,6 @@
     &-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'" appearance="fill">
-    <mat-label>{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-label>
+  <mat-form-field class="app-input-form-field app-input-form-field-readonly" [floatLabel]="'auto'">
     <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,6 +36,12 @@ $top-margin: 12px;
       caret-color: var(--theme-text-color);
     }
   }
+
+  &:focus-within {
+    label {
+      display: none;
+    }
+  }
 }
 
 /* stylelint-disable-next-line */
@@ -80,7 +86,6 @@ $top-margin: 12px;
   font-size: 16px;
   letter-spacing: -0.7px;
   margin-bottom: -8px;
-  margin-top: 23px;
 
   /* stylelint-disable-next-line */
  .mat-mdc-checkbox {