🎨 Study home page and more improvements

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

@@ -29,15 +29,27 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
   },
 
   statics: {
+    getZoomLabel: function(maximize) {
+      return maximize ? "Restore" : "Maximize";
+    },
+
     getZoomIcon: function(maximize) {
       const iconURL = maximize ? "window-restore" : "window-maximize";
-      return osparc.theme.common.Image.URLS[iconURL]+"/20";
+      return osparc.theme.common.Image.URLS[iconURL] + "/20";
     },
 
     getMaximizeWidgetId: function(maximize) {
       return maximize ? "restoreBtn" : "maximizeBtn";
     },
 
+    createToolbarButton: function() {
+      return new qx.ui.form.Button().set({
+        zIndex: 20,
+        backgroundColor: "transparent",
+        decorator: null
+      });
+    },
+
     HIDDEN_TOP: -10000
   },
 
@@ -69,7 +81,7 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
   members: {
     __iframe: null,
     __syncScheduled: null,
-    __restartButton: null,
+    __reloadButton: null,
     __zoomButton: null,
 
     // override
@@ -85,27 +97,25 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
       });
       const iframeEl = this._getIframeElement();
       iframeEl.setAttribute("allow", "clipboard-write");
-      const restartButton = this.__restartButton = new qx.ui.form.Button(null, "@FontAwesome5Solid/redo-alt/14").set({
-        zIndex: 20,
+      const reloadButton = this.__reloadButton = this.self().createToolbarButton().set({
+        label: this.tr("Reload"),
+        icon: "@FontAwesome5Solid/redo-alt/14",
         paddingLeft: 8,
         paddingRight: 4,
         paddingTop: 6,
         paddingBottom: 6,
-        backgroundColor: "transparent",
-        decorator: null
+        gap: 10
       });
-      restartButton.addListener("execute", e => {
+      reloadButton.addListener("execute", e => {
         this.fireEvent("restart");
       }, this);
-      osparc.utils.Utils.setIdToWidget(restartButton, "iFrameRestartBtn");
-      appRoot.add(restartButton, {
+      osparc.utils.Utils.setIdToWidget(reloadButton, "iFrameRestartBtn");
+      appRoot.add(reloadButton, {
         top: this.self().HIDDEN_TOP
       });
-      const zoomButton = this.__zoomButton = new qx.ui.form.Button(null).set({
-        icon: this.self().getZoomIcon(false),
-        zIndex: 20,
-        backgroundColor: "transparent",
-        decorator: null
+      const zoomButton = this.__zoomButton = this.self().createToolbarButton().set({
+        label: this.self().getZoomLabel(false),
+        icon: this.self().getZoomIcon(false)
       });
       osparc.utils.Utils.setIdToWidget(zoomButton, this.self().getMaximizeWidgetId(false));
       appRoot.add(zoomButton, {
@@ -122,7 +132,7 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
         iframe.setLayoutProperties({
           top: this.self().HIDDEN_TOP
         });
-        restartButton.setLayoutProperties({
+        reloadButton.setLayoutProperties({
           top: this.self().HIDDEN_TOP
         });
         zoomButton.setLayoutProperties({
@@ -159,7 +169,10 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
         this.removeState("maximized");
       }
       const actionButton = this.__zoomButton;
-      actionButton.setIcon(this.self().getZoomIcon(maximize));
+      actionButton.set({
+        label: this.self().getZoomLabel(maximize),
+        icon: this.self().getZoomIcon(maximize)
+      });
       osparc.utils.Utils.setIdToWidget(actionButton, this.self().getMaximizeWidgetId(maximize));
       qx.event.message.Bus.getInstance().dispatchByName("maximizeIframe", this.hasState("maximized"));
     },
@@ -187,16 +200,17 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
           height: divSize.height - this.getToolbarHeight()
         });
 
-        this.__restartButton.setLayoutProperties({
+        const rightOffest = this.hasState("maximized") ? 90 : 100;
+        this.__reloadButton.setLayoutProperties({
           top: (divPos.top - iframeParentPos.top),
-          right: (iframeParentPos.right - iframeParentPos.left - divPos.right) + 35
+          right: (iframeParentPos.right - iframeParentPos.left - divPos.right) + rightOffest
         });
         this.__zoomButton.setLayoutProperties({
           top: (divPos.top - iframeParentPos.top),
           right: (iframeParentPos.right - iframeParentPos.left - divPos.right)
         });
 
-        this.__restartButton.setVisibility(this.isShowToolbar() ? "visible" : "excluded");
+        this.__reloadButton.setVisibility(this.isShowToolbar() ? "visible" : "excluded");
         this.__zoomButton.setVisibility(this.isShowToolbar() ? "visible" : "excluded");
       }, 0);
     },

services/static-webserver/client/source/class/osparc/dashboard/GridButtonNew.js

@@ -48,7 +48,9 @@ qx.Class.define("osparc.dashboard.GridButtonNew", {
   members: {
     _buildLayout: function() {
       const title = this.getChildControl("title");
-      title.setValue(this.tr("Empty Study"));
+      title.setValue(this.tr("Empty") + " " + osparc.product.Utils.getStudyAlias({
+        firstUpperCase: true
+      }));
 
       const desc = this.getChildControl("subtitle-text");
       desc.setValue(this.tr("Start with an empty study").toString());

services/static-webserver/client/source/class/osparc/dashboard/ListButtonNew.js

@@ -45,7 +45,9 @@ qx.Class.define("osparc.dashboard.ListButtonNew", {
   members: {
     _buildLayout: function() {
       const title = this.getChildControl("title");
-      title.setValue(this.tr("Empty Study"));
+      title.setValue(this.tr("Empty") + " " + osparc.product.Utils.getStudyAlias({
+        firstUpperCase: true
+      }));
 
       const desc = this.getChildControl("description");
       desc.setValue(this.tr("Start with an empty study").toString());

services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js

@@ -440,21 +440,21 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     __addNewStudyButtons: function() {
       switch (osparc.product.Utils.getProductName()) {
         case "osparc":
-          this.__addNewStudyButton();
+          this.__addEmptyStudyPlusButton();
           break;
         case "tis":
-          this.__addNewPlanButtons();
+          this.__addTIPPlusButtons();
           break;
         case "s4l":
-          this.__addNewS4LServiceButtons();
+          this.__addS4LPlusButtons();
           break;
         case "s4llite":
-          this.__addNewS4LLiteServiceButtons();
+          this.__addS4LLitePlusButtons();
           break;
       }
     },
 
-    __addNewStudyButton: function() {
+    __addEmptyStudyPlusButton: function() {
       const mode = this._resourcesContainer.getMode();
       const newStudyBtn = (mode === "grid") ? new osparc.dashboard.GridButtonNew() : new osparc.dashboard.ListButtonNew();
       newStudyBtn.setCardKey("new-study");
@@ -468,7 +468,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       this._resourcesContainer.addNonResourceCard(newStudyBtn);
     },
 
-    __addNewPlanButtons: function() {
+    __addTIPPlusButtons: function() {
       const mode = this._resourcesContainer.getMode();
       osparc.data.Resources.get("templates")
         .then(templates => {
@@ -511,8 +511,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       }
     },
 
-    __addNewS4LServiceButtons: function() {
-      this.__addNewStudyButton();
+    __addS4LPlusButtons: function() {
       const store = osparc.store.Store.getInstance();
       store.getAllServices()
         .then(services => {
@@ -524,7 +523,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
         });
     },
 
-    __addNewS4LLiteServiceButtons: function() {
+    __addS4LLitePlusButtons: function() {
       const store = osparc.store.Store.getInstance();
       store.getAllServices()
         .then(services => {

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

@@ -25,18 +25,26 @@ qx.Class.define("osparc.info.CommentUI", {
   construct: function(comment) {
     this.base(arguments);
 
-    const layout = new qx.ui.layout.Grid(8, 5);
-    layout.setColumnWidth(0, 32);
-    layout.setColumnFlex(1, 1);
+    this.__comment = comment;
+
+    const isMyComment = this.__isMyComment();
+    const layout = new qx.ui.layout.Grid(12, 5);
+    layout.setColumnWidth(isMyComment ? 2 : 0, 32); // thumbnail
+    layout.setColumnFlex(isMyComment ? 0 : 2, 1); // message content
+    layout.setColumnAlign(isMyComment ? 0 : 2, isMyComment ? "right" : "left", "top"); // message content
     this._setLayout(layout);
     this.setPadding(5);
 
-    this.__comment = comment;
-
     this.__buildLayout();
   },
 
   members: {
+    __comment: null,
+
+    __isMyComment: function() {
+      return this.__comment && osparc.auth.Data.getInstance().getUserId() === this.__comment["user_id"];
+    },
+
     _createChildControlImpl: function(id) {
       let control;
       switch (id) {
@@ -56,7 +64,7 @@ qx.Class.define("osparc.info.CommentUI", {
           });
           this._add(control, {
             row: 0,
-            column: 0,
+            column: this.__isMyComment() ? 2 : 0,
             rowSpan: 2
           });
           break;
@@ -71,11 +79,11 @@ qx.Class.define("osparc.info.CommentUI", {
           break;
         case "last-updated":
           control = new qx.ui.basic.Label().set({
-            font: "text-13"
+            font: "text-12"
           });
           this._add(control, {
-            row: 0,
-            column: 2
+            row: 1,
+            column: 1
           });
           break;
         case "comment-content":
@@ -85,9 +93,9 @@ qx.Class.define("osparc.info.CommentUI", {
             wrap: true
           });
           this._add(control, {
-            row: 1,
-            column: 1,
-            colSpan: 2
+            row: 0,
+            column: this.__isMyComment() ? 0 : 2,
+            rowSpan: 2
           });
           break;
       }

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

@@ -63,14 +63,13 @@ qx.Class.define("osparc.info.MergedLarge", {
 
       const extraInfo = this.__extraInfo();
       const extraInfoLayout = this.__createExtraInfo(extraInfo);
-      this._add(extraInfoLayout);
 
       const bounds = this.getBounds();
       const offset = 30;
       const widgetWidth = bounds ? bounds.width - offset : 500 - offset;
       let thumbnailWidth = widgetWidth - 2 * osparc.info.CardLarge.PADDING;
       const maxThumbnailHeight = extraInfo.length*20;
-      const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(3).set({
+      const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
         alignX: "center"
       }));
       hBox.add(extraInfoLayout);
@@ -218,7 +217,7 @@ qx.Class.define("osparc.info.MergedLarge", {
     },
 
     __createExtraInfo: function(extraInfo) {
-      const moreInfo = osparc.info.StudyUtils.createExtraInfoGrid(extraInfo).set({
+      const moreInfo = osparc.info.StudyUtils.createExtraInfoVBox(extraInfo).set({
         width: osparc.info.CardLarge.EXTRA_INFO_WIDTH
       });
 
@@ -286,7 +285,20 @@ qx.Class.define("osparc.info.MergedLarge", {
 
     __createDescription: function() {
       const maxHeight = 400;
-      return osparc.info.StudyUtils.createDescription(this.getStudy(), maxHeight);
+      const descriptionLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({
+        alignY: "middle"
+      }));
+
+      const label = new qx.ui.basic.Label(qx.locale.Manager.tr("Description")).set({
+        font: "text-13"
+      });
+      descriptionLayout.add(label);
+
+      const description = osparc.info.StudyUtils.createDescriptionMD(this.getStudy(), maxHeight);
+      description.setValue(this.getStudy().getDescription());
+      descriptionLayout.add(description);
+
+      return descriptionLayout;
     },
 
     __createResources: function() {

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

@@ -202,7 +202,7 @@ qx.Class.define("osparc.info.ServiceLarge", {
         label: this.tr("ACCESS RIGHTS"),
         view: this.__createAccessRights(),
         action: {
-          button: osparc.utils.Utils.getViewButton(),
+          button: osparc.utils.Utils.getEditButton(),
           callback: this.isOpenOptions() ? this.__openAccessRights : "openAccessRights",
           ctx: this
         }
@@ -216,7 +216,7 @@ qx.Class.define("osparc.info.ServiceLarge", {
           label: this.tr("CLASSIFIERS"),
           view: this.__createClassifiers(),
           action: {
-            button: osparc.utils.Utils.getViewButton(),
+            button: osparc.utils.Utils.getEditButton(),
             callback: this.isOpenOptions() ? this.__openClassifiers : "openClassifiers",
             ctx: this
           }
@@ -232,7 +232,7 @@ qx.Class.define("osparc.info.ServiceLarge", {
           label: this.tr("QUAILITY"),
           view: this.__createQuality(),
           action: {
-            button: osparc.utils.Utils.getViewButton(),
+            button: osparc.utils.Utils.getEditButton(),
             callback: this.isOpenOptions() ? this.__openQuality : "openQuality",
             ctx: this
           }
@@ -255,7 +255,7 @@ qx.Class.define("osparc.info.ServiceLarge", {
     },
 
     __createExtraInfo: function(extraInfo) {
-      const moreInfo = osparc.info.ServiceUtils.createExtraInfo(extraInfo).set({
+      const moreInfo = osparc.info.ServiceUtils.createExtraInfoVBox(extraInfo).set({
         width: osparc.info.CardLarge.EXTRA_INFO_WIDTH
       });
       return moreInfo;

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

@@ -273,7 +273,7 @@ qx.Class.define("osparc.info.ServiceUtils", {
       });
     },
 
-    createExtraInfo: function(extraInfos) {
+    createExtraInfoVBox: function(extraInfos) {
       const grid = new qx.ui.layout.Grid(8, 5);
       grid.setColumnAlign(0, "right", "middle");
       grid.setColumnAlign(1, "left", "middle");