From f7c5e64fbcb9e42d4260570cf553782ff17ac978 Mon Sep 17 00:00:00 2001 From: Lucy C <12953208+elvece@users.noreply.github.com> Date: Wed, 23 Nov 2022 06:05:36 -0700 Subject: [PATCH] Update/misc UI fixes (#1961) * fix login error message spacing and ensure not longer than 64 chars * spinner color to tertiary * totally responsive homepage cards * copy changes, back button for marketplace, minor styling * center setup wizard tiles; adjust external link style * remove cert note from setup success * convert launch card to go to login button * change system settings to system; update icons * refactor card widget input as full card details; more card resizing for home page * cleanup * clean up widget params * delete contructor Co-authored-by: Matt Hill --- .../app/modals/password/password.page.html | 1 - .../src/app/modals/password/password.page.ts | 2 + .../src/app/pages/attach/attach.page.html | 2 +- .../src/app/pages/embassy/embassy.page.html | 2 +- .../src/app/pages/home/home.page.html | 3 +- .../src/app/pages/loading/loading.page.html | 2 +- .../src/app/pages/recover/recover.page.html | 2 +- .../src/app/pages/success/success.page.html | 395 +++++++++--------- .../src/app/pages/success/success.page.scss | 44 +- .../src/app/pages/success/success.page.ts | 5 +- .../src/app/pages/transfer/transfer.page.html | 2 +- .../projects/setup-wizard/src/styles.scss | 21 +- .../text-spinner/text-spinner.component.html | 2 +- .../projects/ui/src/app/app-routing.module.ts | 2 +- .../ui/src/app/app/menu/menu.component.html | 2 +- .../ui/src/app/app/menu/menu.component.ts | 6 +- .../app/app/preloader/preloader.component.ts | 1 + .../any-link/any-link.component.html | 2 +- .../components/any-link/any-link.component.ts | 3 +- .../widget-card/widget-card.component.html | 43 +- .../widget-card/widget-card.component.scss | 31 +- .../widget-card/widget-card.component.ts | 63 ++- .../widget-list/widget-list.component.html | 35 +- .../widget-list/widget-list.component.scss | 14 +- .../widget-list/widget-list.component.ts | 48 ++- .../app-show/pipes/to-buttons.pipe.ts | 2 +- .../ui/src/app/pages/home/home.page.html | 2 +- .../ui/src/app/pages/home/home.page.scss | 9 + .../ui/src/app/pages/login/login.page.html | 6 +- .../ui/src/app/pages/login/login.page.scss | 1 + .../ui/src/app/pages/login/login.page.ts | 4 + .../marketplace-list.page.html | 3 + .../marketplace-list/marketplace-list.page.ts | 4 + .../marketplace-routing.module.ts | 4 - .../pages/notifications/notifications.page.ts | 3 +- .../server-show/server-show.page.html | 2 +- 36 files changed, 451 insertions(+), 322 deletions(-) diff --git a/frontend/projects/setup-wizard/src/app/modals/password/password.page.html b/frontend/projects/setup-wizard/src/app/modals/password/password.page.html index f89ae16d1..a603fdf32 100644 --- a/frontend/projects/setup-wizard/src/app/modals/password/password.page.html +++ b/frontend/projects/setup-wizard/src/app/modals/password/password.page.html @@ -49,7 +49,6 @@ [ngModelOptions]="{'standalone': true}" [type]="!unmasked2 ? 'password' : 'text'" (ionChange)="checkVer()" - maxlength="64" placeholder="Retype Password" > 64) { + this.pwError = 'Must be less than 65 characters' } else { this.pwError = '' } diff --git a/frontend/projects/setup-wizard/src/app/pages/attach/attach.page.html b/frontend/projects/setup-wizard/src/app/pages/attach/attach.page.html index 4603f7a34..ae39312dd 100644 --- a/frontend/projects/setup-wizard/src/app/pages/attach/attach.page.html +++ b/frontend/projects/setup-wizard/src/app/pages/attach/attach.page.html @@ -1,6 +1,6 @@ - + diff --git a/frontend/projects/setup-wizard/src/app/pages/embassy/embassy.page.html b/frontend/projects/setup-wizard/src/app/pages/embassy/embassy.page.html index 1ac557910..b6d10aff0 100644 --- a/frontend/projects/setup-wizard/src/app/pages/embassy/embassy.page.html +++ b/frontend/projects/setup-wizard/src/app/pages/embassy/embassy.page.html @@ -1,6 +1,6 @@ - + - +
- - + diff --git a/frontend/projects/setup-wizard/src/app/pages/recover/recover.page.html b/frontend/projects/setup-wizard/src/app/pages/recover/recover.page.html index d739380ca..533186629 100644 --- a/frontend/projects/setup-wizard/src/app/pages/recover/recover.page.html +++ b/frontend/projects/setup-wizard/src/app/pages/recover/recover.page.html @@ -1,6 +1,6 @@ - + diff --git a/frontend/projects/setup-wizard/src/app/pages/success/success.page.html b/frontend/projects/setup-wizard/src/app/pages/success/success.page.html index 74d54ffe6..525a985b7 100644 --- a/frontend/projects/setup-wizard/src/app/pages/success/success.page.html +++ b/frontend/projects/setup-wizard/src/app/pages/success/success.page.html @@ -1,32 +1,13 @@ - Your browser does not support the canvas element. +Your browser does not support the canvas element. -
- - - - - - -
- -

Setup Complete!

-
-

- You will be redirected momentarily. -

- - - - - - - - - -
+ + + + + + + +

Setup Complete!

-

- You can now safely unplug your backup drive +

+ You will be redirected momentarily.

-

- You can now safely unplug your old drive -

-
-
- - - Download your Embassy's address information for permanent - access -

- embassy.local was for setup only. It will no - longer work. -

- - + + + + + + + + + +
+
+ +

Setup Complete!

+
+

+ You can now safely unplug your backup drive +

+

+ You can now safely unplug your old drive +

+
+
+ + + Download permanent address info +

+ embassy.local was for setup purposes only. It will no + longer work. +

+ + +
+
+

Download

+ +
+
+ + +
-

Download

- +

Go to Embassy login

+
- - - - - Launch to login to your Embassy -

- Important!
- Your browser will warn you that the page is untrusted. You - can safely bypass this warning. It will go away after you + +

+ + + + + + -
- - - -
+ + + + + diff --git a/frontend/projects/setup-wizard/src/app/pages/success/success.page.scss b/frontend/projects/setup-wizard/src/app/pages/success/success.page.scss index c55bfdaab..d5f720bf9 100644 --- a/frontend/projects/setup-wizard/src/app/pages/success/success.page.scss +++ b/frontend/projects/setup-wizard/src/app/pages/success/success.page.scss @@ -17,9 +17,8 @@ ion-content { } ion-grid { - padding-top: 2rem; max-width: 760px; - margin: auto; + height: 100%; } .grid-center-wrapper { @@ -47,6 +46,7 @@ ion-card { ion-card { max-width: 91%; + min-width: 91%; background: #615F5F; color: var(--ion-text-color); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); @@ -78,14 +78,6 @@ ion-card { } } - p { - a { - text-decoration: none; - font-weight: bold; - color: var(--ion-text-color); - } - } - ion-footer { position: absolute; bottom: 10px; @@ -101,12 +93,6 @@ ion-card { ion-icon { font-size: 1.6rem; } - - .container { - display: flex; - justify-content: center; - align-items: center; - } } .footer-md::before { @@ -114,21 +100,31 @@ ion-card { } } - #launch:after { - content: ''; - position: absolute; - left: 0; - top: 80%; - width: 100%; - height: 100%; + .container { + display: flex; + justify-content: center; + align-items: center; + } + + #launch { background: var(--alt-blue); + height: 100%; + + .container p { + font-size: 1.4rem !important; + font-weight: bold; + } + + ion-icon { + font-size: 1.7rem; + } } #information:after { content: ''; position: absolute; left: 0; - top: 77%; + top: 80%; width: 100%; height: 100%; background: var(--color-accent); diff --git a/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts b/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts index 25f59cfbe..ec061eba1 100644 --- a/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts +++ b/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts @@ -42,6 +42,7 @@ export class SuccessPage { fadeFactor = 0.07 columns: any[] = [] maxStackHeight: any + disableLogin = true constructor( @Inject(DOCUMENT) private readonly document: Document, @@ -119,7 +120,9 @@ export class SuccessPage { encodeURIComponent(this.cert), ) let html = this.document.getElementById('downloadable')?.innerHTML || '' - this.downloadHtml.download('embassy-info.html', html) + this.downloadHtml.download('embassy-info.html', html).then(_ => { + this.disableLogin = false + }) } checkBottom() { diff --git a/frontend/projects/setup-wizard/src/app/pages/transfer/transfer.page.html b/frontend/projects/setup-wizard/src/app/pages/transfer/transfer.page.html index c719af795..ad669686c 100644 --- a/frontend/projects/setup-wizard/src/app/pages/transfer/transfer.page.html +++ b/frontend/projects/setup-wizard/src/app/pages/transfer/transfer.page.html @@ -1,6 +1,6 @@ - + diff --git a/frontend/projects/setup-wizard/src/styles.scss b/frontend/projects/setup-wizard/src/styles.scss index f975c9bdc..4b70b3f02 100644 --- a/frontend/projects/setup-wizard/src/styles.scss +++ b/frontend/projects/setup-wizard/src/styles.scss @@ -116,12 +116,12 @@ --color-accent: #6866cc; --color-dark-black: #121212; - --alt-red: #FF4961; - --alt-orange: #F89248; - --alt-yellow: #E5D53E; - --alt-green: #3DCF6F; - --alt-blue: #00A8A8; - --alt-purple: #9747FF; + --alt-red: #FF4961; + --alt-orange: #F89248; + --alt-yellow: #E5D53E; + --alt-green: #3DCF6F; + --alt-blue: #00A8A8; + --alt-purple: #9747FF; } h1, @@ -177,7 +177,7 @@ ion-grid { } ion-row { - height: 100%; + height: 90%; } ion-card { @@ -334,4 +334,11 @@ ion-footer { ion-item { margin: 0 0.5rem 2rem 0.5rem; } +} + +p a { + color: var(--ion-text-color); + // text-decoration: none; + font-weight: 600; + text-underline-offset: 0.4rem; } \ No newline at end of file diff --git a/frontend/projects/shared/src/components/text-spinner/text-spinner.component.html b/frontend/projects/shared/src/components/text-spinner/text-spinner.component.html index 170f4cc9f..789f4a120 100644 --- a/frontend/projects/shared/src/components/text-spinner/text-spinner.component.html +++ b/frontend/projects/shared/src/components/text-spinner/text-spinner.component.html @@ -1,7 +1,7 @@ - +

{{ text }}

 diff --git a/frontend/projects/ui/src/app/app-routing.module.ts b/frontend/projects/ui/src/app/app-routing.module.ts index 7d4b7dd2f..bc81a63e7 100644 --- a/frontend/projects/ui/src/app/app-routing.module.ts +++ b/frontend/projects/ui/src/app/app-routing.module.ts @@ -22,7 +22,7 @@ const routes: Routes = [ import('./pages/home/home.module').then(m => m.HomePageModule), }, { - path: 'settings', + path: 'system', canActivate: [AuthGuard], canActivateChild: [AuthGuard], loadChildren: () => diff --git a/frontend/projects/ui/src/app/app/menu/menu.component.html b/frontend/projects/ui/src/app/app/menu/menu.component.html index 4b1cf4140..f84e96e2a 100644 --- a/frontend/projects/ui/src/app/app/menu/menu.component.html +++ b/frontend/projects/ui/src/app/app/menu/menu.component.html @@ -22,7 +22,7 @@ {{ page.title }} - + diff --git a/frontend/projects/ui/src/app/components/any-link/any-link.component.ts b/frontend/projects/ui/src/app/components/any-link/any-link.component.ts index c3709718d..40a602f17 100644 --- a/frontend/projects/ui/src/app/components/any-link/any-link.component.ts +++ b/frontend/projects/ui/src/app/components/any-link/any-link.component.ts @@ -13,7 +13,8 @@ import { }) export class AnyLinkComponent implements OnInit { @Input() link!: string - externalLink: boolean = false + @Input() qp?: Record + externalLink = false ngOnInit() { try { diff --git a/frontend/projects/ui/src/app/components/widget-card/widget-card.component.html b/frontend/projects/ui/src/app/components/widget-card/widget-card.component.html index 5a09458df..dec4bc5e1 100644 --- a/frontend/projects/ui/src/app/components/widget-card/widget-card.component.html +++ b/frontend/projects/ui/src/app/components/widget-card/widget-card.component.html @@ -1,15 +1,28 @@ - - -
- - {{ title }} - - - - - - {{ description }} - -
- - +
+
+ + + + {{ cardDetails.title }} + + + + + +

{{ cardDetails.description }}

+ + + +
+
diff --git a/frontend/projects/ui/src/app/components/widget-card/widget-card.component.scss b/frontend/projects/ui/src/app/components/widget-card/widget-card.component.scss index e86e63a94..8b9dd2124 100644 --- a/frontend/projects/ui/src/app/components/widget-card/widget-card.component.scss +++ b/frontend/projects/ui/src/app/components/widget-card/widget-card.component.scss @@ -3,7 +3,8 @@ ion-card { box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 44px; margin: auto; - max-width: 22rem; + max-height: 100%; + max-width: 100%; text-align: center; transition: all 350ms ease; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -18,7 +19,8 @@ ion-card { font-family: 'Open Sans'; padding: 0.6rem; font-weight: 600; - font-size: 1.3rem; + font-size: calc(12px + 0.5vw); + height: 3rem; } ion-card-content { @@ -29,7 +31,7 @@ ion-card { align-items: center; ion-icon { - font-size: 8rem; + font-size: calc(90px + 0.5vw); --ionicon-stroke-width: 1rem; } } @@ -37,7 +39,13 @@ ion-card { ion-footer { padding: 1rem; font-family: 'Open Sans'; - font-size: 1.2rem; + font-size: clamp(1rem, calc(12px + 0.5vw), 1.3rem); + height: 9rem; + width: clamp(13rem, 80%, 18rem); + margin: 0 auto; + * { + max-width: 100%; + } } .footer-md::before { @@ -45,6 +53,17 @@ ion-card { } } -.p1 { - padding: 1.2rem; +@media (max-width: 900px) { + ion-card-title, ion-footer { + height: auto !important; + } + ion-footer { + width: 10rem; + } +} + +@media (max-width: 1200px) { + ion-footer { + width: 14rem; + } } \ No newline at end of file diff --git a/frontend/projects/ui/src/app/components/widget-card/widget-card.component.ts b/frontend/projects/ui/src/app/components/widget-card/widget-card.component.ts index 0f85e9566..61626fcb2 100644 --- a/frontend/projects/ui/src/app/components/widget-card/widget-card.component.ts +++ b/frontend/projects/ui/src/app/components/widget-card/widget-card.component.ts @@ -1,4 +1,11 @@ -import { ChangeDetectionStrategy, Component, Input } from '@angular/core' +import { + ChangeDetectionStrategy, + Component, + ElementRef, + HostListener, + Input, + ViewChild, +} from '@angular/core' @Component({ selector: 'widget-card', @@ -7,11 +14,53 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core' changeDetection: ChangeDetectionStrategy.OnPush, }) export class WidgetCardComponent { - @Input() title: string = '' - @Input() icon: string = '' - @Input() color: string = '' - @Input() description: string = '' - @Input() link: string = '' + @Input() cardDetails!: Card + @Input() containerDimensions!: Dimension + @ViewChild('outerWrapper') outerWrapper: ElementRef = + {} as ElementRef + @ViewChild('innerWrapper') innerWrapper: ElementRef = + {} as ElementRef + @HostListener('window:resize', ['$event']) + onResize() { + this.resize() + } + maxHeight = 0 + maxWidth = 0 + innerTransform = '' + outerWidth: any + outerHeight: any - constructor() {} + ngAfterViewInit() { + this.maxHeight = ( ( + this.innerWrapper.nativeElement + )).getBoundingClientRect().height + this.maxWidth = ( ( + this.innerWrapper.nativeElement + )).getBoundingClientRect().width + this.resize() + } + + resize() { + const height = this.containerDimensions.height + const width = this.containerDimensions.width + const isMax = width >= this.maxWidth && height >= this.maxHeight + const scale = Math.min(width / this.maxWidth, height / this.maxHeight) + this.innerTransform = isMax ? '' : 'scale(' + scale + ')' + this.outerWidth = isMax ? '' : this.maxWidth * scale + this.outerHeight = isMax ? '' : this.maxHeight * scale + } +} + +export interface Dimension { + height: number + width: number +} + +export interface Card { + title: string + icon: string + color: string + description: string + link: string + qp?: Record } diff --git a/frontend/projects/ui/src/app/components/widget-list/widget-list.component.html b/frontend/projects/ui/src/app/components/widget-list/widget-list.component.html index 39983d9df..85c3687f9 100644 --- a/frontend/projects/ui/src/app/components/widget-list/widget-list.component.html +++ b/frontend/projects/ui/src/app/components/widget-list/widget-list.component.html @@ -1,17 +1,18 @@ - - - - - - - +
+ + + + + + + +
diff --git a/frontend/projects/ui/src/app/components/widget-list/widget-list.component.scss b/frontend/projects/ui/src/app/components/widget-list/widget-list.component.scss index 5138d63cb..79c9a58a3 100644 --- a/frontend/projects/ui/src/app/components/widget-list/widget-list.component.scss +++ b/frontend/projects/ui/src/app/components/widget-list/widget-list.component.scss @@ -1,7 +1,13 @@ -ion-row { - grid-row-gap: 1rem; +ion-col { + max-width: 22rem !important; + --ion-grid-column-padding: 1rem; } -ion-col { - padding: 0 0.5rem 0.5rem 1rem; +@media (min-width: 1800px) { + div { + padding: 0 20%; + } + ion-col { + max-width: 24rem !important; + } } \ No newline at end of file diff --git a/frontend/projects/ui/src/app/components/widget-list/widget-list.component.ts b/frontend/projects/ui/src/app/components/widget-list/widget-list.component.ts index ace8e78c7..ad66a4ffc 100644 --- a/frontend/projects/ui/src/app/components/widget-list/widget-list.component.ts +++ b/frontend/projects/ui/src/app/components/widget-list/widget-list.component.ts @@ -1,4 +1,11 @@ -import { ChangeDetectionStrategy, Component, Input } from '@angular/core' +import { + ChangeDetectionStrategy, + Component, + ElementRef, + HostListener, + ViewChild, +} from '@angular/core' +import { Card, Dimension } from '../widget-card/widget-card.component' @Component({ selector: 'widget-list', @@ -7,7 +14,27 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core' changeDetection: ChangeDetectionStrategy.OnPush, }) export class WidgetListComponent { - constructor() {} + @ViewChild('gridContent') gridContent: ElementRef = + {} as ElementRef + @HostListener('window:resize', ['$event']) + onResize() { + this.setContainerDimensions() + } + + containerDimensions: Dimension = {} as Dimension + + ngAfterViewInit() { + this.setContainerDimensions() + } + + setContainerDimensions() { + this.containerDimensions.height = ( ( + this.gridContent.nativeElement + )).getBoundingClientRect().height + this.containerDimensions.width = ( ( + this.gridContent.nativeElement + )).getBoundingClientRect().width + } cards: Card[] = [ { @@ -15,7 +42,8 @@ export class WidgetListComponent { icon: 'storefront-outline', color: 'var(--alt-blue)', description: 'Shop for your favorite open source services', - link: '/marketplace/browse', + link: '/marketplace', + qp: { back: 'true' }, }, { title: 'LAN Setup', @@ -23,21 +51,21 @@ export class WidgetListComponent { color: 'var(--alt-orange)', description: 'Install your Embassy certificate for a secure local connection', - link: '/settings/lan', + link: '/system/lan', }, { title: 'Create Backup', icon: 'duplicate-outline', color: 'var(--alt-purple)', description: 'Back up your Embassy and service data', - link: '/settings/backup', + link: '/system/backup', }, { title: 'Embassy Info', icon: 'information-circle-outline', color: 'var(--alt-green)', description: 'View basic information about your Embassy', - link: '/settings/specs', + link: '/system/specs', }, { title: 'User Manual', @@ -55,11 +83,3 @@ export class WidgetListComponent { }, ] } - -interface Card { - title: string - icon: string - color: string - description: string - link: string -} diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts index 7393f6d04..e1317d1fe 100644 --- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts +++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts @@ -56,7 +56,7 @@ export class ToButtonsPipe implements PipeTransform { this.modalService.presentModalConfig({ pkgId: pkg.manifest.id }), title: 'Config', description: `Customize ${pkgTitle}`, - icon: 'construct-outline', + icon: 'options-outline', }, // properties { diff --git a/frontend/projects/ui/src/app/pages/home/home.page.html b/frontend/projects/ui/src/app/pages/home/home.page.html index 9a381cfc6..1f6300ad7 100644 --- a/frontend/projects/ui/src/app/pages/home/home.page.html +++ b/frontend/projects/ui/src/app/pages/home/home.page.html @@ -7,7 +7,7 @@ -
+
diff --git a/frontend/projects/ui/src/app/pages/home/home.page.scss b/frontend/projects/ui/src/app/pages/home/home.page.scss index e69de29bb..7efcd5161 100644 --- a/frontend/projects/ui/src/app/pages/home/home.page.scss +++ b/frontend/projects/ui/src/app/pages/home/home.page.scss @@ -0,0 +1,9 @@ +.padding-top { + padding-top: 2rem; +} + +@media (min-width: 2000px) { + .padding-top { + padding-top: 10rem; + } +} \ No newline at end of file diff --git a/frontend/projects/ui/src/app/pages/login/login.page.html b/frontend/projects/ui/src/app/pages/login/login.page.html index 190e1f021..d9f55f4d2 100644 --- a/frontend/projects/ui/src/app/pages/login/login.page.html +++ b/frontend/projects/ui/src/app/pages/login/login.page.html @@ -39,9 +39,6 @@ > -

- {{ error }} -

+

+ {{ error }} +

diff --git a/frontend/projects/ui/src/app/pages/login/login.page.scss b/frontend/projects/ui/src/app/pages/login/login.page.scss index d061d2153..fdc001e12 100644 --- a/frontend/projects/ui/src/app/pages/login/login.page.scss +++ b/frontend/projects/ui/src/app/pages/login/login.page.scss @@ -28,6 +28,7 @@ ion-card { background: var(--ion-color-step-200); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 44px; + min-height: 16rem; } .input-label { diff --git a/frontend/projects/ui/src/app/pages/login/login.page.ts b/frontend/projects/ui/src/app/pages/login/login.page.ts index 4b74350f9..6886a0788 100644 --- a/frontend/projects/ui/src/app/pages/login/login.page.ts +++ b/frontend/projects/ui/src/app/pages/login/login.page.ts @@ -40,6 +40,10 @@ export class LoginPage { try { document.cookie = '' + if (this.password.length > 64) { + this.error = 'Password must be less than 65 characters' + return + } await this.api.login({ password: this.password, metadata: { platforms: getPlatforms() }, diff --git a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html index 3be4c3823..a240f9e80 100644 --- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html +++ b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html @@ -1,5 +1,8 @@ + + + Marketplace diff --git a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts index cd52887d9..e2fa1ffe4 100644 --- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts +++ b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts @@ -1,4 +1,5 @@ import { ChangeDetectionStrategy, Component, Inject } from '@angular/core' +import { ActivatedRoute } from '@angular/router' import { ModalController } from '@ionic/angular' import { AbstractMarketplaceService } from '@start9labs/marketplace' import { PatchDB } from 'patch-db-client' @@ -15,6 +16,8 @@ import { DataModel } from 'src/app/services/patch-db/data-model' changeDetection: ChangeDetectionStrategy.OnPush, }) export class MarketplaceListPage { + readonly back = !!this.route.snapshot.queryParamMap.get('back') + readonly store$ = this.marketplaceService.getSelectedStore$().pipe( filter(Boolean), map(({ info, packages }) => { @@ -73,6 +76,7 @@ export class MarketplaceListPage { private readonly marketplaceService: MarketplaceService, private readonly modalCtrl: ModalController, private readonly config: ConfigService, + private readonly route: ActivatedRoute, ) {} category = 'featured' diff --git a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-routing.module.ts b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-routing.module.ts index 7e074fddf..d5d6304e4 100644 --- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-routing.module.ts +++ b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-routing.module.ts @@ -4,11 +4,7 @@ import { Routes, RouterModule } from '@angular/router' const routes: Routes = [ { path: '', - redirectTo: 'browse', pathMatch: 'full', - }, - { - path: 'browse', loadChildren: () => import('./marketplace-list/marketplace-list.module').then( m => m.MarketplaceListPageModule, diff --git a/frontend/projects/ui/src/app/pages/notifications/notifications.page.ts b/frontend/projects/ui/src/app/pages/notifications/notifications.page.ts index 0b9acdfba..ad352b617 100644 --- a/frontend/projects/ui/src/app/pages/notifications/notifications.page.ts +++ b/frontend/projects/ui/src/app/pages/notifications/notifications.page.ts @@ -26,7 +26,7 @@ export class NotificationsPage { notifications: ServerNotifications = [] beforeCursor?: number needInfinite = false - fromToast = false + fromToast = !!this.route.snapshot.queryParamMap.get('toast') readonly perPage = 40 readonly packageData$ = this.patch.watch$('package-data') @@ -41,7 +41,6 @@ export class NotificationsPage { ) {} async ngOnInit() { - this.fromToast = !!this.route.snapshot.queryParamMap.get('toast') this.notifications = await this.getNotifications() this.loading = false } diff --git a/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html b/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html index 57147f47f..9fb6630cc 100644 --- a/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html +++ b/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html @@ -1,6 +1,6 @@ - System Settings + System