[ACS-5551]updated property panel design

projects/aca-content/src/lib/components/details/details.component.html

@@ -8,17 +8,12 @@
     <div class="acs-details-container">
       <div class="acs-details-title">
         <div class="acs-details-breadcrumb" role="heading" aria-level="2" *ngIf="node">
-          <span class="acs-details-breadcrumb-library"> {{ node.name }} </span>
-          -
-          <span class="acs-details-breadcrumb-item">{{ 'APP.INFO_DRAWER.TITLE' | translate }}</span>
+          <span class="acs-details-breadcrumb-library">
+            <img class="acs-details-breadcrumb-icon" alt="Info Drawer icon" src="{{ getInfoDrawerIcon(node) }}">       
+            {{ node.name }} </span>
         </div>
-        <button
-          class="aca-close-details-button"
-          mat-icon-button
-          data-automation-id="close-library"
-          title="{{ 'APP.INFO_DRAWER.CLOSE' | translate }}"
-          (click)="goBack()">
-          <mat-icon>fullscreen_exit</mat-icon>
+        <button class="aca-close-details-button" mat-icon-button data-automation-id="close-library" title="{{ 'APP.INFO_DRAWER.CLOSE' | translate }}" (click)="goBack()">
+          <mat-icon>close</mat-icon>
         </button>
       </div>
 

projects/aca-content/src/lib/components/details/details.component.scss

@@ -41,17 +41,19 @@ app-details-manager {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  color: var(--adf-metadata-property-panel-title-color);
 }
 
 .acs-details-breadcrumb {
-  font-size: 18px;
+  font-size: 20px;
   margin-left: 20px;
 
   .acs-details-breadcrumb-library {
-    font-weight: 900;
+    font-weight: 400;
   }
 
-  .acs-details-breadcrumb-item {
-    font-weight: 100;
+  .acs-details-breadcrumb-icon {
+    display: inline-block;
+    vertical-align: text-bottom;
   }
 }

projects/aca-content/src/lib/components/details/details.component.spec.ts

@@ -49,6 +49,38 @@ describe('DetailsComponent', () => {
     select: () => mockStream
   };
 
+  const mockNode = {
+    isFile: false,
+    createdByUser: { id: 'admin', displayName: 'Administrator' },
+    modifiedAt: new Date('2017-05-24T15:08:55.640Z'),
+    nodeType: 'cm:content',
+    content: {
+      mimeType: 'application/rtf',
+      mimeTypeName: 'Rich Text Format',
+      sizeInBytes: 14530,
+      encoding: 'UTF-8'
+    },
+    parentId: 'd124de26-6ba0-4f40-8d98-4907da2d337a',
+    createdAt: new Date('2017-05-24T15:08:55.640Z'),
+    path: {
+      name: '/Company Home/Guest Home',
+      isComplete: true,
+      elements: [
+        {
+          id: '94acfc73-7014-4475-9bd9-93a2162f0f8c',
+          name: 'Company Home'
+        },
+        { id: 'd124de26-6ba0-4f40-8d98-4907da2d337a', name: 'Guest Home' }
+      ]
+    },
+    isFolder: true,
+    modifiedByUser: { id: 'admin', displayName: 'Administrator' },
+    name: 'b_txt_file.rtf',
+    id: '70e1cc6a-6918-468a-b84a-1048093b06fd',
+    properties: { 'cm:versionLabel': '1.0', 'cm:versionType': 'MAJOR' },
+    allowableOperations: ['delete', 'update']
+  };
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [AppTestingModule, DetailsComponent],
@@ -128,4 +160,12 @@ describe('DetailsComponent', () => {
     fixture.detectChanges();
     expect(store.dispatch).toHaveBeenCalledWith(new SetSelectedNodesAction([node]));
   });
+
+  it('should return the icon when getInfoDrawerIcon is called', () => {
+    const expectedIcon = 'assets/images/ft_ic_folder';
+    spyOn(component['nodeActionsService'], 'getInfoDrawerIcon').and.returnValue(expectedIcon);
+    fixture.detectChanges();
+    const result = component.getInfoDrawerIcon(mockNode);
+    expect(result).toContain(expectedIcon);
+  });
 });

projects/aca-content/src/lib/components/details/details.component.ts

@@ -36,6 +36,8 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatButtonModule } from '@angular/material/button';
 import { MetadataTabComponent } from '../info-drawer/metadata-tab/metadata-tab.component';
 import { CommentsTabComponent } from '../info-drawer/comments-tab/comments-tab.component';
+import { NodeActionsService } from '../../services/node-actions.service';
+import { Node } from '@alfresco/js-api';
 
 @Component({
   standalone: true,
@@ -64,7 +66,7 @@ export class DetailsComponent extends PageComponent implements OnInit, OnDestroy
   onDestroy$ = new Subject<boolean>();
   activeTab = 1;
 
-  constructor(private route: ActivatedRoute, private contentApi: ContentApiService) {
+  constructor(private route: ActivatedRoute, private contentApi: ContentApiService, private nodeActionsService: NodeActionsService) {
     super();
   }
 
@@ -87,6 +89,10 @@ export class DetailsComponent extends PageComponent implements OnInit, OnDestroy
     });
   }
 
+  getInfoDrawerIcon(node: Node): string {
+    return this.nodeActionsService.getInfoDrawerIcon(node);
+  }
+
   setActiveTab(tabName: string) {
     switch (tabName) {
       case 'comments':

projects/aca-content/src/lib/services/node-actions.service.spec.ts

@@ -25,7 +25,7 @@
 import { TestBed } from '@angular/core/testing';
 import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { of, throwError, Subject, Observable } from 'rxjs';
-import { AlfrescoApiService, TranslationService } from '@alfresco/adf-core';
+import { AlfrescoApiService, ThumbnailService, TranslationService } from '@alfresco/adf-core';
 import { DocumentListService, NodeAction } from '@alfresco/adf-content-services';
 import { NodeActionsService } from './node-actions.service';
 import { Node, NodeChildAssociationEntry, NodeEntry } from '@alfresco/js-api';
@@ -107,6 +107,7 @@ describe('NodeActionsService', () => {
     service = TestBed.inject(NodeActionsService);
     apiService = TestBed.inject(AlfrescoApiService);
     dialog = TestBed.inject(MatDialog);
+
     apiService.reset();
 
     nodesApi = service['nodesApi'];
@@ -1227,4 +1228,58 @@ describe('NodeActionsService', () => {
       });
     });
   });
+
+  describe('Info Drawer header Icon', () => {
+    let thumbnailService: ThumbnailService;
+
+    const mockNode = {
+      isFolder: false,
+      isFile: false,
+      content: {
+        mimeType: 'image/jpeg'
+      },
+      nodeType: 'app:folderlink',
+      aspectNames: ['aspect1', 'aspect2']
+    };
+
+    beforeEach(() => {
+      thumbnailService = TestBed.inject(ThumbnailService);
+    });
+
+    function testInfoDrawerIcon(iconPath: string, isFoldeType: boolean, isFileType: boolean) {
+      spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue(iconPath);
+      mockNode.isFolder = isFoldeType;
+      mockNode.isFile = isFileType;
+      const value = service.getInfoDrawerIcon(mockNode);
+      expect(value).toContain(iconPath);
+    }
+
+    it('should resolve folder icon', () => {
+      testInfoDrawerIcon('assets/images/ft_ic_folder.svg', true, false);
+    });
+
+    it('should resolve smart folder icon', () => {
+      testInfoDrawerIcon('assets/images/ft_ic_smart_folder.svg', true, false);
+    });
+
+    it('should resolve link folder icon', () => {
+      testInfoDrawerIcon('assets/images/ft_ic_folder_shortcut_link.svg', true, false);
+    });
+
+    it('should resolve rule folder icon', () => {
+      testInfoDrawerIcon('assets/images/ft_ic_folder_rule.svg', true, false);
+    });
+
+    it('should resolve file icon for content type', () => {
+      testInfoDrawerIcon('assets/images/ft_ic_raster_image.svg', false, true);
+    });
+
+    it('should resolve fallback file icon for unknown node', () => {
+      spyOn(thumbnailService, 'getDefaultMimeTypeIcon').and.returnValue(`assets/images/ft_ic_miscellaneous.svg`);
+      mockNode.isFile = false;
+      mockNode.isFolder = false;
+      const value = service.getInfoDrawerIcon(mockNode);
+      expect(value).toContain(`assets/images/ft_ic_miscellaneous`);
+    });
+  });
 });

projects/aca-content/src/lib/services/node-actions.service.ts

@@ -563,6 +563,47 @@ export class NodeActionsService {
     return null;
   }
 
+  getInfoDrawerIcon(node: Node): string {
+    if (node.isFolder) {
+      return this.getFolderIcon(node);
+    }
+    if (node.isFile) {
+      return this.thumbnailService.getMimeTypeIcon(node.content.mimeType);
+    }
+    return this.thumbnailService.getDefaultMimeTypeIcon();
+  }
+
+  private getFolderIcon(node: Node): string {
+    if (this.isSmartFolder(node)) {
+      return this.thumbnailService.getMimeTypeIcon('smartFolder');
+    } else if (this.isRuleFolder(node)) {
+      return this.thumbnailService.getMimeTypeIcon('ruleFolder');
+    } else if (this.isLinkFolder(node)) {
+      return this.thumbnailService.getMimeTypeIcon('linkFolder');
+    } else {
+      return this.thumbnailService.getMimeTypeIcon('folder');
+    }
+  }
+
+  isSmartFolder(node: Node): boolean {
+    const nodeAspects = this.getNodeAspectNames(node);
+    return nodeAspects.includes('smf:customConfigSmartFolder') || nodeAspects.includes('smf:systemConfigSmartFolder');
+  }
+
+  isRuleFolder(node: Node): boolean {
+    const nodeAspects = this.getNodeAspectNames(node);
+    return nodeAspects.includes('rule:rules');
+  }
+
+  isLinkFolder(node: Node): boolean {
+    const nodeType = node.nodeType;
+    return nodeType === 'app:folderlink';
+  }
+
+  private getNodeAspectNames(node: Node): string[] {
+    return node.aspectNames ? node.aspectNames : [];
+  }
+
   public getNewNameFrom(name: string, baseName?: string) {
     const extensionMatch = name.match(/\.[^/.]+$/);
 

projects/aca-content/src/lib/ui/variables/variables.scss

@@ -36,6 +36,10 @@ $page-layout-header-background-color: #fff;
 $search-chip-icon-color: #757575;
 $disabled-chip-background-color: #f5f5f5;
 $contrast-gray: #646569;
+$adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12);
+$adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05);
+$adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7);
+$adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24);
 
 // CSS Variables
 $defaults: (
@@ -77,6 +81,11 @@ $defaults: (
   --theme-search-chip-icon-color: $search-chip-icon-color,
   --theme-disabled-chip-background-color: $disabled-chip-background-color,
   --theme-contrast-gray: $contrast-gray
+  --adf-metadata-property-panel-border-color: $adf-metadata-property-panel-border-color,
+  --adf-metadata-buttons-background-color: $adf-metadata-buttons-background-color,
+  --adf-metadata-property-panel-title-color: $selected-text-color,
+  --adf-metadata-property-panel-text-color: $adf-metadata-property-panel-text-color,
+  --adf-metadata-property-panel-label-color: $adf-metadata-property-panel-label-color
 );
 
 // propagates SCSS variables into the CSS variables scope

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html

@@ -2,11 +2,11 @@
   <mat-progress-bar mode="indeterminate" [attr.aria-label]="'APP.INFO_DRAWER.DATA_LOADING' | translate"></mat-progress-bar>
 </div>
 <ng-container *ngIf="!isLoading && !!displayNode">
-  <adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE'" cdkTrapFocus cdkTrapFocusAutoCapture>
+  <adf-info-drawer [drawerIcon]="node.entry"  [title]="node?.entry ? node.entry.name : 'APP.INFO_DRAWER.TITLE'" cdkTrapFocus cdkTrapFocusAutoCapture>
     <aca-toolbar [items]="actions" info-drawer-buttons></aca-toolbar>
-
+    
     <adf-info-drawer-tab *ngFor="let tab of tabs" [icon]="tab.icon" [label]="tab.title">
       <adf-dynamic-tab [node]="$any(displayNode)" [id]="tab.component" [attr.data-automation-id]="tab.component"> </adf-dynamic-tab>
     </adf-info-drawer-tab>
   </adf-info-drawer>
-</ng-container>
+</ng-container>

projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss

@@ -37,6 +37,8 @@
 
   .aca-page-layout-content {
     @include flex-row;
+
+    border-top: 1px solid var(--adf-metadata-property-panel-border-color);
   }
 
   .aca-page-layout-error {