diff --git a/projects/v3/src/app/components/description/description.component.html b/projects/v3/src/app/components/description/description.component.html index cd8253c03..3358f9fcf 100644 --- a/projects/v3/src/app/components/description/description.component.html +++ b/projects/v3/src/app/components/description/description.component.html @@ -1,5 +1,5 @@
-
+
@@ -26,7 +26,7 @@ (keydown.space)="openShut(); $event.preventDefault()" [attr.aria-expanded]="!isTruncating" [attr.aria-controls]="name" - [attr.aria-label]="isTruncating ? 'Show more content' : 'Show less content'" + [attr.aria-label]="isTruncating ? ('Show more of ' + (ariaLabel || 'content')) : ('Show less of ' + (ariaLabel || 'content'))" i18n-aria-label class="ion-focusable"> diff --git a/projects/v3/src/app/components/description/description.component.ts b/projects/v3/src/app/components/description/description.component.ts index ce5be61fe..9f9cfe6d4 100644 --- a/projects/v3/src/app/components/description/description.component.ts +++ b/projects/v3/src/app/components/description/description.component.ts @@ -1,37 +1,26 @@ -import { Component, Input, ViewChild, ElementRef, AfterViewInit, OnChanges, SimpleChange, ViewEncapsulation, Output, EventEmitter } from '@angular/core'; +import { Component, Input, ViewChild, ElementRef, AfterViewInit, OnChanges, SimpleChanges, ViewEncapsulation, Output, EventEmitter } from '@angular/core'; +import { SafeHtml } from '@angular/platform-browser'; import { BrowserStorageService } from '@v3/services/storage.service'; @Component({ selector: 'app-description', templateUrl: 'description.component.html', styleUrls: ['./description.component.scss'], - encapsulation: ViewEncapsulation.ShadowDom, - /*animations: [ - trigger('truncation', [ - state('show', style({ - 'max-height': '1000px !important', - })), - state('hide', style({ - 'max-height': '90px !important', - })), - transition('* <=> *', [ - animate('0.5s ease-in-out') - ]) - ]), - ]*/ + encapsulation: ViewEncapsulation.None, }) -export class DescriptionComponent implements OnChanges { +export class DescriptionComponent implements OnChanges, AfterViewInit { heightLimit = 145; // more accurately adjusted isTruncating: boolean; heightExceeded: boolean; elementHeight: number; hasBeenTruncated: boolean; // prevent onChange replace the collapsed content - @Input() name; // unique identity of parent element - @Input() content; - @Input() isInPopup; + @Input() name: string; // unique identity of parent element + @Input() content: SafeHtml; + @Input() isInPopup: boolean; @Input() nonCollapsible?: boolean; - @Output() hasExpanded? = new EventEmitter(); + @Input() ariaLabel?: string; + @Output() hasExpanded? = new EventEmitter(); @ViewChild('description') descriptionRef: ElementRef; constructor( @@ -40,43 +29,40 @@ export class DescriptionComponent implements OnChanges { this.hasBeenTruncated = false; } - ngOnChanges(changes: { [propKey: string]: SimpleChange}) { - // reset to default - if (this.hasBeenTruncated === false) { + ngOnChanges(changes: SimpleChanges) { + if (changes.content && !changes.content.firstChange) { + this.hasBeenTruncated = false; this.isTruncating = false; this.heightExceeded = false; + this.calculateHeight(); } + } - this.content = changes.content.currentValue; + ngAfterViewInit() { this.calculateHeight(); } calculateHeight(): void { - if (this.nonCollapsible === true) { + if (this.nonCollapsible === true || !this.storage.getUser().truncateDescription) { return; } - if (!this.storage.getUser().truncateDescription) { - return; - } - setTimeout( - () => { + setTimeout(() => { + if (this.descriptionRef?.nativeElement) { this.elementHeight = this.descriptionRef.nativeElement.clientHeight; this.heightExceeded = this.elementHeight >= this.heightLimit; - if (this.heightExceeded) { + if (this.heightExceeded && !this.hasBeenTruncated) { this.isTruncating = true; this.hasBeenTruncated = true; } - }, - 700 - ); + } + }, 300); // Reduced timeout } openShut(): void { this.isTruncating = !this.isTruncating; this.hasExpanded.emit(!this.isTruncating); - return; } } diff --git a/projects/v3/src/app/components/multi-team-member-selector/multi-team-member-selector.component.html b/projects/v3/src/app/components/multi-team-member-selector/multi-team-member-selector.component.html index a890deb84..6b1f9bda7 100644 --- a/projects/v3/src/app/components/multi-team-member-selector/multi-team-member-selector.component.html +++ b/projects/v3/src/app/components/multi-team-member-selector/multi-team-member-selector.component.html @@ -46,7 +46,7 @@

-
+
-
+
-