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 36edc3e251..5d21b3ec9c 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,7 +25,7 @@ .mat-expansion-panel:not([class*='mat-elevation-z']) { box-shadow: none; - border: 1px solid var(--adf-metadata-property-panel-border-color); + border: 1px solid var(--theme-metadata-property-panel-border-color); border-radius: 12px; margin: 24px; } @@ -45,6 +45,10 @@ color: var(--adf-theme-foreground-text-color-054); } + .mat-content.mat-content-hide-toggle { + margin-right: 0; + } + .adf-metadata-properties-panel-content { display: flex; align-items: center; 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 69c5039a19..f3e9784f72 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,19 +11,19 @@ float: right; } - &-property-label{ + &-property-label { color: var(--theme-metadata-property-panel-text-color); display: flex; padding: 6px 0; line-height: 20px; } - &-property-dateitem-edit-mode{ + &-property-dateitem-edit-mode { background-color: var(--theme-metadata-buttons-background-color); border-radius: 6px; padding-left: 12px; - .mat-select-value{ + .mat-select-value { color: var(--theme-metadata-property-panel-text-color); } } diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss index c2fe0b2546..3f707e422b 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss @@ -1,5 +1,4 @@ .adf { - &-property-field .mat-form-field-underline { display: none; } 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 7a82e35c13..0a4bd1c133 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 @@ -10,23 +10,39 @@ .adf-property-value-padding-top { display: flex; flex-direction: column; - padding-bottom: 6px; + padding: 6px 0; line-height: 20px; } .adf-property-label-not-editable { - color: var(--theme-metadata-property-panel-label-color) !important; + color: var(--theme-metadata-property-panel-label-color); + + .mat-tooltip-trigger { + padding-left: 12px; + } } .adf-property-field { width: 100%; + .mat-input-element { + text-overflow: ellipsis; + } + .mat-form-field-infix { display: flex; border-top-width: 0; padding: 0; } + .mat-form-field-flex { + padding-top: 0; + } + + .mat-form-field-wrapper { + padding-bottom: 0 ; + } + .mat-form-field-label { padding: 6px 0; justify-content: center; @@ -57,6 +73,10 @@ border-radius: 6px; } + .mat-input-element.adf-property-label-not-editable { + color: var(--theme-metadata-property-panel-label-color); + } + .mat-select.adf-property-select-edit-mode { padding: 6px 0 6px 12px; margin-top: 0; @@ -64,22 +84,10 @@ background-color: var(--theme-metadata-buttons-background-color); border-radius: 6px; - .mat-select-min-line{ + .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/info-drawer/info-drawer-layout.component.html b/lib/core/src/lib/info-drawer/info-drawer-layout.component.html index f5c4dde77c..92a104504e 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,8 +1,6 @@
-
- -
+
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 733c1cdc9a..ae7b97c99d 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,14 +14,14 @@ $adf-info-drawer-icon-size-half: 24px !default; overflow: auto; width: 100%; - background-color:var(--theme-card-background-color); + background-color: var(--theme-card-background-color); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); & .mat-tab-label { + height: 32px; font-weight: bold; text-align: left; color: var(--theme-accent-color); - text-transform: uppercase; opacity: 1; &-active { @@ -30,13 +30,12 @@ $adf-info-drawer-icon-size-half: 24px !default; } &-header { - padding: 13px 0 0 23px; + padding: 8px 0 0 24px; display: flex; align-items: center; + height: 56px; margin-bottom: 40px; - &-buttons { - padding-right: 18px; mat-icon { cursor: pointer; @@ -44,16 +43,16 @@ $adf-info-drawer-icon-size-half: 24px !default; } &-title { - width: 197px; - height: 32px; + display: flex; font-size: $adf-info-drawer-layout-title-font-size; - line-height: 1.6; - letter-spacing: -0.5px; + line-height: 28px; + letter-spacing: 0.15px; text-align: left; + align-items: start; color: var(--adf-theme-foreground-text-color-054); & > div { - overflow: hidden; + width: 220px; 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 7e3fca94b6..8f785c2ce6 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,7 +33,6 @@ 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.scss b/lib/core/src/lib/info-drawer/info-drawer.component.scss index 0d80e5eaca..5284ab8850 100644 --- a/lib/core/src/lib/info-drawer/info-drawer.component.scss +++ b/lib/core/src/lib/info-drawer/info-drawer.component.scss @@ -1,9 +1,9 @@ .adf { &-info-drawer { - .adf-metadata-properties-panel{ - display:block; - margin:0; + .adf-metadata-properties-panel { + display: block; + margin: 0; } .mat-tab-label { 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 3a74e6b5aa..9f7a7a5359 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,7 +87,7 @@ describe('InfoDrawerComponent', () => { @Component({ template: ` - + @@ -140,7 +140,7 @@ describe('Custom InfoDrawer', () => { fixture.detectChanges(); const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active')); expect(tab.length).toBe(1); - expect(tab[0].nativeElement.innerText).toContain('TAB1'); + expect(tab[0].nativeElement.innerText).toContain('Tab1'); }); it('should select the tab 2 (index 1)', () => { @@ -148,14 +148,14 @@ describe('Custom InfoDrawer', () => { fixture.detectChanges(); const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active')); expect(tab.length).toBe(1); - expect(tab[0].nativeElement.innerText).toContain('TAB2'); + expect(tab[0].nativeElement.innerText).toContain('Tab2'); }); it('should render a tab with icon', () => { component.tabIndex = 2; fixture.detectChanges(); const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active')); - expect(tab[0].nativeElement.innerText).not.toBe('TAB3'); + expect(tab[0].nativeElement.innerText).not.toBe('Tab3'); expect(tab[0].nativeElement.innerText).toContain('tab-icon'); }); @@ -171,7 +171,7 @@ describe('Custom InfoDrawer', () => { @Component({ template: ` - + ` }) 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 7bf2260015..8c850204c8 100644 --- a/lib/core/src/lib/info-drawer/info-drawer.component.ts +++ b/lib/core/src/lib/info-drawer/info-drawer.component.ts @@ -17,7 +17,6 @@ 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: '', @@ -44,7 +43,6 @@ 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;