diff --git a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.html b/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.html index 8a26bbf91..6c04b8b48 100644 --- a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.html +++ b/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.html @@ -22,18 +22,29 @@ - - + + + + + + - - - - + + + + - -

{{ app.subject.title | async }}

+ +

{{ vars.title }}

+
diff --git a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.scss b/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.scss index 2fc83eaed..20d5c4f78 100644 --- a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.scss +++ b/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.scss @@ -51,3 +51,35 @@ width: 13px !important; margin: 9px; } + +.launch-button-opaque { + position: absolute; + z-index: 1; + --border-radius: 100px; + width: 42px; + height: 42px; + right: -5px; + top: -5px; + --background: #2b2a2b //linear-gradient(120deg, rgb(35, 178, 251, 0.7), transparent); + box-shadow: 0 0 4px 2px rgb(91 200 255); + border-radius: 100px; +} + +.launch-button-transparent { + position: absolute; + z-index: 1; + --border-radius: 100px; + width: 42px; + height: 42px; + right: -5px; + top: -5px; + --background: linear-gradient(200deg, rgb(35, 178, 251, 1), rgb(35, 178, 251, 0.25)); +} + +.launch-button-off { + --background: transparent; + --box-shadow: none; + ion-icon { + color: var(--ion-color-medium); + } +} \ No newline at end of file diff --git a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.ts b/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.ts index d44870ffd..230444e67 100644 --- a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.ts +++ b/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core' -import { AppModel } from 'src/app/models/app-model' +import { AppModel, AppStatus } from 'src/app/models/app-model' import { AppInstalledPreview } from 'src/app/models/app-types' import { ModelPreload } from 'src/app/models/model-preload' import { doForAtLeast } from 'src/app/util/misc.util' @@ -9,6 +9,7 @@ import { BehaviorSubject, Observable, Subscription } from 'rxjs' import { S9Server, ServerModel, ServerStatus } from 'src/app/models/server-model' import { SyncDaemon } from 'src/app/services/sync.service' import { Cleanup } from 'src/app/util/cleanup' +import { ConfigService } from 'src/app/services/config.service' @Component({ selector: 'app-installed-list', @@ -21,6 +22,8 @@ export class AppInstalledListPage extends Cleanup { $loading$ = new BehaviorSubject(true) s9Host$: Observable + AppStatus = AppStatus + server: PropertySubject currentServer: S9Server apps: PropertySubjectId[] = [] @@ -32,14 +35,17 @@ export class AppInstalledListPage extends Cleanup { segmentValue: 'services' | 'embassy' = 'services' showCertDownload : boolean + isConsulate: boolean constructor ( private readonly serverModel: ServerModel, private readonly appModel: AppModel, private readonly preload: ModelPreload, private readonly syncDaemon: SyncDaemon, + config: ConfigService, ) { super() + this.isConsulate = config.isConsulateAndroid || config.isConsulateIos } ngOnDestroy () { @@ -50,6 +56,7 @@ export class AppInstalledListPage extends Cleanup { this.server = this.serverModel.watch() this.apps = [] this.cleanup( + // serverUpdateSubscription this.server.status.subscribe(status => { if (status === ServerStatus.UPDATING) { @@ -87,6 +94,11 @@ export class AppInstalledListPage extends Cleanup { this.error = e.message }, }) + + } + + async launchUiTab (address: string) { + return window.open(address, '_blank') } async doRefresh (event: any) { diff --git a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.html b/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.html index 2e1a414c9..964b4b96f 100644 --- a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.html +++ b/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.html @@ -76,11 +76,16 @@ - - - - - Launch + + + + + + + + + + LAUNCH diff --git a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.scss b/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.scss index cc6d3f2c2..125c15ee0 100644 --- a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.scss +++ b/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.scss @@ -39,3 +39,25 @@ .no-cushion-item { --background: transparent; --padding-start: 0px; --inner-padding-end: 0px; --padding-end: 0px; } + +.launch-button { + width: 100%; + padding: 0px 10px; + --background: linear-gradient(200deg, rgb(70 193 255), rgb(70 193 255 / 45%)); + width: calc(100% - 32px); + border-radius: 8px; + --border-radius: 8px; +} + +.launch-button-off { + --background: #383838; + color: var(--ion-color-medium) +} + +.launch-explanation-button { + position: absolute; + z-index: 1; + right: -2px; + top: 10px; + --border-radius: 100px; +} \ No newline at end of file diff --git a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.ts b/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.ts index d44d61c49..15b6224c8 100644 --- a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.ts +++ b/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.ts @@ -18,6 +18,7 @@ import { Cleanup } from 'src/app/util/cleanup' import { InformationPopoverComponent } from 'src/app/components/information-popover/information-popover.component' import { Emver } from 'src/app/services/emver.service' import { displayEmver } from 'src/app/pipes/emver.pipe' +import { ConfigService } from 'src/app/services/config.service' @Component({ selector: 'app-installed-show', @@ -33,8 +34,11 @@ export class AppInstalledShowPage extends Cleanup { appId: string AppStatus = AppStatus showInstructions = false + isConsulate: boolean dependencyDefintion = () => `Dependencies are other services which must be installed, configured appropriately, and started in order to start ${this.app.title.getValue()}` + launchDefinition = () => `Launch A Service

This button appears only for services that can be accessed inside the browser. If a service does not have this button, you must access it using another interface, such as a mobile app, desktop app, or another service on the Embassy. Please view the instructions for a service for details on how to use it.

` + launchOffDefinition = () => `Launch A Service

This button appears only for services that can be accessed inside the browser. Get your service running in order to launch!

` @ViewChild(IonContent) content: IonContent @@ -51,8 +55,10 @@ export class AppInstalledShowPage extends Cleanup { private readonly appModel: AppModel, private readonly popoverController: PopoverController, private readonly emver: Emver, + config: ConfigService, ) { super() + this.isConsulate = config.isConsulateIos || config.isConsulateAndroid } async ngOnInit () {