🎨🐛 [Frontend] Folders tree: improvements II

services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js

@@ -38,7 +38,6 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
 
 
     const workspacesContainer = this.__workspacesContainer = new osparc.dashboard.ToggleButtonContainer();
-    this._add(workspacesContainer);
     workspacesContainer.setVisibility(osparc.utils.DisabledPlugins.isFoldersEnabled() ? "visible" : "excluded");
 
 

services/static-webserver/client/source/class/osparc/dashboard/ResourceFilter.js

@@ -165,7 +165,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
       this.__tagButtons = [];
       layout.removeAll();
       osparc.store.Store.getInstance().getTags().forEach((tag, idx) => {
-        const button = new qx.ui.form.ToggleButton(tag.name, "@FontAwesome5Solid/tag/20");
+        const button = new qx.ui.form.ToggleButton(tag.name, "@FontAwesome5Solid/tag/18");
         button.id = tag.id;
         button.set({
           appearance: "filter-toggle-button",

services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js

@@ -480,15 +480,16 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           // If user can't write in workspace, do not show plus button
           return;
         }
-        const newFolderCard = new osparc.dashboard.FolderButtonNew();
-        newFolderCard.setCardKey("new-folder");
-        newFolderCard.subscribeToFilterGroup("searchBarFilter");
-        newFolderCard.addListener("createFolder", e => {
-          const data = e.getData();
-          this.__createFolder(data);
-        }, this);
-        this._resourcesContainer.addNewFolderCard(newFolderCard);
       }
+
+      const newFolderCard = new osparc.dashboard.FolderButtonNew();
+      newFolderCard.setCardKey("new-folder");
+      newFolderCard.subscribeToFilterGroup("searchBarFilter");
+      newFolderCard.addListener("createFolder", e => {
+        const data = e.getData();
+        this.__createFolder(data);
+      }, this);
+      this._resourcesContainer.addNewFolderCard(newFolderCard);
     },
 
     __createFolder: function(data) {

services/static-webserver/client/source/class/osparc/dashboard/WorkspaceHeader.js

@@ -122,16 +122,6 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
           }));
           this._add(control);
           break;
-        case "share-icon": {
-          control = new qx.ui.basic.Image().set({
-            alignY: "middle",
-            allowGrowX: false,
-            allowShrinkX: false
-          });
-          const layout = this.getChildControl("share-layout");
-          layout.addAt(control, 0);
-          break;
-        }
         case "share-text": {
           control = new qx.ui.basic.Label().set({
             font: "text-14"
@@ -227,8 +217,24 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
       this.__spacers.forEach(spacer => spacer.setVisibility(show ? "visible" : "excluded"));
     },
 
+    __getShareIcon: function() {
+      // reset previous
+      const layout = this.getChildControl("share-layout");
+      if (this.__shareIcon) {
+        layout.remove(this.__shareIcon);
+      }
+
+      const shareIcon = this.__shareIcon = new qx.ui.basic.Image().set({
+        alignY: "middle",
+        allowGrowX: false,
+        allowShrinkX: false
+      });
+      layout.addAt(shareIcon, 0);
+      return shareIcon;
+    },
+
     __applyAccessRights: function(accessRights) {
-      const shareIcon = this.getChildControl("share-icon");
+      const shareIcon = this.__getShareIcon();
       const shareText = this.getChildControl("share-text");
       if (accessRights && Object.keys(accessRights).length) {
         osparc.dashboard.CardBase.populateShareIcon(shareIcon, accessRights);
@@ -248,7 +254,7 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
       const roleText = this.getChildControl("role-text");
       const roleIcon = this.getChildControl("role-icon");
       if (value && Object.keys(value).length) {
-        editButton.show();
+        editButton.setVisibility(value["delete"] ? "visible" : "excluded");
         const menu = new qx.ui.menu.Menu().set({
           position: "bottom-right"
         });

services/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTree.js

@@ -36,7 +36,9 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", {
       decorator: "no-border",
       font: "text-14",
       hideRoot: true,
-      paddingLeft: -10,
+      // paddingLeft: -10,
+      contentPadding: 0,
+      padding: 0,
     });
 
     this.__addMyWorkspace(rootModel);
@@ -102,6 +104,7 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", {
     __initTree: function() {
       const that = this;
       this.setDelegate({
+        createItem: () => new osparc.dashboard.WorkspacesAndFoldersTreeItem(),
         bindItem: (c, item, id) => {
           c.bindDefaultProperties(item, id);
           c.bindProperty("", "open", {
@@ -115,12 +118,7 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", {
               return isOpen;
             },
           }, item, id);
-        },
-        configureItem: item => {
-          item.set({
-            indent: 12, // defaults to 19
-          });
-        },
+        }
       });
 
       this.setIconPath("icon");

services/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTreeItem.js

@@ -0,0 +1,54 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2024 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTreeItem", {
+  extend: qx.ui.tree.VirtualTreeItem,
+
+  construct: function() {
+    this.base(arguments);
+
+    this.set({
+      indent: 12, // defaults to 19,
+    });
+
+    this.getContentElement().setStyles({
+      "border-radius": "8px"
+    });
+
+    this.setNotHoveredStyle();
+    this.__attachEventHandlers();
+  },
+
+  members: {
+    __attachEventHandlers: function() {
+      this.addListener("mouseover", () => {
+        this.setHoveredStyle();
+      });
+      this.addListener("mouseout", () => {
+        this.setNotHoveredStyle();
+      });
+    },
+
+    setHoveredStyle: function() {
+      osparc.utils.Utils.addBorder(this, 1, qx.theme.manager.Color.getInstance().resolve("text"));
+    },
+
+    setNotHoveredStyle: function() {
+      osparc.utils.Utils.hideBorder(this);
+    }
+  },
+});