[ACS-5551]property panel updated

Alfresco · Sep 2, 2023 · b3a9fd8 · b3a9fd8
1 parent 95b1892
commit b3a9fd8
Show file tree

Hide file tree

Showing 20 changed files with 493 additions and 283 deletions.
diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html
@@ -289,7 +289,8 @@
         <adf-info-drawer-layout *ngIf="showVersions" class="app-manage-versions-sidebar">
             <div info-drawer-content>
 
-                <adf-info-drawer [title]="'Details'" *ngIf="documentList.selection[0]">
+                <adf-info-drawer [drawerIcon]="documentList.selection[0].entry" [title]="'Details'" *ngIf="documentList.selection[0]">
+
                     <adf-info-drawer-tab label="Properties">
                         <adf-content-metadata-card
                             [node]="documentList.selection[0].entry"

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
@@ -30,7 +30,7 @@
             .mat-form-field-flex {
                 background: none;
             }
-        
+
             .mat-form-field-infix {
                 padding: 0;
             }

diff --git a/...ices/src/lib/content-metadata/components/content-metadata/content-metadata.component.html b/...ices/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
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
@@ -1,7 +1,8 @@
 .adf {
     &-metadata-properties {
         mat-expansion-panel-header {
-            height: 56px;
+            height: 64px;
+            padding: 0 12px;
 
             .adf-metadata-properties-title {
                 font-weight: normal;
@@ -12,6 +13,12 @@
 
         .mat-expansion-panel:not([class*='mat-elevation-z']) {
             box-shadow: none;
+            border: solid 1px;
+            border-color: #0000001f;
+        }
+
+        .mat-expansion-panel-body {
+            padding: 0 24px 12px;
         }
 
         .adf-mat-divider {
@@ -114,9 +121,7 @@
     .mat-tab-body-content {
         .adf-metadata-properties {
             .mat-expansion-panel {
-                width: 755px;
-                border: 1px solid var(--adf-metadata-property-panel-border-color);
-                margin: 24px;
+                width: 100%;
                 border-radius: 12px;
             }
         }
@@ -128,3 +133,10 @@
         box-shadow: none;
     }
 }
+
+.adf-metadata-properties-panel {
+    display: flex;
+    flex-direction: row;
+    margin: 24px;
+    gap: 24px;
+}
diff --git a/lib/core/src/lib/card-view/card-view.module.ts b/lib/core/src/lib/card-view/card-view.module.ts
@@ -45,6 +45,7 @@ import { CardViewKeyValuePairsItemComponent } from './components/card-view-keyva
 import { CardViewSelectItemComponent } from './components/card-view-selectitem/card-view-selectitem.component';
 import { CardViewArrayItemComponent } from './components/card-view-arrayitem/card-view-arrayitem.component';
 import { SelectFilterInputComponent } from './components/card-view-selectitem/select-filter-input/select-filter-input.component';
+import { MatDividerModule } from '@angular/material/divider';
 
 @NgModule({
     imports: [
@@ -66,7 +67,8 @@ import { SelectFilterInputComponent } from './components/card-view-selectitem/se
         MatDatetimepickerModule,
         MatNativeDatetimeModule,
         MatSlideToggleModule,
-        MatTooltipModule
+        MatTooltipModule,
+        MatDividerModule
     ],
     declarations: [
         CardViewComponent,

diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
@@ -1,10 +1,12 @@
 <label class="adf-property-label"
+    [ngClass]="{'adf-property-label-not-editable' : !isEditable() && editable}"
      [attr.data-automation-id]="'card-dateitem-label-' + property.key"
      *ngIf="showProperty() || isEditable()"
      [attr.for]="'card-view-dateitem-' + property.key">
     {{ property.label | translate }}
 </label>
-<div class="adf-property-value adf-property-value-padding-top">
+<div class="adf-property-value adf-property-value-padding-top"
+[ngClass]="{'adf-property-dateitem-edit-mode' : editable, 'adf-property-label-not-editable' : !isEditable() && editable}">
     <span *ngIf="!isEditable() && !property.multivalued"
           [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
         <span *ngIf="showProperty()"
@@ -98,3 +100,4 @@
         </mat-form-field>
     </div>
 </div>
+<mat-divider *ngIf="showProperty() && !editable"></mat-divider>
diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
@@ -11,6 +11,23 @@
         float: right;
     }
 
+    &-property-label{
+        color:#212328B2;
+        display: flex;
+        padding: 6px 0;
+        line-height: 20px;
+    }
+
+    &-property-dateitem-edit-mode{
+        background-color: #2121210D;
+        border-radius: 6px;
+        padding-left: 12px;
+
+        .mat-select-value{
+            color:#212328B2;
+        }
+    }
+
     &-dateitem-chip-list-container.adf-property-field {
         margin-bottom: -7px !important;
         border-bottom: 0;

diff --git a/...ore/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html b/...ore/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
@@ -2,6 +2,7 @@
     <div
         [attr.data-automation-id]="'card-select-label-' + property.key"
         class="adf-property-label"
+        [ngClass]="{'adf-property-label-not-editable' : !isEditable() && editable}"
     >{{ property.label | translate }}</div>
     <div class="adf-property-field">
         <div
@@ -15,6 +16,7 @@
                 <mat-select
                     [(value)]="value"
                     panelClass="adf-select-filter"
+                    [ngClass]="{'adf-property-select-edit-mode' : isEditable(),'adf-property-normal-mode':!isEditable(),'adf-property-label-not-editable' : !isEditable() && editable}"
                     (selectionChange)="onChange($event)"
                     data-automation-class="select-box"
                     [aria-label]="property.label | translate"

diff --git a/...ore/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss b/...ore/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
@@ -3,13 +3,8 @@
 }
 
 .adf-select-item-padding {
-    padding-top: 6px;
-    padding-bottom: 20px;
-}
-
-.adf-select-item-padding-editable {
-    padding-top: 6px;
-    padding-bottom: 6px;
+    display: flex;
+    padding: 6px 0;
 }
 
 .adf-select-filter-input {

diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
@@ -2,14 +2,16 @@
     <div *ngSwitchDefault>
         <mat-form-field class="adf-property-field adf-card-textitem-field"
             [ngClass]="{ 'adf-property-read-only': !isEditable, 'adf-property-field-has-error mat-form-field-invalid': isEditable && hasErrors }"
-            [floatLabel]="'never'"
+            [floatLabel]="'always'"
             appearance="standard">
-            <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
+            <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
+            [ngClass]="{'adf-property-label-not-editable' : !isEditable && editable}">
                 {{ property.label | translate }}
             </mat-label>
                 <input matInput
                     *ngIf="!property.multiline"
                     class="adf-property-value"
+                    [ngClass]="{'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : !isEditable && editable}"
                     title="{{property.label | translate }}"
                     [placeholder]="property.default"
                     [attr.aria-label]="property.label | translate"
@@ -27,34 +29,21 @@
                     [cdkAutosizeMaxRows]="1"
                     [cdkAutosizeMaxRows]="5"
                     class="adf-property-value"
+                    [ngClass]="{'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : !isEditable && editable}"
                     [placeholder]="property.default"
                     [attr.aria-label]="property.label | translate"
                     [formControl]="textInput"
                     [attr.data-automation-id]="'card-textitem-value-' + property.key">
                 </textarea>
 
-                <button
-                    *ngIf="isEditable"
-                    matSuffix
-                    class="adf-textitem-clear-icon"
-                    [attr.aria-label]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
-                    (click)="clearValue()">
-                    <mat-icon>cancel</mat-icon>
-                </button>
-                <button
-                    *ngIf="isEditable"
-                    matSuffix
-                    class="adf-textitem-edit-icon"
-                    [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate">
-                    <mat-icon>mode_edit</mat-icon>
-                </button>
-
         </mat-form-field>
+        <mat-divider *ngIf="showProperty && !editable"></mat-divider>
     </div>
 
     <div *ngSwitchCase="'chipsTemplate'"
          class="adf-property-field adf-textitem-chip-list-container">
-        <mat-label *ngIf="showLabelForChips" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
+        <mat-label *ngIf="showLabelForChips" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
+        [ngClass]="{'adf-property-label-not-editable' : !isEditable && editable}">
             {{ property.label | translate }}
         </mat-label>
         <mat-chip-list #chipList
@@ -74,15 +63,14 @@
             [floatLabel]="'never'">
             <input matInput
                 class="adf-property-value"
+                [ngClass]="{'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : !isEditable && editable}"
                 title="{{property.label | translate }}"
                 [placeholder]="editedValue ? '' : property.default | translate"
                 [attr.aria-label]="property.label | translate"
                 [matChipInputFor]="chipList"
                 [matChipInputAddOnBlur]="true"
                 (matChipInputTokenEnd)="addValueToList($event)"
                 [attr.data-automation-id]="'card-textitem-editchipinput-' + property.key">
-            <mat-icon matSuffix
-                class="adf-textitem-edit-icon">mode_edit</mat-icon>
         </mat-form-field>
     </div>
 
@@ -94,14 +82,15 @@
         (click)="clicked()">
         <mat-form-field class="adf-property-field adf-card-textitem-field" appearance="standard"
             [floatLabel]="'never'">
-            <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
+            <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
+            [ngClass]="{'adf-property-label-not-editable' : !isEditable && editable}">
                 {{ property.label | translate }}
             </mat-label>
             <input matInput
                 [type]=property.inputType
                 class="adf-property-value"
                 title="{{property.label | translate }}"
-                [ngClass]="{ 'adf-textitem-clickable-value': !isEditable }"
+                [ngClass]="{ 'adf-textitem-clickable-value': !isEditable,'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : !isEditable && editable }"
                 [placeholder]="property.default"
                 [attr.aria-label]="property.label | translate"
                 [(ngModel)]="editedValue"

diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
@@ -1,4 +1,9 @@
 .adf {
+
+    &-property-field .mat-form-field-underline {
+        display: none;
+    }
+
     &-textitem-edit-icon.mat-icon {
         font-size: var(--theme-subheading-2-font-size);
         width: 16px;

diff --git a/...core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts b/...core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
@@ -185,24 +185,6 @@ describe('CardViewTextItemComponent', () => {
 
         });
 
-        it('should render the edit icon in case of editable:true', () => {
-            component.editable = true;
-            component.property.editable = true;
-
-            fixture.detectChanges();
-
-            const editIcon = fixture.debugElement.query(By.css('.adf-textitem-edit-icon'));
-            expect(editIcon).not.toBeNull('Edit icon should be shown');
-        });
-
-        it('should NOT render the edit icon in case of editable:false', async () => {
-            component.editable = false;
-            fixture.detectChanges();
-            await fixture.whenStable();
-            const editIcon = fixture.debugElement.query(By.css('.adf-textitem-edit-icon'));
-            expect(editIcon).toBeNull('Edit icon should NOT be shown');
-        });
-
         it('should NOT render the picker and toggle in case of editable:true but (general) editable:false', async () => {
             component.editable = false;
             component.property.editable = true;
@@ -493,26 +475,6 @@ describe('CardViewTextItemComponent', () => {
             expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('myValueToCopy', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
         });
 
-        it('should clear value when clear value icon is clicked', async () => {
-            spyOn(component, 'update');
-            component.property.value = 'testValue';
-            component.property.icon = 'FAKE_ICON';
-            component.property.clickable = true;
-            component.property.editable = true;
-            component.editable = true;
-            component.property.isValid = () => true;
-
-            fixture.detectChanges();
-            await fixture.whenStable();
-            fixture.detectChanges();
-            const clickEl = fixture.debugElement.query(By.css(`.adf-textitem-clear-icon`));
-            clickEl.triggerEventHandler('click', new MouseEvent('click'));
-
-            fixture.detectChanges();
-            const elementValue = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
-            expect(elementValue.nativeElement.textContent).toEqual('');
-            expect(component.update).toHaveBeenCalled();
-        });
     });
 
     describe('Update', () => {

diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss
@@ -6,23 +6,78 @@
     border-radius: var(--adf-card-view-border-radius);
 
     .adf-property {
-        margin-bottom: 20px;
 
         .adf-property-value-padding-top {
-            margin-top: 6px;
+            display: flex;
+            flex-direction:column;
+            padding-top: 6px;
+            padding-bottom: 6px;
+            line-height: 20px;
+        }
+
+        .adf-property-label-not-editable {
+            color:#2121213D;
         }
 
         .adf-property-field {
             width: 100%;
-            margin-bottom: -25px;
 
             .mat-form-field-infix {
+                display: flex;
                 border-top-width: 0;
+                padding: 0px;
             }
 
             .mat-form-field-label {
-                margin-top: 6px;
+                padding: 6px 0;
+                justify-content: center;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .mat-form-field-label-wrapper {
+                padding-top:0;
+                top:-1px;
+            }
+
+            .mat-input-element.adf-property-normal-mode {
+                color:#212121;
+                margin-top: 32px;
+                padding: 6px 0;
+                line-height: 20px;
             }
+
+            .mat-input-element.adf-property-edit-mode {
+                padding: 6px 0 6px 12px;
+                margin-top: 32px;
+                line-height: 20px;
+                background-color: #2121210D;
+                color:#212328B2;
+                border-radius: 6px;
+            }
+
+            .mat-select.adf-property-select-edit-mode {
+                padding: 6px 0 6px 12px;
+                margin-top: 0;
+                line-height: 20px;
+                background-color: #2121210D;
+                border-radius: 6px;
+
+                .mat-select-min-line{
+                    color:#212328B2;
+            }   }
         }
     }
 }
+
+.mat-form-field-wrapper {
+    padding-bottom:0;
+}
+
+.mat-form-field-appearance-standard .mat-form-field-flex {
+    padding-top:0 !important;
+}
+
+.mat-form-field-appearance-legacy .mat-form-field-wrapper {
+    padding-bottom:0 !important;
+}