Closes user settings box when clicking outside it. #509 w/ @pereiragislene

2 files changed, 23 insertions, 2 deletions

diff --git a/web-ui/app/js/user_settings/ui/user_settings_box.js b/web-ui/app/js/user_settings/ui/user_settings_box.js
index ece46c49..d3de23ed 100644
--- a/web-ui/app/js/user_settings/ui/user_settings_box.js
+++ b/web-ui/app/js/user_settings/ui/user_settings_box.js
@@ -27,7 +27,8 @@ define(
 
   return defineComponent(function () {
     this.defaultAttrs({
-      close: '#user-settings-close'
+      close: '#user-settings-close',
+      userSettingsBoxContainer: '#user-settings-box'
     });
       
     this.render = function (event, userSettings) {
@@ -41,6 +42,25 @@ define(
       this.on(this.attr.close, 'click', function() {
         this.trigger(document, events.userSettings.destroyPopup);
       });
+
+      this.on(document, 'click', function(e) {
+        var userSettingsBoxContainer = $(this.attr.userSettingsBoxContainer).get(0);
+        var target = e.target || e.srcElement;
+
+        if (target !== userSettingsBoxContainer && !isChildOf(target, userSettingsBoxContainer)) {
+          this.destroy();
+        }
+      });
+
+      function isChildOf(child, parent) {
+          if (child.parentNode === parent) {
+              return true;
+          } else if (child.parentNode === null) {
+              return false;
+          } else {
+              return isChildOf(child.parentNode, parent);
+          }
+      }
     };
 
     this.destroy = function () {
diff --git a/web-ui/app/js/user_settings/ui/user_settings_icon.js b/web-ui/app/js/user_settings/ui/user_settings_icon.js
index 9471b0f4..a6385dc1 100644
--- a/web-ui/app/js/user_settings/ui/user_settings_icon.js
+++ b/web-ui/app/js/user_settings/ui/user_settings_icon.js
@@ -43,8 +43,9 @@ define(
       }
     };
 
-    this.triggerToggleUserSettingsBox = function() {
+    this.triggerToggleUserSettingsBox = function(e) {
       this.trigger(document, events.ui.userSettingsBox.toggle);
+      e.stopPropagation();
     };
 
     this.after('initialize', function () {