FS-9249 [verto_communicator] Closing settings panel if the user clicks outside the element

html5/verto/verto_communicator/bower.json

@@ -45,7 +45,8 @@
     "angular-bootstrap": "~0.14.3",
     "bootstrap-material-design": "~0.3.0",
     "angular-translate": "~2.10.0",
-    "angular-translate-loader-static-files": "~2.10.0"
+    "angular-translate-loader-static-files": "~2.10.0",
+    "angular-click-outside": "^2.8.3"
   },
   "resolutions": {
     "angular": "~1.3.15",

html5/verto/verto_communicator/src/index.html

@@ -99,6 +99,7 @@
     <script src="bower_components/bootstrap-material-design/dist/js/ripples.js"></script>
     <script src="bower_components/angular-translate/angular-translate.js"></script>
     <script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
+    <script src="bower_components/angular-click-outside/clickoutside.directive.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 

html5/verto/verto_communicator/src/partials/settings.html

@@ -1,4 +1,4 @@
-<div id="settings" ng-controller="SettingsController">
+<div id="settings" ng-controller="SettingsController" click-outside="$parent.toggleSettings()">
   <div class="content">
     <div class="col-md-4">
 

html5/verto/verto_communicator/src/vertoApp/vertoApp.module.js

@@ -18,6 +18,7 @@
     'ui.bootstrap',
     'directive.g+signin',
     'pascalprecht.translate',
+    'angular-click-outside',
   ]);
 
   vertoApp.constant('configLanguages', {