🎨 [Frontend] Enh: Tags UX

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

@@ -489,7 +489,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
         lastChangeDate: resourceData.lastChangeDate ? new Date(resourceData.lastChangeDate) : null,
         trashedAt: resourceData.trashedAt ? new Date(resourceData.trashedAt) : null,
         trashedBy: resourceData.trashedBy || null,
-        icon: ["study", "template"].includes(resourceData.resourceType) ? osparc.study.Utils.guessIcon(resourceData) : null,
+        icon: ["study", "template"].includes(resourceData.resourceType) ? osparc.study.Utils.guessIcon(resourceData) : osparc.dashboard.CardBase.PRODUCT_ICON,
         thumbnail: resourceData.thumbnail || this.self().PRODUCT_THUMBNAIL,
         state: resourceData.state ? resourceData.state : {},
         classifiers: resourceData.classifiers && resourceData.classifiers ? resourceData.classifiers : [],

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

@@ -44,6 +44,7 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
     ITEM_WIDTH: 190,
     ITEM_HEIGHT: 220,
     PADDING: 10,
+    TITLE_PADDING: 6,
     SPACING_IN: 5,
     SPACING: 15,
     ICON_SIZE: 32,
@@ -202,8 +203,8 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
           control = new qx.ui.basic.Label().set({
             textColor: "contrasted-text-light",
             font: "text-14",
-            padding: this.self().PADDING,
-            maxWidth: this.self().ITEM_WIDTH - 2*this.self().PADDING,
+            padding: this.self().TITLE_PADDING,
+            maxWidth: this.self().ITEM_WIDTH,
             maxHeight: this.self().TITLE_MAX_HEIGHT,
           });
           layout = this.getChildControl("header");
@@ -368,14 +369,6 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
       thumbnailLayout.recheckSize();
     },
 
-    replaceIcon: function(newIcon) {
-      const plusIcon = this.getChildControl("icon");
-      plusIcon.exclude();
-
-      const bodyLayout = this.getChildControl("body");
-      bodyLayout.add(newIcon, {flex: 1});
-    },
-
     /**
      * Event handler for the pointer over event.
      */

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

@@ -93,8 +93,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
           break;
         case "menu-button":
           this.getChildControl("title").set({
-            maxWidth: osparc.dashboard.GridButtonBase.ITEM_WIDTH - osparc.dashboard.GridButtonBase.ICON_SIZE - this.self().MENU_BTN_DIMENSIONS - 6,
-            padding: 4,
+            maxWidth: osparc.dashboard.GridButtonBase.ITEM_WIDTH - osparc.dashboard.GridButtonBase.ICON_SIZE - this.self().MENU_BTN_DIMENSIONS,
           });
           control = new qx.ui.form.MenuButton().set({
             appearance: "form-button-outlined",
@@ -245,18 +244,28 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
 
     _applyTags: function(tags) {
       if (osparc.data.Permissions.getInstance().canDo("study.tag")) {
+        const maxTags = 2;
         const tagsContainer = this.getChildControl("tags");
         tagsContainer.setVisibility(tags.length ? "visible" : "excluded");
         tagsContainer.removeAll();
-        tags.forEach(tag => {
+        for (let i=0; i<=tags.length && i<maxTags; i++) {
+          const tag = tags[i];
           const tagUI = new osparc.ui.basic.Tag(tag, "searchBarFilter");
           tagUI.set({
             font: "text-12",
             toolTipText: this.tr("Click to filter by this Tag")
           });
           tagUI.addListener("tap", () => this.fireDataEvent("tagClicked", tag));
           tagsContainer.add(tagUI);
-        });
+        }
+        if (tags.length > maxTags) {
+          const moreButton = new qx.ui.basic.Label(this.tr("More...")).set({
+            font: "text-12",
+            backgroundColor: "strong-main",
+            appearance: "tag",
+          });
+          tagsContainer.add(moreButton);
+        }
       }
     },
 

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

@@ -39,12 +39,12 @@ qx.Class.define("osparc.dashboard.GridButtonLoadMore", {
 
   members: {
     _applyFetching: function(value) {
-      this.setIcon(osparc.dashboard.CardBase.LOADING_ICON);
+      this.setThumbnail(osparc.dashboard.CardBase.LOADING_ICON);
       if (value) {
-        this.getChildControl("icon").getChildControl("image").getContentElement()
+        this.getChildControl("thumbnail").getChildControl("image").getContentElement()
           .addClass("rotate");
       } else {
-        this.getChildControl("icon").getChildControl("image").getContentElement()
+        this.getChildControl("thumbnail").getChildControl("image").getContentElement()
           .removeClass("rotate");
       }
       this.setEnabled(!value);

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

@@ -105,7 +105,7 @@ qx.Class.define("osparc.dashboard.GridButtonPlaceholder", {
         title.setValue(titleText);
       }
       if (icon) {
-        this.setIcon(icon);
+        this.setThumbnail(icon);
       }
 
       const stateLabel = this.getChildControl("state-label");

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

@@ -253,9 +253,11 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
 
     _applyTags: function(tags) {
       if (osparc.data.Permissions.getInstance().canDo("study.tag")) {
+        const maxTags = 2;
         const tagsContainer = this.getChildControl("tags");
         tagsContainer.removeAll();
-        tags.forEach(tag => {
+        for (let i=0; i<=tags.length && i<maxTags; i++) {
+          const tag = tags[i];
           const tagUI = new osparc.ui.basic.Tag(tag, "searchBarFilter");
           tagUI.set({
             alignY: "middle",
@@ -264,7 +266,15 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
           });
           tagUI.addListener("tap", () => this.fireDataEvent("tagClicked", tag));
           tagsContainer.add(tagUI);
-        });
+        }
+        if (tags.length > maxTags) {
+          const moreButton = new qx.ui.basic.Label(this.tr("More...")).set({
+            font: "text-12",
+            backgroundColor: "strong-main",
+            appearance: "tag",
+          });
+          tagsContainer.add(moreButton);
+        }
         this.__makeItemResponsive(tagsContainer);
       }
     },

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

@@ -54,19 +54,29 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
     __buildLayout: function() {
       const filtersSpacer = new qx.ui.core.Spacer(10, 10);
       switch (this.__resourceType) {
-        case "study":
+        case "study": {
           this._add(this.__createWorkspacesAndFoldersTree());
           this._add(this.__createTrashBin());
           this._add(this.__createResourceTypeContextButtons());
           this._add(filtersSpacer);
-          this._add(this.__createTagsFilterLayout());
+          const scrollView = new qx.ui.container.Scroll();
+          scrollView.add(this.__createTagsFilterLayout());
+          this._add(scrollView, {
+            flex: 1
+          });
           break;
-        case "template":
+        }
+        case "template": {
           this._add(this.__createResourceTypeContextButtons());
           this._add(filtersSpacer);
           this._add(this.__createSharedWithFilterLayout());
-          this._add(this.__createTagsFilterLayout());
+          const scrollView = new qx.ui.container.Scroll();
+          scrollView.add(this.__createTagsFilterLayout());
+          this._add(scrollView, {
+            flex: 1
+          });
           break;
+        }
         case "service":
           this._add(this.__createResourceTypeContextButtons());
           this._add(filtersSpacer);
@@ -350,26 +360,26 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
 
     /* TAGS */
     __createTagsFilterLayout: function() {
-      const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(2));
-      osparc.utils.Utils.setIdToWidget(layout, this.__resourceType + "-tagsFilter");
+      const tagsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(2));
+      osparc.utils.Utils.setIdToWidget(tagsLayout, this.__resourceType + "-tagsFilter");
 
-      this.__populateTags(layout, []);
+      this.__populateTags(tagsLayout, []);
       osparc.store.Tags.getInstance().addListener("tagsChanged", () => {
-        this.__populateTags(layout, this.__getSelectedTagIds());
+        this.__populateTags(tagsLayout, this.__getSelectedTagIds());
       }, this);
 
-      return layout;
+      return tagsLayout;
     },
 
     __getSelectedTagIds: function() {
       const selectedTagIds = this.__tagButtons.filter(btn => btn.getValue()).map(btn => btn.id);
       return selectedTagIds;
     },
 
-    __populateTags: function(layout, selectedTagIds) {
+    __populateTags: function(tagsLayout, selectedTagIds) {
       const maxTags = 5;
       this.__tagButtons = [];
-      layout.removeAll();
+      tagsLayout.removeAll();
       osparc.store.Tags.getInstance().getTags().forEach((tag, idx) => {
         const button = new qx.ui.form.ToggleButton(null, "@FontAwesome5Solid/tag/16");
         button.id = tag.getTagId();
@@ -381,7 +391,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
           value: selectedTagIds.includes(tag.getTagId())
         });
 
-        layout.add(button);
+        tagsLayout.add(button);
 
         button.addListener("execute", () => {
           const selection = this.__getSelectedTagIds();
@@ -411,7 +421,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
             showAllButton.showingAll = true;
           }
         });
-        layout.add(showAllButton);
+        tagsLayout.add(showAllButton);
       }
 
       const editTagsButton = new qx.ui.form.Button(this.tr("Edit Tags..."), "@FontAwesome5Solid/pencil-alt/14");
@@ -422,10 +432,10 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
         const preferencesWindow = osparc.desktop.preferences.PreferencesWindow.openWindow();
         preferencesWindow.openTags();
       });
-      layout.add(editTagsButton);
+      tagsLayout.add(editTagsButton);
 
       if (this.__resourceType === "study") {
-        layout.getChildren().forEach(item => item.setPaddingLeft(10)); // align them with the context
+        tagsLayout.getChildren().forEach(item => item.setPaddingLeft(10)); // align them with the context
       }
     },
     /* /TAGS */

services/static-webserver/client/source/class/osparc/desktop/account/MyAccount.js

@@ -28,8 +28,11 @@ qx.Class.define("osparc.desktop.account.MyAccount", {
 
     this.__profilePage = this.__addProfilePage();
 
-    if (osparc.data.Permissions.getInstance().canDo("usage.all.read")) {
-      this.__usagePage = this.__addUsagePage();
+    // show Usage in My Account if wallets are not enabled. If they are enabled it will be in the BIlling Center
+    if (!osparc.desktop.credits.Utils.areWalletsEnabled()) {
+      if (osparc.data.Permissions.getInstance().canDo("usage.all.read")) {
+        this.__usagePage = this.__addUsagePage();
+      }
     }
   },
 

services/static-webserver/client/source/class/osparc/desktop/preferences/Preferences.js

@@ -66,7 +66,6 @@ qx.Class.define("osparc.desktop.preferences.Preferences", {
     openTags: function() {
       if (this.__tagsPage) {
         this._openPage(this.__tagsPage);
-        return true;
       }
     },
   }

services/static-webserver/client/source/class/osparc/desktop/preferences/PreferencesWindow.js

@@ -48,7 +48,7 @@ qx.Class.define("osparc.desktop.preferences.PreferencesWindow", {
     __preferences: null,
 
     openTags: function() {
-      return this.__preferences.openTags();
+      this.__preferences.openTags();
     }
   }
 });

services/static-webserver/client/source/class/osparc/desktop/preferences/pages/TagsPage.js

@@ -26,64 +26,60 @@ qx.Class.define("osparc.desktop.preferences.pages.TagsPage", {
 
     this._add(new qx.ui.core.Spacer(null, 10));
 
-    this.__container = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
-    this.__container.set({
-      paddingLeft: 10
-    });
-    const scroll = new qx.ui.container.Scroll(this.__container);
-    this._add(scroll);
-
-    this.__createComponents();
+    this.__renderLayout();
   },
 
   members: {
-    __container: null,
-    __addTagButton: null,
-    __tagItems: null,
+    __tagsContainer: null,
+
+    __renderLayout: function() {
+      // Tags
+      this.__tagsContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
+      this.__tagsContainer.set({
+        paddingLeft: 10
+      });
+      const tagContainerScroll = new qx.ui.container.Scroll(this.__tagsContainer);
+      this._add(tagContainerScroll, {
+        flex: 1
+      });
+
+      const tags = osparc.store.Tags.getInstance().getTags();
+      const tagItems = tags.map(tag => new osparc.form.tag.TagItem().set({tag}));
+      tagItems.forEach(tagItem => {
+        this.__tagsContainer.add(tagItem);
+        this.__attachTagItemEvents(tagItem);
+      });
 
-    __createComponents: function() {
-      this.__addTagButton = new qx.ui.form.Button().set({
+      // New tag Button
+      const addTagButton = new qx.ui.form.Button().set({
         appearance: "form-button-outlined",
         label: this.tr("New Tag"),
         icon: "@FontAwesome5Solid/plus/14"
       });
-      osparc.utils.Utils.setIdToWidget(this.__addTagButton, "addTagBtn");
-      const tags = osparc.store.Tags.getInstance().getTags();
-      this.__tagItems = tags.map(tag => new osparc.form.tag.TagItem().set({tag}));
-      this.__renderLayout();
-      this.__attachEventHandlers();
-    },
-
-    __renderLayout: function() {
-      this.__container.removeAll();
+      osparc.utils.Utils.setIdToWidget(addTagButton, "addTagBtn");
+      addTagButton.addListener("execute", () => {
+        const newItem = new osparc.form.tag.TagItem().set({
+          mode: osparc.form.tag.TagItem.modes.EDIT
+        });
+        this.__tagsContainer.add(newItem);
+        this.__attachTagItemEvents(newItem);
 
-      // Print tag items
-      this.__tagItems.forEach(tagItem => this.__container.add(tagItem));
+        // scroll down
+        const height = tagContainerScroll.getSizeHint().height;
+        tagContainerScroll.scrollToY(height);
+      });
 
       // New tag button
       const buttonContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({
         alignX: "center"
       }));
-      buttonContainer.add(new qx.ui.core.Spacer(null, 10));
-      buttonContainer.add(this.__addTagButton);
-      this.__container.add(buttonContainer);
-    },
-
-    __attachEventHandlers: function() {
-      this.__addTagButton.addListener("execute", () => {
-        const itemCount = this.__container.getChildren().length;
-        const newItem = new osparc.form.tag.TagItem().set({
-          mode: osparc.form.tag.TagItem.modes.EDIT
-        });
-        this.__attachTagItemEvents(newItem);
-        this.__container.addAt(newItem, Math.max(0, itemCount - 1));
-      });
-      this.__tagItems.forEach(tagItem => this.__attachTagItemEvents(tagItem));
+      buttonContainer.add(addTagButton);
+      this._add(buttonContainer);
     },
 
     __attachTagItemEvents: function(tagItem) {
-      tagItem.addListener("cancelNewTag", e => this.__container.remove(e.getTarget()), this);
-      tagItem.addListener("deleteTag", e => this.__container.remove(e.getTarget()));
+      tagItem.addListener("cancelNewTag", e => this.__tagsContainer.remove(e.getTarget()), this);
+      tagItem.addListener("deleteTag", e => this.__tagsContainer.remove(e.getTarget()));
     }
   }
 });