diff --git a/frontend/projects/shared/styles/shared.scss b/frontend/projects/shared/styles/shared.scss index 235172387..65c3c1f6c 100644 --- a/frontend/projects/shared/styles/shared.scss +++ b/frontend/projects/shared/styles/shared.scss @@ -1,7 +1,15 @@ +$wide-modal: 900px; + ion-input { caret-color: gray; } +ion-alert { + .alert-wrapper { + --min-width: 320px; + } +} + ion-modal::part(content) { position: absolute; height: 90% !important; @@ -15,16 +23,6 @@ ion-modal::part(content) { box-shadow: 0 0 70px 70px black; } -@media (min-width: 1000px) { - ion-modal::part(content) { - position: absolute; - height: 80% !important; - top: 10%; - width: 50% !important; - left: 25%; - } -} - .alertlike-modal { &::part(content) { max-height: 380px !important; @@ -36,10 +34,25 @@ ion-modal::part(content) { } @media (min-width: 1000px) { + ion-modal::part(content) { + position: absolute; + height: 80% !important; + top: 10%; + width: $wide-modal !important; + left: calc((100vw - $wide-modal) / 2) !important; + } + .alertlike-modal { &::part(content) { - width: 60% !important; - left: 20% !important; + width: $wide-modal !important; + left: calc((100vw - $wide-modal) / 2) !important; + } + } + + ion-alert { + .alert-wrapper { + --width: 50%; + --max-width: 500px; } } } diff --git a/frontend/projects/ui/src/app/app/global/services/update-toast.service.ts b/frontend/projects/ui/src/app/app/global/services/update-toast.service.ts index 8000e3331..073aba2bc 100644 --- a/frontend/projects/ui/src/app/app/global/services/update-toast.service.ts +++ b/frontend/projects/ui/src/app/app/global/services/update-toast.service.ts @@ -78,7 +78,6 @@ export class UpdateToastService extends Observable { const LOADER: LoadingOptions = { spinner: 'lines', message: 'Restarting...', - cssClass: 'loader', } const TOAST: ToastOptions = { diff --git a/frontend/projects/ui/src/app/app/snek/snek.directive.ts b/frontend/projects/ui/src/app/app/snek/snek.directive.ts index e7454c6bd..f1d826236 100644 --- a/frontend/projects/ui/src/app/app/snek/snek.directive.ts +++ b/frontend/projects/ui/src/app/app/snek/snek.directive.ts @@ -33,7 +33,6 @@ export class SnekDirective { if (data?.highScore > highScore) { const loader = await this.loadingCtrl.create({ spinner: 'lines', - cssClass: 'loader', message: 'Saving High Score...', }) diff --git a/frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.ts b/frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.ts index 5539af4e3..4cf6275f8 100644 --- a/frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.ts +++ b/frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.ts @@ -144,7 +144,6 @@ export class BackupDrivesComponent { const loader = await this.loadingCtrl.create({ spinner: 'lines', message: 'Testing connectivity to shared folder...', - cssClass: 'loader', }) await loader.present() @@ -203,7 +202,6 @@ export class BackupDrivesComponent { const loader = await this.loadingCtrl.create({ spinner: 'lines', message: 'Testing connectivity to shared folder...', - cssClass: 'loader', }) await loader.present() @@ -221,7 +219,6 @@ export class BackupDrivesComponent { const loader = await this.loadingCtrl.create({ spinner: 'lines', message: 'Removing...', - cssClass: 'loader', }) await loader.present() diff --git a/frontend/projects/ui/src/app/components/logs/logs.page.ts b/frontend/projects/ui/src/app/components/logs/logs.page.ts index ac9364697..85d3b2f06 100644 --- a/frontend/projects/ui/src/app/components/logs/logs.page.ts +++ b/frontend/projects/ui/src/app/components/logs/logs.page.ts @@ -5,6 +5,9 @@ import { RR } from 'src/app/services/api/api.types' var Convert = require('ansi-to-html') var convert = new Convert({ bg: 'transparent', + colors: { + 4: 'Cyan', + }, }) @Component({ diff --git a/frontend/projects/ui/src/app/modals/app-config/app-config.page.ts b/frontend/projects/ui/src/app/modals/app-config/app-config.page.ts index 654b5fef1..2fea4dac1 100644 --- a/frontend/projects/ui/src/app/modals/app-config/app-config.page.ts +++ b/frontend/projects/ui/src/app/modals/app-config/app-config.page.ts @@ -140,7 +140,6 @@ export class AppConfigPage { const loader = await this.loadingCtrl.create({ spinner: 'lines', message: `Saving config. This could take a while...`, - cssClass: 'loader', }) await loader.present() diff --git a/frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.ts b/frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.ts index 841e6c510..9f478200e 100644 --- a/frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.ts +++ b/frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.ts @@ -70,7 +70,6 @@ export class AppRecoverSelectPage { const loader = await this.loadingCtrl.create({ spinner: 'lines', message: 'Initializing...', - cssClass: 'loader', }) await loader.present() diff --git 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 index b0f7311b0..c77c7e3cb 100644 --- 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() diff --git 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 index 5c78f0209..978d65845 100644 --- 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() diff --git 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 index b7f929c84..eebcb50b7 100644 --- 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() diff --git 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 index 48e92c3f5..00b307671 100644 --- 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() 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 696d14556..ff87713a0 100644 --- 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() diff --git 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 index 8d8555086..9d66e091b 100644 --- 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 @@ diff --git 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 index b8ae4f437..3244e1d15 100644 --- 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 @@ +
- + Installed - + Update Available
@@ -15,7 +21,7 @@
Installing diff --git 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 index 9c7d4ac1f..0db949b0d 100644 --- 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 || '' } } 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 0fc8de7f2..0a36ffc36 100644 --- 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() diff --git 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 index f67bb7f45..7202a3238 100644 --- 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() diff --git 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 index 894a9e048..eea8a0813 100644 --- 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() diff --git 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 index 0c321a947..f9456d385 100644 --- 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() diff --git 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 index 08fbbaa7b..b9921b095 100644 --- 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() diff --git 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 index 04de06212..6e2fa550a 100644 --- 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() diff --git 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 index 4c489ecad..83993655a 100644 --- 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() diff --git 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 index 76a43dcf9..93d5a3184 100644 --- 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() diff --git 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 index 477b5e317..fe8e02a3a 100644 --- 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 { 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() diff --git a/frontend/projects/ui/src/app/services/api/api.fixures.ts b/frontend/projects/ui/src/app/services/api/api.fixures.ts index 87a14d53a..673379b9a 100644 --- a/frontend/projects/ui/src/app/services/api/api.fixures.ts +++ b/frontend/projects/ui/src/app/services/api/api.fixures.ts @@ -796,7 +796,7 @@ export module Mock { code: 4, level: NotificationLevel.Error, title: 'Service Crashed', - message: new Array(50) + message: new Array(40) .fill( `2021-11-27T18:36:30.451064Z 2021-11-27T18:36:30Z tor: Thread interrupt 2021-11-27T18:36:30.452833Z 2021-11-27T18:36:30Z Shutdown: In progress... @@ -922,7 +922,7 @@ export module Mock { { timestamp: '2019-12-26T14:21:30.872Z', message: - '2021/11/09 22:55:04 \u001b[0;32;49mPOST \u001b[0;32;49m200\u001b[0m photoview.embassy/api/graphql \u001b[0;36;49m1.169406ms\u001b[0m unauthenticated', + '2021/11/09 22:55:04 \u001b[34mPOST \u001b[0;32;49m200\u001b[0m photoview.embassy/api/graphql \u001b[0;36;49m1.169406ms\u001b[0m unauthenticated', }, { timestamp: '2019-12-26T14:22:30.872Z', diff --git a/frontend/projects/ui/src/app/services/api/mock-patch.ts b/frontend/projects/ui/src/app/services/api/mock-patch.ts index 890ef1c05..51a21fb00 100644 --- a/frontend/projects/ui/src/app/services/api/mock-patch.ts +++ b/frontend/projects/ui/src/app/services/api/mock-patch.ts @@ -19,7 +19,7 @@ export const mockPatchData: DataModel = { gaming: undefined, }, 'server-info': { - id: 'embassy-abcdefgh', + id: 'abcdefgh', version: '0.3.1', 'last-backup': null, 'lan-address': 'https://embassy-abcdefgh.local', diff --git a/frontend/projects/ui/src/app/services/marketplace.service.ts b/frontend/projects/ui/src/app/services/marketplace.service.ts index 01cbed35f..938f82866 100644 --- a/frontend/projects/ui/src/app/services/marketplace.service.ts +++ b/frontend/projects/ui/src/app/services/marketplace.service.ts @@ -117,7 +117,6 @@ export class MarketplaceService extends AbstractMarketplaceService { this.loadingCtrl.create({ spinner: 'lines', message: 'Beginning Installation', - cssClass: 'loader', }), ), ).pipe( diff --git a/frontend/projects/ui/src/app/services/server-config.service.ts b/frontend/projects/ui/src/app/services/server-config.service.ts index 788c9ca12..d9a6032fc 100644 --- a/frontend/projects/ui/src/app/services/server-config.service.ts +++ b/frontend/projects/ui/src/app/services/server-config.service.ts @@ -31,7 +31,6 @@ export class ServerConfigService { const loader = await this.loadingCtrl.create({ spinner: 'lines', message: 'Saving...', - cssClass: 'loader', }) loader.present() diff --git a/frontend/projects/ui/src/styles.scss b/frontend/projects/ui/src/styles.scss index 4cf8a8cd7..271430480 100644 --- a/frontend/projects/ui/src/styles.scss +++ b/frontend/projects/ui/src/styles.scss @@ -63,10 +63,6 @@ $subheader-height: 48px; color: var(--ion-color-warning); } -.wide-alert { - --min-width: 400px; -} - .break-all { word-break: break-all; } @@ -81,20 +77,6 @@ $subheader-height: 48px; } } -.item-subdivider { - padding: 0 16px; - margin-top: 0; -} - -.loader { - --spinner-color: var(--ion-color-warning) !important; - z-index: 40000 !important; -} - -.borderless { - border-style: none; -} - .center { display: block; margin: auto; @@ -216,8 +198,15 @@ ion-button { } } -.wider-alert .alert-wrapper { - min-width: 60% !important; +.notification-detail-alert { + .alert-wrapper { + --max-height: 80% !important; + --width: 90% !important; + --max-width: 900px !important; + } + .alert-message { + max-height: unset; + } } ion-slides { @@ -251,7 +240,8 @@ ion-label { } ion-loading { - z-index: 100 !important; + --spinner-color: var(--ion-color-warning) !important; + z-index: 40000 !important; } .swiper-pagination {