diff --git a/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html b/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html index 3f93caa278..6a13b7e362 100644 --- a/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html +++ b/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html @@ -1,13 +1,13 @@ - +
- +
- +
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts index e73823fa7e..790bd5985d 100644 --- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts +++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts @@ -40,6 +40,12 @@ export class TruncatablePartComponent implements AfterViewChecked, OnInit, OnDes @Input() background = 'default'; + /** + * A boolean representing if to show or not the show/collapse toggle. + * This value must have the same value as the parent TruncatableComponent + */ + @Input() showToggle = true; + /** * The view on the truncatable part */ @@ -103,28 +109,30 @@ export class TruncatablePartComponent implements AfterViewChecked, OnInit, OnDes * check for the truncate element */ public truncateElement() { - const entry = this.content.nativeElement; - if (entry.scrollHeight > entry.offsetHeight) { - if (entry.children.length > 0) { - if (entry.children[entry.children.length - 1].offsetHeight > entry.offsetHeight) { - entry.classList.add('truncated'); - entry.classList.remove('removeFaded'); + if (this.showToggle) { + const entry = this.content.nativeElement; + if (entry.scrollHeight > entry.offsetHeight) { + if (entry.children.length > 0) { + if (entry.children[entry.children.length - 1].offsetHeight > entry.offsetHeight) { + entry.classList.add('truncated'); + entry.classList.remove('removeFaded'); + } else { + entry.classList.remove('truncated'); + entry.classList.add('removeFaded'); + } } else { - entry.classList.remove('truncated'); - entry.classList.add('removeFaded'); + if (entry.innerText.length > 0) { + entry.classList.add('truncated'); + entry.classList.remove('removeFaded'); + } else { + entry.classList.remove('truncated'); + entry.classList.add('removeFaded'); + } } } else { - if (entry.innerText.length > 0) { - entry.classList.add('truncated'); - entry.classList.remove('removeFaded'); - } else { - entry.classList.remove('truncated'); - entry.classList.add('removeFaded'); - } + entry.classList.remove('truncated'); + entry.classList.add('removeFaded'); } - } else { - entry.classList.remove('truncated'); - entry.classList.add('removeFaded'); } } diff --git a/src/app/shared/truncatable/truncatable.component.ts b/src/app/shared/truncatable/truncatable.component.ts index 71f99ecd4f..8fca300cd4 100644 --- a/src/app/shared/truncatable/truncatable.component.ts +++ b/src/app/shared/truncatable/truncatable.component.ts @@ -27,6 +27,12 @@ export class TruncatableComponent implements OnInit, AfterViewChecked { */ @Input() onHover = false; + /** + * A boolean representing if to show or not the show/collapse toggle + * This value must have the same value as the children TruncatablePartComponent + */ + @Input() showToggle = true; + public constructor(private service: TruncatableService, private el: ElementRef,) { } @@ -60,14 +66,16 @@ export class TruncatableComponent implements OnInit, AfterViewChecked { } ngAfterViewChecked() { - const truncatedElements = this.el.nativeElement.querySelectorAll('.truncated'); - if (truncatedElements?.length > 0) { - const truncateElements = this.el.nativeElement.querySelectorAll('.dont-break-out'); - for (let i = 0; i < (truncateElements.length - 1); i++) { - truncateElements[i].classList.remove('truncated'); - truncateElements[i].classList.add('notruncatable'); + if (this.showToggle) { + const truncatedElements = this.el.nativeElement.querySelectorAll('.truncated'); + if (truncatedElements?.length > 0) { + const truncateElements = this.el.nativeElement.querySelectorAll('.dont-break-out'); + for (let i = 0; i < (truncateElements.length - 1); i++) { + truncateElements[i].classList.remove('truncated'); + truncateElements[i].classList.add('notruncatable'); + } + truncateElements[truncateElements.length - 1].classList.add('truncated'); } - truncateElements[truncateElements.length - 1].classList.add('truncated'); } }