hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 18:14:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

[DSC-516] Fix issue with sidebar search list element

Browse Source
This commit is contained in:
Giuseppe Digilio
2022-06-13 17:41:51 +02:00
parent b6f83461ab
commit 06d07dc1df
3 changed files with 44 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html
View File

@@ -1,13 +1,13 @@
<ds-truncatable-part [maxLines]="1" [background]="isCurrent() ? 'primary' : 'default'">
<ds-truncatable-part [maxLines]="1" [background]="isCurrent() ? 'primary' : 'default'" [showToggle]="false">
<div [ngClass]="isCurrent() ? 'text-light' : 'text-body'"
[innerHTML]="(parentTitle$ && parentTitle$ | async) ? (parentTitle$ | async) : ('home.breadcrumbs' | translate)"></div>
</ds-truncatable-part>
<ds-truncatable-part *ngIf="title" [maxLines]="1" [background]="isCurrent() ? 'primary' : 'default'">
<ds-truncatable-part *ngIf="title" [maxLines]="1" [background]="isCurrent() ? 'primary' : 'default'" [showToggle]="false">
<div class="font-weight-bold"
[ngClass]="isCurrent() ? 'text-light' : 'text-primary'"
[innerHTML]="title"></div>
</ds-truncatable-part>
<ds-truncatable-part *ngIf="description" [maxLines]="1" [background]="isCurrent() ? 'primary' : 'default'">
<ds-truncatable-part *ngIf="description" [maxLines]="1" [background]="isCurrent() ? 'primary' : 'default'" [showToggle]="false">
<div class="text-secondary"
[ngClass]="isCurrent() ? 'text-light' : 'text-secondary'"
[innerHTML]="description"></div>

44
src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
View File

@@ -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');
}
}

22
src/app/shared/truncatable/truncatable.component.ts
View File

@@ -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');
}
}