From 6b1cae93f8ac40972a1df9d35d943e6e8fe36a69 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Fri, 26 May 2023 12:13:44 +0200 Subject: [PATCH 1/3] fix(expandable-panel): prevent truncating content --- .../expandable-panel/expandable-panel.component.html | 6 +++++- .../expandable-panel.component.spec.ts | 12 +++++++++--- .../expandable-panel/expandable-panel.component.ts | 9 ++++++++- 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html index 5725a2a58c..8150d95cfe 100644 --- a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html +++ b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html @@ -14,7 +14,11 @@
diff --git a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.spec.ts b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.spec.ts index 49d7c777c1..b4faee35df 100644 --- a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.spec.ts +++ b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.spec.ts @@ -47,7 +47,12 @@ describe('ExpandablePanelComponent', () => { }) it('hides content', () => { const el = fixture.debugElement.query(By.css('.content')) - expect(el.classes['max-h-0']).toBeTruthy() + expect(el.styles.getPropertyValue('max-height')).toEqual('0px') + }) + it('should have ease-out transition', () => { + const el = fixture.debugElement.query(By.css('.content')) + expect(el.classes['ease-out']).toBeTruthy() + expect(el.classes['ease-in']).toBeFalsy() }) }) describe('when not collapsed', () => { @@ -55,9 +60,10 @@ describe('ExpandablePanelComponent', () => { component.collapsed = false fixture.detectChanges() }) - it('shows content', () => { + it('should have ease-in transition', () => { const el = fixture.debugElement.query(By.css('.content')) - expect(el.classes['max-h-[300px]']).toBeTruthy() + expect(el.classes['ease-in']).toBeTruthy() + expect(el.classes['ease-out']).toBeFalsy() }) }) }) diff --git a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.ts b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.ts index 5a141c8160..648f9ce05b 100644 --- a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.ts +++ b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.ts @@ -1,4 +1,10 @@ -import { Component, ChangeDetectionStrategy, Input } from '@angular/core' +import { + Component, + ChangeDetectionStrategy, + Input, + ViewChild, + ElementRef, +} from '@angular/core' @Component({ selector: 'gn-ui-expandable-panel', @@ -9,6 +15,7 @@ import { Component, ChangeDetectionStrategy, Input } from '@angular/core' export class ExpandablePanelComponent { @Input() title: string @Input() collapsed = true + @ViewChild('contentDiv') contentDiv: ElementRef toggle(): void { this.collapsed = !this.collapsed From f92948fd9c6c594fb70c68a8c9e0ab4763649e6a Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Thu, 1 Jun 2023 14:08:53 +0200 Subject: [PATCH 2/3] refactor(expandable-panel): set maxHeight on click based on stored scrollHeight to prevent potential reflow --- .../lib/expandable-panel/expandable-panel.component.html | 4 +--- .../lib/expandable-panel/expandable-panel.component.ts | 8 ++++++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html index 8150d95cfe..87c9373106 100644 --- a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html +++ b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html @@ -15,9 +15,7 @@
diff --git a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.ts b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.ts index 648f9ce05b..2f9e618b65 100644 --- a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.ts +++ b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.ts @@ -16,8 +16,16 @@ export class ExpandablePanelComponent { @Input() title: string @Input() collapsed = true @ViewChild('contentDiv') contentDiv: ElementRef + maxHeight = this.setMaxHeight() toggle(): void { this.collapsed = !this.collapsed + this.maxHeight = this.setMaxHeight() + } + + setMaxHeight() { + return `${ + this.collapsed ? '0' : this.contentDiv.nativeElement.scrollHeight + }px` } } From 5f19be339015631fec3b26eadc8b56c190a3e038 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Fri, 2 Jun 2023 10:54:28 +0200 Subject: [PATCH 3/3] fix(atomic-op.): return null as logoUrl for sources without logo instead of generating /geonetworknull url --- .../search/src/lib/utils/mapper/atomic-operations.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/libs/feature/search/src/lib/utils/mapper/atomic-operations.ts b/libs/feature/search/src/lib/utils/mapper/atomic-operations.ts index bc234d2f1b..ce8447bf1f 100644 --- a/libs/feature/search/src/lib/utils/mapper/atomic-operations.ts +++ b/libs/feature/search/src/lib/utils/mapper/atomic-operations.ts @@ -105,12 +105,16 @@ export const mapLink = ( } } +const mapLogo = (source: SourceWithUnknownProps) => { + const logo = selectField(source, 'logo') + return logo ? getAsUrl(`/geonetwork${logo}`) : null +} export const mapContact = ( sourceContact: SourceWithUnknownProps, sourceRecord: SourceWithUnknownProps ): MetadataContact => { const website = getAsUrl(selectField(sourceContact, 'website')) - const logoUrl = getAsUrl(`/geonetwork${selectField(sourceRecord, 'logo')}`) + const logoUrl = mapLogo(sourceRecord) const address = selectField(sourceContact, 'address') const phone = selectField(sourceContact, 'phone') return {