standardize buttons

Author: odeimaiz

services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js

@@ -23,11 +23,6 @@ qx.Class.define("osparc.desktop.credits.CreditsIndicatorButton", {
 
     osparc.utils.Utils.setIdToWidget(this, "creditsIndicatorButton");
 
-    this.set({
-      cursor: "pointer",
-      padding: [3, 8]
-    });
-
     this.getChildControl("image").set({
       width: 24,
       height: 24

services/static-webserver/client/source/class/osparc/jobs/JobsButton.js

@@ -26,9 +26,6 @@ qx.Class.define("osparc.jobs.JobsButton", {
     osparc.utils.Utils.setIdToWidget(this, "jobsButton");
 
     this.set({
-      width: 30,
-      alignX: "center",
-      cursor: "pointer",
       toolTipText: this.tr("Activity Center"),
     });
 
@@ -53,12 +50,12 @@ qx.Class.define("osparc.jobs.JobsButton", {
       switch (id) {
         case "icon": {
           control = new qx.ui.basic.Image("@FontAwesome5Solid/tasks/22");
-
           const logoContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({
             alignY: "middle"
-          }));
+          })).set({
+            paddingLeft: 5,
+          });
           logoContainer.add(control);
-
           this._add(logoContainer, {
             height: "100%"
           });

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

@@ -89,6 +89,15 @@ qx.Class.define("osparc.navigation.NavigationBar", {
       minWidth: 30,
       minHeight: 30
     },
+
+    RIGHT_BUTTON_OPTS: {
+      cursor: "pointer",
+      alignX: "center",
+      alignY: "middle",
+      allowGrowX: false,
+      allowGrowY: false,
+      padding: 4,
+    },
   },
 
   members: {
@@ -161,7 +170,7 @@ qx.Class.define("osparc.navigation.NavigationBar", {
           });
           break;
         case "right-items":
-          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({
+          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(6).set({
             alignY: "middle",
             alignX: "right"
           }));
@@ -244,22 +253,29 @@ qx.Class.define("osparc.navigation.NavigationBar", {
         }
         case "avatar-group": {
           const maxWidth = osparc.WindowSizeTracker.getInstance().isCompactVersion() ? 80 : 150;
-          control = new osparc.ui.basic.AvatarGroup(28, "right", maxWidth).set({
+          control = new osparc.ui.basic.AvatarGroup(26, "right", maxWidth).set({
             alignY: "middle",
           });;
           this.getChildControl("right-items").add(control);
           break;
         }
         case "tasks-button":
-          control = new osparc.task.TasksButton();
+          control = new osparc.task.TasksButton().set({
+            visibility: "excluded",
+            ...this.self().RIGHT_BUTTON_OPTS
+          });
           this.getChildControl("right-items").add(control);
           break;
         case "jobs-button":
-          control = new osparc.jobs.JobsButton();
+          control = new osparc.jobs.JobsButton().set({
+            ...this.self().RIGHT_BUTTON_OPTS
+          });
           this.getChildControl("right-items").add(control);
           break;
         case "notifications-button":
-          control = new osparc.notification.NotificationsButton();
+          control = new osparc.notification.NotificationsButton().set({
+            ...this.self().RIGHT_BUTTON_OPTS
+          });
           this.getChildControl("right-items").add(control);
           break;
         case "expiration-icon": {
@@ -289,13 +305,16 @@ qx.Class.define("osparc.navigation.NavigationBar", {
           break;
         }
         case "help":
-          control = this.__createHelpMenuBtn();
-          control.set(this.self().BUTTON_OPTIONS);
+          control = this.__createHelpMenuBtn().set({
+            ...this.self().RIGHT_BUTTON_OPTS
+          });
           osparc.utils.Utils.setIdToWidget(control, "helpNavigationBtn");
           this.getChildControl("right-items").add(control);
           break;
         case "credits-button":
-          control = new osparc.desktop.credits.CreditsIndicatorButton();
+          control = new osparc.desktop.credits.CreditsIndicatorButton().set({
+            ...this.self().RIGHT_BUTTON_OPTS
+          });
           this.getChildControl("right-items").add(control);
           break;
         case "log-in-button": {

services/static-webserver/client/source/class/osparc/notification/NotificationsButton.js

@@ -25,12 +25,6 @@ qx.Class.define("osparc.notification.NotificationsButton", {
 
     osparc.utils.Utils.setIdToWidget(this, "notificationsButton");
 
-    this.set({
-      width: 30,
-      alignX: "center",
-      cursor: "pointer"
-    });
-
     this._createChildControlImpl("icon");
     this._createChildControlImpl("number");
 

services/static-webserver/client/source/class/osparc/task/TasksButton.js

@@ -24,10 +24,6 @@ qx.Class.define("osparc.task.TasksButton", {
     this._setLayout(new qx.ui.layout.Canvas());
 
     this.set({
-      width: 30,
-      alignX: "center",
-      cursor: "pointer",
-      visibility: "excluded",
       toolTipText: this.tr("Tasks"),
     });