diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts index 19b849b9b4..763279ebe5 100644 --- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts +++ b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts @@ -48,7 +48,7 @@ describe('BrowseByMetadataPageComponent', () => { browseBy: { showThumbnails: true } - } + }; const mockEntries = [ { diff --git a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.spec.ts b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.spec.ts index 997459a1ef..178ed86c40 100644 --- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.spec.ts +++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.spec.ts @@ -62,13 +62,13 @@ const environmentUseThumbs = { browseBy: { showThumbnails: true } -} +}; const enviromentNoThumbs = { browseBy: { showThumbnails: false } -} +}; describe('JournalIssueSearchResultListElementComponent', () => { beforeEach(waitForAsync(() => { diff --git a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.spec.ts b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.spec.ts index 8692966402..71fa83a3b1 100644 --- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.spec.ts +++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.spec.ts @@ -61,13 +61,13 @@ const environmentUseThumbs = { browseBy: { showThumbnails: true } -} +}; const enviromentNoThumbs = { browseBy: { showThumbnails: false } -} +}; describe('JournalVolumeSearchResultListElementComponent', () => { beforeEach(waitForAsync(() => { diff --git a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.spec.ts b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.spec.ts index a778839b4f..07970d7128 100644 --- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.spec.ts +++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.spec.ts @@ -57,13 +57,13 @@ const environmentUseThumbs = { browseBy: { showThumbnails: true } -} +}; const enviromentNoThumbs = { browseBy: { showThumbnails: false } -} +}; describe('JournalSearchResultListElementComponent', () => { beforeEach(waitForAsync(() => { diff --git a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.spec.ts b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.spec.ts index f2f9a3967e..974c418cdc 100644 --- a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.spec.ts +++ b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.spec.ts @@ -55,13 +55,13 @@ const environmentUseThumbs = { browseBy: { showThumbnails: true } -} +}; const enviromentNoThumbs = { browseBy: { showThumbnails: false } -} +}; describe('OrgUnitSearchResultListElementComponent', () => { beforeEach(waitForAsync(() => { diff --git a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.spec.ts b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.spec.ts index 02a7a5bb52..6c69bfd58d 100644 --- a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.spec.ts +++ b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.spec.ts @@ -55,13 +55,13 @@ const environmentUseThumbs = { browseBy: { showThumbnails: true } -} +}; const enviromentNoThumbs = { browseBy: { showThumbnails: false } -} +}; describe('PersonSearchResultListElementComponent', () => { beforeEach(waitForAsync(() => { diff --git a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.spec.ts b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.spec.ts index 17333392d3..0cb3e63e87 100644 --- a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.spec.ts +++ b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.spec.ts @@ -56,13 +56,13 @@ const environmentUseThumbs = { browseBy: { showThumbnails: true } -} +}; const enviromentNoThumbs = { browseBy: { showThumbnails: false } -} +}; describe('ProjectSearchResultListElementComponent', () => { beforeEach(waitForAsync(() => { diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-search-result-list-submission-element.component.spec.ts b/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-search-result-list-submission-element.component.spec.ts index 389e1852f5..5ab89be34b 100644 --- a/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-search-result-list-submission-element.component.spec.ts +++ b/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-search-result-list-submission-element.component.spec.ts @@ -42,13 +42,13 @@ const environmentUseThumbs = { browseBy: { showThumbnails: true } -} +}; const enviromentNoThumbs = { browseBy: { showThumbnails: false } -} +}; function init() { mockItemWithMetadata = Object.assign( diff --git a/src/app/item-page/simple/abstract-incremental-list/abstract-incremental-list.component.ts b/src/app/item-page/simple/abstract-incremental-list/abstract-incremental-list.component.ts index c965648c15..e788e6e575 100644 --- a/src/app/item-page/simple/abstract-incremental-list/abstract-incremental-list.component.ts +++ b/src/app/item-page/simple/abstract-incremental-list/abstract-incremental-list.component.ts @@ -10,6 +10,7 @@ import { hasValue, isNotEmpty } from '../../../shared/empty.util'; * An abstract component for displaying an incremental list of objects */ export class AbstractIncrementalListComponent implements OnInit, OnDestroy { + /** * The amount to increment the list by * Define this amount in the child component overriding this component @@ -21,6 +22,11 @@ export class AbstractIncrementalListComponent implements OnInit, OnDestroy { */ objects: T[]; + /** + * Placeholder css class (defined in global-styles) + */ + placeholderFontClass: string; + /** * A list of open subscriptions */ diff --git a/src/app/item-page/simple/related-items/related-items-component.ts b/src/app/item-page/simple/related-items/related-items-component.ts index e0d65b9a6d..e88af944b4 100644 --- a/src/app/item-page/simple/related-items/related-items-component.ts +++ b/src/app/item-page/simple/related-items/related-items-component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component, ElementRef, Input } from '@angular/core'; import { Item } from '../../../core/shared/item.model'; import { Observable } from 'rxjs'; import { RemoteData } from '../../../core/data/remote-data'; @@ -7,6 +7,7 @@ import { ViewMode } from '../../../core/shared/view-mode.model'; import { RelationshipService } from '../../../core/data/relationship.service'; import { AbstractIncrementalListComponent } from '../abstract-incremental-list/abstract-incremental-list.component'; import { FindListOptions } from '../../../core/data/find-list-options.model'; +import { setPlaceHolderFontSize } from '../../../shared/utils/object-list-utils'; @Component({ selector: 'ds-related-items', @@ -18,6 +19,7 @@ import { FindListOptions } from '../../../core/data/find-list-options.model'; * It expects a parent item and relationship type, as well as a label to display on top */ export class RelatedItemsComponent extends AbstractIncrementalListComponent>>> { + /** * The parent of the list of related items to display */ @@ -53,9 +55,14 @@ export class RelatedItemsComponent extends AbstractIncrementalListComponent + +
+
diff --git a/src/app/item-page/simple/related-items/related-items.component.scss b/src/app/item-page/simple/related-items/related-items.component.scss index e69de29bb2..72fbdff165 100644 --- a/src/app/item-page/simple/related-items/related-items.component.scss +++ b/src/app/item-page/simple/related-items/related-items.component.scss @@ -0,0 +1,6 @@ + +ds-listable-object-component-loader { + margin-bottom: 10px; + display: block; +} + diff --git a/src/app/shared/object-collection/object-collection.component.ts b/src/app/shared/object-collection/object-collection.component.ts index 3720d4196f..809d956c72 100644 --- a/src/app/shared/object-collection/object-collection.component.ts +++ b/src/app/shared/object-collection/object-collection.component.ts @@ -21,6 +21,7 @@ import { ViewMode } from '../../core/shared/view-mode.model'; import { CollectionElementLinkType } from './collection-element-link.type'; import { PaginatedList } from '../../core/data/paginated-list.model'; import { Context } from '../../core/shared/context.model'; +import { setPlaceHolderFontSize } from '../utils/object-list-utils'; /** * Component that can render a list of listable objects in different view modes @@ -167,7 +168,9 @@ export class ObjectCollectionComponent implements OnInit { map((params) => isEmpty(params?.view) ? ViewMode.ListElement : params.view), distinctUntilChanged() ); - this.setPlaceHolderFontSize(); + const width = this.elementRef.nativeElement.offsetWidth; + this.placeholderFontClass = setPlaceHolderFontSize(width); + } /** @@ -177,6 +180,8 @@ export class ObjectCollectionComponent implements OnInit { * Route is a singleton service provided by Angular. * @param router * Router is a singleton service provided by Angular. + * @param elementRef + * Used only to read DOM for the element width */ constructor( private cdRef: ChangeDetectorRef, @@ -236,19 +241,4 @@ export class ObjectCollectionComponent implements OnInit { this.next.emit(true); } - /** - * Sets the class to be used for the "no thumbnail" - * placeholder font size. - */ - setPlaceHolderFontSize() { - const width = this.elementRef.nativeElement.offsetWidth; - if (width < 750) { - this.placeholderFontClass = 'thumb-font-1'; - } else if (width < 1000) { - this.placeholderFontClass = 'thumb-font-2'; - } else { - this.placeholderFontClass = 'thumb-font-3'; - } - } - } diff --git a/src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts b/src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts index 7959ed57d9..aaddebd8eb 100644 --- a/src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts +++ b/src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts @@ -71,13 +71,13 @@ const environmentUseThumbs = { browseBy: { showThumbnails: true } -} +}; const enviromentNoThumbs = { browseBy: { showThumbnails: false } -} +}; describe('ItemListPreviewComponent', () => { beforeEach(waitForAsync(() => { @@ -226,6 +226,6 @@ describe('ItemListPreviewComponent', () => { it('should add the ds-thumbnail element', () => { const thumbnail = fixture.debugElement.query(By.css('ds-thumbnail')); expect(thumbnail).toBeFalsy(); - }) - }) + }); + }); }); diff --git a/src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.spec.ts b/src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.spec.ts index 8ad9bafab7..4f839a5d86 100644 --- a/src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.spec.ts +++ b/src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.spec.ts @@ -60,7 +60,7 @@ const environmentUseThumbs = { browseBy: { showThumbnails: true } -} +}; const rdItem = createSuccessfulRemoteDataObject(item); const workflowitem = Object.assign(new WorkflowItem(), { item: observableOf(rdItem) }); diff --git a/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.spec.ts b/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.spec.ts index a384ca5755..0f051c3c4b 100644 --- a/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.spec.ts +++ b/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.spec.ts @@ -60,7 +60,7 @@ const environmentUseThumbs = { browseBy: { showThumbnails: true } -} +}; const rd = createSuccessfulRemoteDataObject(item); mockResultObject.indexableObject = Object.assign(new WorkflowItem(), { item: observableOf(rd) }); @@ -120,7 +120,6 @@ describe('WorkflowItemSearchResultListElementComponent', () => { })); - it('should add an offset to the actions element', () => { const thumbnail = fixture.debugElement.query(By.css('.offset-3')); expect(thumbnail).toBeTruthy(); diff --git a/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.spec.ts b/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.spec.ts index aea8b93370..d2cef02555 100644 --- a/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.spec.ts +++ b/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.spec.ts @@ -60,7 +60,7 @@ const environmentUseThumbs = { browseBy: { showThumbnails: true } -} +}; const rd = createSuccessfulRemoteDataObject(item); mockResultObject.indexableObject = Object.assign(new WorkspaceItem(), { item: observableOf(rd) }); diff --git a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts index fcb91b6953..e5ea60b35d 100644 --- a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts +++ b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts @@ -48,7 +48,7 @@ const environmentUseThumbs = { browseBy: { showThumbnails: true } -} +}; describe('CollectionSearchResultListElementComponent', () => { beforeEach(waitForAsync(() => { @@ -98,7 +98,7 @@ describe('CollectionSearchResultListElementComponent', () => { describe('when environment is set to show thumbnail images', () => { it('should offset content', () => { - const offset = fixture.debugElement.query(By.css('offset-md-2')) + const offset = fixture.debugElement.query(By.css('offset-md-2')); }); }); diff --git a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts index 1b155ce153..ce12f5f7da 100644 --- a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts +++ b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts @@ -48,7 +48,7 @@ const environmentUseThumbs = { browseBy: { showThumbnails: true } -} +}; describe('CommunitySearchResultListElementComponent', () => { beforeEach(waitForAsync(() => { @@ -99,7 +99,7 @@ describe('CommunitySearchResultListElementComponent', () => { describe('when environment is set to show thumbnail images', () => { it('should offset content', () => { - const offset = fixture.debugElement.query(By.css('offset-md-2')) + const offset = fixture.debugElement.query(By.css('offset-md-2')); }); }); }); diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.spec.ts b/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.spec.ts index 84989c289c..d1e6c27ba4 100644 --- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.spec.ts +++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.spec.ts @@ -64,13 +64,13 @@ const environmentUseThumbs = { browseBy: { showThumbnails: true } -} +}; const enviromentNoThumbs = { browseBy: { showThumbnails: false } -} +}; describe('ItemSearchResultListElementComponent', () => { beforeEach(waitForAsync(() => { diff --git a/src/app/shared/utils/object-list-utils.ts b/src/app/shared/utils/object-list-utils.ts new file mode 100644 index 0000000000..3837ada1fd --- /dev/null +++ b/src/app/shared/utils/object-list-utils.ts @@ -0,0 +1,13 @@ +/** + * Sets the class to be used for the "no thumbnail" + * placeholder font size in lists. + */ +export function setPlaceHolderFontSize(width: number): string { + if (width < 750) { + return 'thumb-font-1'; + } else if (width < 1000) { + return 'thumb-font-2'; + } else { + return 'thumb-font-3'; + } +}