aesthetics

Author: odeimaiz

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

@@ -23,7 +23,7 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
 
     this._setLayout(new qx.ui.layout.VBox(10));
 
-    this._add(this.__createIntroText());
+    this._add(this.__createAddMembersText());
     this._add(this.__getMemberInvitation());
     this._add(this.__getRolesToolbar());
     this._add(this.__getMembersFilter());
@@ -81,6 +81,7 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
     __currentOrg: null,
     __introLabel: null,
     __memberInvitation: null,
+    __changeRoleLabel: null,
     __membersModel: null,
 
     setCurrentOrg: function(orgModel) {
@@ -91,7 +92,7 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
       this.__reloadOrgMembers();
     },
 
-    __createIntroText: function() {
+    __createAddMembersText: function() {
       const intro = this.__introLabel = new qx.ui.basic.Label().set({
         alignX: "left",
         rich: true,
@@ -123,14 +124,24 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
     },
 
     __getRolesToolbar: function() {
-      return osparc.data.Roles.createRolesOrgInfo();
+      const hBoxWithRoles = osparc.data.Roles.createRolesOrgInfo();
+
+      const changeRoleLabel = this.__changeRoleLabel = new qx.ui.basic.Label().set({
+        alignX: "left",
+        value: this.tr("You can change the role of the existing members."),
+        font: "text-13",
+        visibility: "hidden",
+      });
+      hBoxWithRoles.addAt(changeRoleLabel, 0);
+
+      return hBoxWithRoles;
     },
 
     __getMembersFilter: function() {
       const filter = new osparc.filter.TextFilter("text", "organizationMembersList").set({
-        allowStretchX: true,
-        margin: [0, 10, 5, 10]
+        // margin: [0, 10, 5, 10]
       });
+      filter.setCompact(true);
       return filter;
     },
 
@@ -212,14 +223,16 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
       const canIDelete = organization.getAccessRights()["delete"];
 
       const introText = canIWrite ?
-        this.tr("You can add new members and promote or demote existing ones.<br>In order to add new members, type their username or email if this is public.") :
+        this.tr("In order to add new members, type their username or email if this is public.") :
         this.tr("You can't add new members to this Organization. Please contact an Administrator or Manager.");
       this.__introLabel.setValue(introText);
 
       this.__memberInvitation.set({
         enabled: canIWrite
       });
 
+      this.__changeRoleLabel.setVisibility(canIWrite ? "visible" : "excluded");
+
       const myGroupId = osparc.auth.Data.getInstance().getGroupId();
       const membersList = [];
       const groupMembers = organization.getGroupMembers();

services/static-webserver/client/source/class/osparc/filter/TextFilter.js

@@ -35,8 +35,7 @@ qx.Class.define("osparc.filter.TextFilter", {
       allowStretchY: false
     });
 
-    this.__textField = this.getChildControl("textfield");
-
+    this.getChildControl("textfield");
     this.getChildControl("clearbutton");
 
     this.__attachEventHandlers();
@@ -46,18 +45,23 @@ qx.Class.define("osparc.filter.TextFilter", {
     appearance: {
       refine: true,
       init: "textfilter"
-    }
+    },
+
+    compact: {
+      check: "Boolean",
+      init: false,
+      apply: "__applyCompact",
+    },
   },
 
   members: {
-    __textField: null,
-
     /**
      * Function that resets the field and dispatches the update.
      */
     reset: function() {
-      this.__textField.resetValue();
-      this.__textField.fireDataEvent("input", "");
+      const textField = this.getChildControl("textfield");
+      textField.resetValue();
+      textField.fireDataEvent("input", "");
     },
 
     _createChildControlImpl: function(id) {
@@ -78,7 +82,7 @@ qx.Class.define("osparc.filter.TextFilter", {
         case "clearbutton":
           control = new osparc.ui.basic.IconButton("@MaterialIcons/close/12", () => {
             this.reset();
-            this.__textField.focus();
+            this.getChildControl("textfield").focus();
           });
           this._add(control, {
             right: 0,
@@ -89,8 +93,21 @@ qx.Class.define("osparc.filter.TextFilter", {
       return control || this.base(arguments, id);
     },
 
+    __applyCompact: function(compact) {
+      this.set({
+        allowStretchX: compact,
+        allowGrowX: compact,
+        maxHeight: compact ? 30 : null,
+        margin: compact ? 0 : null,
+      });
+
+      this.getChildControl("clearbutton").setLayoutProperties({
+        bottom: compact ? 4 : 6,
+      });
+    },
+
     __attachEventHandlers: function() {
-      this.__textField.addListener("input", evt => {
+      this.getChildControl("textfield").addListener("input", evt => {
         this._filterChange(evt.getData().trim().toLowerCase());
       });
     }

services/static-webserver/client/source/class/osparc/share/NewCollaboratorsManager.js

@@ -69,15 +69,8 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", {
       const toolbar = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({
         alignY: "middle",
       }));
-      const filter = this.__textFilter = new osparc.filter.TextFilter("name", "collaboratorsManager").set({
-        allowGrowX: true,
-        margin: 0,
-        allowStretchX: true,
-        maxHeight: 30,
-      });
-      filter.getChildControl("clearbutton").setLayoutProperties({
-        bottom: 4,
-      });
+      const filter = this.__textFilter = new osparc.filter.TextFilter("name", "collaboratorsManager");
+      filter.setCompact(true);
       this.addListener("appear", () => filter.getChildControl("textfield").focus());
       toolbar.add(filter, {
         flex: 1