🎨 [Frontend] Book a call: select a topic first

services/static-webserver/client/source/class/osparc/auth/ui/RequestAccount.js

@@ -144,50 +144,8 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
         case "s4lacad":
         case "s4ldesktopacad": {
           const application = new qx.ui.form.SelectBox();
-          [{
-            id: "other",
-            label: "Other"
-          }, {
-            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({
+          osparc.product.Utils.S4L_TOPICS.forEach(topic => {
+            const lItem = new qx.ui.form.ListItem(topic.label, null, topic.id).set({
               rich: true
             });
             application.add(lItem);

services/static-webserver/client/source/class/osparc/desktop/organizations/MembersList.js

@@ -137,8 +137,7 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
 
     __getMembersList: function() {
       const membersUIList = new qx.ui.form.List().set({
-        decorator: "no-border",
-        spacing: 3,
+        appearance: "listing",
         width: 150
       });
 
@@ -157,6 +156,9 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
           ctrl.bindProperty("showOptions", "showOptions", null, item, id);
         },
         configureItem: item => {
+          item.set({
+            cursor: "default",
+          });
           item.subscribeToFilterGroup("organizationMembersList");
           item.getChildControl("thumbnail").setDecorator("circled");
           item.addListener("promoteToMember", e => {

services/static-webserver/client/source/class/osparc/desktop/organizations/OrganizationDetails.js

@@ -33,6 +33,24 @@ qx.Class.define("osparc.desktop.organizations.OrganizationDetails", {
     "backToOrganizations": "qx.event.type.Event"
   },
 
+  statics: {
+    createTabPage: function(label, icon) {
+      const tabPage = new qx.ui.tabview.Page().set({
+        layout: new qx.ui.layout.VBox(),
+      });
+      if (label) {
+        tabPage.setLabel(label);
+      }
+      if (icon) {
+        tabPage.setIcon(icon);
+      }
+      tabPage.getChildControl("button").set({
+        font: "text-13"
+      });
+      return tabPage;
+    },
+  },
+
   members: {
     __orgModel: null,
     __titleLayout: null,
@@ -88,6 +106,10 @@ qx.Class.define("osparc.desktop.organizations.OrganizationDetails", {
         this.__titleLayout.remove(this.__organizationListItem);
       }
       const organizationListItem = this.__organizationListItem = new osparc.ui.list.OrganizationListItem();
+      organizationListItem.set({
+        cursor: "default",
+        backgroundColor: null,
+      });
       organizationListItem.getChildControl("options").exclude();
       organizationListItem.setShowDeleteButton(false);
       organizationListItem.addListener("openEditOrganization", () => this.__openEditOrganization());
@@ -126,28 +148,12 @@ qx.Class.define("osparc.desktop.organizations.OrganizationDetails", {
         });
     },
 
-    __createTabPage: function(label, icon) {
-      const tabPage = new qx.ui.tabview.Page().set({
-        layout: new qx.ui.layout.VBox()
-      });
-      if (label) {
-        tabPage.setLabel(label);
-      }
-      if (icon) {
-        tabPage.setIcon(icon);
-      }
-      tabPage.getChildControl("button").set({
-        font: "text-13"
-      });
-      return tabPage;
-    },
-
     __getTabs: function() {
       const tabView = new qx.ui.tabview.TabView().set({
         contentPadding: 10
       });
 
-      const membersListPage = this.__createTabPage(this.tr("Members"), "@FontAwesome5Solid/users/14");
+      const membersListPage = this.self().createTabPage(this.tr("Members"), "@FontAwesome5Solid/users/14");
       const membersList = this.__membersList = new osparc.desktop.organizations.MembersList();
       membersListPage.add(membersList, {
         flex: 1
@@ -158,14 +164,14 @@ qx.Class.define("osparc.desktop.organizations.OrganizationDetails", {
         plural: true,
         firstUpperCase: true
       });
-      const templatesListPage = this.__createTabPage(templatesText, "@FontAwesome5Solid/copy/14");
+      const templatesListPage = this.self().createTabPage(templatesText, "@FontAwesome5Solid/copy/14");
       const templatesList = this.__templatesList = new osparc.desktop.organizations.TutorialsList();
       templatesListPage.add(templatesList, {
         flex: 1
       });
       tabView.add(templatesListPage);
 
-      const servicesListPage = this.__createTabPage(this.tr("Services"), "@FontAwesome5Solid/cogs/14");
+      const servicesListPage = this.self().createTabPage(this.tr("Services"), "@FontAwesome5Solid/cogs/14");
       const servicesList = this.__servicesList = new osparc.desktop.organizations.ServicesList();
       servicesListPage.add(servicesList, {
         flex: 1

services/static-webserver/client/source/class/osparc/desktop/organizations/OrganizationsList.js

@@ -126,10 +126,9 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
 
     __getOrganizationsList: function() {
       const orgsUIList = this.__orgsUIList = new qx.ui.form.List().set({
-        decorator: "no-border",
-        spacing: 3,
+        appearance: "listing",
         height: 150,
-        width: 150
+        width: 150,
       });
       osparc.utils.Utils.setIdToWidget(orgsUIList, "organizationsList");
       orgsUIList.addListener("changeSelection", e => this.__organizationSelected(e.getData()), this);
@@ -170,6 +169,7 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
               item.set({
                 minHeight: 1,
                 maxHeight: 1,
+                backgroundColor: "transparent",
                 decorator: "separator-strong",
               });
             }

services/static-webserver/client/source/class/osparc/desktop/organizations/ServicesList.js

@@ -63,8 +63,7 @@ qx.Class.define("osparc.desktop.organizations.ServicesList", {
 
     __getServicesList: function() {
       const servicesUIList = new qx.ui.form.List().set({
-        decorator: "no-border",
-        spacing: 3
+        appearance: "listing",
       });
 
       const servicesModel = this.__servicesModel = new qx.data.Array();
@@ -84,6 +83,9 @@ qx.Class.define("osparc.desktop.organizations.ServicesList", {
           }, item, id);
         },
         configureItem: item => {
+          item.set({
+            cursor: "default",
+          });
           item.subscribeToFilterGroup("organizationServicesList");
           item.addListener("openMoreInfo", e => {
             const serviceKey = e.getData()["key"];

services/static-webserver/client/source/class/osparc/desktop/organizations/TutorialsList.js

@@ -63,8 +63,7 @@ qx.Class.define("osparc.desktop.organizations.TutorialsList", {
 
     __getTutorialsList: function() {
       const templatesUIList = new qx.ui.form.List().set({
-        decorator: "no-border",
-        spacing: 3
+        appearance: "listing",
       });
 
       const templatesModel = this.__tutorialsModel = new qx.data.Array();
@@ -83,6 +82,9 @@ qx.Class.define("osparc.desktop.organizations.TutorialsList", {
           }, item, id);
         },
         configureItem: item => {
+          item.set({
+            cursor: "default",
+          });
           item.subscribeToFilterGroup("organizationTutorialsList");
           item.addListener("openMoreInfo", e => {
             const templateId = e.getData()["key"];

services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethods.js

@@ -195,6 +195,9 @@ qx.Class.define("osparc.desktop.paymentMethods.PaymentMethods", {
           ctrl.bindProperty("expirationYear", "expirationYear", null, item, id);
         },
         configureItem: item => {
+          item.set({
+            cursor: "default",
+          });
           item.addListener("openPaymentMethodDetails", e => this.__openPaymentMethodDetails(e.getData()));
           item.addListener("deletePaymentMethod", e => this.__deletePaymentMethod(e.getData()));
         }

services/static-webserver/client/source/class/osparc/desktop/wallets/MembersList.js

@@ -124,8 +124,7 @@ qx.Class.define("osparc.desktop.wallets.MembersList", {
 
     __getMembersList: function() {
       const membersUIList = new qx.ui.form.List().set({
-        decorator: "no-border",
-        spacing: 3,
+        appearance: "listing",
         width: 150
       });
 
@@ -145,6 +144,9 @@ qx.Class.define("osparc.desktop.wallets.MembersList", {
           ctrl.bindProperty("showOptions", "showOptions", null, item, id);
         },
         configureItem: item => {
+          item.set({
+            cursor: "default",
+          });
           item.subscribeToFilterGroup("walletMembersList");
           item.getChildControl("thumbnail").setDecorator("circled");
           item.addListener("promoteToAccountant", e => {

services/static-webserver/client/source/class/osparc/desktop/wallets/WalletListItem.js

@@ -29,6 +29,11 @@ qx.Class.define("osparc.desktop.wallets.WalletListItem", {
     layout.setColumnAlign(creditsCol, "right", "middle");
 
     this.__buildLayout();
+
+    this.set({
+      backgroundColor: "transparent",
+      cursor: "default",
+    });
   },
 
   properties: {

services/static-webserver/client/source/class/osparc/desktop/wallets/WalletsList.js

@@ -90,9 +90,7 @@ qx.Class.define("osparc.desktop.wallets.WalletsList", {
 
     __createWalletsList: function(widgetId) {
       const walletsUIList = new qx.ui.form.List().set({
-        decorator: "no-border",
-        spacing: 3,
-        backgroundColor: "transparent",
+        appearance: "listing",
         height: null,
         focusable: false
       });
@@ -118,7 +116,6 @@ qx.Class.define("osparc.desktop.wallets.WalletsList", {
         },
         configureItem: item => {
           item.subscribeToFilterGroup("walletsList");
-
           item.addListener("openEditWallet", e => this.__openEditWallet(e.getData()));
           item.addListener("openShareWallet", e => this.__walletSelected(e.getData()));
           item.addListener("buyCredits", e => this.fireDataEvent("buyCredits", e.getData()));

services/static-webserver/client/source/class/osparc/pricing/Plans.js

@@ -54,8 +54,7 @@ qx.Class.define("osparc.pricing.Plans", {
           break;
         case "pricing-plans-list":
           control = new qx.ui.form.List().set({
-            decorator: "no-border",
-            spacing: 3
+            appearance: "listing",
           });
           control.addListener("changeSelection", e => {
             const selection = e.getData();

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

@@ -450,5 +450,55 @@ qx.Class.define("osparc.product.Utils", {
     groupServices: function() {
       return Boolean(osparc.store.Products.getInstance().getGroupedServicesUiConfig());
     },
+
+    isBookACallEnabled: function() {
+      return osparc.utils.Utils.isDevelopmentPlatform();
+    },
+
+    S4L_TOPICS: [
+      {
+        id: "other",
+        label: "Other"
+      }, {
+        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"
+      }
+    ],
   }
 });

services/static-webserver/client/source/class/osparc/share/Collaborators.js

@@ -329,11 +329,9 @@ qx.Class.define("osparc.share.Collaborators", {
       vBox.add(header);
 
       const collaboratorsUIList = new qx.ui.form.List().set({
-        decorator: "no-border",
-        spacing: 3,
+        appearance: "listing",
         width: 150,
         padding: 0,
-        backgroundColor: "transparent",
       });
 
       const collaboratorsModel = this.__collaboratorsModel = new qx.data.Array();
@@ -356,6 +354,9 @@ qx.Class.define("osparc.share.Collaborators", {
           }, item, id);
         },
         configureItem: item => {
+          item.set({
+            cursor: "default",
+          });
           item.getChildControl("thumbnail").setDecorator("circled");
           item.addListener("promoteToEditor", e => {
             const orgMember = e.getData();
@@ -402,6 +403,7 @@ qx.Class.define("osparc.share.Collaborators", {
               item.set({
                 minHeight: 1,
                 maxHeight: 1,
+                backgroundColor: "transparent",
                 decorator: "separator-strong",
               });
             }