101577: Themed ThumbnailComponent

src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html

@@ -2,7 +2,7 @@
   <div class="container" *ngVar="(bitstreamFormatsRD$ | async) as formatsRD">
     <div class="row" *ngIf="bitstreamRD?.hasSucceeded && formatsRD?.hasSucceeded">
       <div class="col-md-2">
-        <ds-thumbnail [thumbnail]="bitstreamRD?.payload"></ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="bitstreamRD?.payload"></ds-themed-thumbnail>
       </div>
       <div class="col-md-10">
         <div class="container">

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html

@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-thumbnail>
+                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                </ds-themed-thumbnail>
             </div>
         </span>
     <div class="card-body">

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html

@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
                 <div>
-                    <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                    </ds-thumbnail>
+                    <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                    </ds-themed-thumbnail>
                 </div>
             </span>
     <div class="card-body">

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html

@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-thumbnail>
+                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                </ds-themed-thumbnail>
             </div>
         </span>
     <div class="card-body">

src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html

@@ -9,7 +9,7 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
+      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['publicationvolume.volumeNumber']"

src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html

@@ -9,7 +9,7 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
+      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['publicationvolume.volumeNumber']"

src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html

@@ -9,7 +9,7 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
+      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field class="item-page-fields" [item]="object"
       [fields]="['creativeworkseries.issn']"

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html

@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-thumbnail>
+                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                </ds-themed-thumbnail>
             </div>
         </span>
     <div class="card-body">

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html

@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-thumbnail>
+                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                </ds-themed-thumbnail>
             </div>
         </span>
     <div class="card-body">

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html

@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-themed-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-themed-thumbnail>
       </div>
     </span>
     <div class="card-body">

src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html

@@ -9,12 +9,12 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-thumbnail [thumbnail]="object?.thumbnail | async"
+      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"
                     [defaultImage]="'assets/images/orgunit-placeholder.svg'"
                     [alt]="'thumbnail.orgunit.alt'"
                     [placeholder]="'thumbnail.orgunit.placeholder'"
       >
-      </ds-thumbnail>
+      </ds-themed-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['organization.foundingDate']"

src/app/entity-groups/research-entities/item-pages/person/person.component.html

@@ -9,11 +9,11 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-thumbnail [thumbnail]="object?.thumbnail | async"
+      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"
                     [defaultImage]="'assets/images/person-placeholder.svg'"
                     [alt]="'thumbnail.person.alt'"
                     [placeholder]="'thumbnail.person.placeholder'">
-      </ds-thumbnail>
+      </ds-themed-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['person.email']"

src/app/entity-groups/research-entities/item-pages/project/project.component.html

@@ -9,12 +9,12 @@
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-thumbnail
+      <ds-themed-thumbnail
         [thumbnail]="object?.thumbnail | async"
         [defaultImage]="'assets/images/project-placeholder.svg'"
         [alt]="'thumbnail.project.alt'"
         [placeholder]="'thumbnail.project.placeholder'">
-      </ds-thumbnail>
+      </ds-themed-thumbnail>
     </ds-metadata-field-wrapper>
     <!--<ds-generic-item-page-field [item]="object"-->
       <!--[fields]="['project.identifier.status']"-->

src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.html

@@ -1,6 +1,6 @@
 <div class="d-flex">
 <!--    <div class="person-thumbnail pr-2">-->
-<!--        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [defaultImage]="'assets/images/orgunit-placeholder.svg'"></ds-thumbnail>-->
+<!--        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [defaultImage]="'assets/images/orgunit-placeholder.svg'"></ds-themed-thumbnail>-->
 <!--    </div>-->
     <div class="flex-grow-1">
         <ds-org-unit-input-suggestions *ngIf="useNameVariants" [suggestions]="allSuggestions" [(ngModel)]="selectedName" (clickSuggestion)="select($event)"

src/app/item-page/full/field-components/file-section/full-file-section.component.html

@@ -13,7 +13,7 @@
 
                 <div class="file-section row mb-3" *ngFor="let file of originals?.page;">
                     <div class="col-3">
-                        <ds-thumbnail [thumbnail]="(file.thumbnail | async)?.payload"></ds-thumbnail>
+                        <ds-themed-thumbnail [thumbnail]="(file.thumbnail | async)?.payload"></ds-themed-thumbnail>
                     </div>
                     <div class="col-7">
                         <dl class="row">
@@ -55,7 +55,7 @@
 
                 <div class="file-section row" *ngFor="let file of licenses?.page;">
                     <div class="col-3">
-                        <ds-thumbnail [thumbnail]="(file.thumbnail | async)?.payload"></ds-thumbnail>
+                        <ds-themed-thumbnail [thumbnail]="(file.thumbnail | async)?.payload"></ds-themed-thumbnail>
                     </div>
                     <div class="col-7">
                         <dl class="row">

src/app/item-page/simple/item-types/publication/publication.component.html

@@ -19,7 +19,7 @@
   <div class="col-xs-12 col-md-4">
     <ng-container *ngIf="!mediaViewer.image">
       <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-        <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
       </ds-metadata-field-wrapper>
     </ng-container>
     <ng-container *ngIf="mediaViewer.image">

src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html

@@ -22,7 +22,7 @@
   <div class="col-xs-12 col-md-4">
     <ng-container *ngIf="!mediaViewer.image">
       <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-        <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
       </ds-metadata-field-wrapper>
     </ng-container>
     <ng-container *ngIf="mediaViewer.image">

src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.html

@@ -10,7 +10,7 @@
     <div class="row mb-1">
       <div class="col-xs-12 col-md-4">
         <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-          <ds-thumbnail [thumbnail]="item?.thumbnail | async"></ds-thumbnail>
+          <ds-themed-thumbnail [thumbnail]="item?.thumbnail | async"></ds-themed-thumbnail>
         </ds-metadata-field-wrapper>
         <ng-container *ngVar="(getFiles() | async) as bitstreams">
           <ds-metadata-field-wrapper [label]="('item.page.files' | translate)">

src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html

@@ -1,11 +1,11 @@
 <div class="card">
   <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/', object.id]" class="card-img-top">
-    <ds-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
-    </ds-thumbnail>
+    <ds-themed-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
+    </ds-themed-thumbnail>
   </a>
   <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
-    </ds-thumbnail>
+    <ds-themed-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
+    </ds-themed-thumbnail>
   </span>
   <div class="card-body">
     <h4 class="card-title">{{object.name}}</h4>

src/app/shared/object-grid/community-grid-element/community-grid-element.component.html

@@ -1,11 +1,11 @@
 <div class="card">
   <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/communities/', object.id]" class="card-img-top">
-    <ds-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
-    </ds-thumbnail>
+    <ds-themed-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
+    </ds-themed-thumbnail>
   </a>
   <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
-    </ds-thumbnail>
+    <ds-themed-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
+    </ds-themed-thumbnail>
   </span>
   <div class="card-body">
     <h4 class="card-title">{{object.name}}</h4>

src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html

@@ -1,11 +1,11 @@
 <div class="card">
   <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/', dso.id]" class="card-img-top">
-    <ds-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
-    </ds-thumbnail>
+    <ds-themed-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
+    </ds-themed-thumbnail>
   </a>
   <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
-    </ds-thumbnail>
+    <ds-themed-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
+    </ds-themed-thumbnail>
   </span>
   <div class="card-body">
     <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>

src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html

@@ -1,11 +1,11 @@
 <div class="card">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/communities/', dso.id]" class="card-img-top">
-        <ds-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
-        </ds-thumbnail>
+        <ds-themed-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
+        </ds-themed-thumbnail>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
-    </ds-thumbnail>
+    <ds-themed-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
+    </ds-themed-thumbnail>
   </span>
     <div class="card-body">
         <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>

src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html

@@ -6,14 +6,14 @@
       <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
          class="card-img-top full-width">
           <div>
-              <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-              </ds-thumbnail>
+              <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+              </ds-themed-thumbnail>
           </div>
       </a>
       <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
           <div>
-              <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-              </ds-thumbnail>
+              <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+              </ds-themed-thumbnail>
           </div>
       </span>
       <div class="card-body">

src/app/shared/shared.module.ts

@@ -43,6 +43,7 @@ import { ErrorComponent } from './error/error.component';
 import { LoadingComponent } from './loading/loading.component';
 import { PaginationComponent } from './pagination/pagination.component';
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component';
+import { ThemedThumbnailComponent } from '../thumbnail/themed-thumbnail.component';
 import { SearchFormComponent } from './search-form/search-form.component';
 import { SearchResultGridElementComponent } from './object-grid/search-result-grid-element/search-result-grid-element.component';
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
@@ -249,6 +250,7 @@ const COMPONENTS = [
   SidebarFilterComponent,
   SidebarFilterSelectedOptionComponent,
   ThumbnailComponent,
+  ThemedThumbnailComponent,
   UploaderComponent,
   FileDropzoneNoUploaderComponent,
   ItemListPreviewComponent,

src/app/submission/sections/upload/file/section-upload-file.component.html

@@ -1,8 +1,8 @@
 <ng-container *ngIf="fileData">
   <div class="row">
     <div class="col-md-2">
-      <!--ds-thumbnail [thumbnail]="bitstreamsList[bitstreamKey].url | async"></ds-thumbnail-->
-      <ds-thumbnail [thumbnail]="fileData?.thumbnail"></ds-thumbnail>
+      <!--ds-themed-thumbnail [thumbnail]="bitstreamsList[bitstreamKey].url | async"></ds-themed-thumbnail-->
+      <ds-themed-thumbnail [thumbnail]="fileData?.thumbnail"></ds-themed-thumbnail>
     </div>
     <div class="col-md-10">
       <div class="float-left w-75">

src/app/thumbnail/themed-thumbnail.component.ts

@@ -0,0 +1,44 @@
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { Component, Input } from '@angular/core';
+import { ThumbnailComponent } from './thumbnail.component';
+import { Bitstream } from '../core/shared/bitstream.model';
+import { RemoteData } from '../core/data/remote-data';
+
+@Component({
+  selector: 'ds-themed-thumbnail',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedThumbnailComponent extends ThemedComponent<ThumbnailComponent> {
+
+  @Input() thumbnail: Bitstream | RemoteData<Bitstream>;
+
+  @Input() defaultImage?: string | null;
+
+  @Input() alt?: string;
+
+  @Input() placeholder?: string;
+
+  @Input() limitWidth?: boolean;
+
+  protected inAndOutputNames: (keyof ThumbnailComponent & keyof this)[] = [
+    'thumbnail',
+    'defaultImage',
+    'alt',
+    'placeholder',
+    'limitWidth',
+  ];
+
+  protected getComponentName(): string {
+    return 'ThumbnailComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/thumbnail/thumbnail.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./thumbnail.component');
+  }
+
+}