🎨 [Frontend] Highlight workbench elements (#6670)

ITISFoundation · Nov 5, 2024 · 2f0cfb0 · 2f0cfb0
1 parent e1354ea
commit 2f0cfb0
Show file tree

Hide file tree

Showing 19 changed files with 98 additions and 45 deletions.
diff --git a/services/static-webserver/client/source/class/osparc/file/FileDrop.js b/services/static-webserver/client/source/class/osparc/file/FileDrop.js
@@ -102,7 +102,9 @@ qx.Class.define("osparc.file.FileDrop", {
         }
       }
       return files;
-    }
+    },
+
+    ONE_FILE_ONLY: qx.locale.Manager.tr("Only one file at a time is accepted.") + "<br>" + qx.locale.Manager.tr("Please zip all files together."),
   },
 
   events: {
@@ -299,7 +301,7 @@ qx.Class.define("osparc.file.FileDrop", {
               pos: this.__pointerFileEventToScreenPos(e)
             });
           } else {
-            osparc.FlashMessenger.getInstance().logAs(this.tr("Only one file at a time is accepted."), "ERROR");
+            osparc.FlashMessenger.getInstance().logAs(osparc.file.FileDrop.ONE_FILE_ONLY, "ERROR");
           }
         } else {
           osparc.FlashMessenger.getInstance().logAs(this.tr("Folders are not accepted. You might want to upload a zip file."), "ERROR");

diff --git a/services/static-webserver/client/source/class/osparc/file/FilePicker.js b/services/static-webserver/client/source/class/osparc/file/FilePicker.js
@@ -417,7 +417,7 @@ qx.Class.define("osparc.file.FilePicker", {
     },
 
     uploadPendingFiles: function(files) {
-      if (files.length > 0) {
+      if (files.length) {
         if (files.length === 1) {
           const fileUploader = new osparc.file.FileUploader(this.getNode());
           fileUploader.addListener("uploadAborted", () => this.__resetOutput());
@@ -428,7 +428,7 @@ qx.Class.define("osparc.file.FilePicker", {
           fileUploader.retrieveUrlAndUpload(files[0]);
           return true;
         }
-        osparc.FlashMessenger.getInstance().logAs(this.tr("Only one file is accepted"), "ERROR");
+        osparc.FlashMessenger.getInstance().logAs(osparc.file.FileDrop.ONE_FILE_ONLY, "ERROR");
       }
       return false;
     },

diff --git a/services/static-webserver/client/source/class/osparc/form/renderer/PropForm.js b/services/static-webserver/client/source/class/osparc/form/renderer/PropForm.js
@@ -36,6 +36,7 @@ qx.Class.define("osparc.form.renderer.PropForm", {
   },
 
   events: {
+    "highlightEdge": "qx.event.type.Data",
     "linkFieldModified": "qx.event.type.Data",
     "fileRequested": "qx.event.type.Data",
     "filePickerRequested": "qx.event.type.Data",
@@ -928,6 +929,17 @@ qx.Class.define("osparc.form.renderer.PropForm", {
         nodeUuid: fromNodeId,
         output: fromPortId
       };
+      const highlightEdgeUI = highlight => {
+        this.fireDataEvent("highlightEdge", {
+          highlight,
+          toNodeId: this.getNode().getNodeId(),
+          toPortId,
+          fromNodeId,
+          fromPortId,
+        });
+      };
+      ctrlLink.addListener("mouseover", () => highlightEdgeUI(true));
+      ctrlLink.addListener("mouseout", () => highlightEdgeUI(false));
 
       const workbench = study.getWorkbench();
       const fromNode = workbench.getNode(fromNodeId);

diff --git a/services/static-webserver/client/source/class/osparc/info/StudyMedium.js b/services/static-webserver/client/source/class/osparc/info/StudyMedium.js
@@ -162,7 +162,9 @@ qx.Class.define("osparc.info.StudyMedium", {
       const title = this.tr("Study Information");
       const width = osparc.info.CardLarge.WIDTH;
       const height = osparc.info.CardLarge.HEIGHT;
-      osparc.ui.window.Window.popUpInWindow(studyDetails, title, width, height);
+      osparc.ui.window.Window.popUpInWindow(studyDetails, title, width, height).set({
+        maxHeight: height
+      });
     }
   }
 });
diff --git a/services/static-webserver/client/source/class/osparc/metadata/ServicesInStudy.js b/services/static-webserver/client/source/class/osparc/metadata/ServicesInStudy.js
@@ -150,7 +150,9 @@ qx.Class.define("osparc.metadata.ServicesInStudy", {
           const title = this.tr("Service information");
           const width = osparc.info.CardLarge.WIDTH;
           const height = osparc.info.CardLarge.HEIGHT;
-          osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height);
+          osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height).set({
+            maxHeight: height
+          });
         }, this);
         this._servicesGrid.add(infoButton, {
           row: i,

diff --git a/services/static-webserver/client/source/class/osparc/navigation/StudyTitleWOptions.js b/services/static-webserver/client/source/class/osparc/navigation/StudyTitleWOptions.js
@@ -63,7 +63,9 @@ qx.Class.define("osparc.navigation.StudyTitleWOptions", {
             const title = this.tr("Information");
             const width = osparc.info.CardLarge.WIDTH;
             const height = osparc.info.CardLarge.HEIGHT;
-            osparc.ui.window.Window.popUpInWindow(widget, title, width, height);
+            osparc.ui.window.Window.popUpInWindow(widget, title, width, height).set({
+              maxHeight: height
+            });
           });
           break;
         case "study-menu-download-logs":

diff --git a/services/static-webserver/client/source/class/osparc/node/slideshow/BaseNodeView.js b/services/static-webserver/client/source/class/osparc/node/slideshow/BaseNodeView.js
@@ -225,7 +225,9 @@ qx.Class.define("osparc.node.slideshow.BaseNodeView", {
       const title = this.tr("Service information");
       const width = osparc.info.CardLarge.WIDTH;
       const height = osparc.info.CardLarge.HEIGHT;
-      osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height);
+      osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height).set({
+        maxHeight: height
+      });
     },
 
     __openInstructions: function() {

diff --git a/services/static-webserver/client/source/class/osparc/service/ServiceListItem.js b/services/static-webserver/client/source/class/osparc/service/ServiceListItem.js
@@ -164,7 +164,9 @@ qx.Class.define("osparc.service.ServiceListItem", {
           const title = this.tr("Service information");
           const width = osparc.info.CardLarge.WIDTH;
           const height = osparc.info.CardLarge.HEIGHT;
-          osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height);
+          osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height).set({
+            maxHeight: height
+          });
         });
     },
 

diff --git a/services/static-webserver/client/source/class/osparc/theme/Appearance.js b/services/static-webserver/client/source/class/osparc/theme/Appearance.js
@@ -192,19 +192,19 @@ qx.Theme.define("osparc.theme.Appearance", {
       WINDOW-SMALL-CAP CHOOSER
     ---------------------------------------------------------------------------
     */
-    "window-small-cap": {
+    "node-ui-cap": {
       include: "window", // get all the settings from window
       alias: "window", // redirect kids to window/kid
       style: function(states) {
         return {
           backgroundColor: states.selected ? "node-selected-background" : "node-background",
           textColor: states.selected ? "text-selected" : "text",
-          decorator: states.maximized ? "window-small-cap-maximized" : "window-small-cap"
+          decorator: states.maximized ? "node-ui-cap-maximized" : "node-ui-cap"
         };
       }
     },
 
-    "window-small-cap/captionbar": {
+    "node-ui-cap/captionbar": {
       include: "window/captionbar", // load defaults from window captionbar
       alias: "window/captionbar", // redirect kids
       style: function(states) {
@@ -217,7 +217,7 @@ qx.Theme.define("osparc.theme.Appearance", {
       }
     },
 
-    "window-small-cap/title": {
+    "node-ui-cap/title": {
       include: "window/title",
       style: function(states) {
         return {
@@ -228,7 +228,7 @@ qx.Theme.define("osparc.theme.Appearance", {
       }
     },
 
-    "window-small-cap/minimize-button": {
+    "node-ui-cap/minimize-button": {
       alias: "window/minimize-button",
       include: "window/minimize-button",
       style: function(states) {
@@ -238,7 +238,7 @@ qx.Theme.define("osparc.theme.Appearance", {
       }
     },
 
-    "window-small-cap/restore-button": {
+    "node-ui-cap/restore-button": {
       alias: "window/restore-button",
       include: "window/restore-button",
       style: function(states) {
@@ -248,7 +248,7 @@ qx.Theme.define("osparc.theme.Appearance", {
       }
     },
 
-    "window-small-cap/maximize-button": {
+    "node-ui-cap/maximize-button": {
       alias: "window/maximize-button",
       include: "window/maximize-button",
       style: function(states) {
@@ -258,7 +258,7 @@ qx.Theme.define("osparc.theme.Appearance", {
       }
     },
 
-    "window-small-cap/close-button": {
+    "node-ui-cap/close-button": {
       alias: "window/close-button",
       include: "window/close-button",
       style: function(states) {
@@ -268,7 +268,7 @@ qx.Theme.define("osparc.theme.Appearance", {
       }
     },
 
-    "window-small-cap/progress": "progressbar",
+    "node-ui-cap/progress": "progressbar",
 
     "service-window": {
       include: "window",

diff --git a/services/static-webserver/client/source/class/osparc/theme/ColorDark.js b/services/static-webserver/client/source/class/osparc/theme/ColorDark.js
@@ -68,6 +68,8 @@ qx.Theme.define("osparc.theme.ColorDark", {
     "window-caption-background-active":  "background-main-3",
     "window-caption-text": "text",
     "window-caption-text-active": "c12",
+    "window-border":  "background-main-2",
+    "window-border-inner":  "background-main-1",
 
     // material-button
     "material-button-background": "fab-background",
@@ -111,10 +113,6 @@ qx.Theme.define("osparc.theme.ColorDark", {
     "button-box-pressed":  "background-main-4",
     "border-lead": "c07",
 
-    // window
-    "window-border":  "background-main-2",
-    "window-border-inner":  "background-main-1",
-
     // group box
     "white-box-border":  "background-main-2",
 
@@ -172,7 +170,7 @@ qx.Theme.define("osparc.theme.ColorDark", {
     "workbench-start-hint": "#505050",
 
     "node-background": "rgba(113, 157, 181, 0.5)",
-    "node-selected-background": "background-selected",
+    "node-selected-background": "strong-main",
     "node-title-text": "text-selected",
     "node-port-text": "#454545",
 

diff --git a/services/static-webserver/client/source/class/osparc/theme/ColorLight.js b/services/static-webserver/client/source/class/osparc/theme/ColorLight.js
@@ -68,6 +68,8 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "window-caption-background-active":  "background-main-3",
     "window-caption-text": "text",
     "window-caption-text-active": "c12",
+    "window-border":  "background-main-2",
+    "window-border-inner":  "background-main-1",
 
     // material-button
     "material-button-background":  "fab-background",
@@ -111,10 +113,6 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "button-box-pressed":  "background-main-4",
     "border-lead": "c07",
 
-    // window
-    "window-border":  "background-main-2",
-    "window-border-inner":  "background-main-1",
-
     // group box
     "white-box-border":  "background-main-2",
 
@@ -172,7 +170,7 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "workbench-start-hint": "#AFAFAF",
 
     "node-background": "rgba(113, 157, 181, 0.35)",
-    "node-selected-background": "background-selected",
+    "node-selected-background": "strong-main",
     "node-title-text": "#232323",
     "node-port-text": "#454545",
 

diff --git a/services/static-webserver/client/source/class/osparc/theme/Decoration.js b/services/static-webserver/client/source/class/osparc/theme/Decoration.js
@@ -137,7 +137,7 @@ qx.Theme.define("osparc.theme.Decoration", {
       }
     },
 
-    "window-small-cap": {
+    "node-ui-cap": {
       include: "service-window",
       style: {
         shadowBlurRadius: 0,
@@ -150,7 +150,7 @@ qx.Theme.define("osparc.theme.Decoration", {
       }
     },
 
-    "window-small-cap-maximized": {
+    "node-ui-cap-maximized": {
       include: "service-window-maximized",
       style: {
         width: 1,

diff --git a/services/static-webserver/client/source/class/osparc/widget/NodesTree.js b/services/static-webserver/client/source/class/osparc/widget/NodesTree.js
@@ -285,7 +285,9 @@ qx.Class.define("osparc.widget.NodesTree", {
         if (nodeId === study.getUuid()) {
           const studyDetails = new osparc.info.StudyLarge(study);
           const title = this.tr("Study Information");
-          osparc.ui.window.Window.popUpInWindow(studyDetails, title, width, height);
+          osparc.ui.window.Window.popUpInWindow(studyDetails, title, width, height).set({
+            maxHeight: height
+          });
         } else {
           const node = study.getWorkbench().getNode(nodeId);
           const serviceDetails = new osparc.info.ServiceLarge(node.getMetaData(), {
@@ -294,7 +296,9 @@ qx.Class.define("osparc.widget.NodesTree", {
             studyId: study.getUuid()
           });
           const title = this.tr("Service information");
-          osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height);
+          osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height).set({
+            maxHeight: height
+          });
         }
       }
     },

diff --git a/services/static-webserver/client/source/class/osparc/widget/Renamer.js b/services/static-webserver/client/source/class/osparc/widget/Renamer.js
@@ -44,7 +44,6 @@ qx.Class.define("osparc.widget.Renamer", {
     const minWidth = 150;
     const labelWidth = oldLabel ? Math.min(Math.max(parseInt(oldLabel.length*4), minWidth), maxWidth) : minWidth;
     this.set({
-      appearance: "window-small-cap",
       layout: new qx.ui.layout.VBox(5),
       autoDestroy: true,
       padding: 2,

diff --git a/services/static-webserver/client/source/class/osparc/widget/StudyTitleOnlyTree.js b/services/static-webserver/client/source/class/osparc/widget/StudyTitleOnlyTree.js
@@ -48,7 +48,9 @@ qx.Class.define("osparc.widget.StudyTitleOnlyTree", {
       const title = this.tr("Study Information");
       const width = osparc.info.CardLarge.WIDTH;
       const height = osparc.info.CardLarge.HEIGHT;
-      osparc.ui.window.Window.popUpInWindow(studyDetails, title, width, height);
+      osparc.ui.window.Window.popUpInWindow(studyDetails, title, width, height).set({
+        maxHeight: height
+      });
     },
 
     selectStudyItem: function() {

diff --git a/services/static-webserver/client/source/class/osparc/workbench/BaseNodeUI.js b/services/static-webserver/client/source/class/osparc/workbench/BaseNodeUI.js
@@ -28,6 +28,7 @@ qx.Class.define("osparc.workbench.BaseNodeUI", {
     grid.setColumnFlex(1, 1);
 
     this.set({
+      appearance: "node-ui-cap",
       layout: grid,
       showMinimize: false,
       showMaximize: false,
@@ -84,11 +85,6 @@ qx.Class.define("osparc.workbench.BaseNodeUI", {
       nullable: false
     },
 
-    appearance: {
-      init: "window-small-cap",
-      refine: true
-    },
-
     isMovable: {
       check: "Boolean",
       init: true,
@@ -113,8 +109,8 @@ qx.Class.define("osparc.workbench.BaseNodeUI", {
     },
 
     captionHeight: function() {
-      return osparc.theme.Appearance.appearances["window-small-cap/captionbar"].style().height ||
-        osparc.theme.Appearance.appearances["window-small-cap/captionbar"].style().minHeight;
+      return osparc.theme.Appearance.appearances["node-ui-cap/captionbar"].style().height ||
+        osparc.theme.Appearance.appearances["node-ui-cap/captionbar"].style().minHeight;
     }
   },
 

diff --git a/services/static-webserver/client/source/class/osparc/workbench/EdgeUI.js b/services/static-webserver/client/source/class/osparc/workbench/EdgeUI.js
@@ -122,6 +122,15 @@ qx.Class.define("osparc.workbench.EdgeUI", {
       }
     },
 
+    setHighlighted: function(highlight) {
+      if (highlight) {
+        const strongColor = qx.theme.manager.Color.getInstance().resolve("strong-main");
+        osparc.wrapper.Svg.updateCurveColor(this.getRepresentation(), strongColor);
+      } else {
+        this.__updateEdgeState();
+      }
+    },
+
     getEdgeId: function() {
       return this.getEdge().getEdgeId();
     },

diff --git a/services/static-webserver/client/source/class/osparc/workbench/ServiceCatalog.js b/services/static-webserver/client/source/class/osparc/workbench/ServiceCatalog.js
@@ -303,7 +303,9 @@ qx.Class.define("osparc.workbench.ServiceCatalog", {
       const title = this.tr("Service information");
       const width = osparc.info.CardLarge.WIDTH;
       const height = osparc.info.CardLarge.HEIGHT;
-      osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height);
+      osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height).set({
+        maxHeight: height,
+      });
     },
 
     __onCancel: function() {