diff --git a/e2e/content-services/metadata/metadata-smoke-tests.e2e.ts b/e2e/content-services/metadata/metadata-smoke-tests.e2e.ts index d74ce0b296..92816ef6ad 100644 --- a/e2e/content-services/metadata/metadata-smoke-tests.e2e.ts +++ b/e2e/content-services/metadata/metadata-smoke-tests.e2e.ts @@ -141,13 +141,6 @@ describe('Metadata component', () => { await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB); await metadataViewPage.clickEditIconGeneral(); - 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(); diff --git a/e2e/core/pages/metadata-view.page.ts b/e2e/core/pages/metadata-view.page.ts index 7bfeaddaae..3804dcfc58 100644 --- a/e2e/core/pages/metadata-view.page.ts +++ b/e2e/core/pages/metadata-view.page.ts @@ -167,11 +167,6 @@ export class MetadataViewPage { return BrowserActions.getInputValue(textField); } - async getPropertyIconTooltip(propertyName: string): Promise { - const editPropertyIcon = $('[data-automation-id="header-' + propertyName + '"] .adf-textitem-edit-icon'); - return BrowserActions.getAttribute(editPropertyIcon, 'title'); - } - async clickMetadataGroup(groupName: string): Promise { const group = await this.getMetadataGroupLocator(groupName); await BrowserActions.click(group); 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 83b90a09a1..36edc3e251 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 @@ -25,6 +25,15 @@ .mat-expansion-panel:not([class*='mat-elevation-z']) { box-shadow: none; + border: 1px solid var(--adf-metadata-property-panel-border-color); + border-radius: 12px; + margin: 24px; + } + + .mat-expansion-panel-body { + align-items: center; + justify-content: center; + font-size: 15px; } .adf-mat-divider { @@ -69,7 +78,7 @@ justify-content: space-between; align-items: center; font-size: 15px; - height: 68px; + height: 56px; } adf-tags-creator { @@ -107,7 +116,7 @@ justify-content: space-between; align-items: center; font-size: 15px; - height: 64px; + height: 56px; button { margin-right: -14px; 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..444ad93e70 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..69c5039a19 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(--theme-metadata-property-panel-text-color); + display: flex; + padding: 6px 0; + line-height: 20px; + } + + &-property-dateitem-edit-mode{ + background-color: var(--theme-metadata-buttons-background-color); + border-radius: 6px; + padding-left: 12px; + + .mat-select-value{ + color: var(--theme-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 +
- + {{ 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; @@ -492,27 +474,7 @@ describe('CardViewTextItemComponent', () => { fixture.detectChanges(); 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..7a82e35c13 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,80 @@ 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(--theme-metadata-property-panel-label-color) !important; } .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(--theme-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(--theme-metadata-buttons-background-color); + color: var(--theme-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(--theme-metadata-buttons-background-color); + border-radius: 6px; + + .mat-select-min-line{ + color: var(--theme-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/i18n/en.json b/lib/core/src/lib/i18n/en.json index f062cbe98e..e92b8558d4 100644 --- a/lib/core/src/lib/i18n/en.json +++ b/lib/core/src/lib/i18n/en.json @@ -569,5 +569,8 @@ "ADF_DROPDOWN": { "LOADING": "Loading...", "SELECTION_ARIA_LABEL": "{{placeholder}} combobox {{selectedOption}}" + }, + "INFO_DRAWER": { + "ICON": "Node Icon" } } 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..f5c4dde77c 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..733c1cdc9a 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,7 +14,7 @@ $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); & .mat-tab-label { @@ -32,7 +32,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 +54,8 @@ $adf-info-drawer-icon-size-half: 24px !default; & > div { overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + color: var(--theme-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..7e3fca94b6 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: '[info-drawer-node-icon], [info-drawer-node-icon]' }) export class InfoDrawerNodeIconDirective {} @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..5736c8f091 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,6 @@ + {{ 'INFO_DRAWER.ICON' | translate }} +
{{ 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..0d80e5eaca 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,23 @@ .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 +53,7 @@ } .mat-tab-body { - padding: 10px; + overflow-y: hidden; } .mat-tab-body-content { 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..3a74e6b5aa 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 @@ -87,18 +87,19 @@ describe('InfoDrawerComponent', () => { @Component({ template: ` - - - - - - - - - ` + + + + + + + + + ` }) class CustomInfoDrawerComponent extends InfoDrawerComponent { tabIndex: number; + nodeIcon: string; } describe('Custom InfoDrawer', () => { @@ -157,16 +158,26 @@ 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', () => { + component.nodeIcon = "/assets/images/ft_ic_miscellaneous.svg"; + fixture.detectChanges(); + const icon = fixture.debugElement.queryAll(By.css('[info-drawer-node-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; + nodeIcon: string; } describe('Header visibility InfoDrawer', () => { @@ -189,18 +200,24 @@ describe('Header visibility InfoDrawer', () => { }); it('should show info drawer header by default', () => { + component.nodeIcon = "/assets/images/ft_ic_miscellaneous.svg"; fixture.detectChanges(); const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]')); + const icon = fixture.debugElement.queryAll(By.css('[info-drawer-node-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', () => { - fixture.detectChanges(); + it('should not show info drawer header with icon when showHeader is false', () => { component.showHeader = false; fixture.detectChanges(); const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]')); + const icon = fixture.debugElement.queryAll(By.css('[info-drawer-node-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..7bf2260015 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,7 @@ import { Component, ContentChildren, EventEmitter, HostListener, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { MatTabChangeEvent } from '@angular/material/tabs'; + @Component({ selector: 'adf-info-drawer-tab', template: '', @@ -43,10 +44,14 @@ export class InfoDrawerTabComponent { host: { class: 'adf-info-drawer' } }) export class InfoDrawerComponent { + /** The title of the info drawer (string or translation key). */ @Input() title: string|null = null; + @Input() + nodeIcon: string | null = null; + /** The selected index tab. */ @Input() selectedIndex: number = 0;