From 2f0cfb0d70265af83232ef05429aa057e426efab Mon Sep 17 00:00:00 2001 From: Odei Maiz <33152403+odeimaiz@users.noreply.github.com> Date: Tue, 5 Nov 2024 17:03:50 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20[Frontend]=20Highlight=20workben?= =?UTF-8?q?ch=20elements=20(#6670)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../source/class/osparc/file/FileDrop.js | 6 +++-- .../source/class/osparc/file/FilePicker.js | 4 +-- .../class/osparc/form/renderer/PropForm.js | 12 +++++++++ .../source/class/osparc/info/StudyMedium.js | 4 ++- .../class/osparc/metadata/ServicesInStudy.js | 4 ++- .../osparc/navigation/StudyTitleWOptions.js | 4 ++- .../osparc/node/slideshow/BaseNodeView.js | 4 ++- .../class/osparc/service/ServiceListItem.js | 4 ++- .../source/class/osparc/theme/Appearance.js | 18 ++++++------- .../source/class/osparc/theme/ColorDark.js | 8 +++--- .../source/class/osparc/theme/ColorLight.js | 8 +++--- .../source/class/osparc/theme/Decoration.js | 4 +-- .../source/class/osparc/widget/NodesTree.js | 8 ++++-- .../source/class/osparc/widget/Renamer.js | 1 - .../class/osparc/widget/StudyTitleOnlyTree.js | 4 ++- .../class/osparc/workbench/BaseNodeUI.js | 10 +++---- .../source/class/osparc/workbench/EdgeUI.js | 9 +++++++ .../class/osparc/workbench/ServiceCatalog.js | 4 ++- .../class/osparc/workbench/WorkbenchUI.js | 27 ++++++++++++++++--- 19 files changed, 98 insertions(+), 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 index f7aa0734b2f..106a6c66b51 100644 --- 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.") + "
" + 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 index 9b2b6872512..67d67c8455a 100644 --- 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 index ac609258130..ccd205a92e0 100644 --- 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 index e8c77c184dc..cb9eab2b432 100644 --- 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 index 9f1dbe17600..b51dc1c7515 100644 --- 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 index f580df87fcd..342f0de8cee 100644 --- 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 index 84acc271802..e7de026cd94 100644 --- 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 index e93cf802333..959859389ac 100644 --- 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 index 324cf65ff48..16facaa2949 100644 --- 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 index 0d4085c3153..ca275a2371d 100644 --- 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 index 6feedc258b6..54f1e83d0ea 100644 --- 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 index 5ec725e45f4..7eae08b8f89 100644 --- 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 index e35409e5b34..0b543b6a158 100644 --- 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 index 8b7dcc161f4..fbba9f5184e 100644 --- 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 index a153891b8cb..6d3499b2364 100644 --- 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 index 375b0c7f761..bd43406a518 100644 --- 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 index 01dd4990fab..40e72e134f9 100644 --- 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 index a82a513cd3d..faf60dd0034 100644 --- 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() { diff --git a/services/static-webserver/client/source/class/osparc/workbench/WorkbenchUI.js b/services/static-webserver/client/source/class/osparc/workbench/WorkbenchUI.js index a11cb9ceb10..21c55e487d1 100644 --- a/services/static-webserver/client/source/class/osparc/workbench/WorkbenchUI.js +++ b/services/static-webserver/client/source/class/osparc/workbench/WorkbenchUI.js @@ -484,7 +484,7 @@ qx.Class.define("osparc.workbench.WorkbenchUI", { const allChildren = Array.from(this.getContentElement().getDomElement().getElementsByTagName("*")); const nodesAndSuspicious = allChildren.filter(child => parseInt(child.style.zIndex) >= 100000); nodesAndSuspicious.forEach(child => { - if (child.className !== "qx-window-small-cap") { + if (child.className !== "qx-node-ui-cap") { console.warn("moving undesired element to background"); child.style.zIndex = "1"; } @@ -654,6 +654,25 @@ qx.Class.define("osparc.workbench.WorkbenchUI", { nodeUI.addListener("infoNode", e => this.__openNodeInfo(e.getData()), this); nodeUI.addListener("removeNode", e => this.fireDataEvent("removeNode", e.getData()), this); + if (nodeUI.getNode().getPropsForm()) { + nodeUI.getNode().getPropsForm().addListener("highlightEdge", e => { + const { + highlight, + fromNodeId, + toNodeId, + } = e.getData(); + const edgeFound = this.__edgesUI.find(edgeUI => { + const edge = edgeUI.getEdge(); + const inputNode = edge.getInputNode(); + const outputNode = edge.getOutputNode(); + return (inputNode.getNodeId() === fromNodeId && outputNode.getNodeId() === toNodeId) + }); + if (edgeFound) { + edgeFound.setHighlighted(highlight); + } + }); + } + return nodeUI; }, @@ -1654,7 +1673,9 @@ qx.Class.define("osparc.workbench.WorkbenchUI", { 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 + }); } }, @@ -2002,7 +2023,7 @@ qx.Class.define("osparc.workbench.WorkbenchUI", { filePicker.addListener("fileUploaded", () => this.fireDataEvent("nodeSelected", nodeUI.getNodeId()), this); } } 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");