Skip to content

Commit

Permalink
🎨 [Frontend] TIP v3 Feedback (#5980)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Jun 25, 2024
1 parent ad25d00 commit 9d7e144
Show file tree
Hide file tree
Showing 14 changed files with 375 additions and 174 deletions.
2 changes: 1 addition & 1 deletion services/static-webserver/client/Manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"requires": {
"@qooxdoo/compiler": "^1.0.0-beta",
"@qooxdoo/framework": "^6.0.0-beta",
"ITISFoundation/qx-iconfont-fontawesome5": "^0.2.0",
"ITISFoundation/qx-iconfont-fontawesome5": "^1.0.0",
"ITISFoundation/qx-osparc-theme": "^0.5.6",
"qooxdoo/qxl.testtapper": "^0.4.3",
"qooxdoo/qxl.apiviewer": "^1.0.0-beta",
Expand Down
6 changes: 3 additions & 3 deletions services/static-webserver/client/qx-lock.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
"libraries": [
{
"library_name": "qx-iconfont-fontawesome5",
"library_version": "0.2.0",
"path": "qx_packages/ITISFoundation_qx-iconfont-fontawesome5_v0_2_0",
"library_version": "1.0.0",
"path": "qx_packages/ITISFoundation_qx-iconfont-fontawesome5_v1_0_0",
"uri": "ITISFoundation/qx-iconfont-fontawesome5",
"repo_name": "ITISFoundation/qx-iconfont-fontawesome5",
"repo_tag": "v0.2.0"
"repo_tag": "v1.0.0"
},
{
"library_name": "qx-osparc-theme",
Expand Down
22 changes: 22 additions & 0 deletions services/static-webserver/client/source/class/osparc/auth/ui/LoginView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,28 @@ qx.Class.define("osparc.auth.ui.LoginView", {
`;
const disclaimer = osparc.announcement.AnnouncementUIFactory.createLoginAnnouncement(this.tr("Disclaimer"), text);
this.add(disclaimer);

this.add(new qx.ui.core.Spacer(), {
flex: 1
});

const poweredByLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({
alignX: "center",
allowGrowX: false,
cursor: "pointer"
});
poweredByLayout.addListener("tap", () => window.open("https://sim4life.swiss/"));
const label = new qx.ui.basic.Label(this.tr("powered by"));
poweredByLayout.add(label);
const s4lLogo = new qx.ui.basic.Image("osparc/Sim4Life_full_logo_white.svg");
s4lLogo.set({
width: osparc.auth.LoginPage.LOGO_WIDTH/2,
height: osparc.auth.LoginPage.LOGO_HEIGHT/2,
scale: true,
alignX: "center"
});
poweredByLayout.add(s4lLogo);
this.add(poweredByLayout);
}
},

Expand Down
155 changes: 87 additions & 68 deletions services/static-webserver/client/source/class/osparc/auth/ui/RequestAccount.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,40 +52,48 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
});
this._form.add(lastName, this.tr("Last Name"), null, "lastName");


const email = new qx.ui.form.TextField().set({
required: true
});
if (
osparc.product.Utils.isProduct("s4lacad") ||
osparc.product.Utils.isProduct("s4ldesktopacad")
) {
this._form.add(email, this.tr("University Email"), qx.util.Validate.email(), "email");
} else {
this._form.add(email, this.tr("Email"), qx.util.Validate.email(), "email");
switch (osparc.product.Utils.getProductName()) {
case "s4l":
case "tis":
this._form.add(email, this.tr("Email"), qx.util.Validate.email(), "email");
break;
case "s4lacad":
case "s4ldesktopacad":
this._form.add(email, this.tr("University Email"), qx.util.Validate.email(), "email");
break;
}

const phone = new qx.ui.form.TextField();
this._form.add(phone, this.tr("Phone Number"), null, "phone");

if (
osparc.product.Utils.isProduct("s4lacad") ||
osparc.product.Utils.isProduct("s4ldesktopacad")
) {
const university = new qx.ui.form.TextField();
doubleSpaced.push(university);
this._form.add(university, this.tr("University"), null, "university");
} else {
const company = new qx.ui.form.TextField();
doubleSpaced.push(company);
this._form.add(company, this.tr("Company Name"), null, "company");

const organization = new qx.ui.form.TextField();
doubleSpaced.push(organization);
switch (osparc.product.Utils.getProductName()) {
case "s4l":
this._form.add(organization, this.tr("Company Name"), null, "company");
break;
case "s4lacad":
case "s4ldesktopacad":
this._form.add(organization, this.tr("University"), null, "university");
break;
case "tis":
this._form.add(organization, this.tr("Organization"), null, "organization");
break;
}


const address = new qx.ui.form.TextField().set({
required: true
});
doubleSpaced.push(address);
this._form.add(address, this.tr("Address"), null, "address");


const city = new qx.ui.form.TextField().set({
required: true
});
Expand All @@ -96,6 +104,7 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
});
this._form.add(postalCode, this.tr("Postal code"), null, "postalCode");


const country = new qx.ui.form.SelectBox().set({
required: true
});
Expand All @@ -117,58 +126,67 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
});
this._form.add(country, this.tr("Country"), null, "country");

const application = new qx.ui.form.SelectBox();
[{
id: "Antenna_Design_for_Wireless_Communication",
label: "Antenna Design for Wireless Communication"
}, {
id: "Bioelectronics,_Electroceuticals_and_Neuroprosthetics",
label: "Bioelectronics, Electroceuticals & Neuroprosthetics"
}, {
id: "Safety_and_Efficacy_Assessment",
label: "Safety & Efficacy Assessment"
}, {
id: "Exposure_and_Compliance",
label: "Exposure & Compliance"
}, {
id: "Focused_Ultrasound",
label: "Focused Ultrasound"
}, {
id: "In_Silico_Trials",
label: "In <i>Silico</i> Trials"
}, {
id: "Implant_Design",
label: "Implant Design"
}, {
id: "Magnetic_Resonance_Imaging",
label: "Magnetic Resonance Imaging"
}, {
id: "Neurostimulation",
label: "Neurostimulation"
}, {
id: "Personalized_Medicine",
label: "Personalized Medicine"
}, {
id: "Thermal_Therapies",
label: "Thermal Therapies"
}, {
id: "Wireless_Power_Transfer_Systems",
label: "Wireless Power Transfer Systems"
}, {
id: "Vascular_Flow_and_Perfusion",
label: "Vascular Flow & Perfusion"
}].forEach(appData => {
const lItem = new qx.ui.form.ListItem(appData.label, null, appData.id).set({
rich: true

if (
osparc.product.Utils.isProduct("s4l") ||
osparc.product.Utils.isProduct("s4lacad") ||
osparc.product.Utils.isProduct("s4ldesktopacad")
) {
const application = new qx.ui.form.SelectBox();
[{
id: "Antenna_Design_for_Wireless_Communication",
label: "Antenna Design for Wireless Communication"
}, {
id: "Bioelectronics,_Electroceuticals_and_Neuroprosthetics",
label: "Bioelectronics, Electroceuticals & Neuroprosthetics"
}, {
id: "Safety_and_Efficacy_Assessment",
label: "Safety & Efficacy Assessment"
}, {
id: "Exposure_and_Compliance",
label: "Exposure & Compliance"
}, {
id: "Focused_Ultrasound",
label: "Focused Ultrasound"
}, {
id: "In_Silico_Trials",
label: "In <i>Silico</i> Trials"
}, {
id: "Implant_Design",
label: "Implant Design"
}, {
id: "Magnetic_Resonance_Imaging",
label: "Magnetic Resonance Imaging"
}, {
id: "Neurostimulation",
label: "Neurostimulation"
}, {
id: "Personalized_Medicine",
label: "Personalized Medicine"
}, {
id: "Thermal_Therapies",
label: "Thermal Therapies"
}, {
id: "Wireless_Power_Transfer_Systems",
label: "Wireless Power Transfer Systems"
}, {
id: "Vascular_Flow_and_Perfusion",
label: "Vascular Flow & Perfusion"
}].forEach(appData => {
const lItem = new qx.ui.form.ListItem(appData.label, null, appData.id).set({
rich: true
});
application.add(lItem);
});
application.add(lItem);
});
doubleSpaced.push(application);
this._form.add(application, this.tr("Application"), null, "application");
doubleSpaced.push(application);
this._form.add(application, this.tr("Application"), null, "application");


const description = new qx.ui.form.TextField();
doubleSpaced.push(description);
this._form.add(description, this.tr("Description"), null, "description");
}

const description = new qx.ui.form.TextField();
doubleSpaced.push(description);
this._form.add(description, this.tr("Description"), null, "description");

const hear = new qx.ui.form.SelectBox();
[{
Expand All @@ -193,6 +211,7 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
doubleSpaced.push(hear);
this._form.add(hear, this.tr("How did you hear about us?"), null, "hear");


// accept links
// Privacy Policy link
let ppLink = osparc.CookiePolicy.getS4LPrivacyPolicyLink("our privacy policy");
Expand Down
3 changes: 2 additions & 1 deletion services/static-webserver/client/source/class/osparc/dashboard/GridButtonBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
SPACING: 15,
// TITLE_MAX_HEIGHT: 34, // two lines in Roboto
TITLE_MAX_HEIGHT: 40, // two lines in Manrope
ICON_SIZE: 50,
POS: {
TITLE: {
row: 0,
Expand Down Expand Up @@ -287,7 +288,7 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
// overridden
_applyIcon: function(value, old) {
if (value.includes("@FontAwesome5Solid/")) {
value += "50";
value += this.self().ICON_SIZE;
const image = this.getChildControl("icon").getChildControl("image");
image.set({
source: value
Expand Down
31 changes: 30 additions & 1 deletion services/static-webserver/client/source/class/osparc/dashboard/NewStudies.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,12 +140,41 @@ qx.Class.define("osparc.dashboard.NewStudies", {
},

__createCard: function(templateInfo) {
const newStudyClicked = () => this.fireDataEvent("newStudyClicked", templateInfo);

const title = templateInfo.title;
const desc = templateInfo.description;
const newPlanButton = new osparc.dashboard.GridButtonNew(title, desc);
newPlanButton.setCardKey(templateInfo.idToWidget);
osparc.utils.Utils.setIdToWidget(newPlanButton, templateInfo.idToWidget);
newPlanButton.addListener("execute", () => this.fireDataEvent("newStudyClicked", templateInfo))
if (templateInfo.billable) {
osparc.desktop.credits.Utils.setCreditsIconToButton(newPlanButton);
newPlanButton.addListener("execute", () => {
const store = osparc.store.Store.getInstance();
const credits = store.getContextWallet().getCreditsAvailable()
const preferencesSettings = osparc.Preferences.getInstance();
const warningThreshold = preferencesSettings.getCreditsWarningThreshold();
if (credits <= warningThreshold) {
const msg = this.tr("This Plan requires Credits to run Sim4Life powered simulations. You can top up in the Billing Center.");
const win = new osparc.ui.window.Confirmation(msg).set({
caption: this.tr("Credits required"),
confirmText: this.tr("Start, I'll get them later"),
confirmAction: "create"
});
win.center();
win.open();
win.addListener("close", () => {
if (win.getConfirmed()) {
this.fireDataEvent("newStudyClicked", templateInfo);
}
});
} else {
newStudyClicked();
}
});
} else {
newPlanButton.addListener("execute", () => newStudyClicked());
}
return newPlanButton;
},

Expand Down
Loading

0 comments on commit 9d7e144

Please sign in to comment.