scrolls

Author: odeimaiz

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 */