Преглед изворни кода

HUE-7743 [frontend] Keep the history panel anchored below the toggle button

Johan Ahlen пре 8 година
родитељ
комит
065a3cd

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

@@ -33,8 +33,6 @@
     optimizer: ${ OPTIMIZER.CACHEABLE_TTL.get() }
   };
 
-  window.HUE_CONTAINER = '${ EMBEDDED_MODE.get() }' === 'True' ? '.hue-embedded-container' : 'body';
-
   %if request and request.COOKIES and request.COOKIES.get('csrftoken', '') != '':
     window.CSRF_TOKEN = '${request.COOKIES.get('csrftoken')}';
   %else:
@@ -47,6 +45,8 @@
 
   window.HAS_OPTIMIZER = '${ has_optimizer() }' === 'True';
 
+  window.HUE_CONTAINER = '${ EMBEDDED_MODE.get() }' === 'True' ? '.hue-embedded-container' : 'body';
+
   window.HUE_I18n = {
     autocomplete: {
       category: {

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

@@ -25,13 +25,13 @@ from desktop.views import _ko
 <%def name="historyPanel()">
 
   <script type="text/html" id="hue-history-panel-template">
-    <button class="btn btn-flat pull-right btn-toggle-jobs-panel" title="${_('Task history')}" data-bind="toggle: historyPanelVisible">
+    <button class="btn btn-flat pull-right btn-toggle-jobs-panel" title="${_('Task history')}" data-bind="click: toggleVisibility">
       <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>
     </button>
 
-    <div class="jobs-panel history-panel" data-bind="visible: historyPanelVisible" style="display: none;">
+    <div class="jobs-panel history-panel" data-bind="visible: historyPanelVisible, style: { 'top' : top, 'left': left }" style="display: none;">
       <a class="pointer inactive-action pull-right" data-bind="click: function(){ historyPanelVisible(false); }"><i class="fa fa-fw fa-times"></i></a>
       <!-- ko ifnot: editorViewModel.selectedNotebook() && editorViewModel.selectedNotebook().history().length > 0 -->
         <span style="font-style: italic">${ _('No task history.') }</span>
@@ -136,6 +136,9 @@ from desktop.views import _ko
     (function () {
       var HistoryPanel = function (params) {
         var self = this;
+
+        self.top = ko.observable();
+        self.left = ko.observable();
         self.historyPanelVisible = ko.observable(false);
 
         self.historyPanelVisible.subscribe(function (newVal) {
@@ -177,6 +180,14 @@ from desktop.views import _ko
         self.editorViewModel.isNotificationManager(true);
         self.editorViewModel.newNotebook();
 
+        self.$toggleElement;
+        var $container = $(HUE_CONTAINER);
+
+        self.reposition = function () {
+          self.top((self.$toggleElement.offset().top + self.$toggleElement.height() + 15) + 'px');
+          self.left(($container.offset().left + $container.width() - 630) + 'px');
+        };
+
         self.historyRunningJobs = ko.computed(function() {
           if (self.editorViewModel.selectedNotebook()) {
             return $.grep(self.editorViewModel.selectedNotebook().history(), function(task) { return task.status() == 'running'; });
@@ -247,6 +258,26 @@ from desktop.views import _ko
         });
       };
 
+      HistoryPanel.prototype.toggleVisibility = function (historyPanel, event) {
+        var self = this;
+        if (!self.historyPanelVisible()) {
+          self.$toggleElement = $(event.target);
+          self.reposition();
+          $(window).on('resize', self.reposition);
+          var positionSub = self.historyPanelVisible.subscribe(function (newValue) {
+            if (!newValue) {
+              $(window).off('resize', self.reposition);
+              positionSub.dispose();
+            }
+          })
+        }
+        self.historyPanelVisible(!self.historyPanelVisible());
+      };
+
+      HistoryPanel.prototype.dispose = function () {
+        $(window).off('resize', self.reposition);
+      };
+
       ko.components.register('hue-history-panel', {
         viewModel: HistoryPanel,
         template: { element: 'hue-history-panel-template' }