mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-26 10:21:52 +00:00
a43ff976a2
* accordion works * cleanup * styling * more styling * App show change (#387) * show page change * no marketplace * app show changes * update marketplace list * icon * top left icon * toolbar * right size * out of toolbar * no service details * fix skeleton text and server metrics page * stuck * add session management * complete sessions feature * app show page * remove unnecessary icons * add cli to list of possible sessions * Modal global (#383) * modal checkpoint * global modal * black looks good now * black looks good now * not smaller Co-authored-by: Drew Ansbacher <drew.ansbacher@spiredigital.com> Co-authored-by: Drew Ansbacher <drew.ansbacher@spiredigital.com> Co-authored-by: Drew Ansbacher <drew.ansbacher@gmail.com> Co-authored-by: Drew Ansbacher <drew.ansbacher@spiredigital.com> Co-authored-by: Matt Hill <matthewonthemoon@gmail.com> Co-authored-by: Matt Hill <MattDHill@users.noreply.github.com>
68 lines
3.5 KiB
HTML
68 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;">{{ params.toolbar.version | displayEmver }}</ion-text></h3>
|
|
</ion-label>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content>
|
|
<ion-slides *ngIf="!error" 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) -->
|
|
<alert #components *ngIf="def.slide.selector === 'alert'" [params]="def.slide.params" style="width: 100%;"></alert>
|
|
<notes #components *ngIf="def.slide.selector === 'notes'" [params]="def.slide.params" style="width: 100%;"></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" 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 && !error">
|
|
|
|
<!-- cancel button if loading/not loading -->
|
|
<ion-button slot="start" *ngIf="(currentSlide.loading$ | async) && currentBottomBar.cancel.whileLoading as cancel" (click)="transitions.cancel()" class="toolbar-button" fill="outline">
|
|
<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="!(currentSlide.loading$ | async) && currentBottomBar.cancel.afterLoading as cancel" (click)="transitions.cancel()" class="toolbar-button" fill="outline">
|
|
<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/finish buttons -->
|
|
<ng-container *ngIf="!(currentSlide.loading$ | async)">
|
|
<!-- next -->
|
|
<ion-button slot="end" *ngIf="currentBottomBar.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 -->
|
|
<ion-button slot="end" *ngIf="currentBottomBar.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>
|
|
<ng-container *ngIf="error">
|
|
<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>
|