Skip to content

Commit

Permalink
✨ Show editable Study title on Navigation Bar (ITISFoundation#4865)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Oct 16, 2023
1 parent 5c65f5a commit b15ab31
Show file tree
Hide file tree
Showing 8 changed files with 161 additions and 123 deletions.
1 change: 0 additions & 1 deletion services/static-webserver/client/source/class/osparc/Application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
6 changes: 1 addition & 5 deletions services/static-webserver/client/source/class/osparc/desktop/MainPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ") + "<b>" + studyName + "</b>?";
msg += "<br><br>";
msg += this.tr("Make sure you saved your changes to:");
Expand Down
45 changes: 6 additions & 39 deletions services/static-webserver/client/source/class/osparc/desktop/SlideshowToolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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
});
Expand All @@ -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
Expand Down Expand Up @@ -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];
Expand Down
18 changes: 13 additions & 5 deletions services/static-webserver/client/source/class/osparc/desktop/SlideshowView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);
}
});
}
Expand Down Expand Up @@ -334,18 +342,18 @@ qx.Class.define("osparc.desktop.SlideshowView", {
this.getStudy().getUi().setCurrentNodeId(nodeId);
},

__maximizeIframe: function(maximize) {
__applyMaximized: function(maximized) {
[
this.__slideshowToolbar,
this.__prevButton,
this.__nextButton,
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
});
},

Expand Down
38 changes: 19 additions & 19 deletions services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
},

Expand Down Expand Up @@ -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) {
Expand All @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -1310,7 +1310,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
}, this, 10);
return;
}
this.__maximizeIframe(false);
this.setMaximized(false);
this.nodeSelected(this.getStudy().getUuid());
}
}
Expand Down
59 changes: 7 additions & 52 deletions services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ qx.Class.define("osparc.navigation.NavigationBar", {
study: {
check: "osparc.data.model.Study",
nullable: true,
event: "changeStudy",
apply: "_applyStudy"
},

Expand Down Expand Up @@ -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": {
Expand Down Expand Up @@ -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();
Expand All @@ -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();
}
Expand Down Expand Up @@ -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);
}
},

Expand Down
Loading

0 comments on commit b15ab31

Please sign in to comment.