Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: shell app loading spinner + minor improvements in libs #259

Original file line number Diff line number Diff line change
@@ -13,9 +13,18 @@
<div class="figure flex h-2rem w-2rem md:h-3rem md:w-3rem" *ngIf="showFigure">
<div #previewImage class="figure-image absolute top-0 left-0 right-0 bottom-0">
<ng-content select="[figureImage]"></ng-content>
<img *ngIf="figureImage" [ocxSrc]="figureImage" alt="Figure image" class="w-full" />
<img
*ngIf="figureImage && !figureImageLoadError"
[ocxSrc]="figureImage"
alt="Figure image"
class="w-full"
(error)="handleImageError()"
/>
</div>
<div class="colorblob flex-1 border-round" *ngIf="previewImage.children.length === 0"></div>
<div
class="colorblob flex-1 border-round"
*ngIf="previewImage.children.length === 0 || figureImageLoadError"
></div>
</div>
<ng-template #skeletonBar>
<div class="header justify-content-evenly">
@@ -25,11 +34,12 @@
</ng-template>
<div class="header" *ngIf="!loading; else skeletonBar">
<h1 id="page-header" *ngIf="!!header">{{ header }}</h1>
<h2 id='page-subheader' *ngIf="!!subheader">{{ subheader }}</h2>
<h2 id="page-subheader" *ngIf="!!subheader">{{ subheader }}</h2>
</div>
</div>
<div class="action-items-wrap mt-2 md:mt-0">
<ng-container *ngIf="additionalToolbarContentLeft" [ngTemplateOutlet]="additionalToolbarContentLeft"> </ng-container>
<ng-container *ngIf="additionalToolbarContentLeft" [ngTemplateOutlet]="additionalToolbarContentLeft">
</ng-container>

<ng-container *ngIf="!disableDefaultActions"> </ng-container>
<ng-template #skeletonActions>
@@ -87,7 +97,9 @@ <h2 id='page-subheader' *ngIf="!!subheader">{{ subheader }}</h2>
class="object-info flex flex-row md:flex-column align-items-baseline md:align-items-center justify-content-between"
*ngFor="let item of objectDetails"
>
<label class="flex font-medium text-600" name="object-detail-label">{{ item.label | dynamicPipe:item.labelPipe }}</label>
<label class="flex font-medium text-600" name="object-detail-label"
>{{ item.label | dynamicPipe:item.labelPipe }}</label
>
<span
*ngIf="item.icon || item.value"
class="flex text-900 mt-2"
Original file line number Diff line number Diff line change
@@ -124,6 +124,8 @@ export class PageHeaderComponent implements OnInit, OnChanges {

home$!: Observable<HomeItem>

figureImageLoadError = false;

protected breadcrumbs: BreadcrumbService

constructor(
@@ -173,6 +175,10 @@ export class PageHeaderComponent implements OnInit, OnChanges {
}
}

handleImageError() {
this.figureImageLoadError = true
}

public generateItemStyle(item: ObjectDetailItem): string {
let style = ''
if (item.icon) style = style.concat(style, ' ', 'gap-1 align-items-center')
Original file line number Diff line number Diff line change
@@ -56,13 +56,6 @@
</div>
</ng-template>
</ocx-slot>
<ul class="layout-topbar-items">
<!-- Only desktop: Actions (favorites, support, search, ...) as icon buttons -->
<ng-container *ocxIfBreakpoint="'desktop'"> </ng-container>

<!-- Only mobile: Actions (favorites, support, search, ...) as 'more' button + overlay -->
<li class="layout-topbar-item" *ocxIfBreakpoint="'mobile'"></li>
</ul>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -25,10 +25,10 @@
<p-toast></p-toast>

<div class="menu-wrapper">
<div class="layout-menu-container" *ngIf="isStaticalMenuVisible()">
<div class="layout-menu-container overflow-auto" *ngIf="isStaticalMenuVisible()">
<ocx-slot name="onecx-shell-verticalMenu">
<ng-template #skeleton>
<p-skeleton class="w-full h-full mb-4 inline-block" height="35px" width="120px"></p-skeleton>
<p-skeleton class="w-full h-full inline-block p-2" height="35px"></p-skeleton>
</ng-template>
</ocx-slot>
</div>
@@ -37,7 +37,7 @@
<div class="layout-main">
<div class="layout-content relative">
<ocx-slot name="onecx-shell-subHeader"></ocx-slot>
<ng-container *ngIf="!showContentProvider || (showContentProvider.showContent$ | async)">
<ng-container *ngIf="!showContentProvider || (showContentProvider.showContent$ | async); else appLoading">
<ng-content></ng-content>
<router-outlet></router-outlet>
</ng-container>
@@ -52,3 +52,7 @@
<ng-template #globalError>
<ocx-shell-error [errCode]="globalErrMsg"></ocx-shell-error>
</ng-template>

<ng-template #appLoading>
<div [ocxLoadingIndicator]="true" class="w-full h-full absolute top-0 left-0"></div>
</ng-template>
3 changes: 2 additions & 1 deletion libs/shell-core/src/lib/shell-core.module.ts
Original file line number Diff line number Diff line change
@@ -9,9 +9,10 @@ import { PortalFooterComponent } from './components/portal-footer/portal-footer.
import { HeaderComponent } from './components/portal-header/header.component'
import { PortalViewportComponent } from './components/portal-viewport/portal-viewport.component'
import { SkeletonModule } from 'primeng/skeleton'
import { PortalCoreModule } from '@onecx/portal-integration-angular'

@NgModule({
imports: [CommonModule, RouterModule, AngularRemoteComponentsModule, AngularAcceleratorModule, ToastModule, SkeletonModule],
imports: [CommonModule, RouterModule, AngularRemoteComponentsModule, AngularAcceleratorModule, ToastModule, SkeletonModule, PortalCoreModule],
declarations: [PortalViewportComponent, HeaderComponent, PortalFooterComponent, GlobalErrorComponent],
exports: [PortalViewportComponent, HeaderComponent, PortalFooterComponent, ToastModule, GlobalErrorComponent],
})