From b15ab318e5e8afd8f8d79ef87863bd83b75244b9 Mon Sep 17 00:00:00 2001
From: Odei Maiz <33152403+odeimaiz@users.noreply.github.com>
Date: Mon, 16 Oct 2023 08:51:38 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Show=20editable=20Study=20title=20o?=
=?UTF-8?q?n=20Navigation=20Bar=20(#4865)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../client/source/class/osparc/Application.js | 1 -
.../source/class/osparc/desktop/MainPage.js | 6 +-
.../class/osparc/desktop/SlideshowToolbar.js | 45 +------
.../class/osparc/desktop/SlideshowView.js | 18 ++-
.../class/osparc/desktop/WorkbenchView.js | 38 +++---
.../class/osparc/navigation/NavigationBar.js | 59 ++-------
.../osparc/navigation/StudyTitleWOptions.js | 113 ++++++++++++++++++
.../source/class/osparc/ui/form/EditLabel.js | 4 +-
8 files changed, 161 insertions(+), 123 deletions(-)
create mode 100644 services/static-webserver/client/source/class/osparc/navigation/StudyTitleWOptions.js
diff --git a/services/static-webserver/client/source/class/osparc/Application.js b/services/static-webserver/client/source/class/osparc/Application.js
index 17adc7010c2..ae4e28c41d1 100644
--- a/services/static-webserver/client/source/class/osparc/Application.js
+++ b/services/static-webserver/client/source/class/osparc/Application.js
@@ -346,7 +346,6 @@ qx.Class.define("osparc.Application", {
// Invalidate the entire cache
osparc.store.Store.getInstance().invalidateEntireCache();
await this.__preloadCalls();
- await osparc.data.Resources.get("permissions");
const profile = await osparc.data.Resources.getOne("profile");
if (profile) {
this.__connectWebSocket();
diff --git a/services/static-webserver/client/source/class/osparc/desktop/MainPage.js b/services/static-webserver/client/source/class/osparc/desktop/MainPage.js
index 96a5f04e727..067c4dc2c36 100644
--- a/services/static-webserver/client/source/class/osparc/desktop/MainPage.js
+++ b/services/static-webserver/client/source/class/osparc/desktop/MainPage.js
@@ -114,11 +114,7 @@ qx.Class.define("osparc.desktop.MainPage", {
if (!isReadOnly && preferencesSettings.getConfirmBackToDashboard()) {
const studyName = this.__studyEditor.getStudy().getName();
const win = new osparc.ui.window.Confirmation();
- if (
- osparc.product.Utils.isProduct("s4l") ||
- osparc.product.Utils.isProduct("s4llite") ||
- osparc.product.Utils.isProduct("s4lacad")
- ) {
+ if (osparc.product.Utils.getProductName().includes("s4l")) {
let msg = this.tr("Do you want to close ") + "" + studyName + "?";
msg += "
";
msg += this.tr("Make sure you saved your changes to:");
diff --git a/services/static-webserver/client/source/class/osparc/desktop/SlideshowToolbar.js b/services/static-webserver/client/source/class/osparc/desktop/SlideshowToolbar.js
index 4e6312f07b1..4ebb912f4f6 100644
--- a/services/static-webserver/client/source/class/osparc/desktop/SlideshowToolbar.js
+++ b/services/static-webserver/client/source/class/osparc/desktop/SlideshowToolbar.js
@@ -32,22 +32,6 @@ qx.Class.define("osparc.desktop.SlideshowToolbar", {
_createChildControlImpl: function(id) {
let control;
switch (id) {
- case "study-info":
- control = new qx.ui.form.Button(null, "@MaterialIcons/info_outline/16").set({
- ...osparc.navigation.NavigationBar.BUTTON_OPTIONS,
- toolTipText: this.tr("Study Information")
- });
- control.addListener("execute", () => this.__openStudyDetails(), this);
- this._add(control);
- break;
- case "study-title":
- control = new qx.ui.basic.Label().set({
- marginLeft: 10,
- maxWidth: 200,
- font: "text-16"
- });
- this._add(control);
- break;
case "edit-slideshow-buttons": {
control = new qx.ui.container.Stack();
const editBtn = new qx.ui.form.Button(null, "@FontAwesome5Solid/edit/14").set({
@@ -146,9 +130,8 @@ qx.Class.define("osparc.desktop.SlideshowToolbar", {
// overridden
_buildLayout: function() {
- this.getChildControl("study-info");
- this.getChildControl("study-title");
-
+ const spacerLeft = new qx.ui.core.Spacer(); // match "stop-slideshow" to keep breadcrumbs centered
+ this._add(spacerLeft);
this._add(new qx.ui.core.Spacer(), {
flex: 1
});
@@ -161,18 +144,10 @@ qx.Class.define("osparc.desktop.SlideshowToolbar", {
flex: 1
});
- this.getChildControl("stop-slideshow");
- },
-
- // overridden
- _applyStudy: function(study) {
- this.base(arguments, study);
-
- if (study) {
- const studyTitle = this.getChildControl("study-title");
- study.bind("name", studyTitle, "value");
- study.bind("name", studyTitle, "toolTipText");
- }
+ const stopSlideshowButton = this.getChildControl("stop-slideshow");
+ stopSlideshowButton.bind("visibility", spacerLeft, "width", {
+ converter: visible => visible ? 120 : 0
+ });
},
// overridden
@@ -203,14 +178,6 @@ qx.Class.define("osparc.desktop.SlideshowToolbar", {
}
},
- __openStudyDetails: function() {
- const studyDetails = new osparc.info.StudyLarge(this.getStudy());
- 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);
- },
-
__evalButtonsIfEditing: function() {
const editSlideshowButtons = this.getChildControl("edit-slideshow-buttons");
const currentModeBtn = editSlideshowButtons.getSelection()[0];
diff --git a/services/static-webserver/client/source/class/osparc/desktop/SlideshowView.js b/services/static-webserver/client/source/class/osparc/desktop/SlideshowView.js
index 31be663ff02..1cf0340492d 100644
--- a/services/static-webserver/client/source/class/osparc/desktop/SlideshowView.js
+++ b/services/static-webserver/client/source/class/osparc/desktop/SlideshowView.js
@@ -124,6 +124,14 @@ qx.Class.define("osparc.desktop.SlideshowView", {
nullable: false
},
+ maximized: {
+ check: "Boolean",
+ init: null,
+ nullable: false,
+ apply: "__applyMaximized",
+ event: "changeMaximized"
+ },
+
pageContext: {
check: ["guided", "app"],
nullable: false,
@@ -210,8 +218,8 @@ qx.Class.define("osparc.desktop.SlideshowView", {
iFrame
].forEach(widget => {
if (widget) {
- widget.addListener("maximize", () => this.__maximizeIframe(true), this);
- widget.addListener("restore", () => this.__maximizeIframe(false), this);
+ widget.addListener("maximize", () => this.setMaximized(true), this);
+ widget.addListener("restore", () => this.setMaximized(false), this);
}
});
}
@@ -334,7 +342,7 @@ qx.Class.define("osparc.desktop.SlideshowView", {
this.getStudy().getUi().setCurrentNodeId(nodeId);
},
- __maximizeIframe: function(maximize) {
+ __applyMaximized: function(maximized) {
[
this.__slideshowToolbar,
this.__prevButton,
@@ -342,10 +350,10 @@ qx.Class.define("osparc.desktop.SlideshowView", {
this.__runButton,
this.__nodeView.getHeaderLayout(),
this.__nodeView.getLoggerPanel()
- ].forEach(widget => widget.setVisibility(maximize ? "excluded" : "visible"));
+ ].forEach(widget => widget.setVisibility(maximized ? "excluded" : "visible"));
this.__nodeView.set({
- margin: maximize ? 0 : this.self().CARD_MARGIN
+ margin: maximized ? 0 : this.self().CARD_MARGIN
});
},
diff --git a/services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js b/services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js
index 27feefaf6fa..c26e42a4739 100644
--- a/services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js
+++ b/services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js
@@ -81,6 +81,14 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
check: "osparc.data.model.Study",
apply: "_applyStudy",
nullable: false
+ },
+
+ maximized: {
+ check: "Boolean",
+ init: null,
+ nullable: false,
+ apply: "__applyMaximized",
+ event: "changeMaximized"
}
},
@@ -801,16 +809,16 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
}
},
- __maximizeIframe: function(maximize) {
+ __applyMaximized: function(maximized) {
this.getBlocker().setStyles({
- display: maximize ? "none" : "block"
+ display: maximized ? "none" : "block"
});
- this.getChildControl("side-panels").setVisibility(maximize ? "excluded" : "visible");
+ this.getChildControl("side-panels").setVisibility(maximized ? "excluded" : "visible");
const tabViewMain = this.getChildControl("main-panel-tabs");
- const mainViewtopBar = tabViewMain.getChildControl("bar");
- mainViewtopBar.setVisibility(maximize ? "excluded" : "visible");
+ const mainViewTopBar = tabViewMain.getChildControl("bar");
+ mainViewTopBar.setVisibility(maximized ? "excluded" : "visible");
},
__addIframe: function(node) {
@@ -824,8 +832,8 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
iFrame
].forEach(widget => {
if (widget) {
- widget.addListener("maximize", () => this.__maximizeIframe(true), this);
- widget.addListener("restore", () => this.__maximizeIframe(false), this);
+ widget.addListener("maximize", () => this.setMaximized(true), this);
+ widget.addListener("restore", () => this.setMaximized(false), this);
}
});
this.__iFrameChanged(node);
@@ -1209,17 +1217,9 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
},
__attachEventHandlers: function() {
- const maximizeIframeCb = msg => {
- this.__maximizeIframe(msg.getData());
- };
-
- this.addListener("appear", () => {
- qx.event.message.Bus.getInstance().subscribe("maximizeIframe", maximizeIframeCb, this);
- }, this);
-
- this.addListener("disappear", () => {
- qx.event.message.Bus.getInstance().unsubscribe("maximizeIframe", maximizeIframeCb, this);
- }, this);
+ const maximizeIframeCb = msg => this.setMaximized(msg.getData());
+ this.addListener("appear", () => qx.event.message.Bus.getInstance().subscribe("maximizeIframe", maximizeIframeCb, this), this);
+ this.addListener("disappear", () => qx.event.message.Bus.getInstance().unsubscribe("maximizeIframe", maximizeIframeCb, this), this);
},
__removeNode: function(nodeId) {
@@ -1310,7 +1310,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
}, this, 10);
return;
}
- this.__maximizeIframe(false);
+ this.setMaximized(false);
this.nodeSelected(this.getStudy().getUuid());
}
}
diff --git a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js
index 63330b9d417..ac2f89f42e3 100644
--- a/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js
+++ b/services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js
@@ -71,6 +71,7 @@ qx.Class.define("osparc.navigation.NavigationBar", {
study: {
check: "osparc.data.model.Study",
nullable: true,
+ event: "changeStudy",
apply: "_applyStudy"
},
@@ -200,49 +201,9 @@ qx.Class.define("osparc.navigation.NavigationBar", {
osparc.utils.Utils.setIdToWidget(control, "dashboardLabel");
this.getChildControl("left-items").add(control);
break;
- case "study-menu-info":
- control = new qx.ui.menu.Button().set({
- label: this.tr("Information..."),
- icon: "@MaterialIcons/info_outline/14",
- ...this.self().BUTTON_OPTIONS
- });
- control.addListener("execute", () => {
- const infoMerged = new osparc.info.MergedLarge(this.getStudy());
- const title = this.tr("Information");
- const width = osparc.info.CardLarge.WIDTH;
- const height = osparc.info.CardLarge.HEIGHT;
- osparc.ui.window.Window.popUpInWindow(infoMerged, title, width, height);
- });
- break;
- case "study-menu-download-logs":
- control = new qx.ui.menu.Button().set({
- label: this.tr("Download logs"),
- icon: "@FontAwesome5Solid/download/14",
- ...this.self().BUTTON_OPTIONS
- });
- control.addListener("execute", () => this.fireEvent("downloadStudyLogs"));
- break;
- case "study-menu-button": {
- const optionsMenu = new qx.ui.menu.Menu();
- optionsMenu.add(this.getChildControl("study-menu-info"));
- optionsMenu.add(this.getChildControl("study-menu-download-logs"));
- control = new qx.ui.form.MenuButton().set({
- ...this.self().BUTTON_OPTIONS,
- menu: optionsMenu,
- icon: "@FontAwesome5Solid/ellipsis-v/16"
- });
- this.getChildControl("left-items").add(control);
- break;
- }
- case "edit-title-label":
- control = new osparc.ui.form.EditLabel().set({
- labelFont: "text-16",
- inputFont: "text-16"
- });
- control.addListener("editValue", e => {
- const newLabel = e.getData();
- this.getStudy().setName(newLabel);
- });
+ case "study-title-options":
+ control = new osparc.navigation.StudyTitleWOptions();
+ control.addListener("downloadStudyLogs", () => this.fireEvent("downloadStudyLogs"));
this.getChildControl("left-items").add(control);
break;
case "read-only-info": {
@@ -354,10 +315,7 @@ qx.Class.define("osparc.navigation.NavigationBar", {
case "dashboard":
this.getChildControl("dashboard-label").show();
this.getChildControl("dashboard-button").exclude();
- if (osparc.product.Utils.isProduct("s4llite")) {
- this.getChildControl("study-menu-button").exclude();
- this.getChildControl("edit-title-label").exclude();
- }
+ this.getChildControl("study-title-options").exclude();
this.getChildControl("read-only-info").exclude();
if (this.__tabButtons) {
this.__tabButtons.show();
@@ -368,10 +326,7 @@ qx.Class.define("osparc.navigation.NavigationBar", {
case "app":
this.getChildControl("dashboard-label").exclude();
this.getChildControl("dashboard-button").show();
- if (osparc.product.Utils.isProduct("s4llite")) {
- this.getChildControl("study-menu-button").show();
- this.getChildControl("edit-title-label").show();
- }
+ this.getChildControl("study-title-options").show();
if (this.__tabButtons) {
this.__tabButtons.exclude();
}
@@ -426,7 +381,7 @@ qx.Class.define("osparc.navigation.NavigationBar", {
study.bind("readOnly", this.getChildControl("read-only-info"), "visibility", {
converter: value => value ? "visible" : "excluded"
});
- study.bind("name", this.getChildControl("edit-title-label"), "value");
+ this.getChildControl("study-title-options").setStudy(study);
}
},
diff --git a/services/static-webserver/client/source/class/osparc/navigation/StudyTitleWOptions.js b/services/static-webserver/client/source/class/osparc/navigation/StudyTitleWOptions.js
new file mode 100644
index 00000000000..6b4b5940dbb
--- /dev/null
+++ b/services/static-webserver/client/source/class/osparc/navigation/StudyTitleWOptions.js
@@ -0,0 +1,113 @@
+/* ************************************************************************
+
+ osparc - the simcore frontend
+
+ https://osparc.io
+
+ Copyright:
+ 2023 IT'IS Foundation, https://itis.swiss
+
+ License:
+ MIT: https://opensource.org/licenses/MIT
+
+ Authors:
+ * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.navigation.StudyTitleWOptions", {
+ extend: qx.ui.core.Widget,
+
+ construct: function() {
+ this.base(arguments);
+
+ this._setLayout(new qx.ui.layout.HBox(10).set({
+ alignY: "middle"
+ }));
+
+ this.getChildControl("study-menu-button");
+ this.getChildControl("edit-title-label");
+ },
+
+ events: {
+ "downloadStudyLogs": "qx.event.type.Event"
+ },
+
+ properties: {
+ study: {
+ check: "osparc.data.model.Study",
+ nullable: true,
+ event: "changeStudy",
+ apply: "__applyStudy"
+ }
+ },
+
+ members: {
+ _createChildControlImpl: function(id) {
+ let control;
+ switch (id) {
+ case "study-menu-info":
+ control = new qx.ui.menu.Button().set({
+ label: this.tr("Information..."),
+ icon: "@MaterialIcons/info_outline/14",
+ ...this.self().BUTTON_OPTIONS
+ });
+ control.addListener("execute", () => {
+ let widget = null;
+ if (this.getStudy().isPipelineMononode()) {
+ widget = new osparc.info.MergedLarge(this.getStudy());
+ } else {
+ widget = new osparc.info.StudyLarge(this.getStudy());
+ }
+ 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);
+ });
+ break;
+ case "study-menu-download-logs":
+ control = new qx.ui.menu.Button().set({
+ label: this.tr("Download logs"),
+ icon: "@FontAwesome5Solid/download/14"
+ });
+ control.addListener("execute", () => this.fireEvent("downloadStudyLogs"));
+ break;
+ case "study-menu-button": {
+ const optionsMenu = new qx.ui.menu.Menu();
+ optionsMenu.add(this.getChildControl("study-menu-info"));
+ optionsMenu.add(this.getChildControl("study-menu-download-logs"));
+ control = new qx.ui.form.MenuButton().set({
+ menu: optionsMenu,
+ icon: "@FontAwesome5Solid/ellipsis-v/14",
+ width: 28,
+ height: 28,
+ allowGrowY: false
+ });
+ this._add(control);
+ break;
+ }
+ case "edit-title-label":
+ control = new osparc.ui.form.EditLabel().set({
+ labelFont: "text-14",
+ inputFont: "text-14",
+ maxWidth: 300
+ });
+ control.addListener("editValue", e => {
+ const newLabel = e.getData();
+ this.getStudy().setName(newLabel);
+ });
+ this._add(control);
+ break;
+ }
+ return control || this.base(arguments, id);
+ },
+
+ __applyStudy: function(study) {
+ if (study) {
+ study.bind("name", this.getChildControl("edit-title-label"), "value");
+ } else {
+ this.exclude();
+ }
+ }
+ }
+});
diff --git a/services/static-webserver/client/source/class/osparc/ui/form/EditLabel.js b/services/static-webserver/client/source/class/osparc/ui/form/EditLabel.js
index 2809e35166b..47750b1acd8 100644
--- a/services/static-webserver/client/source/class/osparc/ui/form/EditLabel.js
+++ b/services/static-webserver/client/source/class/osparc/ui/form/EditLabel.js
@@ -7,7 +7,7 @@
/**
* Renders a label and an input combined widget. The idea is to be able to edit a label quickly. Fires an event
- * whenever the input is modified to be able to update the value of the label externaly or to trigger some other
+ * whenever the input is modified to be able to update the value of the label externally or to trigger some other
* logic (like API calls).
*/
qx.Class.define("osparc.ui.form.EditLabel", {
@@ -54,7 +54,7 @@ qx.Class.define("osparc.ui.form.EditLabel", {
apply: "_applyMode"
},
/**
- * Master value of the widget. The label in display mode will allways show this value.
+ * Master value of the widget. The label in display mode will always show this value.
*/
value: {
check: "String",