Skip to content

Commit ae25f91

Browse files
odeimaizodeimaiz
authored
🎨 [Frontend] TIP v3 Feedback from 10.07 (#6049)
1 parent f31bfd8 commit ae25f91

File tree

13 files changed

+140
-100
lines changed

13 files changed

+140
-100
lines changed

‎services/static-webserver/client/source/class/osparc/dashboard/NewStudies.js

+1-35
Original file line numberDiff line numberDiff line change
@@ -147,41 +147,7 @@ qx.Class.define("osparc.dashboard.NewStudies", {
147147
const newPlanButton = new osparc.dashboard.GridButtonNew(title, desc);
148148
newPlanButton.setCardKey(templateInfo.idToWidget);
149149
osparc.utils.Utils.setIdToWidget(newPlanButton, templateInfo.idToWidget);
150-
if (templateInfo.billable) {
151-
// replace the plus button with the creditsImage
152-
const creditsImage = new osparc.desktop.credits.CreditsImage();
153-
creditsImage.getChildControl("image").set({
154-
width: 60,
155-
height: 60
156-
})
157-
newPlanButton.replaceIcon(creditsImage);
158-
159-
newPlanButton.addListener("execute", () => {
160-
const store = osparc.store.Store.getInstance();
161-
const credits = store.getContextWallet().getCreditsAvailable()
162-
const preferencesSettings = osparc.Preferences.getInstance();
163-
const warningThreshold = preferencesSettings.getCreditsWarningThreshold();
164-
if (credits <= warningThreshold) {
165-
const msg = this.tr("This Plan requires Credits to run Sim4Life powered simulations. You can top up in the Billing Center.");
166-
const win = new osparc.ui.window.Confirmation(msg).set({
167-
caption: this.tr("Credits required"),
168-
confirmText: this.tr("Start, I'll get them later"),
169-
confirmAction: "create"
170-
});
171-
win.center();
172-
win.open();
173-
win.addListener("close", () => {
174-
if (win.getConfirmed()) {
175-
this.fireDataEvent("newStudyClicked", templateInfo);
176-
}
177-
});
178-
} else {
179-
newStudyClicked();
180-
}
181-
});
182-
} else {
183-
newPlanButton.addListener("execute", () => newStudyClicked());
184-
}
150+
newPlanButton.addListener("execute", () => newStudyClicked());
185151
return newPlanButton;
186152
},
187153

‎services/static-webserver/client/source/class/osparc/desktop/credits/CreditsImage.js

+11-3
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,14 @@ qx.Class.define("osparc.desktop.credits.CreditsImage", {
2727
},
2828

2929
members: {
30+
__forceNullColor: null,
31+
3032
__updateWallet: function() {
3133
const store = osparc.store.Store.getInstance();
3234
const contextWallet = store.getContextWallet();
3335
if (contextWallet) {
36+
this.__forceNullColor = osparc.product.Utils.forceNullCreditsColor(contextWallet);
37+
3438
contextWallet.addListener("changeCreditsAvailable", this.__updateColor, this);
3539
this.__updateColor();
3640
}
@@ -40,9 +44,13 @@ qx.Class.define("osparc.desktop.credits.CreditsImage", {
4044
const store = osparc.store.Store.getInstance();
4145
const contextWallet = store.getContextWallet();
4246
if (contextWallet) {
43-
const credits = contextWallet.getCreditsAvailable();
44-
const creditsColorKeyword = osparc.desktop.credits.Utils.creditsToColor(credits, "strong-main");
45-
this.setImageColor(creditsColorKeyword);
47+
if (this.__forceNullColor) {
48+
this.setImageColor(null);
49+
} else {
50+
const credits = contextWallet.getCreditsAvailable();
51+
const creditsColorKeyword = osparc.desktop.credits.Utils.creditsToColor(credits, "strong-main");
52+
this.setImageColor(creditsColorKeyword);
53+
}
4654
}
4755
}
4856
}

‎services/static-webserver/client/source/class/osparc/navigation/UserMenuButton.js

+16-8
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ qx.Class.define("osparc.navigation.UserMenuButton", {
4949
store.addListener("changeContextWallet", () => this.__bindWalletToHalo());
5050

5151
const preferencesSettings = osparc.Preferences.getInstance();
52-
preferencesSettings.addListener("changeCreditsWarningThreshold", () => this.__updateHalloCredits());
52+
preferencesSettings.addListener("changeCreditsWarningThreshold", () => this.__updateHaloColor());
5353

5454
const userEmail = authData.getEmail() || "[email protected]";
5555
const icon = this.getChildControl("icon");
@@ -77,25 +77,33 @@ qx.Class.define("osparc.navigation.UserMenuButton", {
7777
},
7878

7979
members: {
80+
__forceNullColor: null,
81+
8082
__bindWalletToHalo: function() {
8183
const store = osparc.store.Store.getInstance();
8284
const contextWallet = store.getContextWallet();
8385
if (contextWallet) {
84-
this.__updateHalloCredits();
85-
contextWallet.addListener("changeCreditsAvailable", () => this.__updateHalloCredits());
86+
this.__forceNullColor = osparc.product.Utils.forceNullCreditsColor(contextWallet);
87+
88+
this.__updateHaloColor();
89+
contextWallet.addListener("changeCreditsAvailable", () => this.__updateHaloColor());
8690
}
8791
},
8892

89-
__updateHalloCredits: function() {
93+
__updateHaloColor: function() {
9094
const store = osparc.store.Store.getInstance();
9195
const contextWallet = store.getContextWallet();
9296
if (contextWallet) {
9397
const credits = contextWallet.getCreditsAvailable();
9498
if (credits !== null) {
95-
const progress = credits > 0 ? osparc.desktop.credits.Utils.normalizeCredits(credits) : 100; // make hallo red
96-
const creditsColor = osparc.desktop.credits.Utils.creditsToColor(credits, "strong-main");
97-
const color1 = qx.theme.manager.Color.getInstance().resolve(creditsColor);
98-
osparc.service.StatusUI.getStatusHalo(this, color1, progress);
99+
if (this.__forceNullColor) {
100+
osparc.service.StatusUI.getStatusHalo(this, null, 100);
101+
} else {
102+
const progress = credits > 0 ? osparc.desktop.credits.Utils.normalizeCredits(credits) : 100; // make halo red
103+
const creditsColor = osparc.desktop.credits.Utils.creditsToColor(credits, "strong-main");
104+
const color = qx.theme.manager.Color.getInstance().resolve(creditsColor);
105+
osparc.service.StatusUI.getStatusHalo(this, color, progress);
106+
}
99107
}
100108
}
101109
},

‎services/static-webserver/client/source/class/osparc/product/AboutProduct.js

+6-10
Original file line numberDiff line numberDiff line change
@@ -69,17 +69,16 @@ qx.Class.define("osparc.product.AboutProduct", {
6969
__buildS4LLayout: function() {
7070
osparc.store.Support.getLicenseURL()
7171
.then(licenseUrl => {
72-
const color = qx.theme.manager.Color.getInstance().resolve("text");
7372
const text = this.tr(`
7473
sim4life.io is a native implementation of the most advanced simulation platform, Sim4Life, in the cloud. \
7574
The platform empowers users to simulate, analyze, and predict complex, multifaceted, and dynamic biological interactions within the full anatomical complexity of the human body. \
7675
It provides the ability to set up and run complex simulations directly within any browser, utilizing cloud technology.
7776
<br><br>
7877
sim4life.io makes use of technologies developed by our research partner for the o<sup>2</sup>S<sup>2</sup>PARC platform, the IT’IS Foundation, and co-funded by the U.S. National Institutes of Health’s SPARC initiative.\
7978
<br><br>
80-
For more information about Sim4Life, please visit <a href='https://sim4life.swiss/' style='color: ${color}' target='_blank'>sim4life.swiss</a>.
79+
For more information about Sim4Life, please visit ${osparc.utils.Utils.createHTMLLink("sim4life.swiss", "https://sim4life.swiss/")}.
8180
<br><br>
82-
To review license agreements, click <a href=${licenseUrl} style='color: ${color}' target='_blank'>here</a>.
81+
To review license agreements, click ${osparc.utils.Utils.createHTMLLink("here", licenseUrl)}.
8382
`);
8483

8584
const label = osparc.product.quickStart.Utils.createLabel(text);
@@ -90,17 +89,16 @@ qx.Class.define("osparc.product.AboutProduct", {
9089
__buildS4LAcademicLayout: function() {
9190
osparc.store.Support.getLicenseURL()
9291
.then(licenseUrl => {
93-
const color = qx.theme.manager.Color.getInstance().resolve("text");
9492
const text = this.tr(`
9593
sim4life.science is a native implementation of the most advanced simulation platform, Sim4Life, in the cloud. \
9694
The platform empowers users to simulate, analyze, and predict complex, multifaceted, and dynamic biological interactions within the full anatomical complexity of the human body. \
9795
It provides the ability to set up and run complex simulations directly within any browser, utilizing cloud technology.
9896
<br><br>
9997
sim4life.science makes use of technologies developed by our research partner for the o<sup>2</sup>S<sup>2</sup>PARC platform, the IT’IS Foundation, and co-funded by the U.S. National Institutes of Health’s SPARC initiative.\
10098
<br><br>
101-
For more information about Sim4Life, please visit <a href='https://sim4life.swiss/' style='color: ${color}' target='_blank'>sim4life.swiss</a>.
99+
For more information about Sim4Life, please visit ${osparc.utils.Utils.createHTMLLink("sim4life.swiss", "href='https://sim4life.swiss/")}.
102100
<br><br>
103-
To review license agreements, click <a href=${licenseUrl} style='color: ${color}' target='_blank'>here</a>.
101+
To review license agreements, click ${osparc.utils.Utils.createHTMLLink("here", licenseUrl)}.
104102
`);
105103

106104
const label = osparc.product.quickStart.Utils.createLabel(text);
@@ -109,17 +107,15 @@ qx.Class.define("osparc.product.AboutProduct", {
109107
},
110108

111109
__buildS4LLiteLayout: function() {
112-
const color = qx.theme.manager.Color.getInstance().resolve("text");
113-
114110
// https://zurichmedtech.github.io/s4l-lite-manual/#/docs/what_is_s4l_lite
115111
const introText = "<i>S4L<sup>lite</sup></i> is a powerful web-based simulation platform that allows you to model and analyze real-world phenomena and to design complex technical devices in a validated environment. With its intuitive interface and advanced tools, <i>S4L<sup>lite</sup></i> makes it easy to develop your simulation project, wherever you are.";
116112

117113
const licenseUrl = "https://zurichmedtech.github.io/s4l-lite-manual/#/docs/licensing/copyright_Sim4Life";
118-
const licenseText = `Click <a href=${licenseUrl} style='color: ${color}' target='_blank'>here</a> to read the license agreements.`;
114+
const licenseText = `Click ${osparc.utils.Utils.createHTMLLink("here", licenseUrl)} to read the license agreements.`;
119115

120116
// more info ZMT website
121117
const moreInfoUrl = "https://zmt.swiss/";
122-
const moreInfoText = `For more information about <i>S4L<sup>lite</sup></i>, visit <a href=${moreInfoUrl} style='color: ${color}' target='_blank'>our website</a>.`;
118+
const moreInfoText = `For more information about <i>S4L<sup>lite</sup></i>, visit ${osparc.utils.Utils.createHTMLLink("our website", moreInfoUrl)}.`;
123119

124120
[
125121
introText,

‎services/static-webserver/client/source/class/osparc/product/Utils.js

+11
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,17 @@ qx.Class.define("osparc.product.Utils", {
184184
return logosPath;
185185
},
186186

187+
forceNullCreditsColor: function(wallet) {
188+
// TIP is a product that can be used for free, so allow making 0 credits scenario more friendly.
189+
if (osparc.product.Utils.isProduct("tis")) {
190+
// Ideally, check if there was ever a transaction. If not, keep the indicator gray.
191+
// Note: Since we can't fetch payments per wallet, for now rely on the available credits.
192+
const credits = wallet.getCreditsAvailable();
193+
return credits === 0;
194+
}
195+
return false;
196+
},
197+
187198
// All products except oSPARC
188199
hasIdlingTrackerEnabled: function() {
189200
const product = this.getProductName();

‎services/static-webserver/client/source/class/osparc/product/quickStart/SlidesBase.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,13 @@ qx.Class.define("osparc.product.quickStart.SlidesBase", {
102102
if (idx > -1 && idx < selectables.length) {
103103
this.__currentIdx = idx;
104104
this.__stack.setSelection([selectables[idx]]);
105-
this.__prevBtn.setEnabled(idx !== 0);
106-
this.__nextBtn.setEnabled(idx !== selectables.length-1);
105+
const firstSlide = (idx === 0);
106+
const lastSlide = (idx === selectables.length-1);
107+
this.__prevBtn.setEnabled(!firstSlide);
108+
this.__nextBtn.setEnabled(!lastSlide);
109+
this.set({
110+
showClose: lastSlide
111+
});
107112
}
108113
this.__slideCounter.removeAll();
109114
for (let i=0; i<selectables.length; i++) {

‎services/static-webserver/client/source/class/osparc/product/quickStart/s4l/Welcome.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -114,8 +114,8 @@ qx.Class.define("osparc.product.quickStart.s4l.Welcome", {
114114
});
115115
const manuals = osparc.store.Support.getManuals();
116116
if (manuals.length > 0) {
117-
const color = qx.theme.manager.Color.getInstance().resolve("text");
118-
docLink.setValue(`<a href=${manuals[0].url} style='color: ${color}' target='_blank'>Documentation</a>`);
117+
const link = osparc.utils.Utils.createHTMLLink("Documentation", manuals[0].url);
118+
docLink.setValue(link);
119119
docLink.show();
120120
}
121121
footerItems.push(docLink);
@@ -127,9 +127,8 @@ qx.Class.define("osparc.product.quickStart.s4l.Welcome", {
127127
});
128128
osparc.store.Support.getLicenseURL()
129129
.then(licenseUrl => {
130-
const color = qx.theme.manager.Color.getInstance().resolve("text");
131-
const textLink = `<a href=${licenseUrl} style='color: ${color}' target='_blank'>Licensing</a>`;
132-
licenseLink.setValue(textLink);
130+
const link = osparc.utils.Utils.createHTMLLink("Licensing", licenseUrl);
131+
licenseLink.setValue(link);
133132
licenseLink.show();
134133
});
135134
footerItems.push(licenseLink);

‎services/static-webserver/client/source/class/osparc/product/quickStart/s4lacad/Welcome.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -114,8 +114,8 @@ qx.Class.define("osparc.product.quickStart.s4lacad.Welcome", {
114114
});
115115
const manuals = osparc.store.Support.getManuals();
116116
if (manuals.length > 0) {
117-
const color = qx.theme.manager.Color.getInstance().resolve("text");
118-
docLink.setValue(`<a href=${manuals[0].url} style='color: ${color}' target='_blank'>Documentation</a>`);
117+
const link = osparc.utils.Utils.createHTMLLink("Documentation", manuals[0].url);
118+
docLink.setValue(link);
119119
docLink.show();
120120
}
121121
footerItems.push(docLink);
@@ -127,9 +127,8 @@ qx.Class.define("osparc.product.quickStart.s4lacad.Welcome", {
127127
});
128128
osparc.store.Support.getLicenseURL()
129129
.then(licenseUrl => {
130-
const color = qx.theme.manager.Color.getInstance().resolve("text");
131-
const textLink = `<a href=${licenseUrl} style='color: ${color}' target='_blank'>Licensing</a>`;
132-
licenseLink.setValue(textLink);
130+
const link = osparc.utils.Utils.createHTMLLink("Licensing", licenseUrl);
131+
licenseLink.setValue(link);
133132
licenseLink.show();
134133
});
135134
footerItems.push(licenseLink);

‎services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/Slides.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@ qx.Class.define("osparc.product.quickStart.s4llite.Slides", {
4242
});
4343
const manuals = osparc.store.Support.getManuals();
4444
if (manuals.length > 0) {
45-
const color = qx.theme.manager.Color.getInstance().resolve("text");
46-
docLink.setValue(`<a href=${manuals[0].url} style='color: ${color}' target='_blank'>Documentation</a>`);
45+
const link = osparc.utils.Utils.createHTMLLink("Documentation", manuals[0].url);
46+
docLink.setValue(link);
4747
docLink.show();
4848
}
4949
footerItems.push(docLink);
@@ -55,9 +55,8 @@ qx.Class.define("osparc.product.quickStart.s4llite.Slides", {
5555
});
5656
osparc.store.Support.getLicenseURL()
5757
.then(licenseUrl => {
58-
const color = qx.theme.manager.Color.getInstance().resolve("text");
59-
const textLink = `<a href=${licenseUrl} style='color: ${color}' target='_blank'>Licensing</a>`;
60-
licenseLink.setValue(textLink);
58+
const link = osparc.utils.Utils.createHTMLLink("Licensing", licenseUrl);
59+
licenseLink.setValue(link);
6160
licenseLink.show();
6261
});
6362
footerItems.push(licenseLink);

‎services/static-webserver/client/source/class/osparc/product/quickStart/ti/MoreInformation.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2024 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
qx.Class.define("osparc.product.quickStart.ti.MoreInformation", {
19+
extend: osparc.product.quickStart.SlideBase,
20+
21+
construct: function() {
22+
const title = this.tr("For more information:");
23+
this.base(arguments, title);
24+
},
25+
26+
members: {
27+
_populateCard: function() {
28+
osparc.product.quickStart.ti.Slides.footerLinks().forEach(footerItem => {
29+
this._add(footerItem);
30+
});
31+
}
32+
}
33+
});

0 commit comments

Comments
 (0)