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 2d9dda876a..e881ca337c 100644 --- a/projects/aca-content/src/lib/components/details/details.component.html +++ b/projects/aca-content/src/lib/components/details/details.component.html @@ -8,17 +8,12 @@
- {{ node.name }} - - - {{ 'APP.INFO_DRAWER.TITLE' | translate }} + + Info Drawer icon + {{ 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..398816a44a 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: 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; } } 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..7539875135 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 @@ -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); + }); }); 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..6e4bfa828c 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): string { + 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..ad62b7bbaa 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,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`); + }); + }); }); 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..98bb02a071 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): 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(/\.[^/.]+$/); diff --git a/projects/aca-content/src/lib/ui/variables/variables.scss b/projects/aca-content/src/lib/ui/variables/variables.scss index c68a38a8fc..aabe4c658f 100644 --- a/projects/aca-content/src/lib/ui/variables/variables.scss +++ b/projects/aca-content/src/lib/ui/variables/variables.scss @@ -35,6 +35,10 @@ $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); +$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: ( @@ -74,7 +78,12 @@ $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, + --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 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 diff --git a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss index 2e1049fc4e..ff881a2cf9 100644 --- a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss +++ b/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 {