From b4b30cede18553d835da4e18650a743a5739b6d9 Mon Sep 17 00:00:00 2001 From: Anukriti Singh Date: Fri, 1 Sep 2023 19:17:08 +0530 Subject: [PATCH] [ACS-5551]property panel updated --- .../app/components/files/files.component.html | 2 +- .../metadata/metadata-smoke-tests.e2e.ts | 65 +++++----- .../categories-management.component.scss | 2 +- .../content-metadata.component.html | 100 +++++++-------- .../content-metadata.component.scss | 19 ++- .../src/lib/card-view/card-view.module.ts | 4 +- .../card-view-dateitem.component.html | 5 +- .../card-view-dateitem.component.scss | 17 +++ .../card-view-selectitem.component.html | 2 + .../card-view-selectitem.component.scss | 9 +- .../card-view-textitem.component.html | 35 ++--- .../card-view-textitem.component.scss | 5 + .../card-view-textitem.component.spec.ts | 38 ------ .../card-view/card-view.component.scss | 64 ++++++++- .../info-drawer-layout.component.html | 3 + .../info-drawer-layout.component.scss | 6 +- .../info-drawer-layout.component.ts | 1 + .../info-drawer/info-drawer.component.html | 1 + .../info-drawer/info-drawer.component.scss | 15 ++- .../info-drawer/info-drawer.component.spec.ts | 121 ++++++++++++++++-- .../lib/info-drawer/info-drawer.component.ts | 50 ++++++++ .../src/lib/styles/_components-variables.scss | 5 +- .../src/lib/styles/_reference-variables.scss | 4 + 23 files changed, 387 insertions(+), 186 deletions(-) diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html index 273b030f69..8bbf649dad 100644 --- a/demo-shell/src/app/components/files/files.component.html +++ b/demo-shell/src/app/components/files/files.component.html @@ -289,7 +289,7 @@
- + { await expect(await metadataViewPage.getEditIconTooltip()).toEqual(METADATA.EDIT_BUTTON_TOOLTIP); }); - it('[C245654] Should be possible edit the basic Metadata Info of a Document', async () => { + it('[C245654] Should be possible to edit the basic Metadata Info of a Document', async () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); @@ -141,13 +141,6 @@ describe('Metadata component', () => { await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB); await metadataViewPage.editIconGeneralClick(); - await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:name'); - await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:title'); - await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:description'); - - await expect(await metadataViewPage.getPropertyIconTooltip('properties.cm:name')).toEqual('Edit'); - await expect(await metadataViewPage.getPropertyIconTooltip('properties.cm:title')).toEqual('Edit'); - await expect(await metadataViewPage.getPropertyIconTooltip('properties.cm:description')).toEqual('Edit'); await metadataViewPage.enterPropertyText('properties.cm:name', 'exampleText'); await metadataViewPage.clickResetMetadata(); @@ -180,6 +173,35 @@ describe('Metadata component', () => { await metadataViewPage.clickSaveGeneralMetadata(); }); + it('[C261157] Should be possible to use the metadata component When the node is a Folder', async () => { + await contentServicesPage.metadataContent(folderName); + + await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName); + + await expect(await metadataViewPage.getPropertyText('createdByUser.displayName')).toEqual(`${acsUser.firstName} ${acsUser.lastName}`); + await BrowserActions.closeMenuAndDialogs(); + }); + + it('[C261158] Should be possible to edit the metadata When the node is a Folder', async () => { + await contentServicesPage.metadataContent(folderName); + + await metadataViewPage.editIconGeneralClick(); + + await metadataViewPage.enterPropertyText('properties.cm:name', 'newnameFolder'); + await metadataViewPage.clickResetButton(); + await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName); + + await metadataViewPage.editIconGeneralClick(); + await metadataViewPage.enterPropertyText('properties.cm:name', 'newnameFolder'); + await metadataViewPage.clickSaveGeneralMetadata(); + await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual('newnameFolder'); + await metadataViewPage.editIconGeneralClick(); + + await metadataViewPage.enterPropertyText('properties.cm:name', folderName); + await metadataViewPage.clickSaveGeneralMetadata(); + await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName); + }); + it('[C260181] Should be possible edit all the metadata aspect', async () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); @@ -218,33 +240,6 @@ describe('Metadata component', () => { await navigationBarPage.clickLogoutButton(); }); - it('[C261157] Should be possible use the metadata component When the node is a Folder', async () => { - await contentServicesPage.metadataContent(folderName); - - await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName); - await expect(await metadataViewPage.getPropertyText('createdByUser.displayName')).toEqual(`${acsUser.firstName} ${acsUser.lastName}`); - await BrowserActions.closeMenuAndDialogs(); - }); - - it('[C261158] Should be possible edit the metadata When the node is a Folder', async () => { - await contentServicesPage.metadataContent(folderName); - - await metadataViewPage.editIconGeneralClick(); - - await metadataViewPage.enterPropertyText('properties.cm:name', 'newnameFolder'); - await metadataViewPage.clickResetButton(); - await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName); - - await metadataViewPage.editIconGeneralClick(); - await metadataViewPage.enterPropertyText('properties.cm:name', 'newnameFolder'); - await metadataViewPage.clickSaveGeneralMetadata(); - await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual('newnameFolder'); - await metadataViewPage.editIconGeneralClick(); - - await metadataViewPage.enterPropertyText('properties.cm:name', folderName); - await metadataViewPage.clickSaveGeneralMetadata(); - await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName); - }); }); it('[C279960] Should show the last username modifier when modify a File', async () => { diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss index dda0b37bfa..68a34117a6 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss +++ b/lib/content-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/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html index 0e7835d43c..8042a87df2 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html @@ -1,48 +1,48 @@
- - + +
- - {{ generalInfoPanelState ? 'expand_more' : 'chevron_right'}} - - - {{ 'CORE.METADATA.BASIC.HEADER' | translate }} - + + {{ generalInfoPanelState ? 'expand_more' : 'chevron_right'}} + + + {{ 'CORE.METADATA.BASIC.HEADER' | translate }} +
- - + class="adf-metadata-action-buttons"> + +
- - - + + - - - - + + +
- - - - + + +
- - - + + +
+ class="adf-metadata-grouped-properties-container">
- - + + diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss index 60e92143a1..0ccbf3af2f 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss @@ -1,17 +1,24 @@ .adf { &-metadata-properties { - mat-expansion-panel-header { + .mat-expansion-panel-header { height: 56px; + padding: 0 12px; .adf-metadata-properties-title { - font-weight: normal; - font-size: 15px; + font-weight: 700; + font-size: 14px; padding-left: 12px; } } .mat-expansion-panel:not([class*='mat-elevation-z']) { box-shadow: none; + border: 1px solid var(--adf-metadata-property-panel-border-color); + border-radius: 12px; + } + + .mat-expansion-panel-body { + padding: 0 24px 12px; } .adf-mat-divider { @@ -47,7 +54,7 @@ align-items: center; justify-content: center; font-size: 15px; - padding: 24px; + padding: 18px 0 5px; } &-tags { @@ -91,7 +98,7 @@ justify-content: space-between; align-items: center; font-size: 15px; - height: 64px; + height: 56px; button { margin-right: -14px; @@ -116,8 +123,8 @@ .mat-expansion-panel { width: 755px; border: 1px solid var(--adf-metadata-property-panel-border-color); - margin: 24px; border-radius: 12px; + margin: 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 index af328e99fd..832286db52 100644 --- 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 index 8399d648a9..ba038a3c33 100644 --- 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 @@ -
+
+ 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 index 5cd6e66d5c..74a31d68d9 100644 --- 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: var(--adf-metadata-property-panel-text-color); + display: flex; + padding: 6px 0; + line-height: 20px; + } + + &-property-dateitem-edit-mode{ + background-color: var(--adf-metadata-buttons-background-color); + border-radius: 6px; + padding-left: 12px; + + .mat-select-value{ + color: var(--adf-metadata-property-panel-text-color); + } + } + &-dateitem-chip-list-container.adf-property-field { margin-bottom: -7px !important; border-bottom: 0; diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html index 81c0220aaf..273f70d165 100644 --- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html +++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html @@ -2,6 +2,7 @@
{{ property.label | translate }}
- + {{ property.label | translate }} - - - +
- + {{ property.label | translate }} - mode_edit
@@ -94,14 +82,15 @@ (click)="clicked()"> - + {{ property.label | translate }} { }); - 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 index 431612c342..d0ba7a8dd8 100644 --- 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,79 @@ 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-bottom: 6px; + line-height: 20px; + } + + .adf-property-label-not-editable { + color: var(--adf-metadata-property-panel-label-color); } .adf-property-field { width: 100%; - margin-bottom: -25px; .mat-form-field-infix { + display: flex; border-top-width: 0; + padding: 0; } .mat-form-field-label { - margin-top: 6px; + padding: 6px 0; + justify-content: center; + display: flex; + flex-direction: column; + height: 20px; + transform: translateY(-1.34373em) scale(1); } + + .mat-form-field-label-wrapper { + padding-top: 0; + top: -1px; + } + + .mat-input-element.adf-property-normal-mode { + color: var(--adf-metadata-property-panel-title-color); + 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: var(--adf-metadata-buttons-background-color); + color: var(--adf-metadata-property-panel-text-color); + border-radius: 6px; + } + + .mat-select.adf-property-select-edit-mode { + padding: 6px 0 6px 12px; + margin-top: 0; + line-height: 20px; + background-color: var(--adf-metadata-buttons-background-color); + border-radius: 6px; + + .mat-select-min-line{ + color: var(--adf-metadata-property-panel-text-color); + } } } } } + +.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; +} \ No newline at end of file diff --git a/lib/core/src/lib/info-drawer/info-drawer-layout.component.html b/lib/core/src/lib/info-drawer/info-drawer-layout.component.html index 6c5313c23e..d13024afad 100644 --- a/lib/core/src/lib/info-drawer/info-drawer-layout.component.html +++ b/lib/core/src/lib/info-drawer/info-drawer-layout.component.html @@ -1,4 +1,7 @@
+
+ +
diff --git a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss index f86ed3f3ed..2be2fba36f 100644 --- a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss +++ b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss @@ -14,8 +14,9 @@ $adf-info-drawer-icon-size-half: 24px !default; overflow: auto; width: 100%; - background-color: var(--theme-background-color); + background-color: var(--theme-card-background-color); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); + border-top: 1px solid var(--adf-metadata-property-panel-border-color); & .mat-tab-label { font-weight: bold; @@ -32,7 +33,6 @@ $adf-info-drawer-icon-size-half: 24px !default; &-header { padding: 13px 0 0 23px; display: flex; - justify-content: space-between; align-items: center; margin-bottom: 40px; @@ -55,8 +55,8 @@ $adf-info-drawer-icon-size-half: 24px !default; & > div { overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + color: var(--adf-metadata-property-panel-title-color); } } } diff --git a/lib/core/src/lib/info-drawer/info-drawer-layout.component.ts b/lib/core/src/lib/info-drawer/info-drawer-layout.component.ts index 8f785c2ce6..e065f2ff41 100644 --- a/lib/core/src/lib/info-drawer/info-drawer-layout.component.ts +++ b/lib/core/src/lib/info-drawer/info-drawer-layout.component.ts @@ -33,6 +33,7 @@ export class InfoDrawerLayoutComponent { /** * Directive selectors without adf- prefix will be deprecated on 3.0.0 */ +@Directive({ selector: '[adf-info-drawer-icon], [info-drawer-icon]' }) export class InfoDrawerIconDirective {} @Directive({ selector: '[adf-info-drawer-title], [info-drawer-title]' }) export class InfoDrawerTitleDirective {} @Directive({ selector: '[adf-info-drawer-buttons], [info-drawer-buttons]' }) export class InfoDrawerButtonsDirective {} @Directive({ selector: '[adf-info-drawer-content], [info-drawer-content]' }) export class InfoDrawerContentDirective {} diff --git a/lib/core/src/lib/info-drawer/info-drawer.component.html b/lib/core/src/lib/info-drawer/info-drawer.component.html index 1d0e7af48d..f67dc4fc0c 100644 --- a/lib/core/src/lib/info-drawer/info-drawer.component.html +++ b/lib/core/src/lib/info-drawer/info-drawer.component.html @@ -1,4 +1,5 @@ + Info Drawer Icon
{{ title | translate }}
diff --git a/lib/core/src/lib/info-drawer/info-drawer.component.scss b/lib/core/src/lib/info-drawer/info-drawer.component.scss index 0a05ba643e..b895e2a89d 100644 --- a/lib/core/src/lib/info-drawer/info-drawer.component.scss +++ b/lib/core/src/lib/info-drawer/info-drawer.component.scss @@ -1,12 +1,22 @@ .adf { &-info-drawer { - display: block; + .adf-metadata-properties-panel{ + display:block; + margin:0; + } .mat-tab-label { min-width: 0; } & &-layout { + + .adf-info-drawer-icon{ + display: inline-block; + vertical-align: middle; + margin-right:10px; + } + &-content { padding: 0; @@ -42,7 +52,7 @@ } .mat-tab-body { - padding: 10px; + padding: 24px; } .mat-tab-body-content { @@ -55,3 +65,4 @@ } } } + diff --git a/lib/core/src/lib/info-drawer/info-drawer.component.spec.ts b/lib/core/src/lib/info-drawer/info-drawer.component.spec.ts index 6dcac48287..53efd34c4b 100644 --- a/lib/core/src/lib/info-drawer/info-drawer.component.spec.ts +++ b/lib/core/src/lib/info-drawer/info-drawer.component.spec.ts @@ -24,6 +24,40 @@ import { of } from 'rxjs'; import { TranslateService, TranslateModule } from '@ngx-translate/core'; import { CoreTestingModule } from '../testing/core.testing.module'; import { ESCAPE } from '@angular/cdk/keycodes'; +import { Node } from '@alfresco/js-api'; +import { ThumbnailService } from '../common/services/thumbnail.service'; + +const mockNode: Node = { + isFile: true, + 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: false, + 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'] +}; describe('InfoDrawerComponent', () => { let element: HTMLElement; @@ -34,7 +68,7 @@ describe('InfoDrawerComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [ - TranslateModule.forRoot(), + TranslateModule.forRoot(), CoreTestingModule ] }); @@ -44,6 +78,7 @@ describe('InfoDrawerComponent', () => { fixture = TestBed.createComponent(InfoDrawerComponent); element = fixture.nativeElement; component = fixture.componentInstance; + component.drawerIcon = mockNode; }); it('should define InfoDrawerTabLayout', () => { @@ -83,19 +118,64 @@ describe('InfoDrawerComponent', () => { expect(stopPropagationSpy).toHaveBeenCalled(); }); + + describe('Info Drawer header Icon', () => { + let thumbnailService: ThumbnailService; + + beforeEach(() => { + thumbnailService = TestBed.inject(ThumbnailService); + component.drawerIcon = mockNode; + }); + + function testInfoDrawerIcon(iconPath: string, isFolder: boolean, isFile: boolean) { + spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue(iconPath); + mockNode.isFolder = isFolder; + mockNode.isFile = isFile; + const value = component.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 = component.getInfoDrawerIcon(mockNode); + expect(value).toContain(`assets/images/ft_ic_miscellaneous`); + }); + }); }); @Component({ template: ` - - - - - - - - - ` + + + + + + + + + ` }) class CustomInfoDrawerComponent extends InfoDrawerComponent { tabIndex: number; @@ -157,13 +237,21 @@ describe('Custom InfoDrawer', () => { expect(tab[0].nativeElement.innerText).not.toBe('TAB3'); expect(tab[0].nativeElement.innerText).toContain('tab-icon'); }); + + it('should render a icon with title', () => { + fixture.detectChanges(); + const icon: any = fixture.debugElement.queryAll(By.css('[info-drawer-icon]')); + const srcAttribute = icon[0].nativeElement.getAttribute('src'); + expect(icon.length).toBe(1); + expect(srcAttribute).toContain('/assets/images/ft_ic_miscellaneous.svg'); + }); }); @Component({ template: ` - + - ` + ` }) class VisibilityInfoDrawerComponent extends InfoDrawerComponent { showHeader: boolean; @@ -186,21 +274,28 @@ describe('Header visibility InfoDrawer', () => { fixture = TestBed.createComponent(VisibilityInfoDrawerComponent); fixture.detectChanges(); component = fixture.componentInstance; + component.drawerIcon = mockNode; }); it('should show info drawer header by default', () => { fixture.detectChanges(); const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]')); + const icon: any = fixture.debugElement.queryAll(By.css('[info-drawer-icon]')); + const srcAttribute = icon[0].nativeElement.getAttribute('src'); expect(title.length).toBe(1); + expect(icon.length).toBe(1); + expect(srcAttribute).toContain('/assets/images/ft_ic_miscellaneous.svg'); expect(title[0].nativeElement.innerText).toBe('Fake Visibility Info Drawer Title'); expect(component.showHeader).toEqual(true); }); - it('should not show info drawer header when showHeader is false', () => { + it('should not show info drawer header with icon when showHeader is false', () => { fixture.detectChanges(); component.showHeader = false; fixture.detectChanges(); const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]')); + const icon: any = fixture.debugElement.queryAll(By.css('[info-drawer-icon]')); expect(title.length).toBe(0); + expect(icon.length).toBe(0); }); }); diff --git a/lib/core/src/lib/info-drawer/info-drawer.component.ts b/lib/core/src/lib/info-drawer/info-drawer.component.ts index 1c7d4cfead..83ced5b85f 100644 --- a/lib/core/src/lib/info-drawer/info-drawer.component.ts +++ b/lib/core/src/lib/info-drawer/info-drawer.component.ts @@ -17,6 +17,9 @@ import { Component, ContentChildren, EventEmitter, HostListener, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { MatTabChangeEvent } from '@angular/material/tabs'; +import { ThumbnailService } from '../common/services/thumbnail.service'; +import { Node } from '@alfresco/js-api'; + @Component({ selector: 'adf-info-drawer-tab', template: '', @@ -43,10 +46,16 @@ export class InfoDrawerTabComponent { host: { class: 'adf-info-drawer' } }) export class InfoDrawerComponent { + + constructor(private thumbnailService: ThumbnailService) {} + /** The title of the info drawer (string or translation key). */ @Input() title: string|null = null; + @Input() + drawerIcon: Node | null = null; + /** The selected index tab. */ @Input() selectedIndex: number = 0; @@ -79,4 +88,45 @@ export class InfoDrawerComponent { onTabChange(event: MatTabChangeEvent) { this.currentTab.emit(event.index); } + + 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 : []; + } } diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss index d6a0029e59..f96c2848e3 100644 --- a/lib/core/src/lib/styles/_components-variables.scss +++ b/lib/core/src/lib/styles/_components-variables.scss @@ -46,7 +46,10 @@ --adf-identity-user-info-font-size: var(--theme-adf-picture-1-font-size), --adf-user-info-container-margin-right: $adf-ref-margin-right, --adf-metadata-property-panel-border-color: $adf-metadata-property-panel-border-color, - --adf-metadata-buttons-background-color: $adf-metadata-buttons-background-color + --adf-metadata-buttons-background-color: $adf-metadata-buttons-background-color, + --adf-metadata-property-panel-title-color: $adf-metadata-property-panel-title-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/lib/core/src/lib/styles/_reference-variables.scss b/lib/core/src/lib/styles/_reference-variables.scss index e17cc25b5e..659b5a19fb 100644 --- a/lib/core/src/lib/styles/_reference-variables.scss +++ b/lib/core/src/lib/styles/_reference-variables.scss @@ -29,3 +29,7 @@ $adf-ref-line-height: 40px; $adf-ref-margin-right: 8px; $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-title-color: #212121; +$adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.70); +$adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24); +