Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-30 12:11:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix preview loader

Browse Source
This commit is contained in:
Lucy Cifferello
2024-04-09 13:29:54 -04:00
parent 87461c7f72
commit 3c0e77241d
4 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/projects/ui/src/app/routes/portal/components/header/header.component.ts
View File

@@ -50,7 +50,7 @@ import { BreadcrumbsService } from 'src/app/services/breadcrumbs.service'
:host { :host {
display: flex; display: flex;
height: 3.5rem; height: 3.5rem;
padding: 0.375rem; padding: var(--bumper);
--clip-path: polygon( --clip-path: polygon(
0% 0%, 0% 0%,
calc(100% - 1.75rem) 0%, calc(100% - 1.75rem) 0%,

2
web/projects/ui/src/app/routes/portal/portal.component.ts
View File

@@ -39,7 +39,7 @@ import { HeaderComponent } from './components/header/header.component'
main { main {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
margin-bottom: 0.375rem; margin-bottom: var(--bumper);
} }
`, `,
], ],

17
web/projects/ui/src/app/routes/portal/routes/system/marketplace/modals/preview.component.ts
View File

@@ -38,8 +38,8 @@ import { Router } from '@angular/router'
<div class="outer-container"> <div class="outer-container">
<ng-content select="[slot=close]" /> <ng-content select="[slot=close]" />
@if (pkg$ | async; as pkg) { @if (pkg$ | async; as pkg) {
@if (loading) { @if (loading$ | async) {
<tui-loader class="loading-dots" textContent="Loading" /> <tui-loader class="loading" textContent="Loading" />
} @else { } @else {
<marketplace-package-hero [pkg]="pkg"> <marketplace-package-hero [pkg]="pkg">
<ng-content select="[slot=controls]" /> <ng-content select="[slot=controls]" />
@@ -83,7 +83,7 @@ import { Router } from '@angular/router'
<button <button
tuiButton tuiButton
appearance="secondary" appearance="secondary"
(click)="loading = true; completeWith(data.value)" (click)="loading$.next(true); completeWith(data.value)"
> >
Ok Ok
</button> </button>
@@ -106,6 +106,7 @@ import { Router } from '@angular/router'
flex-direction: column; flex-direction: column;
padding: 1.75rem; padding: 1.75rem;
min-width: 100%; min-width: 100%;
height: calc(100vh - var(--portal-header-height) - var(--bumper));
margin-top: 5rem; margin-top: 5rem;
@media (min-width: 768px) { @media (min-width: 768px) {
@@ -145,6 +146,12 @@ import { Router } from '@angular/router'
cursor: pointer; cursor: pointer;
} }
} }
.loading {
min-width: 30rem;
height: 100%;
place-self: center;
}
`, `,
], ],
standalone: true, standalone: true,
@@ -170,7 +177,7 @@ export class MarketplacePreviewComponent {
@Input({ required: true }) @Input({ required: true })
pkgId!: string pkgId!: string
loading = true readonly loading$ = new BehaviorSubject(true)
readonly displayEmver = displayEmver readonly displayEmver = displayEmver
private readonly router = inject(Router) private readonly router = inject(Router)
@@ -184,7 +191,7 @@ export class MarketplacePreviewComponent {
this.marketplaceService.getPackage$(this.pkgId, version, this.url), this.marketplaceService.getPackage$(this.pkgId, version, this.url),
), ),
tap(data => { tap(data => {
this.loading = false this.loading$.next(false)
return data return data
}), }),
) )

6
web/projects/ui/src/styles.scss
View File

@@ -13,6 +13,10 @@ ul {
list-style-type: disc; list-style-type: disc;
} }
:root {
--bumper: 0.375rem;
}
.g-page { .g-page {
@include scrollbar-hidden(); @include scrollbar-hidden();
@@ -23,7 +27,7 @@ ul {
overflow: auto; overflow: auto;
isolation: isolate; isolation: isolate;
backdrop-filter: blur(2rem); backdrop-filter: blur(2rem);
margin: 0 0.375rem; margin: 0 var(--bumper);
border-radius: 0.375rem; border-radius: 0.375rem;
// TODO: Theme // TODO: Theme