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

* Revert "[ACS-7768] unify inputs and selects across the app (#9687)" This reverts commit 7cfb5ea. * ACS-7768 Little correction
Alfresco · Jul 3, 2024 · 7ae60b4 · 7ae60b4
1 parent 1bcd840
commit 7ae60b4
Show file tree

Hide file tree

Showing 39 changed files with 487 additions and 400 deletions.
diff --git a/...tent-services/src/lib/category/categories-management/categories-management.component.html b/...tent-services/src/lib/category/categories-management/categories-management.component.html
@@ -1,15 +1,15 @@
 <div class="adf-categories-management">
-    <mat-form-field *ngIf="categoryNameControlVisible" class="adf-category-name-field">
-        <mat-label>{{ 'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}</mat-label>
+    <div *ngIf="categoryNameControlVisible" class="adf-category-name-field">
         <input #categoryNameInput
             matInput
             autocomplete="off"
             [formControl]="categoryNameControl"
             (keyup.enter)="addCategory()"
+            placeholder="{{'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}"
             adf-auto-focus
             />
         <mat-error *ngIf="categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
-    </mat-form-field>
+    </div>
     <div class="adf-categories-list" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
         <span
             *ngFor="let category of categories"

diff --git a/...tent-services/src/lib/category/categories-management/categories-management.component.scss b/...tent-services/src/lib/category/categories-management/categories-management.component.scss
@@ -1,6 +1,18 @@
 .adf-categories-management {
     .adf-category-name-field {
+        justify-content: space-between;
         width: 100%;
+        color: var(--adf-metadata-property-panel-text-color);
+        background: var(--adf-metadata-buttons-background-color);
+        height: 32px;
+        border-radius: 12px;
+        align-items: center;
+
+        input {
+            background-color: transparent;
+            padding: 7px 8px 8px;
+            width: 100%;
+        }
     }
 
     .adf-assigned-categories {

diff --git a/...ices/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss b/...ices/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
@@ -9,6 +9,22 @@ $panel-properties-height: 56px !default;
             border: 1px solid var(--adf-metadata-property-panel-border-color);
             border-radius: 12px;
             margin: 12px;
+
+            .adf-property-list .adf-property .adf-property-field {
+                .adf-property-value:not(.adf-card-view-selectitem .adf-property-value) {
+                    margin-top: 10px;
+                    height: 32px;
+
+                    &:is(textarea) {
+                        padding-top: 6px;
+                    }
+                }
+
+                label {
+                    font-size: 19px;
+                    line-height: 20px;
+                }
+            }
         }
 
         .adf-metadata-properties-header {
@@ -23,6 +39,15 @@ $panel-properties-height: 56px !default;
 
         #{$mat-expansion-panel-body} {
             padding-top: 16px;
+
+            input {
+                border-color: transparent;
+                width: 100%;
+
+                &:focus-visible {
+                    outline: none;
+                }
+            }
         }
 
         .adf-edit-icon-buttons {

diff --git a/...tent-node-selector/content-node-selector-panel/content-node-selector-panel.component.html b/...tent-node-selector/content-node-selector-panel/content-node-selector-panel.component.html
@@ -1,5 +1,6 @@
 <div class="adf-content-node-selector-content">
     <mat-form-field floatPlaceholder="never"
+                    appearance="outline"
                     class="adf-content-node-selector-content-input"
                     subscriptSizing="dynamic"
                     *ngIf="showSearch">

diff --git a/...ontent-services/src/lib/content-node-selector/site-dropdown/sites-dropdown.component.html b/...ontent-services/src/lib/content-node-selector/site-dropdown/sites-dropdown.component.html
@@ -1,5 +1,5 @@
 <div id="site-dropdown-container" class="adf-site-dropdown-container">
-    <mat-form-field class="adf-sites-dropdown-form-field" subscriptSizing="dynamic">
+    <mat-form-field class="adf-sites-dropdown-form-field" appearance="outline" subscriptSizing="dynamic">
         <mat-label>{{ 'NODE_SELECTOR.LOCATION' | translate }}</mat-label>
         <mat-select
             adf-infinite-select-scroll

diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
@@ -31,13 +31,13 @@
                     [style.display]="isExpiryDateToggleChecked ? 'block' : 'none'"
                     data-automation-id="adf-slide-toggle-checked"
                     class="adf-share-link__date-time-container">
-                    <mat-form-field class="adf-full-width" data-automation-id="adf-content-share-expiration-field">
+                    <mat-form-field class="adf-full-width" subscriptSizing="dynamic" data-automation-id="adf-content-share-expiration-field">
                         <mat-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label>
                         <mat-datepicker-toggle
                             [disabled]="time.disabled"
                             [for]="datePicker"
                             matSuffix
-                            class="adf-share-link__icon">
+                            class="adf-share-link__icon adf-share-link__calender-icon">
                         </mat-datepicker-toggle>
                         <mat-datepicker
                             #datePicker
@@ -75,16 +75,16 @@
                 <mat-form-field
                     subscriptSizing="dynamic"
                     floatLabel="always"
-                    class="adf-full-width"
+                    class="adf-full-width adf-share-link__form--field"
                     data-automation-id="adf-content-share-public-link-field"
                     [ngClass]="isLinkWithExpiryDate? 'adf-share-link__border-color' : ''">
-                    <mat-label>{{ 'SHARE.PUBLIC-LINK' | translate }}</mat-label>
                     <input
                         #sharedLinkInput
                         data-automation-id="adf-share-link"
                         class="adf-share-link__input"
                         matInput
                         cdkFocusInitial
+                        placeholder="{{ 'SHARE.PUBLIC-LINK' | translate }}"
                         [attr.aria-label]="'SHARE.PUBLIC-LINK' | translate"
                         formControlName="sharedUrl"
                         readonly="readonly">

diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
@@ -34,6 +34,15 @@
 
         &__form {
             padding-top: 8px;
+
+            #{$mat-form-field-infix}:has(.adf-share-link__input) {
+                border-top: 0.9375em solid transparent;
+                height: 16px;
+            }
+
+            &--field {
+                padding-bottom: 16px;
+            }
         }
 
         &__public-content {
@@ -55,12 +64,12 @@
             margin: 8px 0;
 
             &-sharable {
-                margin-bottom: 14px;
+                margin-bottom: 0;
             }
         }
 
         &--sharable-container {
-            margin-bottom: 14px;
+            margin-bottom: 0;
         }
 
         &--header {
@@ -107,30 +116,23 @@
             font-size: 22px;
         }
 
+        &__calender-icon {
+            top: 12px;
+            position: relative;
+            right: -6px;
+
+            svg {
+                height: 18px;
+                width: 18px;
+            }
+        }
+
         &__date-time-container {
-            padding-bottom: 2px;
+            padding-bottom: 20px;
         }
 
         &__border-color {
-            &.adf-full-width {
-                &#{$mat-form-field} {
-                    &#{$mat-form-field-label-always-float} {
-                        &#{$mat-form-field-appearance-outline} {
-                            #{$mat-text-field-outlined}, #{$mat-text-field-outlined}:hover {
-                                #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
-                                    border-color: var(--theme-warn-color-a700);
-                                    border-width: 2px;
-                                }
-
-                                #{$mat-notched-outline-notch} {
-                                    border-left: none;
-                                    border-left-width: 0;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
+            border: 1px solid var(--theme-warn-color-a700);
         }
     }
 

diff --git a/lib/content-services/src/lib/dialogs/folder.dialog.html b/lib/content-services/src/lib/dialogs/folder.dialog.html
@@ -4,7 +4,7 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
 
 <mat-dialog-content class="adf-folder-dialog-content">
     <form [formGroup]="form" (submit)="submit()">
-        <mat-form-field class="adf-full-width">
+        <mat-form-field class="adf-full-width" appearance="outline">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.LABEL' | translate }}</mat-label>
             <input
                 id="adf-folder-name-input"
@@ -15,18 +15,18 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
                 adf-auto-focus
             />
 
-            <mat-error *ngIf="form.controls['name'].dirty">
+            <mat-hint *ngIf="form.controls['name'].dirty">
                 <span *ngIf="form.controls['name'].errors?.required">
                     {{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.ERRORS.REQUIRED' | translate }}
                 </span>
 
                 <span *ngIf="!form.controls['name'].errors?.required && form.controls['name'].errors?.message">
                     {{ form.controls['name'].errors?.message | translate }}
                 </span>
-            </mat-error>
+            </mat-hint>
         </mat-form-field>
 
-        <mat-form-field class="adf-full-width">
+        <mat-form-field class="adf-full-width" appearance="outline">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_TITLE.LABEL' | translate }}</mat-label>
             <input
                 id="adf-folder-title-input"
@@ -36,7 +36,7 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
             />
         </mat-form-field>
 
-        <mat-form-field class="adf-full-width">
+        <mat-form-field class="adf-full-width" appearance="outline">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_DESCRIPTION.LABEL' | translate }}</mat-label>
             <textarea
                 id="adf-folder-description-input"

diff --git a/lib/content-services/src/lib/dialogs/library/library.dialog.html b/lib/content-services/src/lib/dialogs/library/library.dialog.html
@@ -2,7 +2,7 @@ <h2 mat-dialog-title>{{ createTitle | translate }}</h2>
 
 <mat-dialog-content class="adf-library-dialog-content">
   <form novalidate [formGroup]="form" (submit)="submit()">
-    <mat-form-field class="adf-library-dialog-form-field">
+    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
       <input
         required
@@ -28,7 +28,7 @@ <h2 mat-dialog-title>{{ createTitle | translate }}</h2>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="adf-library-dialog-form-field">
+    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
       <input
         required
@@ -46,7 +46,7 @@ <h2 mat-dialog-title>{{ createTitle | translate }}</h2>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="adf-library-dialog-form-field">
+    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
       <textarea
         matInput

diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json
@@ -437,7 +437,10 @@
         "WEEKS": "In the last {{value}} weeks",
         "MONTHS": "In the last {{value}} months"
       },
-      "BETWEEN_PLACEHOLDER": "Start Date - End Date",
+      "BETWEEN_PLACEHOLDERS": {
+        "START_DATE": "Start Date",
+        "END_DATE": "End Date"
+      },
       "ERROR": {
         "IN_LAST": "Value required",
         "START_DATE": {

diff --git a/.../src/lib/permission-manager/components/add-permission/add-permission-panel.component.html b/.../src/lib/permission-manager/components/add-permission/add-permission-panel.component.html
@@ -1,11 +1,11 @@
-<mat-form-field class="adf-permission-search-input">
-    <mat-label>{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}</mat-label>
+<mat-form-field appearance="outline" floatPlaceholder="never" class="adf-permission-search-input">
     <input
         matInput
         id="searchInput"
         [formControl]="searchInput"
         type="text"
         title="{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}"
+        placeholder="{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}"
         [value]="searchedWord"
     />
 

diff --git a/...ib/permission-manager/components/permission-container/permission-container.component.scss b/...ib/permission-manager/components/permission-container/permission-container.component.scss
@@ -10,10 +10,6 @@
             position: relative;
         }
 
-        .adf-datatable-row {
-            min-height: 85px;
-        }
-
         .adf-delete-permission-column {
             min-width: 80px;
 

diff --git a/...ices/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts b/...ices/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts
@@ -45,8 +45,13 @@ import { RoleModel } from '../../models/role.model';
         `
             .adf-role-selector-field.mat-mdc-form-field {
                 width: 100%;
+                height: 40px;
                 max-width: 200px;
 
+                .mat-mdc-form-field-infix {
+                    padding-top: 8px;
+                }
+
                 .mat-mdc-form-field-subscript-wrapper {
                     display: none;
                 }

diff --git a/...h/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html b/...h/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
@@ -1,5 +1,4 @@
-<mat-form-field class="adf-chip-list">
-    <mat-label>{{ placeholder | translate }}</mat-label>
+<mat-form-field class="adf-chip-list" appearance="outline">
     <mat-chip-grid #chipList [attr.aria-label]="'SEARCH.FILTER.ARIA-LABEL.OPTIONS-SELECTION' | translate">
         <mat-chip-row
             class="adf-option-chips adf-autocomplete-added-option-chips"
@@ -17,6 +16,7 @@
             </button>
         </mat-chip-row>
         <input
+            placeholder="{{ placeholder | translate }}"
             aria-controls="adf-search-chip-autocomplete"
             #optionInput
             [formControl]="formCtrl"

diff --git a/...h/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss b/...h/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
@@ -4,24 +4,28 @@
 adf-search-chip-autocomplete-input {
     .adf-chip-list {
         width: 100%;
-
-        mat-chip-grid {
-            padding-left: 9px;
-        }
-
-        .adf-search-properties-file-input {
-            margin-left: 0;
-        }
     }
 
     .adf-chip-list:has(#{$mat-notched-outline}) {
-        margin-top: 2px;
+        margin-top: 4px;
     }
 
     #{$mat-form--text-field-infix} {
         border: none;
     }
 
+    .adf-chip-list#{$mat-form-field} {
+        #{$mat-form-field-infix} {
+            padding-top: 14px;
+            padding-bottom: 14px;
+            min-height: unset;
+        }
+    }
+
+    .adf-search-properties-file-input {
+        margin-left: 3px;
+    }
+
     .adf-autocomplete-added-option-chips.adf-option-chips {
         border: 1px solid var(--theme-text-color);
         border-radius: 10px;

diff --git a/...ch/components/search-date-range-tabbed/search-date-range/search-date-range.component.html b/...ch/components/search-date-range-tabbed/search-date-range/search-date-range.component.html
@@ -28,19 +28,12 @@
       <mat-radio-button [value]="DateRangeType.BETWEEN" data-automation-id="date-range-between">
         {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }}
       </mat-radio-button>
-      <mat-form-field class="adf-search-date-range-form-field">
-        <mat-label>{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDER' | translate }}</mat-label>
+      <mat-form-field class="adf-search-date-range-form-field" subscriptSizing="dynamic">
         <mat-date-range-input [rangePicker]="$any(picker)" [max]="convertedMaxDate">
-          <input
-              matStartDate
-              data-automation-id="date-range-between-start-input"
-              [formControl]="betweenStartDateFormControl"
-              (change)="dateChanged($event, betweenStartDateFormControl)">
-          <input
-              matEndDate
-              data-automation-id="date-range-between-end-input"
-              [formControl]="betweenEndDateFormControl"
-              (change)="dateChanged($event, betweenEndDateFormControl)">
+          <input matStartDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.START_DATE' | translate }}"
+                 data-automation-id="date-range-between-start-input" [formControl]="betweenStartDateFormControl" (change)="dateChanged($event, betweenStartDateFormControl)">
+          <input matEndDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.END_DATE' | translate }}"
+                 data-automation-id="date-range-between-end-input" [formControl]="betweenEndDateFormControl" (change)="dateChanged($event, betweenEndDateFormControl)">
         </mat-date-range-input>
         <mat-datepicker-toggle matSuffix [for]="picker" data-automation-id="date-range-between-datepicker-toggle"></mat-datepicker-toggle>
         <mat-date-range-picker #picker></mat-date-range-picker>