Browse Source

HUE-6287 [frontend] Close mini job browser panel when clicking outside it

Enrico Berti 8 years ago
parent
commit
38a6bffbd9

+ 19 - 3
desktop/core/src/desktop/templates/hue.mako

@@ -455,9 +455,6 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
 <script type="text/javascript">
 
   $(document).ready(function () {
-    $(document).on('hideHistoryModal', function (e) {
-      $('#clearNotificationHistoryModal').modal('hide');
-    });
 
     var onePageViewModel = (function () {
 
@@ -1210,6 +1207,25 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
 
     huePubSub.publish('cluster.config.get.config');
 
+    $(document).on('hideHistoryModal', function (e) {
+      $('#clearNotificationHistoryModal').modal('hide');
+    });
+
+    var hideJobsPanels = function (e) {
+      if ($(e.target).closest('.jobs-panel').length === 0 && $(e.target).closest('.btn-toggle-jobs-panel').length === 0 && $('.jobs-panel').is(':visible')) {
+        huePubSub.publish('hide.jobs.panel');
+        huePubSub.publish('hide.history.panel');
+      }
+    }
+
+    var clickThrottle = -1;
+    $(window).click(function (e) {
+      window.clearTimeout(clickThrottle);
+      clickThrottle = window.setTimeout(function () {
+        hideJobsPanels(e);
+      }, 10);
+    });
+
     window.hueDebug = {
       viewModel: function (element) {
         return element ? ko.dataFor(element) : window.hueDebug.onePageViewModel;

+ 2 - 2
desktop/core/src/desktop/templates/ko_components.mako

@@ -160,7 +160,7 @@ from desktop.views import _ko
   </script>
 
   <script type="text/html" id="hue-history-panel-template">
-    <button class="btn btn-flat pull-right" title="${_('Task history')}" data-bind="toggle: historyPanelVisible">
+    <button class="btn btn-flat pull-right btn-toggle-jobs-panel" title="${_('Task history')}" data-bind="toggle: historyPanelVisible">
       <i class="fa fa-history"></i>
       <div class="jobs-badge" data-bind="text: historyRunningJobs().length, visible: historyRunningJobs().length > 0"></div>
       <div class="jobs-badge" data-bind="text: historyFinishedJobs().length, visible: historyFinishedJobs().length > 0"></div>
@@ -378,7 +378,7 @@ from desktop.views import _ko
       <button class="btn btn-flat" style="padding-right: 2px">
         <a data-bind="hueLink: '/jobbrowser', click: function(){ jobsPanelVisible(false); }">${ _('Jobs') }</a>
       </button>
-      <button class="btn btn-flat" title="${_('Running jobs')}" data-bind="toggle: jobsPanelVisible, style: {'paddingLeft': jobCount() > 0 ? '0': '4px'}">
+      <button class="btn btn-flat btn-toggle-jobs-panel" title="${_('Running jobs')}" data-bind="toggle: jobsPanelVisible, style: {'paddingLeft': jobCount() > 0 ? '0': '4px'}">
         <span class="jobs-badge" data-bind="visible: jobCount() > 0, text: jobCount"></span>
         <i class="fa fa-sliders"></i>
       </button>