89984: Add ThemedLoadingComponent

This commit is contained in:
Yana De Pauw
2022-04-25 17:26:12 +02:00
parent e4f483c308
commit 870a36180c
63 changed files with 112 additions and 79 deletions

View File

@@ -45,7 +45,7 @@
</div> </div>
</form> </form>
<ds-loading *ngIf="searching$ | async"></ds-loading> <ds-themed-loading *ngIf="searching$ | async"></ds-themed-loading>
<ds-pagination <ds-pagination
*ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(searching$ | async)" *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(searching$ | async)"
[paginationOptions]="config" [paginationOptions]="config"

View File

@@ -36,12 +36,12 @@
</button> </button>
</ds-form> </ds-form>
<ds-loading [showMessage]="false" *ngIf="!formGroup"></ds-loading> <ds-themed-loading [showMessage]="false" *ngIf="!formGroup"></ds-themed-loading>
<div *ngIf="epersonService.getActiveEPerson() | async"> <div *ngIf="epersonService.getActiveEPerson() | async">
<h5>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h5> <h5>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h5>
<ds-loading [showMessage]="false" *ngIf="!(groups | async)"></ds-loading> <ds-themed-loading [showMessage]="false" *ngIf="!(groups | async)"></ds-themed-loading>
<ds-pagination <ds-pagination
*ngIf="(groups | async)?.payload?.totalElements > 0" *ngIf="(groups | async)?.payload?.totalElements > 0"

View File

@@ -33,7 +33,7 @@
</div> </div>
</form> </form>
<ds-loading *ngIf="loading$ | async"></ds-loading> <ds-themed-loading *ngIf="loading$ | async"></ds-themed-loading>
<ds-pagination <ds-pagination
*ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(loading$ | async)" *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(loading$ | async)"
[paginationOptions]="config" [paginationOptions]="config"

View File

@@ -27,7 +27,7 @@
</div> </div>
</div> </div>
<ds-error *ngIf="bitstreamRD?.hasFailed" message="{{'error.bitstream' | translate}}"></ds-error> <ds-error *ngIf="bitstreamRD?.hasFailed" message="{{'error.bitstream' | translate}}"></ds-error>
<ds-loading *ngIf="!bitstreamRD || !formatsRD || bitstreamRD?.isLoading || formatsRD?.isLoading" <ds-themed-loading *ngIf="!bitstreamRD || !formatsRD || bitstreamRD?.isLoading || formatsRD?.isLoading"
message="{{'loading.bitstream' | translate}}"></ds-loading> message="{{'loading.bitstream' | translate}}"></ds-themed-loading>
</div> </div>
</ng-container> </ng-container>

View File

@@ -35,7 +35,7 @@
(prev)="goPrev()" (prev)="goPrev()"
(next)="goNext()"> (next)="goNext()">
</ds-browse-by> </ds-browse-by>
<ds-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-loading> <ds-themed-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
</div> </div>
</section> </section>
<ng-container *ngVar="(parent$ | async) as parent"> <ng-container *ngVar="(parent$ | async) as parent">

View File

@@ -57,8 +57,8 @@
</div> </div>
<ds-error *ngIf="itemRD?.hasFailed" <ds-error *ngIf="itemRD?.hasFailed"
message="{{'error.recent-submissions' | translate}}"></ds-error> message="{{'error.recent-submissions' | translate}}"></ds-error>
<ds-loading *ngIf="!itemRD || itemRD.isLoading" <ds-themed-loading *ngIf="!itemRD || itemRD.isLoading"
message="{{'loading.recent-submissions' | translate}}"></ds-loading> message="{{'loading.recent-submissions' | translate}}"></ds-themed-loading>
<div *ngIf="!itemRD?.isLoading && itemRD?.payload?.page.length === 0" class="alert alert-info w-100" role="alert"> <div *ngIf="!itemRD?.isLoading && itemRD?.payload?.page.length === 0" class="alert alert-info w-100" role="alert">
{{'collection.page.browse.recent.empty' | translate}} {{'collection.page.browse.recent.empty' | translate}}
</div> </div>
@@ -75,7 +75,7 @@
</div> </div>
<ds-error *ngIf="collectionRD?.hasFailed" <ds-error *ngIf="collectionRD?.hasFailed"
message="{{'error.collection' | translate}}"></ds-error> message="{{'error.collection' | translate}}"></ds-error>
<ds-loading *ngIf="collectionRD?.isLoading" <ds-themed-loading *ngIf="collectionRD?.isLoading"
message="{{'loading.collection' | translate}}"></ds-loading> message="{{'loading.collection' | translate}}"></ds-themed-loading>
</div> </div>
</div> </div>

View File

@@ -25,7 +25,7 @@
<label class="form-check-label" <label class="form-check-label"
for="externalSourceCheck">{{ 'collection.edit.tabs.source.external' | translate }}</label> for="externalSourceCheck">{{ 'collection.edit.tabs.source.external' | translate }}</label>
</div> </div>
<ds-loading *ngIf="!contentSource" [message]="'loading.content-source' | translate"></ds-loading> <ds-themed-loading *ngIf="!contentSource" [message]="'loading.content-source' | translate"></ds-themed-loading>
<h4 *ngIf="contentSource && (contentSource?.harvestType !== harvestTypeNone)">{{ 'collection.edit.tabs.source.form.head' | translate }}</h4> <h4 *ngIf="contentSource && (contentSource?.harvestType !== harvestTypeNone)">{{ 'collection.edit.tabs.source.form.head' | translate }}</h4>
</div> </div>
<div class="row"> <div class="row">

View File

@@ -6,7 +6,7 @@
<ds-item-metadata [updateService]="itemTemplateService" [item]="itemRD?.payload"></ds-item-metadata> <ds-item-metadata [updateService]="itemTemplateService" [item]="itemRD?.payload"></ds-item-metadata>
<button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button> <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
</ng-container> </ng-container>
<ds-loading *ngIf="itemRD?.isLoading" [message]="'collection.edit.template.loading' | translate"></ds-loading> <ds-themed-loading *ngIf="itemRD?.isLoading" [message]="'collection.edit.template.loading' | translate"></ds-themed-loading>
<ds-alert *ngIf="itemRD?.hasFailed" [type]="AlertTypeEnum.Error" [content]="'collection.edit.template.error' | translate"></ds-alert> <ds-alert *ngIf="itemRD?.hasFailed" [type]="AlertTypeEnum.Error" [content]="'collection.edit.template.error' | translate"></ds-alert>
</div> </div>
</div> </div>

View File

@@ -1,4 +1,4 @@
<ds-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-loading"></ds-loading> <ds-themed-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-themed-loading"></ds-themed-loading>
<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl"> <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
<!-- This is the tree node template for show more node --> <!-- This is the tree node template for show more node -->
<cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding
@@ -12,7 +12,7 @@
class="btn btn-outline-primary btn-sm" role="button"> class="btn btn-outline-primary btn-sm" role="button">
<i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }} <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
</a> </a>
<ds-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-loading"></ds-loading> <ds-themed-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-themed-loading>
</div> </div>
</div> </div>
<div class="text-muted" cdkTreeNodePadding> <div class="text-muted" cdkTreeNodePadding>
@@ -57,7 +57,7 @@
<span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}" <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
aria-hidden="true"></span> aria-hidden="true"></span>
</button> </button>
<ds-loading class="ds-loading"></ds-loading> <ds-themed-loading class="ds-themed-loading"></ds-themed-loading>
</div> </div>
</cdk-tree-node> </cdk-tree-node>
<!-- This is the tree node template for leaf nodes (collections and (sub)coms without children) --> <!-- This is the tree node template for leaf nodes (collections and (sub)coms without children) -->

View File

@@ -41,5 +41,5 @@
</div> </div>
<ds-error *ngIf="communityRD?.hasFailed" message="{{'error.community' | translate}}"></ds-error> <ds-error *ngIf="communityRD?.hasFailed" message="{{'error.community' | translate}}"></ds-error>
<ds-loading *ngIf="communityRD?.isLoading" message="{{'loading.community' | translate}}"></ds-loading> <ds-themed-loading *ngIf="communityRD?.isLoading" message="{{'loading.community' | translate}}"></ds-themed-loading>
</div> </div>

View File

@@ -9,5 +9,5 @@
</ds-viewable-collection> </ds-viewable-collection>
</div> </div>
<ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error> <ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>
<ds-loading *ngIf="subCollectionsRD?.isLoading" message="{{'loading.sub-collections' | translate}}"></ds-loading> <ds-themed-loading *ngIf="subCollectionsRD?.isLoading" message="{{'loading.sub-collections' | translate}}"></ds-themed-loading>
</ng-container> </ng-container>

View File

@@ -9,5 +9,5 @@
</ds-viewable-collection> </ds-viewable-collection>
</div> </div>
<ds-error *ngIf="subCommunitiesRD?.hasFailed" message="{{'error.sub-communities' | translate}}"></ds-error> <ds-error *ngIf="subCommunitiesRD?.hasFailed" message="{{'error.sub-communities' | translate}}"></ds-error>
<ds-loading *ngIf="subCommunitiesRD?.isLoading" message="{{'loading.sub-communities' | translate}}"></ds-loading> <ds-themed-loading *ngIf="subCommunitiesRD?.isLoading" message="{{'loading.sub-communities' | translate}}"></ds-themed-loading>
</ng-container> </ng-container>

View File

@@ -10,4 +10,4 @@
</ds-viewable-collection> </ds-viewable-collection>
</div> </div>
<ds-error *ngIf="communitiesRD?.hasFailed " message="{{'error.top-level-communites' | translate}}"></ds-error> <ds-error *ngIf="communitiesRD?.hasFailed " message="{{'error.top-level-communites' | translate}}"></ds-error>
<ds-loading *ngIf="communitiesRD?.isLoading " message="{{'loading.top-level-communities' | translate}}"></ds-loading></ng-container> <ds-themed-loading *ngIf="communitiesRD?.isLoading " message="{{'loading.top-level-communities' | translate}}"></ds-themed-loading></ng-container>

View File

@@ -44,7 +44,7 @@
class="alert alert-info w-100 d-inline-block mt-4" role="alert"> class="alert alert-info w-100 d-inline-block mt-4" role="alert">
{{'item.edit.bitstreams.empty' | translate}} {{'item.edit.bitstreams.empty' | translate}}
</div> </div>
<ds-loading *ngIf="!bundles" message="{{'loading.bitstreams' | translate}}"></ds-loading> <ds-themed-loading *ngIf="!bundles" message="{{'loading.bitstreams' | translate}}"></ds-themed-loading>
<div class="button-row bottom"> <div class="button-row bottom">
<div class="mt-4 float-right"> <div class="mt-4 float-right">

View File

@@ -29,5 +29,5 @@
</ng-container> </ng-container>
</div> </div>
</ng-container> </ng-container>
<ds-loading *ngIf="(loading$ | async)" [message]="'loading.bitstreams' | translate"></ds-loading> <ds-themed-loading *ngIf="(loading$ | async)" [message]="'loading.bitstreams' | translate"></ds-themed-loading>
</ds-pagination> </ds-pagination>

View File

@@ -31,5 +31,5 @@
<div *ngIf="updateValues.length === 0">{{"item.edit.relationships.no-relationships" | translate}}</div> <div *ngIf="updateValues.length === 0">{{"item.edit.relationships.no-relationships" | translate}}</div>
</ng-container> </ng-container>
</ng-container> </ng-container>
<ds-loading *ngIf="loading$ | async"></ds-loading> <ds-themed-loading *ngIf="loading$ | async"></ds-themed-loading>
</ng-container> </ng-container>

View File

@@ -32,7 +32,7 @@
></ds-edit-relationship-list> ></ds-edit-relationship-list>
</div> </div>
</ng-container> </ng-container>
<ds-loading *ngIf="!relationshipTypes"></ds-loading> <ds-themed-loading *ngIf="!relationshipTypes"></ds-themed-loading>
</ng-container> </ng-container>
<div class="button-row bottom"> <div class="button-row bottom">
<div class="float-right"> <div class="float-right">

View File

@@ -37,5 +37,5 @@
</div> </div>
</div> </div>
<ds-error *ngIf="itemRD?.hasFailed" message="{{'error.item' | translate}}"></ds-error> <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.item' | translate}}"></ds-error>
<ds-loading *ngIf="itemRD?.isLoading" message="{{'loading.item' | translate}}"></ds-loading> <ds-themed-loading *ngIf="itemRD?.isLoading" message="{{'loading.item' | translate}}"></ds-themed-loading>
</div> </div>

View File

@@ -1,9 +1,9 @@
<ng-container *ngVar="mediaList$ | async as mediaList"> <ng-container *ngVar="mediaList$ | async as mediaList">
<ds-loading <ds-themed-loading
*ngIf="isLoading" *ngIf="isLoading"
message="{{ 'loading.default' | translate }}" message="{{ 'loading.default' | translate }}"
[showMessage]="false" [showMessage]="false"
></ds-loading> ></ds-themed-loading>
<div class="media-viewer" *ngIf="!isLoading"> <div class="media-viewer" *ngIf="!isLoading">
<ng-container *ngIf="mediaList.length > 0"> <ng-container *ngIf="mediaList.length > 0">
<ng-container *ngIf="videoOptions"> <ng-container *ngIf="videoOptions">

View File

@@ -110,7 +110,7 @@ describe('MediaViewerComponent', () => {
}); });
it('should display a loading component', () => { it('should display a loading component', () => {
const loading = fixture.debugElement.query(By.css('ds-loading')); const loading = fixture.debugElement.query(By.css('ds-themed-loading'));
expect(loading.nativeElement).toBeDefined(); expect(loading.nativeElement).toBeDefined();
}); });
}); });

View File

@@ -6,7 +6,7 @@
<span>({{(file?.sizeBytes) | dsFileSize }})</span> <span>({{(file?.sizeBytes) | dsFileSize }})</span>
<span *ngIf="!last" innerHTML="{{separator}}"></span> <span *ngIf="!last" innerHTML="{{separator}}"></span>
</ds-file-download-link> </ds-file-download-link>
<ds-loading *ngIf="isLoading" message="{{'loading.default' | translate}}" [showMessage]="false"></ds-loading> <ds-themed-loading *ngIf="isLoading" message="{{'loading.default' | translate}}" [showMessage]="false"></ds-themed-loading>
<div *ngIf="!isLastPage" class="mt-1" id="view-more"> <div *ngIf="!isLastPage" class="mt-1" id="view-more">
<a class="bitstream-view-more btn btn-outline-secondary btn-sm" [routerLink]="" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</a> <a class="bitstream-view-more btn btn-outline-secondary btn-sm" [routerLink]="" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</a>
</div> </div>

View File

@@ -86,7 +86,7 @@ describe('FileSectionComponent', () => {
}); });
it('should display a loading component', () => { it('should display a loading component', () => {
const loading = fixture.debugElement.query(By.css('ds-loading')); const loading = fixture.debugElement.query(By.css('ds-themed-loading'));
expect(loading.nativeElement).toBeDefined(); expect(loading.nativeElement).toBeDefined();
}); });
}); });

View File

@@ -9,5 +9,5 @@
</div> </div>
</div> </div>
<ds-error *ngIf="itemRD?.hasFailed" message="{{'error.item' | translate}}"></ds-error> <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.item' | translate}}"></ds-error>
<ds-loading *ngIf="itemRD?.isLoading" message="{{'loading.item' | translate}}"></ds-loading> <ds-themed-loading *ngIf="itemRD?.isLoading" message="{{'loading.item' | translate}}"></ds-themed-loading>
</div> </div>

View File

@@ -85,7 +85,7 @@ describe('ItemPageComponent', () => {
}); });
it('should display a loading component', () => { it('should display a loading component', () => {
const loading = fixture.debugElement.query(By.css('ds-loading')); const loading = fixture.debugElement.query(By.css('ds-themed-loading'));
expect(loading.nativeElement).toBeDefined(); expect(loading.nativeElement).toBeDefined();
}); });
}); });

View File

@@ -4,7 +4,7 @@
<ds-metadata-representation-loader *ngFor="let rep of representations" <ds-metadata-representation-loader *ngFor="let rep of representations"
[mdRepresentation]="rep"> [mdRepresentation]="rep">
</ds-metadata-representation-loader> </ds-metadata-representation-loader>
<ds-loading *ngIf="(i + 1) === objects.length && (i > 0) && (!representations || representations?.length === 0)" message="{{'loading.default' | translate}}"></ds-loading> <ds-themed-loading *ngIf="(i + 1) === objects.length && (i > 0) && (!representations || representations?.length === 0)" message="{{'loading.default' | translate}}"></ds-themed-loading>
<div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && representations?.length > 0"> <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && representations?.length > 0">
<div *ngIf="(objects.length * incrementBy) < total" class="float-left"> <div *ngIf="(objects.length * incrementBy) < total" class="float-left">
<a [routerLink]="" (click)="increase()">{{'item.page.related-items.view-more' | <a [routerLink]="" (click)="increase()">{{'item.page.related-items.view-more' |

View File

@@ -4,7 +4,7 @@
<ds-listable-object-component-loader *ngFor="let item of itemsRD?.payload?.page" <ds-listable-object-component-loader *ngFor="let item of itemsRD?.payload?.page"
[object]="item" [viewMode]="viewMode"> [object]="item" [viewMode]="viewMode">
</ds-listable-object-component-loader> </ds-listable-object-component-loader>
<ds-loading *ngIf="(i + 1) === objects.length && (itemsRD || i > 0) && !(itemsRD?.hasSucceeded && itemsRD?.payload && itemsRD?.payload?.page?.length > 0)" message="{{'loading.default' | translate}}"></ds-loading> <ds-themed-loading *ngIf="(i + 1) === objects.length && (itemsRD || i > 0) && !(itemsRD?.hasSucceeded && itemsRD?.payload && itemsRD?.payload?.page?.length > 0)" message="{{'loading.default' | translate}}"></ds-themed-loading>
<div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && itemsRD?.payload?.page?.length > 0"> <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && itemsRD?.payload?.page?.length > 0">
<div *ngIf="itemsRD?.payload?.totalPages > objects.length" class="float-left" id="view-more"> <div *ngIf="itemsRD?.payload?.totalPages > objects.length" class="float-left" id="view-more">
<a [routerLink]="" (click)="increase()">{{'item.page.related-items.view-more' | <a [routerLink]="" (click)="increase()">{{'item.page.related-items.view-more' |

View File

@@ -38,7 +38,7 @@
<button *ngIf="!showOutputLogs && process?._links?.output?.href != undefined" id="showOutputButton" class="btn btn-primary" (click)="showProcessOutputLogs()"> <button *ngIf="!showOutputLogs && process?._links?.output?.href != undefined" id="showOutputButton" class="btn btn-primary" (click)="showProcessOutputLogs()">
{{ 'process.detail.logs.button' | translate }} {{ 'process.detail.logs.button' | translate }}
</button> </button>
<ds-loading *ngIf="retrievingOutputLogs$ | async" class="ds-loading" message="{{ 'process.detail.logs.loading' | translate }}"></ds-loading> <ds-themed-loading *ngIf="retrievingOutputLogs$ | async" class="ds-themed-loading" message="{{ 'process.detail.logs.loading' | translate }}"></ds-themed-loading>
<pre class="font-weight-bold text-secondary bg-light p-3" <pre class="font-weight-bold text-secondary bg-light p-3"
*ngIf="showOutputLogs && (outputLogs$ | async)?.length > 0">{{ (outputLogs$ | async) }}</pre> *ngIf="showOutputLogs && (outputLogs$ | async)?.length > 0">{{ (outputLogs$ | async) }}</pre>
<p id="no-output-logs-message" *ngIf="(!(retrievingOutputLogs$ | async) && showOutputLogs) <p id="no-output-logs-message" *ngIf="(!(retrievingOutputLogs$ | async) && showOutputLogs)

View File

@@ -5,5 +5,5 @@
<ds-email-request-copy [subject]="subject$ | async" [message]="message$ | async" (send)="deny($event)"></ds-email-request-copy> <ds-email-request-copy [subject]="subject$ | async" [message]="message$ | async" (send)="deny($event)"></ds-email-request-copy>
</div> </div>
<ds-loading *ngIf="!itemRequestRD || itemRequestRD?.isLoading"></ds-loading> <ds-themed-loading *ngIf="!itemRequestRD || itemRequestRD?.isLoading"></ds-themed-loading>
</div> </div>

View File

@@ -26,5 +26,5 @@
</p> </p>
</div> </div>
</div> </div>
<ds-loading *ngIf="!itemRequestRD || itemRequestRD?.isLoading"></ds-loading> <ds-themed-loading *ngIf="!itemRequestRD || itemRequestRD?.isLoading"></ds-themed-loading>
</div> </div>

View File

@@ -13,5 +13,5 @@
</form> </form>
</ds-email-request-copy> </ds-email-request-copy>
</div> </div>
<ds-loading *ngIf="!itemRequestRD || itemRequestRD?.isLoading"></ds-loading> <ds-themed-loading *ngIf="!itemRequestRD || itemRequestRD?.isLoading"></ds-themed-loading>
</div> </div>

View File

@@ -13,7 +13,7 @@
<ds-themed-breadcrumbs></ds-themed-breadcrumbs> <ds-themed-breadcrumbs></ds-themed-breadcrumbs>
<div class="container d-flex justify-content-center align-items-center h-100" *ngIf="shouldShowRouteLoader"> <div class="container d-flex justify-content-center align-items-center h-100" *ngIf="shouldShowRouteLoader">
<ds-loading [showMessage]="false"></ds-loading> <ds-themed-loading [showMessage]="false"></ds-themed-loading>
</div> </div>
<div [class.d-none]="shouldShowRouteLoader"> <div [class.d-none]="shouldShowRouteLoader">
<router-outlet></router-outlet> <router-outlet></router-outlet>
@@ -25,6 +25,6 @@
</div> </div>
<ng-template #fullScreenLoader> <ng-template #fullScreenLoader>
<div class="ds-full-screen-loader"> <div class="ds-full-screen-loader">
<ds-loading [showMessage]="false"></ds-loading> <ds-themed-loading [showMessage]="false"></ds-themed-loading>
</div> </div>
</ng-template> </ng-template>

View File

@@ -1,4 +1,4 @@
<ds-loading *ngIf="(loading$ | async)"></ds-loading> <ds-themed-loading *ngIf="(loading$ | async)"></ds-themed-loading>
<div *ngIf="!(loading$ | async)"> <div *ngIf="!(loading$ | async)">
<span class="dropdown-item-text">{{(user$ | async)?.name}} ({{(user$ | async)?.email}})</span> <span class="dropdown-item-text">{{(user$ | async)?.name}} ({{(user$ | async)?.email}})</span>
<a class="dropdown-item" [routerLink]="[profileRoute]" routerLinkActive="active">{{'nav.profile' | translate}}</a> <a class="dropdown-item" [routerLink]="[profileRoute]" routerLinkActive="active">{{'nav.profile' | translate}}</a>

View File

@@ -34,7 +34,7 @@
</div> </div>
</div> </div>
</div> </div>
<ds-loading *ngIf="!objects || objects?.isLoading" message="{{'loading.browse-by' | translate}}"></ds-loading> <ds-themed-loading *ngIf="!objects || objects?.isLoading" message="{{'loading.browse-by' | translate}}"></ds-themed-loading>
<ds-error *ngIf="objects?.hasFailed" message="{{'error.browse-by' | translate}}"></ds-error> <ds-error *ngIf="objects?.hasFailed" message="{{'error.browse-by' | translate}}"></ds-error>
<div *ngIf="!objects?.isLoading && objects?.payload?.page.length === 0" class="alert alert-info w-100" role="alert"> <div *ngIf="!objects?.isLoading && objects?.payload?.page.length === 0" class="alert alert-info w-100" role="alert">
{{'browse.empty' | translate}} {{'browse.empty' | translate}}

View File

@@ -114,7 +114,7 @@ describe('BrowseByComponent', () => {
it('should display a loading message when objects is empty', () => { it('should display a loading message when objects is empty', () => {
(comp as any).objects = undefined; (comp as any).objects = undefined;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.query(By.css('ds-loading'))).toBeDefined(); expect(fixture.debugElement.query(By.css('ds-themed-loading'))).toBeDefined();
}); });
it('should display results when objects is not empty', () => { it('should display results when objects is not empty', () => {

View File

@@ -35,8 +35,8 @@
</button> </button>
</ng-container> </ng-container>
<button class="dropdown-item disabled" *ngIf="(isLoading | async)"> <button class="dropdown-item disabled" *ngIf="(isLoading | async)">
<ds-loading message="{{'loading.default' | translate}}"> <ds-themed-loading message="{{'loading.default' | translate}}">
</ds-loading> </ds-themed-loading>
</button> </button>
</div> </div>

View File

@@ -13,7 +13,7 @@
<div class="d-flex flex-md-row justify-content-between flex-column"> <div class="d-flex flex-md-row justify-content-between flex-column">
<div class="w-100 d-flex align-items-center"> <div class="w-100 d-flex align-items-center">
<ds-loading *ngIf="!(groupRD$ | async)"></ds-loading> <ds-themed-loading *ngIf="!(groupRD$ | async)"></ds-themed-loading>
<div *ngIf="hasNoGroup$ | async"> <div *ngIf="hasNoGroup$ | async">
{{'comcol-role.edit.no-group' | translate}} {{'comcol-role.edit.no-group' | translate}}
</div> </div>

View File

@@ -31,7 +31,7 @@
</ng-container> </ng-container>
<button *ngIf="loading" <button *ngIf="loading"
class="list-group-item list-group-item-action border-0 list-entry"> class="list-group-item list-group-item-action border-0 list-entry">
<ds-loading [showMessage]="false"></ds-loading> <ds-themed-loading [showMessage]="false"></ds-themed-loading>
</button> </button>
</div> </div>
</div> </div>

View File

@@ -21,8 +21,8 @@
</ul> </ul>
</button> </button>
<button class="dropdown-item disabled" *ngIf="(isLoadingList | async)" > <button class="dropdown-item disabled" *ngIf="(isLoadingList | async)" >
<ds-loading message="{{'loading.default' | translate}}"> <ds-themed-loading message="{{'loading.default' | translate}}">
</ds-loading> </ds-themed-loading>
</button> </button>
</div> </div>

View File

@@ -1,7 +1,7 @@
<div class="d-flex"> <div class="d-flex">
<span class="mr-auto text-contents"> <span class="mr-auto text-contents">
<ng-container *ngIf="!(metadataRepresentation$ | async)"> <ng-container *ngIf="!(metadataRepresentation$ | async)">
<ds-loading [showMessage]="false"></ds-loading> <ds-themed-loading [showMessage]="false"></ds-themed-loading>
</ng-container> </ng-container>
<ng-container *ngIf="(metadataRepresentation$ | async)"> <ng-container *ngIf="(metadataRepresentation$ | async)">
<ds-metadata-representation-loader [mdRepresentation]="metadataRepresentation$ | async"></ds-metadata-representation-loader> <ds-metadata-representation-loader [mdRepresentation]="metadataRepresentation$ | async"></ds-metadata-representation-loader>

View File

@@ -1,7 +1,7 @@
<div class="d-flex"> <div class="d-flex">
<span class="mr-auto text-contents"> <span class="mr-auto text-contents">
<ng-container *ngIf="!(relatedItem$ | async)"> <ng-container *ngIf="!(relatedItem$ | async)">
<ds-loading [showMessage]="false"></ds-loading> <ds-themed-loading [showMessage]="false"></ds-themed-loading>
</ng-container> </ng-container>
<ng-container *ngIf="(relatedItem$ | async)"> <ng-container *ngIf="(relatedItem$ | async)">
<ds-listable-object-component-loader [showLabel]="false" [viewMode]="viewType" [object]="(relatedItem$ | async)"></ds-listable-object-component-loader> <ds-listable-object-component-loader [showLabel]="false" [viewMode]="viewType" [object]="(relatedItem$ | async)"></ds-listable-object-component-loader>

View File

@@ -57,7 +57,7 @@
</div> </div>
<div class="d-flex"> <div class="d-flex">
<ds-loading *ngIf="!chips" [showMessage]="false"></ds-loading> <ds-themed-loading *ngIf="!chips" [showMessage]="false"></ds-themed-loading>
<div *ngIf="chips && !chips.hasItems()"> <div *ngIf="chips && !chips.hasItems()">
<input type="text" <input type="text"
class="border-0 form-control-plaintext tag-input mt-1 mb-1 pl-2 text-muted" class="border-0 form-control-plaintext tag-input mt-1 mb-1 pl-2 text-muted"

View File

@@ -6,7 +6,7 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<ds-loading *ngIf="!item || !collection"></ds-loading> <ds-themed-loading *ngIf="!item || !collection"></ds-themed-loading>
<ng-container *ngIf="item && collection"> <ng-container *ngIf="item && collection">
<ul ngbNav #nav="ngbNav" class="nav-tabs"> <ul ngbNav #nav="ngbNav" class="nav-tabs">
<li ngbNavItem> <li ngbNavItem>

View File

@@ -21,8 +21,8 @@
[importConfig]="importConfig" [importConfig]="importConfig"
(importObject)="import($event)"> (importObject)="import($event)">
</ds-viewable-collection> </ds-viewable-collection>
<ds-loading *ngIf="!entriesRD || entriesRD?.isLoading" <ds-themed-loading *ngIf="!entriesRD || entriesRD?.isLoading"
message="{{'loading.search-results' | translate}}"></ds-loading> message="{{'loading.search-results' | translate}}"></ds-themed-loading>
<ds-error *ngIf="entriesRD?.hasFailed && (!entriesRD?.errorMessage || entriesRD?.statusCode != 400)" <ds-error *ngIf="entriesRD?.hasFailed && (!entriesRD?.errorMessage || entriesRD?.statusCode != 400)"
message="{{'error.search-results' | translate}}"></ds-error> message="{{'error.search-results' | translate}}"></ds-error>
<div *ngIf="entriesRD?.payload?.page?.length == 0 || entriesRD?.statusCode == 400" id="empty-external-entry-list"> <div *ngIf="entriesRD?.payload?.page?.length == 0 || entriesRD?.statusCode == 400" id="empty-external-entry-list">

View File

@@ -145,8 +145,8 @@ describe('DsDynamicLookupRelationExternalSourceTabComponent', () => {
expect(viewableCollection).toBeNull(); expect(viewableCollection).toBeNull();
}); });
it('should display a ds-loading component', () => { it('should display a ds-themed-loading component', () => {
const loading = fixture.debugElement.query(By.css('ds-loading')); const loading = fixture.debugElement.query(By.css('ds-themed-loading'));
expect(loading).not.toBeNull(); expect(loading).not.toBeNull();
}); });
}); });

View File

@@ -0,0 +1,31 @@
import { Component, Input } from '@angular/core';
import { ThemedComponent } from '../../shared/theme-support/themed.component';
import { LoadingComponent } from './loading.component';
/**
* Themed wrapper for LoadingComponent
*/
@Component({
selector: 'ds-themed-loading',
styleUrls: [],
templateUrl: '../../shared/theme-support/themed.component.html',
})
export class ThemedLoadingComponent extends ThemedComponent<LoadingComponent> {
@Input() message: string;
@Input() showMessage = true;
protected inAndOutputNames: (keyof LoadingComponent & keyof this)[] = ['message', 'showMessage'];
protected getComponentName(): string {
return 'LoadingComponent';
}
protected importThemedComponent(themeName: string): Promise<any> {
return import(`../../../themes/${themeName}/app/shared/loading/loading.component`);
}
protected importUnthemedComponent(): Promise<any> {
return import('./loading.component');
}
}

View File

@@ -1,4 +1,4 @@
<ds-loading *ngIf="(loading | async) || (isAuthenticated | async)" class="m-5"></ds-loading> <ds-themed-loading *ngIf="(loading | async) || (isAuthenticated | async)" class="m-5"></ds-themed-loading>
<div *ngIf="!(loading | async) && !(isAuthenticated | async)" class="px-4 py-3 login-container"> <div *ngIf="!(loading | async) && !(isAuthenticated | async)" class="px-4 py-3 login-container">
<ng-container *ngFor="let authMethod of (authMethods | async); let i = index"> <ng-container *ngFor="let authMethod of (authMethods | async); let i = index">
<div *ngIf="i === 1" class="text-center mt-2"> <div *ngIf="i === 1" class="text-center mt-2">

View File

@@ -18,5 +18,5 @@
</div> </div>
</div> </div>
<ds-error *ngIf="objects.hasFailed" message="{{'error.objects' | translate}}"></ds-error> <ds-error *ngIf="objects.hasFailed" message="{{'error.objects' | translate}}"></ds-error>
<ds-loading *ngIf="objects.isLoading" message="{{'loading.objects' | translate}}"></ds-loading> <ds-themed-loading *ngIf="objects.isLoading" message="{{'loading.objects' | translate}}"></ds-themed-loading>
</ds-pagination> </ds-pagination>

View File

@@ -19,6 +19,6 @@
</div> </div>
</div> </div>
<ds-error *ngIf="objects.hasFailed" message="{{'error.objects' | translate}}"></ds-error> <ds-error *ngIf="objects.hasFailed" message="{{'error.objects' | translate}}"></ds-error>
<ds-loading *ngIf="objects.isLoading" message="{{'loading.objects' | translate}}"></ds-loading> <ds-themed-loading *ngIf="objects.isLoading" message="{{'loading.objects' | translate}}"></ds-themed-loading>
</ds-pagination> </ds-pagination>

View File

@@ -6,6 +6,6 @@
<ds-workflowitem-actions [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-workflowitem-actions> <ds-workflowitem-actions [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-workflowitem-actions>
</ng-container> </ng-container>
<ds-loading <ds-themed-loading
*ngIf="!(item$ | async)" *ngIf="!(item$ | async)"
[showMessage]="false"></ds-loading> [showMessage]="false"></ds-themed-loading>

View File

@@ -6,6 +6,6 @@
<ds-workspaceitem-actions [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-workspaceitem-actions> <ds-workspaceitem-actions [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-workspaceitem-actions>
</ng-container> </ng-container>
<ds-loading <ds-themed-loading
*ngIf="!(item$ | async)" *ngIf="!(item$ | async)"
[showMessage]="false"></ds-loading> [showMessage]="false"></ds-themed-loading>

View File

@@ -28,7 +28,7 @@
{{'collection.select.empty' | translate}} {{'collection.select.empty' | translate}}
</div> </div>
<ds-error *ngIf="collectionsRD?.hasFailed" message="{{'error.collections' | translate}}"></ds-error> <ds-error *ngIf="collectionsRD?.hasFailed" message="{{'error.collections' | translate}}"></ds-error>
<ds-loading *ngIf="!collectionsRD || collectionsRD?.isLoading" message="{{'loading.collections' | translate}}"></ds-loading> <ds-themed-loading *ngIf="!collectionsRD || collectionsRD?.isLoading" message="{{'loading.collections' | translate}}"></ds-themed-loading>
<div *ngVar="(selectedIds$ | async) as selectedIds"> <div *ngVar="(selectedIds$ | async) as selectedIds">
<button class="btn collection-confirm float-right" <button class="btn collection-confirm float-right"
[ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}" [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"

View File

@@ -36,7 +36,7 @@
{{'item.select.empty' | translate}} {{'item.select.empty' | translate}}
</div> </div>
<ds-error *ngIf="itemsRD?.hasFailed" message="{{'error.items' | translate}}"></ds-error> <ds-error *ngIf="itemsRD?.hasFailed" message="{{'error.items' | translate}}"></ds-error>
<ds-loading *ngIf="!itemsRD || itemsRD?.isLoading" message="{{'loading.items' | translate}}"></ds-loading> <ds-themed-loading *ngIf="!itemsRD || itemsRD?.isLoading" message="{{'loading.items' | translate}}"></ds-themed-loading>
<div *ngVar="(selectedIds$ | async) as selectedIds"> <div *ngVar="(selectedIds$ | async) as selectedIds">
<button class="btn btn-outline-secondary item-cancel float-left" (click)="onCancel()">{{cancelButton | translate}}</button> <button class="btn btn-outline-secondary item-cancel float-left" (click)="onCancel()">{{cancelButton | translate}}</button>
<button class="btn item-confirm float-right" <button class="btn item-confirm float-right"

View File

@@ -15,7 +15,7 @@
> >
</ds-viewable-collection> </ds-viewable-collection>
</div> </div>
<ds-loading *ngIf="isLoading()" message="{{'loading.search-results' | translate}}"></ds-loading> <ds-themed-loading *ngIf="isLoading()" message="{{'loading.search-results' | translate}}"></ds-themed-loading>
<ds-error <ds-error
*ngIf="showError()" *ngIf="showError()"
message="{{errorMessageLabel() | translate}}"></ds-error> message="{{errorMessageLabel() | translate}}"></ds-error>

View File

@@ -177,6 +177,7 @@ import { ScopeSelectorModalComponent } from './search-form/scope-selector-modal/
import { BitstreamRequestACopyPageComponent } from './bitstream-request-a-copy-page/bitstream-request-a-copy-page.component'; import { BitstreamRequestACopyPageComponent } from './bitstream-request-a-copy-page/bitstream-request-a-copy-page.component';
import { DsSelectComponent } from './ds-select/ds-select.component'; import { DsSelectComponent } from './ds-select/ds-select.component';
import { LogInOidcComponent } from './log-in/methods/oidc/log-in-oidc.component'; import { LogInOidcComponent } from './log-in/methods/oidc/log-in-oidc.component';
import { ThemedLoadingComponent } from './loading/themed-loading.component';
const MODULES = [ const MODULES = [
// Do NOT include UniversalModule, HttpModule, or JsonpModule here // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -234,6 +235,7 @@ const COMPONENTS = [
FileSectionComponent, FileSectionComponent,
LangSwitchComponent, LangSwitchComponent,
LoadingComponent, LoadingComponent,
ThemedLoadingComponent,
LogInComponent, LogInComponent,
LogOutComponent, LogOutComponent,
NumberPickerComponent, NumberPickerComponent,

View File

@@ -23,7 +23,7 @@
</div> </div>
</div> </div>
<div class="treeview-container"> <div class="treeview-container">
<ds-loading *ngIf="loading | async" [showMessage]="false"></ds-loading> <ds-themed-loading *ngIf="loading | async" [showMessage]="false"></ds-themed-loading>
<h4 *ngIf="!(loading | async) && dataSource.data.length === 0" class="text-center text-muted mt-4" > <h4 *ngIf="!(loading | async) && dataSource.data.length === 0" class="text-center text-muted mt-4" >
<span>{{'vocabulary-treeview.search.no-result' | translate}}</span> <span>{{'vocabulary-treeview.search.no-result' | translate}}</span>
</h4> </h4>

View File

@@ -11,7 +11,7 @@
<ng-container *ngVar="reports$ | async as reports"> <ng-container *ngVar="reports$ | async as reports">
<ng-container *ngIf="!reports"> <ng-container *ngIf="!reports">
<ds-loading></ds-loading> <ds-themed-loading></ds-themed-loading>
</ng-container> </ng-container>
<ng-container *ngIf="reports"> <ng-container *ngIf="reports">

View File

@@ -22,7 +22,7 @@
</div> </div>
<div class="submission-form-content"> <div class="submission-form-content">
<ds-loading *ngIf="(isLoading() | async)" message="Loading..."></ds-loading> <ds-themed-loading *ngIf="(isLoading() | async)" message="Loading..."></ds-themed-loading>
<ng-container *ngFor="let object of (submissionSections | async)"> <ng-container *ngFor="let object of (submissionSections | async)">
<ds-submission-section-container [collectionId]="collectionId" <ds-submission-section-container [collectionId]="collectionId"
[submissionId]="submissionId" [submissionId]="submissionId"

View File

@@ -5,7 +5,7 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<ds-loading *ngIf="isLoading()"></ds-loading> <ds-themed-loading *ngIf="isLoading()"></ds-themed-loading>
<ds-collection-dropdown [ngClass]="{'d-none': isLoading()}" <ds-collection-dropdown [ngClass]="{'d-none': isLoading()}"
(selectionChange)="selectObject($event)" (selectionChange)="selectObject($event)"
(searchComplete)="searchComplete()" (searchComplete)="searchComplete()"

View File

@@ -22,8 +22,8 @@
[importConfig]="importConfig" [importConfig]="importConfig"
(importObject)="import($event)"> (importObject)="import($event)">
</ds-viewable-collection> </ds-viewable-collection>
<ds-loading *ngIf="(isLoading$ | async)" <ds-themed-loading *ngIf="(isLoading$ | async)"
message="{{'loading.search-results' | translate}}"></ds-loading> message="{{'loading.search-results' | translate}}"></ds-themed-loading>
<div *ngIf="!(isLoading$ | async) && entriesRD?.payload?.page?.length === 0" id="empty-external-entry-list"> <div *ngIf="!(isLoading$ | async) && entriesRD?.payload?.page?.length === 0" id="empty-external-entry-list">
<ds-alert [type]="'alert-info'">{{ 'search.results.empty' | translate }}</ds-alert> <ds-alert [type]="'alert-info'">{{ 'search.results.empty' | translate }}</ds-alert>
</div> </div>

View File

@@ -4,7 +4,7 @@
<ng-container class="selection"> <ng-container class="selection">
<span *ngIf="!submissionCcLicenses"> <span *ngIf="!submissionCcLicenses">
<ds-loading></ds-loading> <ds-themed-loading></ds-themed-loading>
</span> </span>
<span *ngIf="getSelectedCcLicense()"> <span *ngIf="getSelectedCcLicense()">
{{ getSelectedCcLicense().name }} {{ getSelectedCcLicense().name }}
@@ -121,7 +121,7 @@
<ng-container *ngIf="getCcLicenseLink$()"> <ng-container *ngIf="getCcLicenseLink$()">
<ng-container *ngVar="getCcLicenseLink$() | async as licenseLink"> <ng-container *ngVar="getCcLicenseLink$() | async as licenseLink">
<div *ngIf="!licenseLink"> <div *ngIf="!licenseLink">
<ds-loading></ds-loading> <ds-themed-loading></ds-themed-loading>
</div> </div>
<div *ngIf="licenseLink" <div *ngIf="licenseLink"
class="mt-2 p-4 bg-light text-dark"> class="mt-2 p-4 bg-light text-dark">

View File

@@ -1,4 +1,4 @@
<ds-loading *ngIf="isLoading" message="Loading..."></ds-loading> <ds-themed-loading *ngIf="isLoading" message="Loading..."></ds-themed-loading>
<ds-form *ngIf="!isLoading && formModel" #formRef="formComponent" <ds-form *ngIf="!isLoading && formModel" #formRef="formComponent"
[formId]="formId" [formId]="formId"
[formModel]="formModel" [formModel]="formModel"

View File

@@ -1,7 +1,7 @@
<div class="thumbnail" [class.limit-width]="limitWidth"> <div class="thumbnail" [class.limit-width]="limitWidth">
<ds-loading *ngIf="isLoading; else showThumbnail" class="thumbnail-content" [showMessage]="false"> <ds-themed-loading *ngIf="isLoading; else showThumbnail" class="thumbnail-content" [showMessage]="false">
text-content text-content
</ds-loading> </ds-themed-loading>
<ng-template #showThumbnail> <ng-template #showThumbnail>
<img *ngIf="src !== null" class="thumbnail-content img-fluid" <img *ngIf="src !== null" class="thumbnail-content img-fluid"
[src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()"> [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()">

View File

@@ -115,7 +115,7 @@ describe('ThumbnailComponent', () => {
comp.thumbnail = thumbnail; comp.thumbnail = thumbnail;
comp.ngOnChanges(); comp.ngOnChanges();
fixture.detectChanges(); fixture.detectChanges();
expect(de.query(By.css('ds-loading'))).toBeTruthy(); expect(de.query(By.css('ds-themed-loading'))).toBeTruthy();
}); });
}); });