diff --git a/projects/aca-content/src/lib/components/details/details.component.html b/projects/aca-content/src/lib/components/details/details.component.html index de8c24fee0..b666177a26 100644 --- a/projects/aca-content/src/lib/components/details/details.component.html +++ b/projects/aca-content/src/lib/components/details/details.component.html @@ -8,9 +8,9 @@
- {{ node.name }} - - - {{ 'APP.INFO_DRAWER.TITLE' | translate }} + + header image + {{ node.name }}
diff --git a/projects/aca-content/src/lib/components/details/details.component.scss b/projects/aca-content/src/lib/components/details/details.component.scss index 873bfb1bc3..4c664a8f9c 100644 --- a/projects/aca-content/src/lib/components/details/details.component.scss +++ b/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; } } diff --git a/projects/aca-content/src/lib/components/details/details.component.spec.ts b/projects/aca-content/src/lib/components/details/details.component.spec.ts index 0988ca7033..3f6bfd9055 100644 --- a/projects/aca-content/src/lib/components/details/details.component.spec.ts +++ b/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; 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); + }); }); diff --git a/projects/aca-content/src/lib/components/details/details.component.ts b/projects/aca-content/src/lib/components/details/details.component.ts index a025c0409c..487c386cea 100644 --- a/projects/aca-content/src/lib/components/details/details.component.ts +++ b/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(); 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': diff --git a/projects/aca-content/src/lib/services/node-actions.service.spec.ts b/projects/aca-content/src/lib/services/node-actions.service.spec.ts index f825c894c2..262e1143c7 100644 --- a/projects/aca-content/src/lib/services/node-actions.service.spec.ts +++ b/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`); + }); + }); }); diff --git a/projects/aca-content/src/lib/services/node-actions.service.ts b/projects/aca-content/src/lib/services/node-actions.service.ts index 7b2c1493d2..ab3a7d1d79 100644 --- a/projects/aca-content/src/lib/services/node-actions.service.ts +++ b/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(/\.[^/.]+$/); diff --git a/projects/aca-content/src/lib/ui/variables/variables.scss b/projects/aca-content/src/lib/ui/variables/variables.scss index c68a38a8fc..c2ec873d7a 100644 --- a/projects/aca-content/src/lib/ui/variables/variables.scss +++ b/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 diff --git a/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html b/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html index 5f07ca0f5d..31de24e212 100644 --- a/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html +++ b/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html @@ -2,11 +2,11 @@
- + - + - + \ No newline at end of file