[ACS-8052] inputs for general info for libraries (#3863)

* [ACS-8052] Inputs for general info for libraries * Fix after CR
Alfresco · May 28, 2024 · 7311394 · 7311394
1 parent d782615
commit 7311394
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 0 deletions.
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,6 +2,7 @@
   <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 class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
         <input
           matInput
           [cdkTrapFocusAutoCapture]="form.enabled"
@@ -18,10 +19,12 @@
       </mat-form-field>
 
       <mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper" class="app-library-metadata-form-field">
+        <mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
         <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 class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}</mat-label>
         <mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
           <mat-option [value]="type.value" *ngFor="let type of libraryType">
             {{ type.label | translate }}
@@ -30,6 +33,7 @@
       </mat-form-field>
 
       <mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper" class="app-library-metadata-form-field">
+        <mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
         <textarea
           matInput
           placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"

diff --git a/.../src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.scss b/.../src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.scss
@@ -1,5 +1,51 @@
+/* stylelint-disable selector-class-pattern */
+
 app-library-metadata-form {
   .app-library-metadata-form-field {
     width: 100%;
+
+    .mat-mdc-form-field-flex {
+      border-bottom: 1px solid;
+
+      .mat-mdc-form-field-infix {
+        padding-bottom: 3px;
+      }
+    }
+
+    &.mat-form-field-disabled {
+      .mat-mdc-form-field-flex {
+        border-bottom: 1px dotted var(--theme-text-disabled-color);
+      }
+    }
+
+    &.mat-focused {
+      .mat-mdc-form-field-flex {
+        border-bottom: 2px solid var(--theme-blue-button-color);
+      }
+    }
+  }
+
+  .mdc-text-field--disabled.mdc-text-field--filled {
+    background: transparent;
+  }
+
+  .mat-mdc-card-content:first-child {
+    padding: 8px 16px;
+  }
+
+  .app-library-metadata-form-field-label {
+    color: var(--theme-text-color);
+  }
+
+  .mdc-text-field {
+    padding: 0;
+  }
+
+  .mdc-line-ripple {
+    display: none;
+  }
+
+  .mat-mdc-form-field-subscript-wrapper {
+    height: 10px;
   }
 }