grouped sections

Author: odeimaiz

services/static-webserver/client/source/class/osparc/support/HomePage.js

@@ -80,46 +80,52 @@ qx.Class.define("osparc.support.HomePage", {
           control.addListener("execute", () => this.fireEvent("openConversation"));
           this._add(control);
           break;
-        case "links-layout":
-          control = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
+        case "learning-box":
+          control = new osparc.widget.SectionBox(this.tr("Learning"));
+          this._add(control);
+          break;
+        case "references-box":
+          control = new osparc.widget.SectionBox(this.tr("References"));
           this._add(control);
           break;
       }
       return control || this.base(arguments, id);
     },
 
     __populateButtons: function() {
+      const learningBox = this.getChildControl("learning-box");
       const quickStartButton = osparc.store.Support.getQuickStartButton();
       if (quickStartButton) {
-        this.getChildControl("links-layout").add(quickStartButton);
+        learningBox.add(quickStartButton);
         this.self().decorateButton(quickStartButton);
       }
 
       const permissions = osparc.data.Permissions.getInstance();
       if (permissions.canDo("dashboard.templates.read")) {
         const tutorialsBtn = new qx.ui.form.Button(this.tr("Explore Tutorials"), "@FontAwesome5Solid/graduation-cap/14");
-        this.getChildControl("links-layout").add(tutorialsBtn);
+        learningBox.add(tutorialsBtn);
         this.self().decorateButton(tutorialsBtn);
       }
 
       const guidedToursButton = osparc.store.Support.getGuidedToursButton();
-      this.getChildControl("links-layout").add(guidedToursButton);
+      learningBox.add(guidedToursButton);
       this.self().decorateButton(guidedToursButton);
 
+      const referencesBox = this.getChildControl("references-box");
       const manualButtons = osparc.store.Support.getManualButtons();
       manualButtons.forEach(manualButton => {
-        this.getChildControl("links-layout").add(manualButton);
+        referencesBox.add(manualButton);
         this.self().decorateButton(manualButton);
       });
 
       const supportButtons = osparc.store.Support.getSupportButtons();
       supportButtons.forEach(supportButton => {
-        this.getChildControl("links-layout").add(supportButton);
+        referencesBox.add(supportButton);
         this.self().decorateButton(supportButton);
       });
 
       const releaseNotesButton = osparc.store.Support.getReleaseNotesButton();
-      this.getChildControl("links-layout").add(releaseNotesButton);
+      this._add(releaseNotesButton);
       this.self().decorateButton(releaseNotesButton);
     },
   }