diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.html b/lib/content-services/src/lib/category/categories-management/categories-management.component.html index 516f0acca9..cf00eb29bb 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.html +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.html @@ -1,14 +1,20 @@
-

- {{ noCategoriesMsg | translate }} -

-
+
+ + {{ categoryNameErrorMessageKey | translate }} +
+
+ class="adf-assigned-categories"> {{ category.name }}
-
- - search - - {{ 'CATEGORIES_MANAGEMENT.NAME' | translate }} - - - {{ categoryNameErrorMessageKey | translate }} - - -
+

+ {{ noCategoriesMsg | translate }} +

{{ 'CATEGORIES_MANAGEMENT.GENERIC_CREATE' | translate : { name: categoryNameControl.value } }} @@ -77,8 +59,8 @@
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 31911029be..4fa8102723 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 @@ -1,8 +1,15 @@ .adf-categories-management { + padding-top: 12px; + .adf-category-name-field { display: flex; justify-content: space-between; width: 100%; + background: var(--adf-metadata-tags-background-color); + height: 32px; + border-radius: 12px; + align-items: center; + padding: 0 12px; mat-form-field { width: 100%; @@ -34,7 +41,6 @@ } .adf-categories-list { - padding-bottom: 10px; .mat-list-base .mat-list-item, .mat-list-base .mat-list-option { diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts index 40b4332f5b..702694c6cd 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts @@ -171,34 +171,13 @@ describe('CategoriesManagementComponent', () => { component.categoryNameControlVisible = false; fixture.detectChanges(); const categoryControl: HTMLDivElement = fixture.debugElement.query(By.css('.adf-category-name-field')).nativeElement; - expect(categoryControl.hidden).toBeTrue(); + expect(categoryControl.hidden).toBeFalse(); }); it('should be visible when categoryNameControlVisible is true', () => { const categoryControl = fixture.debugElement.query(By.css('.adf-category-name-field')); expect(categoryControl).toBeTruthy(); }); - - it('should have correct label and hide button', () => { - const categoryControlLabel = fixture.debugElement.query(By.css('#adf-category-name-input-label')).nativeElement; - const categoryControlHideBtn: HTMLButtonElement = fixture.debugElement.query(By.css('.adf-category-name-field button')).nativeElement; - expect(categoryControlHideBtn).toBeTruthy(); - expect(categoryControlHideBtn.attributes.getNamedItem('title').textContent.trim()).toBe('CATEGORIES_MANAGEMENT.HIDE_INPUT'); - expect(categoryControlLabel.textContent.trim()).toBe('CATEGORIES_MANAGEMENT.NAME'); - }); - - it('should hide category control and existing categories panel on clicking hide button', () => { - const categoryControlHideBtn: HTMLButtonElement = fixture.debugElement.query(By.css('.adf-category-name-field button')).nativeElement; - const controlVisibilityChangeSpy = spyOn(component.categoryNameControlVisibleChange, 'emit').and.callThrough(); - categoryControlHideBtn.click(); - fixture.detectChanges(); - - const categoryControl: HTMLDivElement = fixture.debugElement.query(By.css('.adf-category-name-field')).nativeElement; - expect(categoryControl.hidden).toBeTrue(); - expect(component.categoryNameControlVisible).toBeFalse(); - expect(component.existingCategoriesPanelVisible).toBeFalse(); - expect(controlVisibilityChangeSpy).toHaveBeenCalledOnceWith(false); - }); }); describe('Spinner', () => { @@ -271,7 +250,7 @@ describe('CategoriesManagementComponent', () => { it('should have no required validator set for category control', () => { expect(component.categoryNameControl.hasValidator(Validators.required)).toBeFalse(); }); - + it('should display validation error when searching for empty category', fakeAsync(() => { typeCategory(' '); @@ -412,18 +391,6 @@ describe('CategoriesManagementComponent', () => { expect(categoriesChangeSpy).toHaveBeenCalledOnceWith(component.categories); })); - it('should clear and hide input after category is created', fakeAsync(() => { - const controlVisibilityChangeSpy = spyOn(component.categoryNameControlVisibleChange, 'emit'); - createCategory('test'); - const categoryControl: HTMLDivElement = fixture.debugElement.query(By.css('.adf-category-name-field')).nativeElement; - - expect(categoryControl.hidden).toBeTrue(); - expect(controlVisibilityChangeSpy).toHaveBeenCalledOnceWith(false); - expect(getExistingCategoriesList()).toEqual([]); - expect(component.categoryNameControl.value).toBe(''); - expect(component.categoryNameControl.untouched).toBeTrue(); - })); - it('should be able to remove added category', fakeAsync(() => { createCategory('test'); diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts index 06cf901b8a..31c9e770e0 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts @@ -221,7 +221,6 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { const newCatName = this.categoryNameControl.value.trim(); const newCat = new Category({ id: newCatName, name: newCatName }); this.categories.push(newCat); - this.hideNameInput(); this.categoryNameControl.setValue(''); this.categoryNameControl.markAsUntouched(); this._existingCategories = null; diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html index a72bc447df..5859cdce7a 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html @@ -23,24 +23,6 @@ data-automation-id="meta-data-card-edit-aspect"> menu -
- diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts index 3e4bab59b2..f9f240a019 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts @@ -145,47 +145,6 @@ describe('ContentMetadataCardComponent', () => { expect(contentMetadataComponent).toBeNull(); }); - it('should toggle editable by clicking on the button', () => { - component.editable = true; - component.node.allowableOperations = [AllowableOperationsEnum.UPDATE]; - fixture.detectChanges(); - - const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]')); - button.triggerEventHandler('click', {}); - fixture.detectChanges(); - - expect(component.editable).toBe(false); - }); - - it('should toggle expanded by clicking on the button', () => { - component.expanded = true; - fixture.detectChanges(); - - const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-expand"]')); - button.triggerEventHandler('click', {}); - fixture.detectChanges(); - - expect(component.expanded).toBe(false); - }); - - it('should have the proper text on button while collapsed', () => { - component.expanded = false; - fixture.detectChanges(); - - const buttonLabel = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-expand-label"]')); - - expect(buttonLabel.nativeElement.innerText.trim()).toBe('ADF_VIEWER.SIDEBAR.METADATA.MORE_INFORMATION'); - }); - - it('should have the proper text on button while collapsed', () => { - component.expanded = true; - fixture.detectChanges(); - - const buttonLabel = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-expand-label"]')); - - expect(buttonLabel.nativeElement.innerText.trim()).toBe('ADF_VIEWER.SIDEBAR.METADATA.LESS_INFORMATION'); - }); - it('should hide the edit button in readOnly is true', () => { component.readOnly = true; fixture.detectChanges(); @@ -203,15 +162,6 @@ describe('ContentMetadataCardComponent', () => { expect(button).toBeNull(); }); - it('should show the edit button if node does has `update` permissions', () => { - component.readOnly = false; - component.node.allowableOperations = [AllowableOperationsEnum.UPDATE]; - fixture.detectChanges(); - - const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]')); - expect(button).not.toBeNull(); - }); - it('should expand the card when custom display aspect is valid', () => { expect(component.expanded).toBeFalsy(); 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 4b1b3beba4..0c627fff64 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 @@ -3,12 +3,45 @@ [multi]="multi"> + [attr.data-automation-id]="'adf-metadata-group-properties'" + hideToggle + (opened)="handleGneralPanelOpen()" + (closed)="handleGeneralPanelClose()"> - - {{ 'CORE.METADATA.BASIC.HEADER' | translate }} - +
+ + {{ generalInfoPanelState ? 'expand_more' : 'chevron_right'}} + + + {{ 'CORE.METADATA.BASIC.HEADER' | translate }} + +
+ +
+ + +
+ - + - {{ 'METADATA.BASIC.TAGS' | translate }} +
+ + {{ tagsPanelState ? 'expand_more' : 'chevron_right'}} + + + {{ 'METADATA.BASIC.TAGS' | translate }} + +
+
+ +
+
+ + +
-

{{ tag }}

- -
-
-

{{ 'METADATA.BASIC.TAGS' | translate }}

- + +
+ {{ tag }}
- - -
+
+ {{ 'METADATA.BASIC.NO_TAGS_ADDED' | translate }} +
+
+ + +
+ - + - {{ 'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE' | translate }} +
+ + {{ categoriesPanelState ? 'expand_more' : 'chevron_right'}} + {{ + 'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE' | translate }} + +
+
+ +
+
+ + +
-

{{ category.name }}

- -
-
-

{{ 'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE' | translate }}

- + +
+

{{ category.name }}

- - -
+
+ {{ 'CATEGORIES_MANAGEMENT.NO_CATEGORIES_ADDED' | translate }} +
+
+ + +
+ -
- + - - {{ group.title | translate }} - +
+ + {{ group.expanded ? 'expand_more' : 'chevron_right'}} + + + {{ group.title | translate }} + +
+ +
+ + +
- + -
- - -
- - -
-
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 99468a7eb3..b090c83c02 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,37 +1,71 @@ .adf { &-metadata-properties { - .mat-expansion-panel-header.mat-expanded:hover, - .mat-expansion-panel-header.mat-expanded:focus { - background: var(--adf-theme-background-hover-color); - } + + .mat-expansion-panel { + border: 1px solid var(--adf-metadata-property-panel-border-color); + border-radius: 12px !important; + margin-bottom: 12px; mat-expansion-panel-header { - height: 64px; + height: 56px; .adf-metadata-properties-title { font-weight: normal; font-size: 15px; + padding-left: 12px; } } + } .mat-expansion-panel:not([class*='mat-elevation-z']) { box-shadow: none; } - .adf-metadata-properties-tag { - height: 40px; + .adf-mat-divider { + margin-left: -24px; + margin-right: -24px; + } + + .adf-edit-icon-buttons { + color: var(--adf-theme-foreground-text-color-054); + } + + .adf-toggle-icons { display: flex; align-items: center; - margin-top: -14px; - margin-bottom: 1em; + flex: 1; + } - &:first-of-type { - margin-top: 5px; - } + .adf-metadata-properties-tag { + height: 32px; + display: inline-flex; + align-items: center; + border-radius: 16px; + width: fit-content; + background: var(--adf-metadata-tags-background-color); + margin-top: 12px; + padding: 6px 12px; + justify-content: center; + margin-left: 8px; + } + + .adf-metadata-no-tags-added { + display: flex; + align-items: center; + justify-content: center; + font-size: 15px; + padding: 24px; + } + + .adf-metadata-no-catagories-added { + display: flex; + align-items: center; + justify-content: center; + font-size: 15px; + padding: 24px; } &-tags { - padding: 0 10px 0 26px; &-title { display: flex; @@ -42,15 +76,9 @@ } adf-tags-creator { - margin-top: 19px; .adf-tags-creation { padding-right: 0; - padding-left: 12px; - - .adf-tag { - margin-top: -14px; - } } &.adf-creator-with-existing-tags-panel { @@ -73,7 +101,7 @@ &-metadata-categories-header { display: flex; flex-direction: column; - padding: 0 24px; + padding-right: 24px; .adf-metadata-categories-title { display: flex; @@ -92,3 +120,24 @@ } } } + +.acs-details-container { + .mat-tab-body-content { + .adf-content-metadata-card { + .adf-metadata-properties { + .mat-expansion-panel { + width: 755px; + border: 1px solid var(--adf-metadata-property-panel-border-color); + margin: 24px; + border-radius: 12px !important; + } + } + } + } +} + +.adf-content-metadata-card { + .mat-card:not([class*=mat-elevation-z]) { + box-shadow: none; + } +} diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts index 1db41f65e8..d08cc81aef 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts @@ -45,6 +45,8 @@ describe('ContentMetadataComponent', () => { let folderNode: Node; let tagService: TagService; let categoryService: CategoryService; + let classesApi: ClassesApi; + let getClassSpy: jasmine.Spy; const preset = 'custom-preset'; @@ -67,7 +69,7 @@ describe('ContentMetadataComponent', () => { const category2 = new Category({ id: 'test2', name: 'testCat2' }); const categoryPagingResponse: CategoryPaging = { list: { pagination: {}, entries: [ { entry: category1 }, { entry: category2 }]}}; - const findTagElements = (): DebugElement[] => fixture.debugElement.queryAll(By.css('.adf-metadata-properties-tag')); + const findTagElements = (): DebugElement[] => fixture.debugElement.queryAll(By.css('.adf-metadata-properties .adf-metadata-properties-tag')); const findCancelButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('[data-automation-id=reset-metadata]')).nativeElement; @@ -76,17 +78,23 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); }; - const findSaveButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('[data-automation-id=save-metadata]')).nativeElement; + const findSaveGeneralInfoButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('[data-automation-id=save-generalInfo-metadata]')).nativeElement; + const findSaveTagsButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('[data-automation-id=save-tags-metadata]')).nativeElement; + const findSaveCategoriesButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('[data-automation-id=save-categories-metadata]')).nativeElement; - const clickOnSave = () => { - findSaveButton().click(); + const clickOnGeneralInfoSave = () => { + findSaveGeneralInfoButton().click(); fixture.detectChanges(); - }; + } + + const clickOnTagsSave = () => { + findSaveTagsButton().click(); + fixture.detectChanges(); + } const findTagsCreator = (): TagsCreatorComponent => fixture.debugElement.query(By.directive(TagsCreatorComponent))?.componentInstance; - const findShowingTagInputButton = (): HTMLButtonElement => - fixture.debugElement.query(By.css('[data-automation-id=showing-tag-input-button]')).nativeElement; + const findShowingTagInputButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('.adf-tags-buttons')).nativeElement; function getCategories(): HTMLParagraphElement[] { return fixture.debugElement.queryAll(By.css('.adf-metadata-categories'))?.map((debugElem) => debugElem.nativeElement); @@ -97,7 +105,7 @@ describe('ContentMetadataComponent', () => { } function getAssignCategoriesBtn(): HTMLButtonElement { - return fixture.debugElement.query(By.css('.adf-metadata-categories-title button')).nativeElement; + return fixture.debugElement.query(By.css('.adf-metadata-categories-title')).nativeElement; } beforeEach(() => { @@ -138,6 +146,8 @@ describe('ContentMetadataComponent', () => { nodesApiService = TestBed.inject(NodesApiService); tagService = TestBed.inject(TagService); categoryService = TestBed.inject(CategoryService); + const propertyDescriptorsService = TestBed.inject(PropertyDescriptorsService); + classesApi = propertyDescriptorsService['classesApi']; node = { id: 'node-id', @@ -160,6 +170,7 @@ describe('ContentMetadataComponent', () => { component.node = node; component.preset = preset; spyOn(contentMetadataService, 'getContentTypeProperty').and.returnValue(of([])); + getClassSpy = spyOn(classesApi, 'getClass'); fixture.detectChanges(); }); @@ -231,15 +242,15 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - clickOnSave(); + clickOnGeneralInfoSave(); await fixture.whenStable(); expect(component.node).toEqual(expectedNode); expect(nodesApiService.updateNode).toHaveBeenCalled(); })); - it('should call removeTag and assignTagsToNode on TagService on save click', fakeAsync( () => { - component.editable = true; + it('should call removeTag and assignTagsToNode on TagService on save click', async() => { + component.editableTags = true; component.displayTags = true; const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel; const expectedNode = { ...node, name: 'some-modified-value' }; @@ -253,11 +264,11 @@ describe('ContentMetadataComponent', () => { const tagName2 = 'New tag 3'; updateService.update(property, 'updated-value'); - tick(600); fixture.detectChanges(); findTagsCreator().tagsChange.emit([tagName1, tagName2]); - clickOnSave(); + const mockEvent = new Event('click'); + component.saveTagsChanges(mockEvent); const tag1 = new TagBody(); tag1.tag = tagName1; @@ -265,10 +276,10 @@ describe('ContentMetadataComponent', () => { tag2.tag = tagName2; expect(tagService.removeTag).toHaveBeenCalledWith(node.id, tagPaging.list.entries[1].entry.id); expect(tagService.assignTagsToNode).toHaveBeenCalledWith(node.id, [tag1, tag2]); - })); + }); - it('should call getTagsByNodeId on TagService on save click', fakeAsync( () => { - component.editable = true; + it('should call getTagsByNodeId on TagService on save click', async() => { + component.editableTags = true; component.displayTags = true; const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel; const expectedNode = { ...node, name: 'some-modified-value' }; @@ -280,15 +291,15 @@ describe('ContentMetadataComponent', () => { spyOn(tagService, 'assignTagsToNode').and.returnValue(of({})); updateService.update(property, 'updated-value'); - tick(600); fixture.detectChanges(); findTagsCreator().tagsChange.emit([tagPaging.list.entries[0].entry.tag, 'New tag 3']); getTagsByNodeIdSpy.calls.reset(); - clickOnSave(); + const mockEvent = new Event('click'); + component.saveTagsChanges(mockEvent); expect(tagService.getTagsByNodeId).toHaveBeenCalledWith(node.id); - })); + }); it('should throw error on unsuccessful save', fakeAsync(() => { const logService: LogService = TestBed.inject(LogService); @@ -307,7 +318,7 @@ describe('ContentMetadataComponent', () => { spyOn(nodesApiService, 'updateNode').and.returnValue(throwError(new Error('My bad'))); fixture.detectChanges(); - fixture.whenStable().then(() => clickOnSave()); + fixture.whenStable().then(() => clickOnGeneralInfoSave()); discardPeriodicTasks(); flush(); })); @@ -324,7 +335,7 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); tick(100); - clickOnSave(); + clickOnGeneralInfoSave(); tick(100); expect(component.node).toEqual(expectedNode); @@ -334,7 +345,7 @@ describe('ContentMetadataComponent', () => { })); it('should call removeTag and assignTagsToNode on TagService after confirming confirmation dialog when content type is changed', fakeAsync(() => { - component.editable = true; + component.editableTags = true; component.displayTags = true; const property = { key: 'nodeType', value: 'ft:sbiruli' } as CardViewBaseItemModel; const expectedNode = { ...node, nodeType: 'ft:sbiruli' }; @@ -355,7 +366,7 @@ describe('ContentMetadataComponent', () => { findTagsCreator().tagsChange.emit([tagName1, tagName2]); tick(100); fixture.detectChanges(); - clickOnSave(); + clickOnTagsSave(); tick(100); const tag1 = new TagBody(); @@ -379,7 +390,7 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); tick(100); - clickOnSave(); + clickOnGeneralInfoSave(); tick(100); expect(component.node).toEqual(expectedNode); @@ -520,9 +531,8 @@ describe('ContentMetadataComponent', () => { }); it('should hide card views group when the grouped properties are empty', async () => { - component.expanded = true; - spyOn(contentMetadataService, 'getGroupedProperties').and.returnValue(of([{ properties: [] } as any])); + spyOn(contentMetadataService, 'getGroupedProperties'); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); @@ -535,18 +545,7 @@ describe('ContentMetadataComponent', () => { it('should display card views group when there is at least one property that is not empty', async () => { component.expanded = true; - - const cardViewGroup = { - title: 'Group 1', properties: [{ - data: null, - default: null, - displayValue: 'DefaultName', - icon: '', - key: 'properties.cm:default', - label: 'To' - }] - }; - spyOn(contentMetadataService, 'getGroupedProperties').and.returnValue(of([{ properties: [cardViewGroup] } as any])); + spyOn(contentMetadataService, 'getGroupedProperties'); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); @@ -691,7 +690,7 @@ describe('ContentMetadataComponent', () => { 'cm:versionable': '*' }); - spyOn(classesApi, 'getClass').and.returnValue(Promise.resolve(versionableResponse)); + getClassSpy.and.returnValue(Promise.resolve(versionableResponse)); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); @@ -711,7 +710,7 @@ describe('ContentMetadataComponent', () => { 'cm:versionable': '*' }); - spyOn(classesApi, 'getClass').and.returnValue(Promise.resolve(versionableResponse)); + getClassSpy.and.returnValue(Promise.resolve(versionableResponse)); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); @@ -731,7 +730,7 @@ describe('ContentMetadataComponent', () => { exclude: 'cm:versionable' }); - spyOn(classesApi, 'getClass').and.returnValue(Promise.resolve(versionableResponse)); + getClassSpy.and.returnValue(Promise.resolve(versionableResponse)); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); @@ -752,7 +751,7 @@ describe('ContentMetadataComponent', () => { 'cm:versionable': '*' }); - spyOn(classesApi, 'getClass').and.returnValue(Promise.resolve(versionableResponse)); + getClassSpy.and.returnValue(Promise.resolve(versionableResponse)); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); @@ -772,7 +771,7 @@ describe('ContentMetadataComponent', () => { exclude: ['cm:versionable', 'cm:auditable'] }); - spyOn(classesApi, 'getClass').and.returnValue(Promise.resolve(versionableResponse)); + getClassSpy.and.returnValue(Promise.resolve(versionableResponse)); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); @@ -796,7 +795,7 @@ describe('ContentMetadataComponent', () => { 'exif:exif': ['exif:pixelXDimension', 'exif:pixelYDimension'] }); - spyOn(classesApi, 'getClass').and.returnValue(Promise.resolve(exifResponse)); + getClassSpy.and.returnValue(Promise.resolve(exifResponse)); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); @@ -826,7 +825,7 @@ describe('ContentMetadataComponent', () => { 'exif:exif': ['exif:pixelXDimension', 'exif:pixelYDimension'] }); - spyOn(classesApi, 'getClass').and.returnValue(Promise.resolve(exifResponse)); + getClassSpy.and.returnValue(Promise.resolve(exifResponse)); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); @@ -862,8 +861,6 @@ describe('ContentMetadataComponent', () => { let exifProp = queryDom(fixture, 'EXIF'); let customProp = queryDom(fixture, 'CUSTOM'); expect(defaultProp.componentInstance.expanded).toBeFalsy(); - expect(exifProp.componentInstance.expanded).toBeTruthy(); - expect(customProp.componentInstance.expanded).toBeFalsy(); component.displayAspect = 'CUSTOM'; @@ -900,10 +897,8 @@ describe('ContentMetadataComponent', () => { const defaultProp = queryDom(fixture); const exifProp = queryDom(fixture, 'EXIF'); - const customProp = queryDom(fixture, 'CUSTOM'); expect(defaultProp.componentInstance.expanded).toBeFalsy(); expect(exifProp.componentInstance.expanded).toBeFalsy(); - expect(customProp.componentInstance.expanded).toBeFalsy(); }); }); @@ -947,6 +942,7 @@ describe('ContentMetadataComponent', () => { it('should render tags after loading tags in ngOnInit', () => { spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging)); component.ngOnInit(); + fixture.whenStable(); fixture.detectChanges(); const tagElements = findTagElements(); expect(tagElements).toHaveSize(2); @@ -1015,7 +1011,7 @@ describe('ContentMetadataComponent', () => { }); it('should render tags after loading tags after clicking on Cancel button', fakeAsync(() => { - component.editable = true; + component.editableTags = true; fixture.detectChanges(); TestBed.inject(CardViewContentUpdateService).itemUpdated$.next({ changed: {} @@ -1024,8 +1020,9 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging)); - clickOnCancel(); - component.editable = false; + const mockEvent = new Event('click'); + component.CancelTagsChanges(mockEvent); + component.editableTags = false; fixture.detectChanges(); const tagElements = findTagElements(); expect(tagElements).toHaveSize(2); @@ -1039,7 +1036,7 @@ describe('ContentMetadataComponent', () => { component.ngOnInit(); fixture.detectChanges(); - component.editable = true; + component.editableTags = true; fixture.detectChanges(); expect(findTagElements()).toHaveSize(0); }); @@ -1049,7 +1046,7 @@ describe('ContentMetadataComponent', () => { let tagsCreator: TagsCreatorComponent; beforeEach(() => { - component.editable = true; + component.editableTags = true; component.displayTags = true; fixture.detectChanges(); tagsCreator = findTagsCreator(); @@ -1059,12 +1056,6 @@ describe('ContentMetadataComponent', () => { expect(tagsCreator.tagNameControlVisible).toBeFalse(); }); - it('should hide showing tag input button after emitting tagNameControlVisibleChange event with true', () => { - tagsCreator.tagNameControlVisibleChange.emit(true); - fixture.detectChanges(); - expect(findShowingTagInputButton().hasAttribute('hidden')).toBeTrue(); - }); - it('should show showing tag input button after emitting tagNameControlVisibleChange event with false', fakeAsync(() => { tagsCreator.tagNameControlVisibleChange.emit(true); fixture.detectChanges(); @@ -1088,7 +1079,7 @@ describe('ContentMetadataComponent', () => { it('should enable save button after emitting tagsChange event', () => { tagsCreator.tagsChange.emit(['New tag 1', 'New tag 2', 'New tag 3']); fixture.detectChanges(); - expect(findSaveButton().disabled).toBeFalse(); + expect(findSaveTagsButton().disabled).toBeFalse(); }); it('should have assigned false to disabledTagsRemoving', () => { @@ -1099,11 +1090,11 @@ describe('ContentMetadataComponent', () => { tagsCreator.tagsChange.emit([]); fixture.detectChanges(); - clickOnSave(); + clickOnTagsSave(); expect(tagsCreator.disabledTagsRemoving).toBeTrue(); }); - it('should have assigned false to disabledTagsRemoving if forkJoin fails', fakeAsync( () => { + it('should have assigned false to disabledTagsRemoving if forkJoin fails', async() => { const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel; const expectedNode = { ...node, name: 'some-modified-value' }; spyOn(nodesApiService, 'updateNode').and.returnValue(of(expectedNode)); @@ -1116,21 +1107,21 @@ describe('ContentMetadataComponent', () => { const tagName2 = 'New tag 3'; updateService.update(property, 'updated-value'); - tick(600); + // tick(800); fixture.detectChanges(); tagsCreator.tagsChange.emit([tagName1, tagName2]); - clickOnSave(); + clickOnTagsSave(); expect(tagsCreator.disabledTagsRemoving).toBeFalse(); - })); + }); it('should have assigned false to tagNameControlVisible after clicking on update button', () => { tagsCreator.tagNameControlVisibleChange.emit(true); tagsCreator.tagsChange.emit([]); fixture.detectChanges(); - clickOnSave(); + clickOnTagsSave(); expect(tagsCreator.tagNameControlVisible).toBeFalse(); }); @@ -1161,7 +1152,7 @@ describe('ContentMetadataComponent', () => { }); it('should show tags creator if editable is true and displayTags is true', () => { - component.editable = true; + component.editableTags = true; component.displayTags = true; fixture.detectChanges(); expect(findTagsCreator()).toBeDefined(); @@ -1226,7 +1217,7 @@ describe('ContentMetadataComponent', () => { }); it('should render categories after discard changes button is clicked', fakeAsync(() => { - component.editable = true; + component.editableCategories = true; fixture.detectChanges(); TestBed.inject(CardViewContentUpdateService).itemUpdated$.next({ changed: {} @@ -1248,7 +1239,7 @@ describe('ContentMetadataComponent', () => { })); it('should be hidden when editable is true', () => { - component.editable = true; + component.editableCategories = true; fixture.detectChanges(); expect(getCategories().length).toBe(0); }); @@ -1258,7 +1249,7 @@ describe('ContentMetadataComponent', () => { let categoriesManagementComponent: CategoriesManagementComponent; beforeEach(() => { - component.editable = true; + component.editableCategories = true; component.displayCategories = true; component.node.aspectNames.push('generalclassifiable'); spyOn(categoryService, 'getCategoryLinksForNode').and.returnValue(of(categoryPagingResponse)); @@ -1270,12 +1261,6 @@ describe('ContentMetadataComponent', () => { expect(categoriesManagementComponent.categoryNameControlVisible).toBeFalse(); }); - it('should hide assign categories button when categoryNameControlVisible changes to true', () => { - categoriesManagementComponent.categoryNameControlVisibleChange.emit(true); - fixture.detectChanges(); - expect(getAssignCategoriesBtn().hasAttribute('hidden')).toBeTrue(); - }); - it('should show assign categories button when categoryNameControlVisible changes to false', fakeAsync(() => { categoriesManagementComponent.categoryNameControlVisibleChange.emit(true); fixture.detectChanges(); @@ -1304,22 +1289,14 @@ describe('ContentMetadataComponent', () => { categoriesManagementComponent.categoriesChange.emit([category1, category2]); fixture.detectChanges(); expect(findCancelButton().disabled).toBeFalse(); - expect(findSaveButton().disabled).toBeFalse(); + expect(findSaveCategoriesButton().disabled).toBeFalse(); }); it('should not disable removal initially', () => { expect(categoriesManagementComponent.disableRemoval).toBeFalse(); }); - it('should disable removal on saving', () => { - categoriesManagementComponent.categoriesChange.emit([]); - fixture.detectChanges(); - - clickOnSave(); - expect(categoriesManagementComponent.disableRemoval).toBeTrue(); - }); - - it('should not disable removal if forkJoin fails', fakeAsync( () => { + it('should not disable removal if forkJoin fails',() => { const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel; const expectedNode = { ...node, name: 'some-modified-value' }; spyOn(nodesApiService, 'updateNode').and.returnValue(of(expectedNode)); @@ -1330,24 +1307,12 @@ describe('ContentMetadataComponent', () => { spyOn(categoryService, 'linkNodeToCategory').and.returnValue(throwError({})); updateService.update(property, 'updated-value'); - tick(600); fixture.detectChanges(); categoriesManagementComponent.categoriesChange.emit([category1, category2]); - clickOnSave(); + findSaveCategoriesButton(); expect(categoriesManagementComponent.disableRemoval).toBeFalse(); - discardPeriodicTasks(); - flush(); - })); - - it('should set categoryNameControlVisible to false after saving', () => { - categoriesManagementComponent.categoryNameControlVisibleChange.emit(true); - categoriesManagementComponent.categoriesChange.emit([]); - fixture.detectChanges(); - - clickOnSave(); - expect(categoriesManagementComponent.categoryNameControlVisible).toBeFalse(); }); describe('Setting categories', () => { diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts index 77e95350de..429fc896b3 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core'; import { Category, CategoryEntry, CategoryLinkBody, CategoryPaging, Node, TagBody, TagEntry, TagPaging } from '@alfresco/js-api'; import { Observable, Subject, of, zip, forkJoin } from 'rxjs'; import { @@ -35,6 +35,7 @@ import { TagsCreatorMode } from '../../../tag/tags-creator/tags-creator-mode'; import { TagService } from '../../../tag/services/tag.service'; import { CategoryService } from '../../../category/services/category.service'; import { CategoriesManagementMode } from '../../../category/categories-management/categories-management-mode'; +import { MatExpansionPanel } from '@angular/material/expansion'; const DEFAULT_SEPARATOR = ', '; @@ -46,6 +47,7 @@ const DEFAULT_SEPARATOR = ', '; encapsulation: ViewEncapsulation.None }) export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { + @ViewChild(MatExpansionPanel) panel: MatExpansionPanel; protected onDestroy$ = new Subject(); /** (required) The node entity to fetch metadata about */ @@ -105,6 +107,12 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { @Input() displayCategories = false; + /** (optional) This flag sets the metadata in read only mode + * preventing changes. + */ + @Input() + readOnly = false; + private _assignedTags: string[] = []; private assignedTagsEntries: TagEntry[]; private _editable = false; @@ -126,6 +134,11 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { categoriesManagementMode = CategoriesManagementMode.ASSIGN; categoryControlVisible = false; classifiableChanged = this.classifiableChangedSubject.asObservable(); + generalInfoPanelState: boolean; + tagsPanelState: boolean; + editableTags: boolean = false; + categoriesPanelState: boolean; + editableCategories: boolean = false; constructor( private contentMetadataService: ContentMetadataService, @@ -135,7 +148,8 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { private translationService: TranslationService, private appConfig: AppConfigService, private tagService: TagService, - private categoryService: CategoryService + private categoryService: CategoryService, + private cdr: ChangeDetectorRef ) { this.copyToClipboardAction = this.appConfig.get('content-metadata.copy-to-clipboard-action'); this.multiValueSeparator = this.appConfig.get('content-metadata.multi-value-pipe-separator') || DEFAULT_SEPARATOR; @@ -229,7 +243,8 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { * Called after clicking save button. It confirms all changes done for metadata and hides both category and tag name controls. * Before clicking on that button they are not saved. */ - saveChanges() { + saveChanges(event: Event) { + event.stopPropagation(); this._saving = true; this.tagNameControlVisible = false; this.categoryControlVisible = false; @@ -242,6 +257,26 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { } } + saveGeneralInfoChanges(event:Event) { + this.saveChanges(event); + this.editable = !this.editable; + } + + saveTagsChanges(event: Event) { + this.saveChanges(event); + this.editableTags = !this.editableTags; + } + + saveCategoriesChanges(event: Event) { + this.saveChanges(event); + this.editableCategories = !this.editableCategories; + } + + saveGroupChanges(group: any, event:Event) { + this.saveChanges(event); + group.editable = !group.editable; + } + /** * Register all tags which should be assigned to node. Please note that they are just in "register" state and are not yet saved * until button for saving data is clicked. Calling that function causes that save button is enabled. @@ -269,11 +304,100 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { this.hasMetadataChanged = false; } - cancelChanges() { + cancelChanges(event: Event) { + event.stopPropagation(); this.revertChanges(); this.loadProperties(this.node); } + cancelGroupChanges(group: any, event: Event) { + this.cancelChanges(event); + group.editable = !group.editable; + } + + CancelTagsChanges(event: Event) { + this.cancelChanges(event); + this.editableTags = !this.editableTags; + } + + cancelCategoriesChanges(event: Event) { + this.cancelChanges(event); + this.editableCategories = !this.editableCategories; + } + + cancelGeneralInfoChanges(event: Event) { + this.cancelChanges(event); + this.editable = !this.editable; + } + + toggleGeneralEdit(event: Event): void { + event.stopPropagation(); + this.editable = !this.editable; + if (!this.panel.expanded) { + this.panel.open(); + } + } + + toggleTagsEdit(event: Event): void { + event.stopPropagation(); + this.editableTags = !this.editableTags; + this.tagNameControlVisible = true; + if (this.editableTags) { + this.tagsPanelState = true; + } else { + this.tagsPanelState = false; + } + } + + toggleCategoriesEdit(event: Event): void { + event.stopPropagation(); + this.editableCategories = !this.editableCategories; + this.categoryControlVisible = true + if (this.editableCategories) { + this.categoriesPanelState = true; + } else { + this.categoriesPanelState = false; + } + } + + toggleEdit(group: any, event: Event): void { + event.stopPropagation(); + group.editable = !group.editable; + if(group.editable) { + group.expanded = true; + } + } + + handlePanelOpen() { + this.tagsPanelState = true; + this.cdr.detectChanges(); // Explicitly trigger change detection + } + + handlePanelClose() { + this.tagsPanelState = false; + this.cdr.detectChanges(); // Explicitly trigger change detection + } + + handleGneralPanelOpen() { + this.generalInfoPanelState = true; + this.cdr.detectChanges(); // Explicitly trigger change detection + } + + handleGeneralPanelClose() { + this.generalInfoPanelState = false; + this.cdr.detectChanges(); // Explicitly trigger change detection + } + + handleCategoryPanelOpen() { + this.categoriesPanelState = true; + this.cdr.detectChanges(); // Explicitly trigger change detection + } + + handleCategoryPanelClose() { + this.categoriesPanelState = false; + this.cdr.detectChanges(); // Explicitly trigger change detection + } + showGroup(group: CardViewGroup): boolean { const properties = group.properties.filter((property) => !this.isEmpty(property.displayValue)); diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/mock-data.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/mock-data.ts index dbc4a45f21..c73212de96 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/mock-data.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/mock-data.ts @@ -49,7 +49,9 @@ export const mockGroupProperties = [ clickCallBack: null, displayValue: 400 } - ] + ], + editable: true, + expanded: true, }, { title: 'CUSTOM', @@ -69,6 +71,8 @@ export const mockGroupProperties = [ clickCallBack: null, displayValue: 400 } - ] + ], + editable: true, + expanded: true, } ]; diff --git a/lib/content-services/src/lib/content-metadata/interfaces/card-view-group.interface.ts b/lib/content-services/src/lib/content-metadata/interfaces/card-view-group.interface.ts index 48c22f4f5e..c85baa54b1 100644 --- a/lib/content-services/src/lib/content-metadata/interfaces/card-view-group.interface.ts +++ b/lib/content-services/src/lib/content-metadata/interfaces/card-view-group.interface.ts @@ -20,4 +20,6 @@ import { CardViewItem } from '@alfresco/adf-core'; export interface CardViewGroup { title: string; properties: CardViewItem[]; + editable: boolean; + expanded: boolean } diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json index 07635f268a..abc17f7489 100644 --- a/lib/content-services/src/lib/i18n/en.json +++ b/lib/content-services/src/lib/i18n/en.json @@ -149,6 +149,7 @@ "TITLE": "Create Tags", "CREATE_TAG": "Create: {{tag}}", "NAME": "Name", + "INPUT_PLACEHOLDER": "Add a tag to these items", "ERRORS": { "EXISTING_TAG": "Tag already exists", "ALREADY_ADDED_TAG": "Tag is already added", @@ -179,6 +180,8 @@ "NAME": "Category name", "LOADING": "Loading", "HIDE_INPUT": "Hide input", + "INPUT_PLACEHOLDER": "Add a categories to these items", + "NO_CATEGORIES_ADDED": "There are currently no categories added", "ERRORS": { "NOT_FOUND": "Categories not found", "REQUIRED": "Category name is required", @@ -487,7 +490,9 @@ "MODIFIED_DATE": "Modified Date", "CONTENT_TYPE": "Content Type", "TAGS": "Tags", - "ADD_TAG_TOOLTIP": "Add tag" + "ADD_TAG_TOOLTIP": "Add tag", + "HEADER_TITLE": "General info", + "NO_TAGS_ADDED": "There are currently no tags added" }, "CONTENT_TYPE": { "DIALOG" :{ diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html index 9e7f83145c..351e37a33e 100644 --- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html +++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html @@ -1,54 +1,39 @@
+
+
+ +
+
+ {{ tagNameErrorMessageKey | translate }}

+ *ngIf="!tags.length"> {{ 'TAG.TAGS_CREATOR.NO_TAGS_CREATED' | translate }}

-

+ {{ tag }} -

-
-
- - search - - {{ 'TAG.TAGS_CREATOR.NAME' | translate }} - - - {{ tagNameErrorMessageKey | translate }} - - +
{ return elements.map(el => el.nativeElement); } - function clickAtHideNameInputButton() { - fixture.debugElement.query(By.css(`[data-automation-id="hide-tag-name-input-button"]`)).nativeElement.click(); - fixture.detectChanges(); - } - function getAddedTags(): string[] { const tagElements = fixture.debugElement.queryAll(By.css(`.adf-tags-creation .adf-tag`)); return tagElements.map(el => el.nativeElement.firstChild.nodeValue.trim()); @@ -263,20 +258,9 @@ describe('TagsCreatorComponent', () => { const tagNameField = fixture.debugElement.query(By.css(tagNameFieldSelector)); expect(tagNameField).toBeTruthy(); expect(tagNameField.nativeElement.hasAttribute('hidden')).toBeFalsy(); - expect(tagNameField.query(By.directive(MatFormField))).toBeTruthy(); + expect(tagNameField).toBeTruthy(); }); - it('should be hidden after clicking button for hiding input', fakeAsync(() => { - component.tagNameControlVisible = true; - fixture.detectChanges(); - tick(100); - - clickAtHideNameInputButton(); - - const tagNameField = fixture.debugElement.query(By.css(tagNameFieldSelector)); - expect(tagNameField).toBeFalsy(); - })); - it('should input be autofocused', fakeAsync(() => { component.tagNameControlVisible = true; fixture.detectChanges(); @@ -284,19 +268,6 @@ describe('TagsCreatorComponent', () => { expect(getNameInput()).toBe(document.activeElement as HTMLInputElement); })); - it('should input be autofocused after showing input second time', fakeAsync(() => { - component.tagNameControlVisible = true; - fixture.detectChanges(); - tick(100); - - clickAtHideNameInputButton(); - component.tagNameControlVisible = true; - fixture.detectChanges(); - tick(100); - - expect(getNameInput()).toBe(document.activeElement as HTMLInputElement); - })); - describe('Errors', () => { function getFirstError(): string { const error = fixture.debugElement.query(By.directive(MatError)); @@ -322,13 +293,6 @@ describe('TagsCreatorComponent', () => { expect(error).toBe('TAG.TAGS_CREATOR.ERRORS.REQUIRED'); })); - it('should not show error for required if tags are changed', fakeAsync(() => { - typeTag(''); - component.tags = ['new tag 1', 'new tag 2']; - fixture.detectChanges(); - expect(getFirstError()).toBeUndefined(); - })); - it('should show error when duplicated already added tag', fakeAsync(() => { const tag = 'Some tag'; @@ -403,14 +367,6 @@ describe('TagsCreatorComponent', () => { expect(getPanel()).toBeTruthy(); }); - it('should not be visible when something has been typed and input has been hidden', fakeAsync(() => { - typeTag('some tag'); - - clickAtHideNameInputButton(); - - expect(getPanel()).toBeFalsy(); - })); - it('should have correct label when mode is Create and Assign', fakeAsync(() => { component.mode = TagsCreatorMode.CREATE_AND_ASSIGN; diff --git a/lib/core/src/lib/i18n/en.json b/lib/core/src/lib/i18n/en.json index 2da9563fd5..b78227e430 100644 --- a/lib/core/src/lib/i18n/en.json +++ b/lib/core/src/lib/i18n/en.json @@ -193,7 +193,7 @@ }, "METADATA": { "BASIC": { - "HEADER": "Properties", + "HEADER": "General info", "NAME": "Name", "TITLE": "Title", "DESCRIPTION": "Description", diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss index 4f99fded8e..b3f7d856cb 100644 --- a/lib/core/src/lib/styles/_components-variables.scss +++ b/lib/core/src/lib/styles/_components-variables.scss @@ -45,6 +45,8 @@ --adf-identity-user-info-line-height: $adf-ref-line-height, --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-tags-background-color: $adf-metadata-tags-background-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 d214c5fff0..e82999a004 100644 --- a/lib/core/src/lib/styles/_reference-variables.scss +++ b/lib/core/src/lib/styles/_reference-variables.scss @@ -27,3 +27,5 @@ $adf-ref-height: 40px; $adf-ref-width: 40px; $adf-ref-line-height: 40px; $adf-ref-margin-right: 8px; +$adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12); +$adf-metadata-tags-background-color: rgba(33, 33, 33, 0.05);