Fix thumbnail placeholder font scaling in ds-recent-item-list

Author: ybnd

src/app/home-page/recent-item-list/recent-item-list.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngVar="(itemRD$ | async) as itemRD">
-        <div class="mt-4" *ngIf="itemRD?.hasSucceeded && itemRD?.payload?.page.length > 0" @fadeIn>
+        <div class="mt-4" [ngClass]="placeholderFontClass" *ngIf="itemRD?.hasSucceeded && itemRD?.payload?.page.length > 0" @fadeIn>
                 <div class="d-flex flex-row border-bottom mb-4 pb-4 ng-tns-c416-2"></div>
                 <h2> {{'home.recent-submissions.head' | translate}}</h2>
                 <div class="my-4" *ngFor="let item of itemRD?.payload?.page">
@@ -12,4 +12,4 @@ <h2> {{'home.recent-submissions.head' | translate}}</h2>
         <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.recent-submissions' | translate}}"></ds-error>
         <ds-loading *ngIf="!itemRD || itemRD.isLoading" message="{{'loading.recent-submissions' | translate}}">
         </ds-loading>
-</ng-container>
+</ng-container>

src/app/home-page/recent-item-list/recent-item-list.component.spec.ts

@@ -10,8 +10,11 @@ import { SearchConfigurationService } from '../../core/shared/search/search-conf
 import { PaginatedSearchOptions } from '../../shared/search/models/paginated-search-options.model';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { ViewMode } from 'src/app/core/shared/view-mode.model';
 import { of as observableOf } from 'rxjs';
+import { APP_CONFIG } from '../../../config/app-config.interface';
+import { environment } from '../../../environments/environment';
+import { PLATFORM_ID } from '@angular/core';
+
 describe('RecentItemListComponent', () => {
   let component: RecentItemListComponent;
   let fixture: ComponentFixture<RecentItemListComponent>;
@@ -42,6 +45,8 @@ describe('RecentItemListComponent', () => {
         { provide: SearchService, useValue: searchServiceStub },
         { provide: PaginationService, useValue: paginationService },
         { provide: SearchConfigurationService, useValue: searchConfigServiceStub },
+        { provide: APP_CONFIG, useValue: environment },
+        { provide: PLATFORM_ID, useValue: 'browser' },
       ],
     })
     .compileComponents();

src/app/home-page/recent-item-list/recent-item-list.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Inject, OnInit, PLATFORM_ID } from '@angular/core';
 import { PaginatedSearchOptions } from '../../shared/search/models/paginated-search-options.model';
 import { fadeIn, fadeInOut } from '../../shared/animations/fade';
 import { RemoteData } from '../../core/data/remote-data';
@@ -11,12 +11,13 @@ import { SortDirection, SortOptions } from '../../core/cache/models/sort-options
 import { environment } from '../../../environments/environment';
 import { ViewMode } from '../../core/shared/view-mode.model';
 import { SearchConfigurationService } from '../../core/shared/search/search-configuration.service';
-import {
-  toDSpaceObjectListRD
-} from '../../core/shared/operators';
-import {
-  Observable,
-} from 'rxjs';
+import { toDSpaceObjectListRD } from '../../core/shared/operators';
+import { Observable } from 'rxjs';
+import { followLink, FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface';
+import { isPlatformBrowser } from '@angular/common';
+import { setPlaceHolderAttributes } from '../../shared/utils/object-list-utils';
+
 @Component({
   selector: 'ds-recent-item-list',
   templateUrl: './recent-item-list.component.html',
@@ -31,14 +32,22 @@ export class RecentItemListComponent implements OnInit {
   itemRD$: Observable<RemoteData<PaginatedList<Item>>>;
   paginationConfig: PaginationComponentOptions;
   sortConfig: SortOptions;
+
   /**
  * The view-mode we're currently on
  * @type {ViewMode}
  */
   viewMode = ViewMode.ListElement;
-  constructor(private searchService: SearchService,
+
+  private _placeholderFontClass: string;
+
+  constructor(
+    private searchService: SearchService,
     private paginationService: PaginationService,
-    public searchConfigurationService: SearchConfigurationService
+    public searchConfigurationService: SearchConfigurationService,
+    protected elementRef: ElementRef,
+    @Inject(APP_CONFIG) private appConfig: AppConfig,
+    @Inject(PLATFORM_ID) private platformId: Object,
   ) {
 
     this.paginationConfig = Object.assign(new PaginationComponentOptions(), {
@@ -50,16 +59,29 @@ export class RecentItemListComponent implements OnInit {
     this.sortConfig = new SortOptions(environment.homePage.recentSubmissions.sortField, SortDirection.DESC);
   }
   ngOnInit(): void {
+    const linksToFollow: FollowLinkConfig<Item>[] = [];
+    if (this.appConfig.browseBy.showThumbnails) {
+      linksToFollow.push(followLink('thumbnail'));
+    }
+
     this.itemRD$ = this.searchService.search(
       new PaginatedSearchOptions({
         pagination: this.paginationConfig,
         sort: this.sortConfig,
       }),
-    ).pipe(toDSpaceObjectListRD()) as Observable<RemoteData<PaginatedList<Item>>>;
+      undefined,
+      undefined,
+      undefined,
+      ...linksToFollow,
+    ).pipe(
+      toDSpaceObjectListRD()
+    ) as Observable<RemoteData<PaginatedList<Item>>>;
   }
+
   ngOnDestroy(): void {
     this.paginationService.clearPagination(this.paginationConfig.id);
   }
+
   onLoadMore(): void {
     this.paginationService.updateRouteWithUrl(this.searchConfigurationService.paginationID, ['search'], {
       sortField: environment.homePage.recentSubmissions.sortField,
@@ -68,5 +90,17 @@ export class RecentItemListComponent implements OnInit {
     });
   }
 
+  get placeholderFontClass(): string {
+    if (this._placeholderFontClass === undefined) {
+      if (isPlatformBrowser(this.platformId)) {
+        const width = this.elementRef.nativeElement.offsetWidth;
+        this._placeholderFontClass = setPlaceHolderAttributes(width);
+      } else {
+        this._placeholderFontClass = 'hide-placeholder-text';
+      }
+    }
+    return this._placeholderFontClass;
+  }
+
 }