🎨 Frontend: Redesign File Picker in App Mode (#5893)

odeimaiz · web-flow · commit d5a90d7d3a83 · 2024-05-30T17:15:01.000Z
diff --git a/services/static-webserver/client/source/class/osparc/desktop/PanelView.js b/services/static-webserver/client/source/class/osparc/desktop/PanelView.js
@@ -14,7 +14,6 @@
      * Ignacio Pascual (ignapas)
 
 ************************************************************************ */
-/* eslint-disable no-use-before-define */
 
 /**
  * Display widget with a title bar and collapsible content.
@@ -43,7 +42,7 @@ qx.Class.define("osparc.desktop.PanelView", {
     _applyContent: function(content, oldContent) {
       this.base(arguments, content, oldContent);
 
-      this._innerContainer.set({
+      this.getInnerContainer().set({
         appearance: "panelview-content"
       });
     }
diff --git a/services/static-webserver/client/source/class/osparc/desktop/RadioCollapsibleViews.js b/services/static-webserver/client/source/class/osparc/desktop/RadioCollapsibleViews.js
@@ -0,0 +1,61 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2018 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (ignapas)
+
+************************************************************************ */
+
+qx.Class.define("osparc.desktop.RadioCollapsibleViews", {
+  extend: qx.core.Object,
+
+  /**
+   * @param {Array} collapsibleViews array of osparc.widget.CollapsibleView
+   */
+  construct: function(collapsibleViews = []) {
+    this.base(arguments);
+
+    this.__collapsibleViews = [];
+
+    collapsibleViews.forEach(cv => this.addCollapsibleView(cv));
+  },
+
+  members: {
+    __collapsibleViews: null,
+
+    /**
+     * @param {osparc.widget.CollapsibleView | osparc.desktop.PanelView} collapsibleView
+     */
+    addCollapsibleView: function(collapsibleView) {
+      this.__collapsibleViews.push(collapsibleView);
+
+      collapsibleView.addListener("changeCollapsed", e => {
+        const collapsed = e.getData();
+        if (collapsed === false) {
+          // close the other views
+          const idx = this.__collapsibleViews.indexOf(collapsibleView);
+          this.__collapsibleViews.forEach((cv, idx2) => {
+            if (idx !== idx2) {
+              cv.setCollapsed(true);
+            }
+          })
+        }
+      }, this);
+    },
+
+    openCollapsibleView: function(idx = 0) {
+      if (idx < this.__collapsibleViews.length) {
+        this.__collapsibleViews[idx].setCollapsed(false);
+      }
+    }
+  }
+});
diff --git a/services/static-webserver/client/source/class/osparc/file/FileDrop.js b/services/static-webserver/client/source/class/osparc/file/FileDrop.js
@@ -51,28 +51,16 @@ qx.Class.define("osparc.file.FileDrop", {
     }
     msg += "</center>";
 
-    const dropHere = this.__dropHere = new qx.ui.basic.Label(msg).set({
+    const dropHereMessage = this.__dropHereMessage = new qx.ui.basic.Label(msg).set({
       font: "text-14",
       rich: true,
       alignX: "center",
       alignY: "middle"
     });
-    this._add(dropHere, {
-      top: 40,
-      left: 40
-    });
+    this._add(dropHereMessage);
 
-    const centerDropHere = () => {
-      // center it
-      const dropHereBounds = dropHere.getBounds() || dropHere.getSizeHint();
-      const fileDropBounds = this.getBounds() || this.getSizeHint();
-      dropHere.setLayoutProperties({
-        top: parseInt((fileDropBounds.height - dropHereBounds.height) / 2),
-        left: parseInt((fileDropBounds.width - dropHereBounds.width) / 2)
-      });
-    };
-    dropHere.addListener("appear", centerDropHere);
-    this.addListener("resize", centerDropHere);
+    dropHereMessage.addListener("appear", () => this.__centerDropHereMessage(), this);
+    this.addListener("resize", () => this.__centerDropHereMessage(), this);
 
     const svgLayer = this.__svgLayer = new osparc.workbench.SvgWidget();
     this._add(svgLayer, {
@@ -123,7 +111,7 @@ qx.Class.define("osparc.file.FileDrop", {
 
   members: {
     __svgLayer: null,
-    __dropHere: null,
+    __dropHereMessage: null,
     __dropMe: null,
     __isDraggingFile: null,
     __isDraggingLink: null,
@@ -134,7 +122,25 @@ qx.Class.define("osparc.file.FileDrop", {
     },
 
     __applyShowDropHere: function(value) {
-      this.__dropHere.setVisibility(value ? "visible" : "excluded");
+      this.__dropHereMessage.setVisibility(value ? "visible" : "excluded");
+    },
+
+    __centerDropHereMessage: function() {
+      const dropHere = this.__dropHereMessage;
+      // center it
+      const dropHereBounds = dropHere.getBounds() || dropHere.getSizeHint();
+      const fileDropBounds = this.getBounds() || this.getSizeHint();
+      dropHere.setLayoutProperties({
+        top: parseInt((fileDropBounds.height - dropHereBounds.height) / 2),
+        left: parseInt((fileDropBounds.width - dropHereBounds.width) / 2)
+      });
+    },
+
+    setDropHereMessage: function(msg) {
+      this.__dropHereMessage.set({
+        value: msg
+      });
+      this.__centerDropHereMessage();
     },
 
     resetDropAction: function() {
@@ -212,11 +218,11 @@ qx.Class.define("osparc.file.FileDrop", {
 
     __updateWidgets: function(dragging, posX, posY) {
       if (dragging) {
-        this.__dropHere.exclude();
+        this.__dropHereMessage.exclude();
         this.__updateDropMe(posX, posY);
       } else {
         if (this.getShowDropHere()) {
-          this.__dropHere.show();
+          this.__dropHereMessage.show();
         }
         this.__hideDropMe();
       }
diff --git a/services/static-webserver/client/source/class/osparc/file/FilePicker.js b/services/static-webserver/client/source/class/osparc/file/FilePicker.js
@@ -284,26 +284,17 @@ qx.Class.define("osparc.file.FilePicker", {
 
     __buildLayout: function() {
       this._removeAll();
-      const isWorkbenchContext = this.getPageContext() === "workbench";
       const hasOutput = osparc.file.FilePicker.hasOutputAssigned(this.getNode().getOutputs());
-      if (isWorkbenchContext) {
-        if (hasOutput) {
-          // WORKBENCH mode WITH output
-          this.__buildInfoLayout();
-        } else {
-          // WORKBENCH mode WITHOUT output
-          this.__addProgressBar();
-          this.__buildNoFileWBLayout();
-        }
+      if (hasOutput) {
+        this.__buildInfoLayout();
       } else {
-        this.setMargin(10);
-        if (hasOutput) {
-          // APP mode WITH output
-          this.__buildInfoLayout();
+        this.__addProgressBar();
+        const isWorkbenchContext = this.getPageContext() === "workbench";
+        if (isWorkbenchContext) {
+          this.__buildWorkbenchLayout();
         } else {
-          // APP mode WITHOUT output
-          this.__addProgressBar();
-          this.__buildNoFileAppLayout();
+          this.setMargin(10);
+          this.__buildAppModeLayout();
         }
       }
     },
@@ -312,6 +303,7 @@ qx.Class.define("osparc.file.FilePicker", {
       const progressLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
         alignY: "middle"
       }));
+      progressLayout.alwaysEnabled = true;
 
       const progressBar = new qx.ui.indicator.ProgressBar();
       const nodeStatus = this.getNode().getStatus();
@@ -341,7 +333,7 @@ qx.Class.define("osparc.file.FilePicker", {
         const uploading = (validProgress > 0 && validProgress < 100);
         progressLayout.setVisibility(uploading ? "visible" : "excluded");
         this._getChildren().forEach(child => {
-          if (child !== progressLayout) {
+          if (!child.alwaysEnabled) {
             child.setEnabled(!uploading);
           }
         });
@@ -390,19 +382,6 @@ qx.Class.define("osparc.file.FilePicker", {
       return resetFileBtn;
     },
 
-    __buildNoFileWBLayout: function() {
-      const uploadFileSection = this.__getUploadFileSection();
-      this._add(uploadFileSection);
-
-      const fileDrop = this.__getFileDropSection();
-      this._add(fileDrop, {
-        flex: 1
-      });
-
-      const downloadLinkSection = this.__getDownloadLinkSection();
-      this._add(downloadLinkSection);
-    },
-
     __getUploadFileSection: function() {
       const uploadFileSection = new osparc.ui.form.FileInput();
       uploadFileSection.addListener("selectionChanged", () => {
@@ -453,9 +432,7 @@ qx.Class.define("osparc.file.FilePicker", {
     },
 
     __getDownloadLinkSection: function() {
-      const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({
-        alignY: "middle"
-      }));
+      const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
 
       layout.add(new qx.ui.basic.Label(this.tr("Provide Link")));
 
@@ -473,12 +450,25 @@ qx.Class.define("osparc.file.FilePicker", {
       return layout;
     },
 
-    __buildNoFileAppLayout: function() {
-      let msg = this.tr("In order to Select a file you have three options:");
+    __buildWorkbenchLayout: function() {
+      const uploadFileSection = this.__getUploadFileSection();
+      this._add(uploadFileSection);
+
+      const fileDrop = this.__getFileDropSection();
+      this._add(fileDrop, {
+        flex: 1
+      });
+
+      const downloadLinkSection = this.__getDownloadLinkSection();
+      this._add(downloadLinkSection);
+    },
+
+    __buildAppModeLayout: function() {
+      let msg = this.tr("In order to Select a File you have three options:");
       const options = [
-        this.tr("- Upload a file"),
-        this.tr("- Select a file from tree"),
-        this.tr("- Provide Link")
+        this.tr("- Upload a New File"),
+        this.tr("- Provide a File Link"),
+        this.tr("- Select a File from other ") + osparc.product.Utils.getStudyAlias()
       ];
       for (let i=0; i<options.length; i++) {
         msg += "<br>" + options[i];
@@ -489,16 +479,52 @@ qx.Class.define("osparc.file.FilePicker", {
       });
       this._add(intro);
 
-      const uploadFileSection = this.__getUploadFileSection();
-      this._add(uploadFileSection);
+      const collapsibleViews = [];
+      const contentMargin = 10;
 
-      const fileBrowserLayout = this.__getFileBrowserLayout();
-      this._add(fileBrowserLayout, {
+      const newFileSection = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
+      const uploadFileSection = this.__getUploadFileSection();
+      uploadFileSection.getButton().set({
+        appearance: "strong-button",
+        font: "text-14"
+      });
+      newFileSection.add(uploadFileSection);
+      const fileDrop = this.__getFileDropSection();
+      fileDrop.setDropHereMessage(this.tr("Drop file here"));
+      newFileSection.add(fileDrop, {
         flex: 1
       });
+      const newFilePView = new osparc.desktop.PanelView().set({
+        title: this.tr("Select New File"),
+        content: newFileSection
+      });
+      collapsibleViews.push(newFilePView);
 
       const downloadLinkSection = this.__getDownloadLinkSection();
-      this._add(downloadLinkSection);
+      const downloadLinkPView = new osparc.desktop.PanelView().set({
+        title: this.tr("Select Download Link"),
+        content: downloadLinkSection
+      });
+      collapsibleViews.push(downloadLinkPView);
+
+      const fileBrowserLayout = this.__getFileBrowserLayout();
+      const usedFilePView = new osparc.desktop.PanelView().set({
+        title: this.tr("Select File from other ") + osparc.product.Utils.getStudyAlias(),
+        content: fileBrowserLayout
+      });
+      collapsibleViews.push(usedFilePView);
+
+      const radioCollapsibleViews = new osparc.desktop.RadioCollapsibleViews();
+      collapsibleViews.forEach(cv => {
+        cv.getInnerContainer().set({
+          margin: contentMargin
+        });
+        this._add(cv, {
+          flex: 1
+        });
+        radioCollapsibleViews.addCollapsibleView(cv);
+      });
+      radioCollapsibleViews.openCollapsibleView(0);
     },
 
     __getFileBrowserLayout: function() {
diff --git a/services/static-webserver/client/source/class/osparc/ui/form/FileInput.js b/services/static-webserver/client/source/class/osparc/ui/form/FileInput.js
@@ -34,7 +34,7 @@ qx.Class.define("osparc.ui.form.FileInput", {
     });
     this.getContentElement().add(this.__input);
 
-    this.__selectBtn = new qx.ui.form.Button(this.tr("Select a file..."));
+    this.__selectBtn = new qx.ui.form.Button(this.tr("Select File..."));
     this._add(this.__selectBtn);
 
     this.__selectedFiles = new qx.ui.basic.Label();
@@ -63,6 +63,10 @@ qx.Class.define("osparc.ui.form.FileInput", {
     __selectBtn: null,
     __selectedFiles: null,
 
+    getButton: function() {
+      return this.__selectBtn;
+    },
+
     __attachEventHandlers: function() {
       this.__input.addListener("change", () => {
         const fileNames = [];
diff --git a/services/static-webserver/client/source/class/osparc/widget/CollapsibleView.js b/services/static-webserver/client/source/class/osparc/widget/CollapsibleView.js
@@ -221,6 +221,10 @@ qx.Class.define("osparc.widget.CollapsibleView", {
       }
     },
 
+    getInnerContainer: function() {
+      return this._innerContainer;
+    },
+
     _applyCaretSize: function(size) {
       this.getChildControl("caret").setSource(this.__getCaretId(this.getCollapsed()));
     },
