Some enhancements and bug fixes

services/web/client/source/class/osparc/About.js

@@ -17,7 +17,7 @@
 ************************************************************************ */
 
 qx.Class.define("osparc.About", {
-  extend: qx.ui.window.Window,
+  extend: osparc.ui.window.Window,
   type: "singleton",
 
   construct: function() {
@@ -29,7 +29,8 @@ qx.Class.define("osparc.About", {
       showMinimize: false,
       resizable: false,
       centerOnAppear: true,
-      appearance: "service-window"
+      clickAwayClose: true,
+      modal: true
     });
     const closeBtn = this.getChildControl("close-button");
     osparc.utils.Utils.setIdToWidget(closeBtn, "aboutWindowCloseBtn");

services/web/client/source/class/osparc/component/export/Permissions.js

@@ -68,16 +68,16 @@ qx.Class.define("osparc.component.export.Permissions", {
     },
 
     createWindow: function(winText, shareResourceWidget) {
-      const window = new qx.ui.window.Window(winText).set({
-        appearance: "service-window",
+      const window = new osparc.ui.window.Window(winText).set({
         layout: new qx.ui.layout.Grow(),
         autoDestroy: true,
         contentPadding: 10,
         width: 400,
         height: 300,
         showMaximize: false,
         showMinimize: false,
-        modal: true
+        modal: true,
+        clickAwayClose: true
       });
       window.add(shareResourceWidget);
       window.center();
@@ -141,7 +141,9 @@ qx.Class.define("osparc.component.export.Permissions", {
       const collaboratorsUIList = new qx.ui.form.List().set({
         decorator: "no-border",
         spacing: 3,
-        width: 150
+        width: 150,
+        padding: 0,
+        backgroundColor: "material-button-background"
       });
 
       const collaboratorsModel = this.__collaboratorsModel = new qx.data.Array();

services/web/client/source/class/osparc/component/form/tag/TagManager.js

@@ -22,9 +22,8 @@ qx.Class.define("osparc.component.form.tag.TagManager", {
       movable: false,
       resizable: false,
       modal: true,
-      appearance: "service-window",
       width: 262,
-      contentPadding: 0
+      clickAwayClose: true
     });
     this.__attachment = attachment;
     this.__resourceName = resourceName;
@@ -69,7 +68,6 @@ qx.Class.define("osparc.component.form.tag.TagManager", {
           font: "title-16",
           textColor: "service-window-hint",
           rich: true,
-          backgroundColor: "material-button-background",
           padding: 10,
           textAlign: "center"
         }));
@@ -141,19 +139,7 @@ qx.Class.define("osparc.component.form.tag.TagManager", {
     __attachEventHandlers: function() {
       this.addListener("appear", () => {
         this.__updatePosition();
-        if (this.isModal()) {
-          // Enable closing when clicking outside the modal
-          const thisDom = this.getContentElement().getDomElement();
-          const thisZIndex = parseInt(thisDom.style.zIndex);
-          const modalFrame = qx.dom.Hierarchy.getSiblings(thisDom).find(el =>
-            // Hack: Qx inserts the modalFrame as a sibling of the window with a -1 zIndex
-            parseInt(el.style.zIndex) === thisZIndex - 1
-          );
-          if (modalFrame) {
-            modalFrame.addEventListener("click", () => this.close());
-          }
-        }
-      }, this);
+      });
       this.__selectedTags.addListener("change", evt => {
         this.fireDataEvent("changeSelected", {
           ...evt.getData(),

services/web/client/source/class/osparc/component/metadata/ServiceInfoWindow.js

@@ -21,7 +21,7 @@
  */
 
 qx.Class.define("osparc.component.metadata.ServiceInfoWindow", {
-  extend: qx.ui.window.Window,
+  extend: osparc.ui.window.Window,
 
   /**
     * @param metadata {Object} Service metadata
@@ -43,6 +43,7 @@ qx.Class.define("osparc.component.metadata.ServiceInfoWindow", {
     });
 
     const serviceInfo = this._serviceInfo = new osparc.component.metadata.ServiceInfo(metadata);
+    serviceInfo.setBackgroundColor("material-button-background");
     const scroll = new qx.ui.container.Scroll();
     scroll.add(serviceInfo);
     this.add(scroll, {

services/web/client/source/class/osparc/component/metadata/StudyDetailsEditor.js

@@ -65,14 +65,12 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
 
   statics: {
     popUpInWindow: function(title, studyDetailsEditor, width = 400, height = 400) {
-      const win = new qx.ui.window.Window(title).set({
+      const win = new osparc.ui.window.Window(title).set({
         autoDestroy: true,
-        layout: new qx.ui.layout.VBox(),
-        appearance: "service-window",
+        layout: new qx.ui.layout.Grow(),
         showMinimize: false,
         showMaximize: false,
         resizable: true,
-        contentPadding: 10,
         width: width,
         height: height,
         modal: true
@@ -99,8 +97,10 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
 
     __createDisplayView: function(study, isTemplate, winWidth) {
       const displayView = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
+      displayView.add(new osparc.component.metadata.StudyDetails(study, winWidth), {
+        flex: 1
+      });
       displayView.add(this.__createButtons(isTemplate));
-      displayView.add(new osparc.component.metadata.StudyDetails(study, winWidth));
       return displayView;
     },
 
@@ -109,54 +109,48 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
       const canCreateTemplate = osparc.data.Permissions.getInstance().canDo("studies.template.create");
       const canUpdateTemplate = osparc.data.Permissions.getInstance().canDo("studies.template.update");
 
-      const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(8).set({
-        alignY: "middle"
-      })).set({
-        marginTop: 10
-      });
+      const buttonsToolbar = new qx.ui.toolbar.ToolBar();
 
-      const modeButton = new qx.ui.form.Button(this.tr("Edit")).set({
-        appearance: "md-button",
+      const modeButton = new qx.ui.toolbar.Button(this.tr("Edit")).set({
+        appearance: "toolbar-md-button",
         visibility: isCurrentUserOwner && (!isTemplate || canUpdateTemplate) ? "visible" : "excluded"
       });
       osparc.utils.Utils.setIdToWidget(modeButton, "editStudyBtn");
       modeButton.addListener("execute", () => this.setMode("edit"), this);
-      buttonsLayout.add(modeButton);
+      buttonsToolbar.add(modeButton);
 
       if (!isTemplate) {
-        const permissionsButton = new qx.ui.form.Button(this.tr("Permissions")).set({
-          appearance: "md-button"
+        const permissionsButton = new qx.ui.toolbar.Button(this.tr("Permissions")).set({
+          appearance: "toolbar-md-button"
         });
         osparc.utils.Utils.setIdToWidget(permissionsButton, "permissionsBtn");
         permissionsButton.addListener("execute", e => {
           this.__openPermissions();
         }, this);
-        buttonsLayout.add(permissionsButton);
+        buttonsToolbar.add(permissionsButton);
 
         if (isCurrentUserOwner && canCreateTemplate) {
-          const saveAsTemplateButton = new qx.ui.form.Button(this.tr("Save as Template")).set({
-            appearance: "md-button"
+          const saveAsTemplateButton = new qx.ui.toolbar.Button(this.tr("Save as Template")).set({
+            appearance: "toolbar-md-button"
           });
           osparc.utils.Utils.setIdToWidget(saveAsTemplateButton, "saveAsTemplateBtn");
           saveAsTemplateButton.addListener("execute", e => {
             this.__openSaveAsTemplate();
           }, this);
-          buttonsLayout.add(saveAsTemplateButton);
+          buttonsToolbar.add(saveAsTemplateButton);
         }
       }
 
-      buttonsLayout.add(new qx.ui.core.Spacer(), {
-        flex: 1
-      });
+      buttonsToolbar.addSpacer();
 
-      const openButton = this.__openButton = new qx.ui.form.Button(this.tr("Open")).set({
-        appearance: "md-button"
+      const openButton = this.__openButton = new qx.ui.toolbar.Button(this.tr("Open")).set({
+        appearance: "toolbar-md-button"
       });
       osparc.utils.Utils.setIdToWidget(openButton, "openStudyBtn");
       openButton.addListener("execute", () => this.fireEvent("openStudy"), this);
-      buttonsLayout.add(openButton);
+      buttonsToolbar.add(openButton);
 
-      return buttonsLayout;
+      return buttonsToolbar;
     },
 
     __createEditView: function(isTemplate) {
@@ -165,9 +159,7 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
       const fieldIsEnabled = isCurrentUserOwner && (!isTemplate || canUpdateTemplate);
 
       const editView = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
-      const buttons = new qx.ui.container.Composite(new qx.ui.layout.HBox(8).set({
-        alignX: "right"
-      }));
+      const buttonsToolbar = new qx.ui.toolbar.ToolBar();
 
       this.__fields = {
         name: new qx.ui.form.TextField(this.__studyModel.getName()).set({
@@ -176,34 +168,13 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
           enabled: fieldIsEnabled
         }),
         description: new qx.ui.form.TextArea(this.__studyModel.getDescription()).set({
-          autoSize: true,
-          minHeight: 100,
-          maxHeight: 500,
           enabled: fieldIsEnabled
         }),
         thumbnail: new qx.ui.form.TextField(this.__studyModel.getThumbnail()).set({
           enabled: fieldIsEnabled
         })
       };
 
-      const saveButton = new qx.ui.form.Button(this.tr("Save"), "@FontAwesome5Solid/save/16").set({
-        appearance: "lg-button"
-      });
-      osparc.utils.Utils.setIdToWidget(saveButton, "studyDetailsEditorSaveBtn");
-      saveButton.addListener("execute", e => {
-        const btn = e.getTarget();
-        btn.setIcon("@FontAwesome5Solid/circle-notch/16");
-        btn.getChildControl("icon").getContentElement()
-          .addClass("rotate");
-        this.__saveStudy(isTemplate, btn);
-      }, this);
-      const cancelButton = new qx.ui.form.Button(this.tr("Cancel")).set({
-        appearance: "lg-button",
-        enabled: isCurrentUserOwner && (!isTemplate || canUpdateTemplate)
-      });
-      osparc.utils.Utils.setIdToWidget(cancelButton, "studyDetailsEditorCancelBtn");
-      cancelButton.addListener("execute", () => this.setMode("display"), this);
-
       const {
         name,
         description,
@@ -219,7 +190,9 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
         font: "text-14"
       }));
       osparc.utils.Utils.setIdToWidget(description, "studyDetailsEditorDescFld");
-      editView.add(description);
+      editView.add(description, {
+        flex: 1
+      });
       editView.add(new qx.ui.basic.Label(this.tr("Thumbnail")).set({
         font: "text-14"
       }));
@@ -230,9 +203,28 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
         editView.add(this.__tagsSection());
       }
 
-      buttons.add(saveButton);
-      buttons.add(cancelButton);
-      editView.add(buttons);
+      const saveButton = new qx.ui.toolbar.Button(this.tr("Save"), "@FontAwesome5Solid/save/16").set({
+        appearance: "toolbar-lg-button"
+      });
+      osparc.utils.Utils.setIdToWidget(saveButton, "studyDetailsEditorSaveBtn");
+      saveButton.addListener("execute", e => {
+        const btn = e.getTarget();
+        btn.setIcon("@FontAwesome5Solid/circle-notch/16");
+        btn.getChildControl("icon").getContentElement()
+          .addClass("rotate");
+        this.__saveStudy(isTemplate, btn);
+      }, this);
+      const cancelButton = new qx.ui.toolbar.Button(this.tr("Cancel")).set({
+        appearance: "toolbar-lg-button",
+        enabled: isCurrentUserOwner && (!isTemplate || canUpdateTemplate)
+      });
+      osparc.utils.Utils.setIdToWidget(cancelButton, "studyDetailsEditorCancelBtn");
+      cancelButton.addListener("execute", () => this.setMode("display"), this);
+
+      buttonsToolbar.addSpacer();
+      buttonsToolbar.add(saveButton);
+      buttonsToolbar.add(cancelButton);
+      editView.add(buttonsToolbar);
 
       return editView;
     },
@@ -279,18 +271,22 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
     },
 
     __saveStudy: function(isTemplate, btn) {
+      const data = this.__serializeForm();
+      // FIXME: Avoid adding invalid properties to standard entities.
+      delete data.locked;
+      delete data.resourceType;
       const params = {
         url: {
           projectId: this.__studyModel.getUuid()
         },
-        data: this.__serializeForm()
+        data
       };
       osparc.data.Resources.fetch(isTemplate ? "templates" : "studies", "put", params)
-        .then(data => {
+        .then(studyData => {
           btn.resetIcon();
           btn.getChildControl("icon").getContentElement()
             .removeClass("rotate");
-          this.__studyModel.set(data);
+          this.__studyModel.set(studyData);
           this.setMode("display");
           this.fireEvent(isTemplate ? "updateTemplate" : "updateStudy");
         })

services/web/client/source/class/osparc/component/widget/Renamer.js

@@ -35,7 +35,7 @@
  */
 
 qx.Class.define("osparc.component.widget.Renamer", {
-  extend: qx.ui.window.Window,
+  extend: osparc.ui.window.Window,
 
   construct: function(oldLabel) {
     this.base(arguments, "Rename");
@@ -51,7 +51,8 @@ qx.Class.define("osparc.component.widget.Renamer", {
       modal: true,
       showMaximize: false,
       showMinimize: false,
-      width: labelWidth
+      width: labelWidth,
+      clickAwayClose: true
     });
     this.__populateNodeLabelEditor(oldLabel, labelWidth);
   },

services/web/client/source/class/osparc/component/workbench/ServiceCatalog.js

@@ -34,13 +34,12 @@
  */
 
 qx.Class.define("osparc.component.workbench.ServiceCatalog", {
-  extend: qx.ui.window.Window,
+  extend: osparc.ui.window.Window,
 
   construct: function() {
     this.base();
 
     this.set({
-      appearance: "service-window",
       autoDestroy: true,
       caption: this.tr("Service catalog"),
       showMinimize: false,

services/web/client/source/class/osparc/dashboard/ExploreBrowser.js

@@ -601,8 +601,7 @@ qx.Class.define("osparc.dashboard.ExploreBrowser", {
     },
 
     __displayServiceSubmissionForm: function(formData) {
-      const addServiceWindow = new qx.ui.window.Window(this.tr("Submit a new service")).set({
-        appearance: "service-window",
+      const addServiceWindow = new osparc.ui.window.Window(this.tr("Submit a new service")).set({
         modal: true,
         autoDestroy: true,
         showMinimize: false,

services/web/client/source/class/osparc/dashboard/OrganizationEditor.js

@@ -34,10 +34,9 @@ qx.Class.define("osparc.dashboard.OrganizationEditor", {
 
   statics: {
     popUpInWindow: function(title, organizationEditor, width = 300, height = 200) {
-      const win = new qx.ui.window.Window(title).set({
+      const win = new osparc.ui.window.Window(title).set({
         autoDestroy: true,
         layout: new qx.ui.layout.VBox(),
-        appearance: "service-window",
         showMinimize: false,
         showMaximize: false,
         resizable: true,

services/web/client/source/class/osparc/dashboard/ServiceBrowser.js

@@ -274,8 +274,7 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
     },
 
     __displayServiceSubmissionForm: function(formData) {
-      const addServiceWindow = new qx.ui.window.Window(this.tr("Submit a new service")).set({
-        appearance: "service-window",
+      const addServiceWindow = new osparc.ui.window.Window(this.tr("Submit a new service")).set({
         modal: true,
         autoDestroy: true,
         showMinimize: false,

services/web/client/source/class/osparc/data/Resources.js

@@ -108,7 +108,8 @@ qx.Class.define("osparc.data.Resources", {
           },
           put: {
             method: "PUT",
-            url: statics.API + "/projects/{projectId}"
+            url: statics.API + "/projects/{projectId}",
+            useCache: true
           },
           delete: {
             method: "DELETE",