reuse code

Author: odeimaiz

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

@@ -39,7 +39,9 @@ qx.Class.define("osparc.desktop.preferences.pages.ConfirmationsPage", {
   members: {
     __createConfirmationsSettings: function() {
       // layout
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Ask for confirmation for the following actions:"));
+      const label = new qx.ui.basic.Label(this.tr("Ask for confirmation for the following actions:")).set({
+        font: "text-13",
+      });
       this._add(label);
 
       this._add(new qx.ui.core.Spacer(null, 10));

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

@@ -21,7 +21,9 @@ qx.Class.define("osparc.desktop.preferences.pages.TagsPage", {
     const msg = this.tr("\
     Tags help you organize the ") + studiesLabel + this.tr(" in the Dashboard by categorizing topics, making it easier to search and filter. \
     Once the tags are created, they can be assigned to the ") + studyLabel + this.tr("  via 'More options...' on the ") + studyLabel + this.tr(" cards.");
-    const intro = osparc.ui.window.TabbedView.createHelpLabel(msg);
+    const intro = new qx.ui.basic.Label(msg).set({
+      font: "text-13",
+    });
     this._add(intro);
 
     this.__renderLayout();

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

@@ -43,12 +43,8 @@ qx.Class.define("osparc.desktop.preferences.pages.TokensPage", {
 
     __createAPIKeysSection: function() {
       // layout
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("API Keys"));
-
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr(
-        "List API keys associated to your account."
-      ));
-      box.add(label);
+      const box = new osparc.widget.SectionBox(this.tr("API Keys"));
+      box.addHelper(this.tr("List API keys associated to your account."));
 
       const apiKeysList = this.__apiKeysList = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
       box.add(apiKeysList);
@@ -173,10 +169,8 @@ qx.Class.define("osparc.desktop.preferences.pages.TokensPage", {
 
     __createTokensSection: function() {
       // layout
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("API Tokens for External Services"));
-
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Provide the API tokens needed to access external services."));
-      box.add(label);
+      const box = new osparc.widget.SectionBox(this.tr("API Tokens for External Services"));
+      box.addHelper(this.tr("Provide the API tokens needed to access external services."));
 
       const validTokensGB = this.__validTokensGB = osparc.ui.window.TabbedView.createSectionBox(this.tr("Current Tokens"));
       box.add(validTokensGB);

services/static-webserver/client/source/class/osparc/tester/Statics.js

@@ -23,7 +23,7 @@ qx.Class.define("osparc.tester.Statics", {
       let control;
       switch (id) {
         case "statics-container":
-          control = osparc.ui.window.TabbedView.createSectionBox(this.tr("Statics"));
+          control = new osparc.widget.SectionBox(this.tr("Statics"));
           this._add(control, {
             flex: 1
           });
@@ -44,7 +44,7 @@ qx.Class.define("osparc.tester.Statics", {
           break;
         }
         case "local-storage-container":
-          control = osparc.ui.window.TabbedView.createSectionBox(this.tr("Local Storage"));
+          control = new osparc.widget.SectionBox(this.tr("Local Storage"));
           this._add(control);
           break;
         case "local-storage-content": {

services/static-webserver/client/source/class/osparc/ui/window/TabbedView.js

@@ -47,19 +47,6 @@ qx.Class.define("osparc.ui.window.TabbedView", {
       box.setLayout(new qx.ui.layout.VBox(10));
       return box;
     },
-
-    /**
-     * Common layout for tooltip label
-     */
-    createHelpLabel: function(message=null, font="text-13") {
-      const label = new qx.ui.basic.Label().set({
-        value: message,
-        alignX: "left",
-        rich: true,
-        font: font
-      });
-      return label;
-    }
   },
 
   members: {