🎨 UI/UX: Notifications bell tapping (#5511)

Author: odeimaiz

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

@@ -41,11 +41,12 @@ qx.Class.define("osparc.notification.NotificationsButton", {
     this.__notificationsContainer = new osparc.notification.NotificationsContainer();
     this.__notificationsContainer.exclude();
 
-    this.addListener("tap", () => this.__showNotifications(), this);
+    this.addListener("tap", this.__buttonTapped, this);
   },
 
   members: {
     __notificationsContainer: null,
+    __tappedOut: null,
 
     _createChildControlImpl: function(id) {
       let control;
@@ -102,16 +103,23 @@ qx.Class.define("osparc.notification.NotificationsButton", {
       });
     },
 
+    __buttonTapped: function() {
+      if (this.__tappedOut) {
+        this.__tappedOut = false;
+        return;
+      }
+      this.__showNotifications();
+    },
+
     __showNotifications: function() {
-      const that = this;
       const tapListener = event => {
-        const notificationsContainer = this.__notificationsContainer;
-        if (osparc.utils.Utils.isMouseOnElement(notificationsContainer, event)) {
-          return;
+        // I somehow can't stop the propagation of the event so workaround:
+        // If the user tapped on the bell we don't want to show it again
+        if (osparc.utils.Utils.isMouseOnElement(this, event)) {
+          this.__tappedOut = true;
         }
-        // eslint-disable-next-line no-underscore-dangle
-        that.__hideNotifications();
-        document.removeEventListener("mousedown", tapListener);
+        this.__hideNotifications();
+        document.removeEventListener("mousedown", tapListener, this);
       };
 
       const bounds = this.getBounds();
@@ -127,7 +135,7 @@ qx.Class.define("osparc.notification.NotificationsButton", {
       this.__notificationsContainer.setPosition(bounds.left+bounds.width-2, bounds.top+bounds.height-2);
       this.__notificationsContainer.show();
 
-      document.addEventListener("mousedown", tapListener);
+      document.addEventListener("mousedown", tapListener, this);
     },
 
     __hideNotifications: function() {