aesthetics

Author: odeimaiz

services/static-webserver/client/source/class/osparc/data/Roles.js

@@ -165,7 +165,7 @@ qx.Class.define("osparc.data.Roles", {
       }
     },
 
-    __createIntoFromRoles: function(roles, showWording = true) {
+    __createRolesLayout: function(roles, showWording = true) {
       const rolesLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({
         alignY: "middle",
         paddingRight: 10
@@ -202,23 +202,34 @@ qx.Class.define("osparc.data.Roles", {
     },
 
     createRolesOrgInfo: function() {
-      return this.__createIntoFromRoles(osparc.data.Roles.ORG);
+      return this.__createRolesLayout(osparc.data.Roles.ORG);
     },
 
     createRolesWalletInfo: function() {
-      return this.__createIntoFromRoles(osparc.data.Roles.WALLET);
+      return this.__createRolesLayout(osparc.data.Roles.WALLET);
     },
 
     createRolesStudyInfo: function() {
-      return this.__createIntoFromRoles(osparc.data.Roles.STUDY);
+      return this.__createRolesLayout(osparc.data.Roles.STUDY);
     },
 
     createRolesServicesInfo: function() {
-      return this.__createIntoFromRoles(osparc.data.Roles.SERVICES);
+      return this.__createRolesLayout(osparc.data.Roles.SERVICES);
     },
 
     createRolesWorkspaceInfo: function(showWording = true) {
-      return this.__createIntoFromRoles(osparc.data.Roles.WORKSPACE, showWording);
-    }
+      return this.__createRolesLayout(osparc.data.Roles.WORKSPACE, showWording);
+    },
+
+    replaceSpacerWithWidget: function(rolesLayout, widget) {
+      if (rolesLayout && rolesLayout.getChildren()) {
+        // remove spacer
+        rolesLayout.remove(rolesLayout.getChildren()[0]);
+        // add widget
+        rolesLayout.addAt(widget, 0, {
+          flex: 1
+        });
+      }
+    },
   }
 });

services/static-webserver/client/source/class/osparc/desktop/organizations/MembersList.js

@@ -96,9 +96,9 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
     __createMembersList: function() {
       const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
       const rolesLayout = this.__getRolesToolbar();
-      rolesLayout.addAt(this.__getMembersFilter(), 0, {
-        flex: 3
-      });
+      const membersFilter = this.__getMembersFilter();
+      membersFilter.setPaddingRight(10);
+      osparc.data.Roles.replaceSpacerWithWidget(rolesLayout, membersFilter);
       vBox.add(rolesLayout);
       vBox.add(this.__getMembersList(), {
         flex: 1

services/static-webserver/client/source/class/osparc/desktop/organizations/OrganizationsList.js

@@ -37,8 +37,12 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
     });
     this._add(intro);
 
-    this._add(this.__getOrganizationsFilter());
-    this._add(osparc.data.Roles.createRolesOrgInfo());
+    const rolesLayout = osparc.data.Roles.createRolesOrgInfo();
+    const orgsFilter = this.__getOrganizationsFilter();
+    orgsFilter.setPaddingRight(10);
+    osparc.data.Roles.replaceSpacerWithWidget(rolesLayout, orgsFilter);
+    this._add(rolesLayout);
+
     this._add(this.__getOrganizationsList(), {
       flex: 1
     });