UI cosmetic improvements (#1486)

* resize alerts and modals * fix log color * closes #1404 Co-authored-by: Matt Hill <matthill@Matt-M1.local>
2026-03-30 20:14:49 +00:00 · 2022-06-06 11:31:45 -06:00
parent 18e2c610bc
commit d53e295569
30 changed files with 68 additions and 90 deletions
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
@@ -102,7 +102,7 @@ export class AppActionsPage {
              handler: () => {
                this.executeAction(action.key)
              },
-              cssClass: 'wide-alert enter-click',
+              cssClass: 'enter-click',
            },
          ],
        })
@@ -159,7 +159,6 @@ export class AppActionsPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Executing action...',
-      cssClass: 'loader',
    })
    await loader.present()

--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-status/app-show-status.component.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-status/app-show-status.component.ts
@@ -116,7 +116,6 @@ export class AppShowStatusComponent {
      const loader = await this.loadingCtrl.create({
        message: `Stopping...`,
        spinner: 'lines',
-        cssClass: 'loader',
      })
      await loader.present()

@@ -143,7 +142,6 @@ export class AppShowStatusComponent {
    const loader = await this.loadingCtrl.create({
      message: `Starting...`,
      spinner: 'lines',
-      cssClass: 'loader',
    })
    await loader.present()

--- a/frontend/projects/ui/src/app/pages/developer-routes/developer-list/developer-list.page.ts
+++ b/frontend/projects/ui/src/app/pages/developer-routes/developer-list/developer-list.page.ts
@@ -143,7 +143,6 @@ export class DeveloperListPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Creating Project...',
-      cssClass: 'loader',
    })
    await loader.present()

@@ -191,7 +190,6 @@ export class DeveloperListPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Saving...',
-      cssClass: 'loader',
    })
    await loader.present()

@@ -208,7 +206,6 @@ export class DeveloperListPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Removing Project...',
-      cssClass: 'loader',
    })
    await loader.present()

--- a/frontend/projects/ui/src/app/pages/developer-routes/developer-menu/developer-menu.page.ts
+++ b/frontend/projects/ui/src/app/pages/developer-routes/developer-menu/developer-menu.page.ts
@@ -72,7 +72,6 @@ export class DeveloperMenuPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Saving...',
-      cssClass: 'loader',
    })
    await loader.present()

--- a/frontend/projects/ui/src/app/pages/login/login.page.ts
+++ b/frontend/projects/ui/src/app/pages/login/login.page.ts
@@ -36,7 +36,6 @@ export class LoginPage {
    this.loader = await this.loadingCtrl.create({
      message: 'Logging in',
      spinner: 'lines',
-      cssClass: 'loader',
    })
    await this.loader.present()

--- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list-content/marketplace-list-content.component.html
+++ b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list-content/marketplace-list-content.component.html
@@ -21,7 +21,8 @@
        <marketplace-item [pkg]="pkg">
          <marketplace-status
            class="status"
-            [pkg]="localPkgs[pkg.manifest.id]"
+            [version]="pkg.manifest.version"
+            [localPkg]="localPkgs[pkg.manifest.id]"
          ></marketplace-status>
        </marketplace-item>
      </ion-col>
--- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
+++ b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
@@ -6,7 +6,8 @@
      <marketplace-package [pkg]="pkg">
        <marketplace-status
          class="status"
-          [pkg]="localPkg$ | async"
+          [version]="pkg.manifest.version"
+          [localPkg]="localPkg$ | async"
        ></marketplace-status>
        <marketplace-show-controls
          position="controls"
--- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-status/marketplace-status.component.html
+++ b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-status/marketplace-status.component.html
@@ -1,9 +1,15 @@
-<ng-container *ngIf="pkg; else none" [ngSwitch]="pkg.state">
+<ng-container *ngIf="localPkg; else none" [ngSwitch]="localPkg.state">
  <div *ngSwitchCase="PackageState.Installed">
-    <ion-text *ngIf="(version | compareEmver: version) === 0" color="success">
+    <ion-text
+      *ngIf="(version | compareEmver: localVersion) === 0"
+      color="success"
+    >
      Installed
    </ion-text>
-    <ion-text *ngIf="(version | compareEmver: version) === 1" color="warning">
+    <ion-text
+      *ngIf="(version | compareEmver: localVersion) === 1"
+      color="warning"
+    >
      Update Available
    </ion-text>
  </div>
@@ -15,7 +21,7 @@
  </div>
  <div *ngSwitchDefault>
    <ion-text
-      *ngIf="pkg['install-progress'] | installProgress as progress"
+      *ngIf="localPkg['install-progress'] | installProgress as progress"
      color="primary"
    >
      Installing
--- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-status/marketplace-status.component.ts
+++ b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-status/marketplace-status.component.ts
@@ -8,11 +8,13 @@ import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
 })
 export class MarketplaceStatusComponent {
  @Input()
-  pkg?: PackageDataEntry
+  version: string
+  @Input()
+  localPkg?: PackageDataEntry

  PackageState = PackageState

-  get version(): string {
-    return this.pkg?.manifest.version || ''
+  get localVersion(): string {
+    return this.localPkg?.manifest.version || ''
  }
 }
--- a/frontend/projects/ui/src/app/pages/notifications/notifications.page.ts
+++ b/frontend/projects/ui/src/app/pages/notifications/notifications.page.ts
@@ -70,7 +70,6 @@ export class NotificationsPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Deleting...',
-      cssClass: 'loader',
    })
    await loader.present()

@@ -118,11 +117,11 @@ export class NotificationsPage {
    await modal.present()
  }

-  async viewFullMessage(title: string, message: string) {
+  async viewFullMessage(header: string, message: string) {
    const alert = await this.alertCtrl.create({
-      header: title,
-      message: message,
-      cssClass: 'wider-alert',
+      header,
+      message,
+      cssClass: 'notification-detail-alert',
      buttons: [
        {
          text: `OK`,
@@ -159,7 +158,6 @@ export class NotificationsPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Deleting...',
-      cssClass: 'loader',
    })
    await loader.present()

--- a/frontend/projects/ui/src/app/pages/server-routes/marketplaces/marketplaces.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/marketplaces/marketplaces.page.ts
@@ -138,7 +138,6 @@ export class MarketplacesPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Validating Marketplace...',
-      cssClass: 'loader',
    })
    await loader.present()

@@ -183,7 +182,6 @@ export class MarketplacesPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Deleting...',
-      cssClass: 'loader',
    })
    await loader.present()

@@ -211,7 +209,6 @@ export class MarketplacesPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Validating Marketplace...',
-      cssClass: 'loader',
    })

    await loader.present()
@@ -254,7 +251,6 @@ export class MarketplacesPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Validating Marketplace...',
-      cssClass: 'loader',
    })
    await loader.present()

--- a/frontend/projects/ui/src/app/pages/server-routes/preferences/preferences.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/preferences/preferences.page.ts
@@ -68,7 +68,6 @@ export class PreferencesPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Saving...',
-      cssClass: 'loader',
    })
    await loader.present()

--- a/frontend/projects/ui/src/app/pages/server-routes/restore/restore.component.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/restore/restore.component.ts
@@ -66,7 +66,6 @@ export class RestorePage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Decrypting drive...',
-      cssClass: 'loader',
    })
    await loader.present()

--- a/frontend/projects/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts
@@ -155,7 +155,6 @@ export class ServerBackupPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Beginning backup...',
-      cssClass: 'loader',
    })
    await loader.present()

--- a/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts
@@ -180,7 +180,6 @@ export class ServerShowPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Restarting...',
-      cssClass: 'loader',
    })
    await loader.present()

@@ -197,7 +196,6 @@ export class ServerShowPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Shutting down...',
-      cssClass: 'loader',
    })
    await loader.present()

@@ -214,7 +212,6 @@ export class ServerShowPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Hard Restarting...',
-      cssClass: 'loader',
    })
    await loader.present()

@@ -231,7 +228,6 @@ export class ServerShowPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Checking for updates',
-      cssClass: 'loader',
    })
    await loader.present()

--- a/frontend/projects/ui/src/app/pages/server-routes/sessions/sessions.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/sessions/sessions.page.ts
@@ -55,7 +55,6 @@ export class SessionsPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Killing session...',
-      cssClass: 'loader',
    })
    await loader.present()

--- a/frontend/projects/ui/src/app/pages/server-routes/ssh-keys/ssh-keys.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/ssh-keys/ssh-keys.page.ts
@@ -66,7 +66,6 @@ export class SSHKeysPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Saving...',
-      cssClass: 'loader',
    })
    await loader.present()

@@ -103,7 +102,6 @@ export class SSHKeysPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Deleting...',
-      cssClass: 'loader',
    })
    await loader.present()

--- a/frontend/projects/ui/src/app/pages/server-routes/wifi/wifi.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/wifi/wifi.page.ts
@@ -68,7 +68,7 @@ export class WifiPage {
            role: 'cancel',
          },
        ],
-        cssClass: 'wide-alert enter-click',
+        cssClass: 'enter-click',
      })
      await alert.present()
      return
@@ -103,7 +103,7 @@ export class WifiPage {
          },
        },
      ],
-      cssClass: 'wide-alert enter-click select-warning',
+      cssClass: 'enter-click select-warning',
    })
    await alert.present()
  }
@@ -171,7 +171,6 @@ export class WifiPage {
  private async setCountry(country: string): Promise<void> {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
-      cssClass: 'loader',
    })
    await loader.present()

@@ -264,7 +263,6 @@ export class WifiPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Connecting. This could take a while...',
-      cssClass: 'loader',
    })
    await loader.present()

@@ -282,7 +280,6 @@ export class WifiPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Deleting...',
-      cssClass: 'loader',
    })
    await loader.present()

@@ -301,7 +298,6 @@ export class WifiPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Saving...',
-      cssClass: 'loader',
    })
    await loader.present()

@@ -324,7 +320,6 @@ export class WifiPage {
    const loader = await this.loadingCtrl.create({
      spinner: 'lines',
      message: 'Connecting. This could take a while...',
-      cssClass: 'loader',
    })
    await loader.present()