[ACS-5551]property panel design update

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

@@ -8,17 +8,17 @@
     <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="header image" 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>close</mat-icon>
+          <mat-icon>fullscreen_exit</mat-icon>
         </button>
       </div>
 

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

@@ -35,17 +35,19 @@ app-details-manager {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  color: #212121;
 }
 
 .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

@@ -35,11 +35,13 @@ import { NodeEntry } from '@alfresco/js-api';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AuthenticationService, PageTitleService } from '@alfresco/adf-core';
 import { SearchQueryBuilderService } from '@alfresco/adf-content-services';
+import { NodeActionsService } from '../../services/node-actions.service';
 
 describe('DetailsComponent', () => {
   let component: DetailsComponent;
   let fixture: ComponentFixture<DetailsComponent>;
   let contentApiService: ContentApiService;
+  let nodeActionsService: NodeActionsService;
   let store: Store;
   let node: NodeEntry;
 
@@ -86,6 +88,7 @@ describe('DetailsComponent', () => {
     fixture = TestBed.createComponent(DetailsComponent);
     component = fixture.componentInstance;
     contentApiService = TestBed.inject(ContentApiService);
+    nodeActionsService = TestBed.inject(NodeActionsService);
     store = TestBed.inject(Store);
 
     node = {
@@ -128,4 +131,11 @@ describe('DetailsComponent', () => {
     fixture.detectChanges();
     expect(store.dispatch).toHaveBeenCalledWith(new SetSelectedNodesAction([node]));
   });
+
+  it('should call getInfoDrawerIcon with the provided node', () => {
+    fixture.detectChanges();
+    spyOn(nodeActionsService, 'getInfoDrawerIcon');
+    component.getInfoDrawerIcon(node.entry);
+    expect(nodeActionsService.getInfoDrawerIcon).toHaveBeenCalledWith(node.entry);
+  });
 });

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) {
+    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,75 @@ 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);
+    });
+
+    it('should resolve folder icon', () => {
+      spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue(`assets/images/ft_ic_folder.svg`);
+      mockNode.isFolder = true;
+      const value = service.getInfoDrawerIcon(mockNode);
+      expect(value).toContain(`assets/images/ft_ic_folder`);
+    });
+
+    it('should resolve smart folder icon', () => {
+      spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue(`assets/images/ft_ic_smart_folder.svg`);
+
+      mockNode.isFolder = true;
+      const value = service.getInfoDrawerIcon(mockNode);
+
+      expect(value).toContain(`assets/images/ft_ic_smart_folder`);
+    });
+
+    it('should resolve link folder icon', () => {
+      spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue(`assets/images/ft_ic_folder_shortcut_link.svg`);
+      mockNode.isFolder = true;
+      const value = service.getInfoDrawerIcon(mockNode);
+
+      expect(value).toContain(`assets/images/ft_ic_folder_shortcut_link`);
+    });
+
+    it('should resolve rule folder icon', () => {
+      spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue(`assets/images/ft_ic_folder_rule.svg`);
+
+      mockNode.isFolder = true;
+      const value = service.getInfoDrawerIcon(mockNode);
+
+      expect(value).toContain(`assets/images/ft_ic_folder_rule`);
+    });
+
+    it('should resolve file icon for content type', () => {
+      spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue(`assets/images/ft_ic_raster_image.svg`);
+
+      mockNode.isFile = true;
+      mockNode.isFolder = false;
+      const value = service.getInfoDrawerIcon(mockNode);
+
+      expect(value).toContain(`assets/images/ft_ic_raster_image`);
+    });
+
+    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) {
+    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) {
+    if (this.isSmartFolder(node)) {
+      return this.thumbnailService.getMimeTypeIcon('smartFolder');
+    } else if (this.isRuleFolder(node)) {
+      return this.thumbnailService.getMimeTypeIcon('ruleFolder');
+    } else if (this.isALinkFolder(node)) {
+      return this.thumbnailService.getMimeTypeIcon('linkFolder');
+    } else {
+      return this.thumbnailService.getMimeTypeIcon('folder');
+    }
+  }
+
+  isSmartFolder(node: Node) {
+    const nodeAspects = this.getNodeAspectNames(node);
+    return nodeAspects.indexOf('smf:customConfigSmartFolder') > -1 || nodeAspects.indexOf('smf:systemConfigSmartFolder') > -1;
+  }
+
+  isRuleFolder(node: Node) {
+    const nodeAspects = this.getNodeAspectNames(node);
+    return nodeAspects.indexOf('rule:rules') > -1;
+  }
+
+  isALinkFolder(node: Node) {
+    const nodeType = node.nodeType;
+    return nodeType === 'app:folderlink';
+  }
+
+  private getNodeAspectNames(node: Node): any[] {
+    return node.aspectNames ? node.aspectNames : [];
+  }
+
   public getNewNameFrom(name: string, baseName?: string) {
     const extensionMatch = name.match(/\.[^/.]+$/);
 

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

@@ -35,6 +35,8 @@ $action-button-text-color: rgba(33, 35, 40, 0.7);
 $page-layout-header-background-color: #fff;
 $search-chip-icon-color: #757575;
 $disabled-chip-background-color: #f5f5f5;
+$adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12);
+$adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05);
 
 // CSS Variables
 $defaults: (
@@ -74,7 +76,9 @@ $defaults: (
   --theme-action-button-text-color: $action-button-text-color,
   --theme-page-layout-header-background-color: $page-layout-header-background-color,
   --theme-search-chip-icon-color: $search-chip-icon-color,
-  --theme-disabled-chip-background-color: $disabled-chip-background-color
+  --theme-disabled-chip-background-color: $disabled-chip-background-color,
+  --adf-metadata-property-panel-border-color: $adf-metadata-property-panel-border-color,
+  --adf-metadata-buttons-background-color: $adf-metadata-buttons-background-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>