mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-31 04:23:40 +00:00
66 lines
3.5 KiB
HTML
66 lines
3.5 KiB
HTML
<ion-header style="height: 12vh">
|
|
<ion-toolbar>
|
|
<ion-label class="toolbar-label text-ellipses">
|
|
<h1 class="toolbar-title">{{ params.toolbar.title }}</h1>
|
|
<h3 style="font-size: large; font-style: italic">{{params.toolbar.action}} <ion-text style="font-size: medium;" color="medium">{{ params.toolbar.version | displayEmver }}</ion-text></h3>
|
|
</ion-label>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content>
|
|
<ion-slides *ngIf="!($error$ | async)" id="slide-show" style="--bullet-background: white" pager="false">
|
|
<ion-slide *ngFor="let def of params.slideDefinitions">
|
|
<!-- We can pass [transitions]="transitions" into the component if logic within the component needs to trigger a transition (not just bottom bar) -->
|
|
<dependencies #components *ngIf="def.slide.selector === 'dependencies'" [params]="def.slide.params"></dependencies>
|
|
<notes #components *ngIf="def.slide.selector === 'notes'" [params]="def.slide.params"></notes>
|
|
<dependents #components *ngIf="def.slide.selector === 'dependents'" [params]="def.slide.params" [transitions]="transitions"></dependents>
|
|
<complete #components *ngIf="def.slide.selector === 'complete'" [params]="def.slide.params" [transitions]="transitions"></complete>
|
|
</ion-slide>
|
|
</ion-slides>
|
|
|
|
|
|
<div *ngIf="$error$ | async as error" class="slide-content">
|
|
<div style="margin-top: 25px;">
|
|
<div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
|
|
<ion-label color="danger" style="font-size: xx-large; font-weight: bold;">
|
|
Error
|
|
</ion-label>
|
|
</div>
|
|
<div class="long-message">
|
|
{{error}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ion-content>
|
|
|
|
<ion-footer>
|
|
<ion-toolbar style="padding: 8px;">
|
|
<ng-container *ngIf="!($initializing$ | async) && !($error$ | async) && { loading: currentSlide.$loading$ | async, bar: currentBottomBar} as v">
|
|
|
|
<!-- cancel button if loading/not loading -->
|
|
<ion-button slot="start" *ngIf="v.loading && v.bar.cancel.whileLoading as cancel" (click)="transitions.cancel()" class="toolbar-button" fill="outline" color="medium">
|
|
<ion-text *ngIf="cancel.text" [class.smaller-text]="cancel.text > 16">{{cancel.text}}</ion-text>
|
|
<ion-icon *ngIf="!cancel.text" name="close-outline"></ion-icon>
|
|
</ion-button>
|
|
<ion-button slot="start" *ngIf="!v.loading && v.bar.cancel.afterLoading as cancel" (click)="transitions.cancel()" class="toolbar-button" fill="outline" color="medium">
|
|
<ion-text *ngIf="cancel.text" [class.smaller-text]="cancel.text > 16">{{cancel.text}}</ion-text>
|
|
<ion-icon *ngIf="!cancel.text" name="close-outline"></ion-icon>
|
|
</ion-button>
|
|
|
|
<!-- next button -->
|
|
<ion-button slot="end" *ngIf="!v.loading && v.bar.next as next" (click)="transitions.next()" fill="outline" class="toolbar-button" color="primary">
|
|
<ion-text [class.smaller-text]="next.length > 16">{{next}}</ion-text>
|
|
</ion-button>
|
|
|
|
<!-- finish button -->
|
|
<ion-button slot="end" *ngIf="!v.loading && v.bar.finish as finish" (click)="transitions.final()" fill="outline" class="toolbar-button" color="primary">
|
|
<ion-text [class.smaller-text]="finish.length > 16">{{finish}}</ion-text>
|
|
</ion-button>
|
|
|
|
</ng-container>
|
|
<ng-container *ngIf="$error$ | async">
|
|
<ion-button slot="start" (click)="transitions.final()" style="text-transform: capitalize; font-weight: bolder;" color="danger">Dismiss</ion-button>
|
|
</ng-container>
|
|
</ion-toolbar>
|
|
</ion-footer>
|