addHelper

Author: odeimaiz

services/static-webserver/client/source/class/osparc/desktop/account/ProfilePage.js

@@ -337,9 +337,7 @@ qx.Class.define("osparc.desktop.account.ProfilePage", {
       const privacyModel = this.__userPrivacyModel = qx.data.marshal.Json.createModel(defaultModel, true);
 
       const box = this.self().createSectionBox(this.tr("Privacy"));
-
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Choose what others see."));
-      box.add(label);
+      box.addHelper(this.tr("Choose what others see."));
 
       const hideUserName = new qx.ui.form.CheckBox().set({
         value: defaultModel.hideUserName
@@ -453,9 +451,7 @@ qx.Class.define("osparc.desktop.account.ProfilePage", {
 
     __create2FASection: function() {
       const box = this.self().createSectionBox(this.tr("Two-Factor Authentication"));
-
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Set your preferred method to use for two-factor authentication when signing in:"));
-      box.add(label);
+      box.addHelper(this.tr("Set your preferred method to use for two-factor authentication when signing in:"));
 
       const form = new qx.ui.form.Form();
 
@@ -659,9 +655,7 @@ qx.Class.define("osparc.desktop.account.ProfilePage", {
     __createDeleteAccount: function() {
       // layout
       const box = this.self().createSectionBox(this.tr("Delete Account"));
-
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Request the deletion of your account."));
-      box.add(label);
+      box.addHelper(this.tr("Request the deletion of your account."));
 
       const deleteBtn = new qx.ui.form.Button(this.tr("Delete Account")).set({
         appearance: "danger-button",

services/static-webserver/client/source/class/osparc/desktop/preferences/pages/ConfirmationsPage.js

@@ -126,11 +126,7 @@ qx.Class.define("osparc.desktop.preferences.pages.ConfirmationsPage", {
     __createExperimentalSettings: function() {
       // layout
       const box = new osparc.widget.SectionBox("Experimental preferences");
-
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr(
-        "This is a list of experimental preferences"
-      ));
-      box.add(label);
+      box.addHelper(this.tr("This is a list of experimental preferences"));
 
       const preferencesSettings = osparc.Preferences.getInstance();
 

services/static-webserver/client/source/class/osparc/desktop/preferences/pages/GeneralPage.js

@@ -46,7 +46,7 @@ qx.Class.define("osparc.desktop.preferences.pages.GeneralPage", {
 
   members: {
     __addCreditsIndicatorSettings: function() {
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("Credits Indicator"));
+      const box = new osparc.widget.SectionBox(this.tr("Credits Indicator"));
 
       const form = new qx.ui.form.Form();
 
@@ -93,10 +93,9 @@ qx.Class.define("osparc.desktop.preferences.pages.GeneralPage", {
     },
 
     __addInactivitySetting: function() {
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("Automatic Shutdown of Idle Instances"));
+      const box = new osparc.widget.SectionBox(this.tr("Automatic Shutdown of Idle Instances"));
 
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Enter 0 to disable this function"), "text-13-italic");
-      box.add(label);
+      box.addHelper(this.tr("Enter 0 to disable this function"));
 
       const form = new qx.ui.form.Form();
       const inactivitySpinner = new qx.ui.form.Spinner().set({
@@ -118,7 +117,7 @@ qx.Class.define("osparc.desktop.preferences.pages.GeneralPage", {
     },
 
     __addJobConcurrencySetting: function() {
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("Job Concurrency"));
+      const box = new osparc.widget.SectionBox(this.tr("Job Concurrency"));
       const form = new qx.ui.form.Form();
       const jobConcurrencySpinner = new qx.ui.form.Spinner().set({
         minimum: 1,
@@ -136,9 +135,9 @@ qx.Class.define("osparc.desktop.preferences.pages.GeneralPage", {
     },
 
     __addLowDiskSpaceSetting: function() {
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("Low Disk Space Threshold"));
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Set the warning Threshold for Low Disk Space availability"), "text-13-italic");
-      box.add(label);
+      const box = new osparc.widget.SectionBox(this.tr("Low Disk Space Threshold"));
+      box.addHelper(this.tr("Set the warning Threshold for Low Disk Space availability"));
+
       const form = new qx.ui.form.Form();
       const diskUsageSpinner = new qx.ui.form.Spinner().set({
         minimum: 1,
@@ -157,10 +156,8 @@ qx.Class.define("osparc.desktop.preferences.pages.GeneralPage", {
     },
 
     __addS4LUserPrivacySettings: function() {
-      const box = osparc.ui.window.TabbedView.createSectionBox("Privacy Settings");
-
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Help us improve Sim4Life user experience"), "text-13-italic");
-      box.add(label);
+      const box = new osparc.widget.SectionBox("Privacy Settings");
+      box.addHelper(this.tr("Help us improve Sim4Life user experience"));
 
       const preferencesSettings = osparc.Preferences.getInstance();
 

services/static-webserver/client/source/class/osparc/widget/SectionBox.js

@@ -90,5 +90,13 @@ qx.Class.define("osparc.widget.SectionBox", {
       }
       return control || this.base(arguments, id);
     },
+
+    addHelper: function(message, font="text-13") {
+      const label = new qx.ui.basic.Label(message).set({
+        font,
+      });
+      this.add(label);
+      return label;
+    },
   }
 });