diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js b/services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js index 339909c62bd..f79e5839586 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js @@ -102,27 +102,36 @@ qx.Class.define("osparc.dashboard.ContainerHeader", { return this.__createFolderButton(currentFolder); }, - __createRootButton: function(workspaceId) { + __changeContext: function(workspaceId, folderId) { + this.set({ + currentWorkspaceId: workspaceId, + currentFolderId: folderId, + }); + this.fireDataEvent("changeContext", { + workspaceId, + folderId, + }); + }, + + __createRootButton: function() { + const workspaceId = this.getCurrentWorkspaceId(); let rootButton = null; if (workspaceId) { if (workspaceId === -1) { rootButton = new qx.ui.form.Button(this.tr("Shared Workspaces"), osparc.store.Workspaces.iconPath()); } else { const workspace = osparc.store.Workspaces.getInstance().getWorkspace(workspaceId); - rootButton = new qx.ui.form.Button(workspace.getName(), osparc.store.Workspaces.iconPath()); + rootButton = new qx.ui.form.Button(workspace.getName(), osparc.store.Workspaces.iconPath()).set({ + maxWidth: 200 + }); + workspace.bind("name", rootButton, "label"); } } else { rootButton = new qx.ui.form.Button(this.tr("My Workspace"), "@FontAwesome5Solid/home/14"); } rootButton.addListener("execute", () => { const folderId = null; - this.set({ - currentFolderId: null, - }); - this.fireDataEvent("changeContext", { - workspaceId, - folderId, - }); + this.__changeContext(workspaceId, folderId); }); return rootButton; }, @@ -130,21 +139,17 @@ qx.Class.define("osparc.dashboard.ContainerHeader", { __createFolderButton: function(folder) { let folderButton = null; if (folder) { - folderButton = new qx.ui.form.Button(folder.getName(), "@FontAwesome5Solid/folder/14"); + folderButton = new qx.ui.form.Button(folder.getName(), "@FontAwesome5Solid/folder/14").set({ + maxWidth: 200 + }); + folder.bind("name", folderButton, "label"); folderButton.addListener("execute", () => { const workspaceId = this.getCurrentWorkspaceId(); const folderId = folder ? folder.getFolderId() : null; - this.set({ - currentFolderId: folderId, - }); - this.fireDataEvent("changeContext", { - workspaceId, - folderId, - }); + this.__changeContext(workspaceId, folderId); }, this); } else { - const workspaceId = this.getCurrentWorkspaceId(); - folderButton = this.__createRootButton(workspaceId); + folderButton = this.__createRootButton(); } folderButton.set({ backgroundColor: "transparent", diff --git a/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonBase.js b/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonBase.js index f4313121786..821c9d3455c 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonBase.js @@ -83,7 +83,7 @@ qx.Class.define("osparc.dashboard.FolderButtonBase", { row: 0, rowSpan: 2 } - } + }, }, members: { // eslint-disable-line qx-rules/no-refs-in-members diff --git a/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonItem.js index 2aae68b41a7..79847e46334 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonItem.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonItem.js @@ -105,7 +105,6 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", { control = new qx.ui.basic.Label().set({ anonymous: true, font: "text-14", - rich: true, }); this._add(control, osparc.dashboard.FolderButtonBase.POS.TITLE); break; @@ -169,6 +168,8 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", { __applyTitle: function(value) { const label = this.getChildControl("title"); label.setValue(value); + + this.setToolTipText(value); }, __applyLastModified: function(value) { diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js index e15d65a32eb..b63b1a12074 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js @@ -251,18 +251,32 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", { resourcesContainer.addListener("publishTemplate", e => this.fireDataEvent("publishTemplate", e.getData())); resourcesContainer.addListener("tagClicked", e => this._searchBarFilter.addTagActiveFilter(e.getData())); resourcesContainer.addListener("emptyStudyClicked", e => this._deleteResourceRequested(e.getData())); - resourcesContainer.addListener("folderSelected", e => this._folderSelected(e.getData())); resourcesContainer.addListener("folderUpdated", e => this._folderUpdated(e.getData())); resourcesContainer.addListener("moveFolderToFolderRequested", e => this._moveFolderToFolderRequested(e.getData())); resourcesContainer.addListener("moveFolderToWorkspaceRequested", e => this._moveFolderToWorkspaceRequested(e.getData())); resourcesContainer.addListener("deleteFolderRequested", e => this._deleteFolderRequested(e.getData())); + resourcesContainer.addListener("folderSelected", e => { + const folderId = e.getData(); + this._folderSelected(folderId); + this._resourceFilter.folderSelected(folderId); + }, this); resourcesContainer.addListener("workspaceSelected", e => { const workspaceId = e.getData(); this._workspaceSelected(workspaceId); this._resourceFilter.workspaceSelected(workspaceId); - }); + }, this); resourcesContainer.addListener("workspaceUpdated", e => this._workspaceUpdated(e.getData())); resourcesContainer.addListener("deleteWorkspaceRequested", e => this._deleteWorkspaceRequested(e.getData())); + + const containerHeader = this._resourcesContainer.getContainerHeader(); + containerHeader.addListener("changeContext", e => { + const { + workspaceId, + folderId, + } = e.getData(); + this._resourceFilter.contextChanged(workspaceId, folderId); + }, this); + this._addToLayout(resourcesContainer); }, diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceFilter.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceFilter.js index 0a1e8292e65..234387a2f56 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceFilter.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceFilter.js @@ -62,6 +62,8 @@ qx.Class.define("osparc.dashboard.ResourceFilter", { } }, + + /* WORKSPACES AND FOLDERS */ __createWorkspacesAndFoldersTree: function() { const workspacesAndFoldersTree = this.__workspacesAndFoldersTree = new osparc.dashboard.WorkspacesAndFoldersTree(); // Height needs to be calculated manually to make it flexible @@ -82,6 +84,32 @@ qx.Class.define("osparc.dashboard.ResourceFilter", { return this.__workspacesAndFoldersTree; }, + contextChanged: function(workspaceId, folderId) { + this.__workspacesAndFoldersTree.set({ + currentWorkspaceId: workspaceId, + currentFolderId: folderId, + }); + this.__workspacesAndFoldersTree.contextChanged(); + }, + + workspaceSelected: function(workspaceId) { + this.__workspacesAndFoldersTree.set({ + currentWorkspaceId: workspaceId, + currentFolderId: null, + }); + this.__workspacesAndFoldersTree.contextChanged(); + }, + + folderSelected: function(folderId) { + const workspaceId = this.__workspacesAndFoldersTree.getCurrentWorkspaceId(); + this.__workspacesAndFoldersTree.set({ + currentWorkspaceId: workspaceId, + currentFolderId: folderId, + }); + this.__workspacesAndFoldersTree.contextChanged(); + }, + /* /WORKSPACES AND FOLDERS */ + /* SHARED WITH */ __createSharedWithFilterLayout: function() { const sharedWithLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)); @@ -137,12 +165,6 @@ qx.Class.define("osparc.dashboard.ResourceFilter", { }, /* /SHARED WITH */ - /* WORKSPACES */ - workspaceSelected: function(workspaceId) { - // OM: select folder - }, - /* /WORKSPACES */ - /* TAGS */ __createTagsFilterLayout: function() { const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)); diff --git a/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js index 91aa166b139..97c5638abd2 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js @@ -882,15 +882,17 @@ qx.Class.define("osparc.dashboard.StudyBrowser", { const containerHeader = this._resourcesContainer.getContainerHeader(); if (containerHeader) { - this.bind("currentWorkspaceId", containerHeader, "currentWorkspaceId", { - onUpdate: () => containerHeader.setCurrentFolderId(null) - }); + this.bind("currentWorkspaceId", containerHeader, "currentWorkspaceId"); this.bind("currentFolderId", containerHeader, "currentFolderId"); containerHeader.addListener("changeContext", e => { const { workspaceId, folderId, } = e.getData(); + this.set({ + currentWorkspaceId: workspaceId, + currentFolderId: folderId, + }) this._changeContext(workspaceId, folderId); }); } diff --git a/services/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTree.js b/services/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTree.js index 702fcfc3133..557de2bef7f 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTree.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTree.js @@ -46,6 +46,9 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", { this.__initTree(); + // preselect "My Workspace" + this.contextChanged(null, null); + osparc.store.Folders.getInstance().addListener("folderAdded", e => { const folder = e.getData(); this.__folderAdded(folder); @@ -249,5 +252,17 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", { } } }, + + contextChanged: function() { + const workspaceId = this.getCurrentWorkspaceId(); + const folderId = this.getCurrentFolderId(); + + const contextModel = this.__getModel(workspaceId, folderId); + if (contextModel) { + const selection = this.getSelection(); + selection.removeAll(); + selection.push(contextModel); + } + }, } }); diff --git a/services/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTreeItem.js b/services/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTreeItem.js index 3191e2b2d46..3fe98892e8a 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTreeItem.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTreeItem.js @@ -29,6 +29,10 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTreeItem", { "border-radius": "8px" }); + this.set({ + maxWidth: 200 - 10 + }); + this.setNotHoveredStyle(); this.__attachEventHandlers(); },