"circled"

Author: odeimaiz

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

@@ -158,10 +158,7 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
         },
         configureItem: item => {
           item.subscribeToFilterGroup("organizationMembersList");
-          item.getChildControl("thumbnail").getContentElement()
-            .setStyles({
-              "border-radius": "16px"
-            });
+          item.getChildControl("thumbnail").setDecorator("circled");
           item.addListener("promoteToMember", e => {
             const listedMember = e.getData();
             this.__promoteToUser(listedMember);

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

@@ -154,11 +154,7 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
         configureItem: item => {
           item.subscribeToFilterGroup("organizationsList");
           osparc.utils.Utils.setIdToWidget(item, "organizationListItem");
-          const thumbnail = item.getChildControl("thumbnail");
-          thumbnail.getContentElement()
-            .setStyles({
-              "border-radius": "16px"
-            });
+          item.getChildControl("thumbnail").setDecorator("circled");
 
           item.addListener("openEditOrganization", e => {
             const orgKey = e.getData();

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

@@ -146,10 +146,7 @@ qx.Class.define("osparc.desktop.wallets.MembersList", {
         },
         configureItem: item => {
           item.subscribeToFilterGroup("walletMembersList");
-          item.getChildControl("thumbnail").getContentElement()
-            .setStyles({
-              "border-radius": "16px"
-            });
+          item.getChildControl("thumbnail").setDecorator("circled");
           item.addListener("promoteToAccountant", e => {
             const listedMember = e.getData();
             this.__promoteToAccountant(listedMember);

services/static-webserver/client/source/class/osparc/navigation/UserMenuButton.js

@@ -39,9 +39,7 @@ qx.Class.define("osparc.navigation.UserMenuButton", {
     this.getContentElement().setStyles({
       "border-radius": "20px"
     });
-    this.getChildControl("icon").getContentElement().setStyles({
-      "border-radius": "16px"
-    });
+    this.getChildControl("icon").setDecorator("circled");
     osparc.utils.Utils.setIdToWidget(this, "userMenuBtn");
 
     const store = osparc.store.Store.getInstance();

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

@@ -356,10 +356,7 @@ qx.Class.define("osparc.share.Collaborators", {
           }, item, id);
         },
         configureItem: item => {
-          item.getChildControl("thumbnail").getContentElement()
-            .setStyles({
-              "border-radius": "16px"
-            });
+          item.getChildControl("thumbnail").setDecorator("circled");
           item.addListener("promoteToEditor", e => {
             const orgMember = e.getData();
             this._promoteToEditor(orgMember, item);

services/static-webserver/client/source/class/osparc/support/ConversationListItem.js

@@ -26,9 +26,7 @@ qx.Class.define("osparc.support.ConversationListItem", {
     layout.setSpacingY(0);
 
     // decorate
-    this.getChildControl("thumbnail").getContentElement().setStyles({
-      "border-radius": "16px"
-    });
+    this.getChildControl("thumbnail").setDecorator("circled");
     this.getChildControl("subtitle").set({
       textColor: "text-disabled",
     });

services/static-webserver/client/source/class/osparc/theme/Decoration.js

@@ -26,6 +26,12 @@ qx.Theme.define("osparc.theme.Decoration", {
       }
     },
 
+    "circled": {
+      style: {
+        radius: 16
+      }
+    },
+
     "chat-bubble": {
       style: {
         radius: 4,