From f86a67ee001236b30f6ced61d2a7cb137a45fdf3 Mon Sep 17 00:00:00 2001 From: "stuart.woodman" Date: Mon, 2 Sep 2024 15:41:59 +1000 Subject: [PATCH 1/3] Apps with only a single model can be launched without having to first click Find Out More. --- .../providerselection.component.html | 4 ++- .../model-card/modelcard.component.html | 2 +- .../model-card/modelcard.component.scss | 19 ++++------- .../provider-card/providercard.component.html | 7 ++-- .../provider-card/providercard.component.scss | 23 +++++++------ .../provider-card/providercard.component.ts | 8 +++++ .../app/shared/services/model-info.service.ts | 33 +++++++++---------- ui/src/styles/app.scss | 12 +++++++ 8 files changed, 64 insertions(+), 44 deletions(-) diff --git a/ui/src/app/layout/providerselection/providerselection.component.html b/ui/src/app/layout/providerselection/providerselection.component.html index 81d2905..97852c2 100644 --- a/ui/src/app/layout/providerselection/providerselection.component.html +++ b/ui/src/app/layout/providerselection/providerselection.component.html @@ -18,7 +18,9 @@

{{slider.label}}

- + +
diff --git a/ui/src/app/shared/modules/model-card/modelcard.component.html b/ui/src/app/shared/modules/model-card/modelcard.component.html index 7f80db8..d59766e 100644 --- a/ui/src/app/shared/modules/model-card/modelcard.component.html +++ b/ui/src/app/shared/modules/model-card/modelcard.component.html @@ -20,7 +20,7 @@
-
diff --git a/ui/src/app/shared/modules/model-card/modelcard.component.scss b/ui/src/app/shared/modules/model-card/modelcard.component.scss index fdf5859..2505dbd 100644 --- a/ui/src/app/shared/modules/model-card/modelcard.component.scss +++ b/ui/src/app/shared/modules/model-card/modelcard.component.scss @@ -6,19 +6,12 @@ font-size: 20px; } -.btn-light { - margin: 5px; - width: 10rem; - min-height: 50px; - border-radius: 3px; - border-width: 2px; - border-style: solid; - background-color: transparent; - border-color: #ed5d4a; - color: #ed5d4a; - margin-top: 20px; +.btn-model-light { + border-color: #282572; + color: #282572; } -.btn-light:hover { - background-color: #ed5d4a; + +.btn-model-light:hover { + background-color: #282572; color: rgb(242, 242, 241); } \ No newline at end of file diff --git a/ui/src/app/shared/modules/provider-card/providercard.component.html b/ui/src/app/shared/modules/provider-card/providercard.component.html index fd9efa2..1570a9c 100644 --- a/ui/src/app/shared/modules/provider-card/providercard.component.html +++ b/ui/src/app/shared/modules/provider-card/providercard.component.html @@ -9,7 +9,10 @@
- +
diff --git a/ui/src/app/shared/modules/provider-card/providercard.component.scss b/ui/src/app/shared/modules/provider-card/providercard.component.scss index 946a76a..a10186e 100644 --- a/ui/src/app/shared/modules/provider-card/providercard.component.scss +++ b/ui/src/app/shared/modules/provider-card/providercard.component.scss @@ -1,20 +1,23 @@ -.btn-light { - margin: 5px; - width: 10rem; - min-height: 50px; - border-radius: 3px; - border-width: 2px; - border-style: solid; - background-color: transparent; +.btn-provider-light { border-color: #ed5d4a; color: #ed5d4a; - margin-top: 20px; } -.btn-light:hover { + +.btn-provider-light:hover { background-color: #ed5d4a; color: rgb(242, 242, 241); } +.btn-model-light { + border-color: #282572; + color: #282572; +} + +.btn-model-light:hover { + background-color: #282572; + color: rgb(242, 242, 241); +} + .icon-img { max-width: 60px; max-height: 60px; } diff --git a/ui/src/app/shared/modules/provider-card/providercard.component.ts b/ui/src/app/shared/modules/provider-card/providercard.component.ts index 0dad12e..7754d18 100644 --- a/ui/src/app/shared/modules/provider-card/providercard.component.ts +++ b/ui/src/app/shared/modules/provider-card/providercard.component.ts @@ -20,6 +20,7 @@ export class ProviderCardComponent { @Input() prePath = ''; @Input() infoLink = ''; @Input() pInfoMessage: string; + @Input() srcUrl: string; constructor() { // If this website sits in a subdirectory of web server's 'document root' directory @@ -39,6 +40,13 @@ export class ProviderCardComponent { } } + /** + * Navigates the browser to a new page to view the chosen model + */ + public navigateToModel() { + window.open(this.srcUrl); + } + /** * Open up a window to more information about the provider */ diff --git a/ui/src/app/shared/services/model-info.service.ts b/ui/src/app/shared/services/model-info.service.ts index dd10750..9eada01 100644 --- a/ui/src/app/shared/services/model-info.service.ts +++ b/ui/src/app/shared/services/model-info.service.ts @@ -6,7 +6,7 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http'; -import { Observable , Subject } from 'rxjs'; +import { Subject } from 'rxjs'; export interface ProviderInfo { @@ -17,6 +17,7 @@ export interface ProviderInfo { providerPath: string; infoUrl: string; infoMessage: string; + models: any; } export const FIXED_HEIGHT = -1.0; @@ -96,14 +97,16 @@ export class ModelInfoService { local.providerInfoList = []; for (const providerKey in local.providerModelInfo) { if (local.providerModelInfo.hasOwnProperty(providerKey)) { - const providerInfo: ProviderInfo = { name: local.providerModelInfo[providerKey].name, - numberModels: local.providerModelInfo[providerKey].models.length, - icon: local.providerModelInfo[providerKey].icon, - colourClass: local.providerModelInfo[providerKey].colourClass, - providerPath: providerKey, - infoUrl: local.providerModelInfo[providerKey].infoUrl, - infoMessage: local.providerModelInfo[providerKey].infoMessage - }; + const providerInfo: ProviderInfo = { + name: local.providerModelInfo[providerKey].name, + numberModels: local.providerModelInfo[providerKey].models.length, + icon: local.providerModelInfo[providerKey].icon, + colourClass: local.providerModelInfo[providerKey].colourClass, + providerPath: providerKey, + infoUrl: local.providerModelInfo[providerKey].infoUrl, + infoMessage: local.providerModelInfo[providerKey].infoMessage, + models: local.providerModelInfo[providerKey].models + }; local.providerInfoList.push(providerInfo); } } @@ -120,7 +123,6 @@ export class ModelInfoService { return this.initPromise; } - /** * Builds an HTTP GET URL using parameters * @param params parameters Javascript object with key-val pairs @@ -130,9 +132,6 @@ export class ModelInfoService { return Object.keys(params).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])).join('&'); } - - - /** * Retrieves the provider model information from the model information * @return a promise of the provider model information in JSON format @@ -140,10 +139,10 @@ export class ModelInfoService { public async getProviderModelInfo() { const local = this; if (this.initialised) { - return new Promise(resolve => resolve(local.providerModelInfo)); + return Promise.resolve(local.providerModelInfo); } const result = await this.initialise(); - return new Promise(resolve => resolve(result[0])); + return Promise.resolve(result[0]); } /** @@ -153,10 +152,10 @@ export class ModelInfoService { public async getProviderInfo() { const local = this; if (this.initialised) { - return new Promise(resolve => resolve(local.providerInfoList)); + return Promise.resolve(local.providerInfoList); } const result = await this.initialise(); - return new Promise(resolve => resolve(result[1])); + return Promise.resolve(result[1]); } } diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss index d3423a2..caaa3b0 100644 --- a/ui/src/styles/app.scss +++ b/ui/src/styles/app.scss @@ -60,3 +60,15 @@ app-provider-card { font-style: normal; font-weight: 400; } + +/* Main button class for provider/model cards, e.g. "Launch" and "Find Out More" */ +.btn-avre { + margin: 5px; + width: 10rem; + min-height: 50px; + border-radius: 3px; + border-width: 2px; + border-style: solid; + background-color: transparent; + margin-top: 20px; +} From 97abcbf875f5de9940270382a267a1ada09af7c4 Mon Sep 17 00:00:00 2001 From: Vincent Fazio Date: Wed, 4 Sep 2024 11:25:58 +1000 Subject: [PATCH 2/3] Update launch button colour --- .../shared/modules/model-card/modelcard.component.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/src/app/shared/modules/model-card/modelcard.component.scss b/ui/src/app/shared/modules/model-card/modelcard.component.scss index 2505dbd..fb923bd 100644 --- a/ui/src/app/shared/modules/model-card/modelcard.component.scss +++ b/ui/src/app/shared/modules/model-card/modelcard.component.scss @@ -7,11 +7,11 @@ } .btn-model-light { - border-color: #282572; - color: #282572; + border-color: #598f39; + color: #598f39; } .btn-model-light:hover { - background-color: #282572; + background-color: #598f39; color: rgb(242, 242, 241); -} \ No newline at end of file +} From fa04b2a5758513086c26d6c429dc043ae82a1c2c Mon Sep 17 00:00:00 2001 From: Vincent Fazio Date: Wed, 4 Sep 2024 11:27:18 +1000 Subject: [PATCH 3/3] Update launch button colours --- .../modules/provider-card/providercard.component.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/src/app/shared/modules/provider-card/providercard.component.scss b/ui/src/app/shared/modules/provider-card/providercard.component.scss index a10186e..198e7f2 100644 --- a/ui/src/app/shared/modules/provider-card/providercard.component.scss +++ b/ui/src/app/shared/modules/provider-card/providercard.component.scss @@ -9,12 +9,12 @@ } .btn-model-light { - border-color: #282572; - color: #282572; + border-color: #598f39; + color: #598f39; } .btn-model-light:hover { - background-color: #282572; + background-color: #598f39; color: rgb(242, 242, 241); }