refactor

Author: odeimaiz

services/static-webserver/client/source/class/osparc/info/StudyLarge.js

@@ -62,19 +62,10 @@ qx.Class.define("osparc.info.StudyLarge", {
 
       const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
 
-      const mainHBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
+      const infoElements = this.__infoElements();
+      const infoLayout = osparc.info.StudyUtils.infoElementsToLayout(infoElements);
 
-      const leftVBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
-      mainHBox.add(leftVBox, {
-        flex: 1
-      });
-
-      vBox.add(mainHBox);
-
-      const extraInfo = this.__extraInfo();
-      const extraInfoLayout = this.__createExtraInfo(extraInfo);
-
-      leftVBox.add(extraInfoLayout);
+      vBox.add(infoLayout);
 
       let text = osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + " Id";
       if (this.__isTemplate) {
@@ -87,7 +78,7 @@ qx.Class.define("osparc.info.StudyLarge", {
         allowGrowX: false
       });
       copyIdButton.addListener("execute", () => osparc.utils.Utils.copyTextToClipboard(this.getStudy().getUuid()));
-      leftVBox.add(copyIdButton);
+      vBox.add(copyIdButton);
 
       const scrollContainer = new qx.ui.container.Scroll();
       scrollContainer.add(vBox);
@@ -97,8 +88,8 @@ qx.Class.define("osparc.info.StudyLarge", {
       });
     },
 
-    __extraInfo: function() {
-      const extraInfo = {
+    __infoElements: function() {
+      const infoLayout = {
         "TITLE": {
           label: this.tr("Title:"),
           view: osparc.info.StudyUtils.createTitle(this.getStudy()),
@@ -166,7 +157,7 @@ qx.Class.define("osparc.info.StudyLarge", {
         this.getStudy().getQuality() &&
         osparc.metadata.Quality.isEnabled(this.getStudy().getQuality())
       ) {
-        extraInfo["QUALITY"] = {
+        infoLayout["QUALITY"] = {
           label: this.tr("Quality:"),
           view: osparc.info.StudyUtils.createQuality(this.getStudy()),
           action: {
@@ -178,7 +169,7 @@ qx.Class.define("osparc.info.StudyLarge", {
       }
 
       if (osparc.product.Utils.showClassifiers()) {
-        extraInfo["CLASSIFIERS"] = {
+        infoLayout["CLASSIFIERS"] = {
           label: this.tr("Classifiers:"),
           view: osparc.info.StudyUtils.createClassifiers(this.getStudy()),
           action: (this.getStudy().getClassifiers().length || this.__canIWrite()) ? {
@@ -192,18 +183,14 @@ qx.Class.define("osparc.info.StudyLarge", {
       if (!this.__isTemplate) {
         const pathLabel = new qx.ui.basic.Label();
         pathLabel.setValue(this.getStudy().getLocationString());
-        extraInfo["LOCATION"] = {
+        infoLayout["LOCATION"] = {
           label: this.tr("Location:"),
           view: pathLabel,
           action: null
         };
       }
 
-      return extraInfo;
-    },
-
-    __createExtraInfo: function(extraInfo) {
-      return osparc.info.StudyUtils.createExtraInfoGrid(extraInfo);
+      return infoLayout;
     },
 
     __createStudyId: function() {

services/static-webserver/client/source/class/osparc/info/StudyUtils.js

@@ -252,7 +252,7 @@ qx.Class.define("osparc.info.StudyUtils", {
       return titleLayout;
     },
 
-    createExtraInfoGrid: function(extraInfos) {
+    infoElementsToLayout: function(extraInfos) {
       const positions = {
         TITLE: {
           column: 0,
@@ -308,18 +308,15 @@ qx.Class.define("osparc.info.StudyUtils", {
         },
       };
 
-      const grid = new qx.ui.layout.Grid(15, 5);
+      const grid1 = new qx.ui.layout.Grid(15, 5);
+      grid1.setColumnAlign(0, "left", "top");
+      grid1.setColumnFlex(0, 1);
+      const mainInfoLayout = new qx.ui.container.Composite(grid1);
+
       const grid2 = new qx.ui.layout.Grid(15, 5);
-      grid.setColumnAlign(0, "left", "top");
-      const container = new qx.ui.container.Composite(new qx.ui.layout.VBox());
-      const moreInfo = new qx.ui.container.Composite(grid);
-      const otherInfo = new qx.ui.container.Composite(grid2);
-      grid.setColumnFlex(0, 1);
+      const extraInfoLayout = new qx.ui.container.Composite(grid2);
       grid2.setColumnFlex(0, 1);
 
-      const box = this.__createSectionBox(qx.locale.Manager.tr("Details"));
-      const box2 = this.__createSectionBox(qx.locale.Manager.tr("Meta details"));
-
       let row = 0;
       let row2 = 0;
       Object.keys(positions).forEach(key => {
@@ -335,7 +332,7 @@ qx.Class.define("osparc.info.StudyUtils", {
               });
             }
             titleLayout.add(extraInfo.view);
-            otherInfo.add(titleLayout, {
+            extraInfoLayout.add(titleLayout, {
               row: row2,
               column: gridInfo.column
             });
@@ -344,25 +341,30 @@ qx.Class.define("osparc.info.StudyUtils", {
             row2++;
           } else {
             const titleLayout = this.__titleWithEditLayout(extraInfo);
-            moreInfo.add(titleLayout, {
+            mainInfoLayout.add(titleLayout, {
               row,
               column: gridInfo.column
             });
             row++;
-            moreInfo.add(extraInfo.view, {
+            mainInfoLayout.add(extraInfo.view, {
               row,
               column: gridInfo.column
             });
             row++;
-            grid.setRowHeight(row, 5); // spacer
+            grid1.setRowHeight(row, 5); // spacer
             row++;
           }
         }
       });
 
-      box.add(moreInfo);
-      box2.add(otherInfo);
-      container.addAt(box, 0);
+
+      const container = new qx.ui.container.Composite(new qx.ui.layout.VBox());
+      const box1 = this.__createSectionBox(qx.locale.Manager.tr("Details"));
+      box1.add(mainInfoLayout);
+      container.addAt(box1, 0);
+
+      const box2 = this.__createSectionBox(qx.locale.Manager.tr("Meta details"));
+      box2.add(extraInfoLayout);
       container.addAt(box2, 1);
 
       return container;