diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.html b/lib/content-services/src/lib/aspect-list/aspect-list.component.html index a77fbc0211..b3ba071b23 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list.component.html +++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.html @@ -1,44 +1,51 @@
- - - - -

{{getTitle(aspect)}}

-
-
- - {{getTitle(aspect)}} - -
-

{{aspect?.entry?.description}}

+
+ + + + + {{getTitle(aspect)}} + + + {{getTitle(aspect)}} + + +

{{aspect?.entry?.description}}

- - - - - - - - - - - - - - - -
{{'ADF-ASPECT-LIST.PROPERTY_NAME' | translate}} {{property.id}} {{'ADF-ASPECT-LIST.DESCRIPTION' | translate}} {{property.title}} {{'ADF-ASPECT-LIST.DATA_TYPE' | translate}} {{property.dataType}}
-
+ + + + + + + + + + + + + + + +
{{'ADF-ASPECT-LIST.PROPERTY_NAME' | translate}} {{property.id}} {{'ADF-ASPECT-LIST.DESCRIPTION' | translate}} {{property.title}} {{'ADF-ASPECT-LIST.DATA_TYPE' | translate}} {{property.dataType}}
+ +
diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss index 6779ef85e9..d9b73a5f18 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss +++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss @@ -26,18 +26,28 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei .adf-aspect-list-check-button { margin-right: 5px; + height: 48px; align-items: center; display: flex; } - .adf-aspect-list-element-title { - font-size: smaller; + .adf-accordion-aspect-list-item { + padding-left: 14px; display: flex; - align-items: center; + box-shadow: 0 2px 2px -1px var(--adf-theme-foreground-text-color-007); + + &.adf-hover { + &:hover { + background-color: var(--adf-theme-background-hover-color); + } + } } .adf-accordion-aspect-list-expansion-panel { margin: 0; + width: 100%; + box-shadow: none; + background: border-box; #{$mat-checkbox-background} { height: 16px; @@ -46,11 +56,12 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei &-header { font-size: smaller; - padding-left: 12px; + padding-left: 0; + height: 48px; } &-header-title { - flex: 1 1 0; + color: var(--theme-secondary-text); } &-header-description { @@ -94,3 +105,13 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei } } } + +.adf-accordion-aspect-list + .adf-accordion-aspect-list-item + .adf-accordion-aspect-list-expansion-panel + .adf-accordion-aspect-list-expansion-panel-header { + &:hover, + &:focus { + background: none; + } +} diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.spec.ts b/lib/content-services/src/lib/aspect-list/aspect-list.component.spec.ts index 44785d485a..fed44b4aa5 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list.component.spec.ts +++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.spec.ts @@ -180,7 +180,9 @@ describe('AspectListComponent', () => { }); it('should show aspect id when name or title is not set', () => { - const noNameAspect = fixture.nativeElement.querySelector('#aspect-list-cst-nonamedAspect .adf-aspect-list-element-title'); + const noNameAspect = fixture.nativeElement.querySelector( + '#aspect-list-cst-nonamedAspect .adf-accordion-aspect-list-expansion-panel-header-title' + ); expect(noNameAspect).toBeDefined(); expect(noNameAspect).not.toBeNull(); expect(noNameAspect.innerText).toBe('cst:nonamedAspect'); @@ -203,14 +205,12 @@ describe('AspectListComponent', () => { }); it('should show node aspects as checked', async () => { - const panel = await loader.getHarness(MatExpansionPanelHarness); - const checkbox = await panel.getHarness(MatCheckboxHarness); + const checkbox = await loader.getHarness(MatCheckboxHarness); expect(await checkbox.isChecked()).toBe(true); }); it('should add checked and remove unchecked aspects', async () => { - const panel = (await loader.getAllHarnesses(MatExpansionPanelHarness))[1]; - const checkbox = await panel.getHarness(MatCheckboxHarness); + const checkbox = (await loader.getAllHarnesses(MatCheckboxHarness))[1]; expect(await checkbox.isChecked()).toBe(false); await checkbox.toggle(); @@ -223,8 +223,7 @@ describe('AspectListComponent', () => { }); it('should reset aspects on reset', async () => { - const panel = (await loader.getAllHarnesses(MatExpansionPanelHarness))[1]; - const checkbox = await panel.getHarness(MatCheckboxHarness); + const checkbox = (await loader.getAllHarnesses(MatCheckboxHarness))[1]; expect(await checkbox.isChecked()).toBe(false); await checkbox.toggle(); @@ -246,8 +245,7 @@ describe('AspectListComponent', () => { spyOn(component.valueChanged, 'emit'); spyOn(component.updateCounter, 'emit'); - const panel = (await loader.getAllHarnesses(MatExpansionPanelHarness))[1]; - const checkbox = await panel.getHarness(MatCheckboxHarness); + const checkbox = (await loader.getAllHarnesses(MatCheckboxHarness))[1]; await checkbox.toggle(); fixture.detectChanges(); expect(component.valueChanged.emit).toHaveBeenCalledWith(['frs:AspectOne', 'frs:SecondAspect', ...storedAspect]); diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.ts b/lib/content-services/src/lib/aspect-list/aspect-list.component.ts index be2d46eef8..0aa4ec3663 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list.component.ts +++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.ts @@ -60,6 +60,7 @@ export class AspectListComponent implements OnInit { nodeAspectStatus: string[] = []; notDisplayedAspects: string[] = []; hasEqualAspect: boolean = true; + isPanelOpen: boolean[] = []; private readonly destroyRef = inject(DestroyRef);