Enable floating search bar

Depending on the size of the datatable, sometimes, the search
bar is "hidden" due to the user scrolling. To make the
interface more user-friendly, it is interesting that both
the search bar and the sidebar are always displayed. Therefore,
this patch is introducing changes to always pin the search bar
and the sidebar at the top of the page.

Closes-Bug: #1928678
Change-Id: I9186a4fa1dd2a16f75464ff3bb1c0c9b76a12cc7

3 files changed, 75 insertions, 3 deletions

diff --git a/horizon/static/framework/widgets/magic-search/magic-search.controller.js b/horizon/static/framework/widgets/magic-search/magic-search.controller.js
index 12901e5ce..247a2ae68 100644
--- a/horizon/static/framework/widgets/magic-search/magic-search.controller.js
+++ b/horizon/static/framework/widgets/magic-search/magic-search.controller.js
@@ -97,6 +97,36 @@
       }
     });
 
+    ctrl.getScrollTop = function () {
+      return $(document).scrollTop();
+    };
+
+    ctrl.executeFloatMenu = function (
+        jqueryElement, fixfterScroll, newTopPosition) {
+      jqueryElement.css("z-index", 999);
+
+      var scrollAmount = ctrl.getScrollTop();
+
+      if (scrollAmount > fixfterScroll) {
+        jqueryElement.width('53.9%');
+        jqueryElement.css('position', 'fixed');
+        jqueryElement.css("top", newTopPosition);
+      } else {
+        jqueryElement.css('position', 'relative');
+        jqueryElement.css("top", 0);
+        jqueryElement.width('');
+      }
+    };
+
+    var distanceFromTop = 140;
+    var newTopPosition = 40;
+    jQuery(window).scroll(function () {
+      ctrl.executeFloatMenu(
+          jQuery("div.search-bar").parents('div.hz-dynamic-table-preamble'),
+          distanceFromTop,
+          newTopPosition);
+    });
+
     function initSearch(initialSearchTerms) {
       // Initializes both the unused choices and the full list of facets
       ctrl.facetChoices = service.getFacetChoicesFromFacetsParam($scope.facets_param);
@@ -233,7 +263,7 @@
       }
     }
 
-    function keyPressHandler($event) {  // handle character input
+    function keyPressHandler($event) {// handle character input
       var searchVal = searchInput.val();
       var key = service.getEventCode($event);
       // Backspace, Delete, Enter, Tab, Escape
@@ -272,7 +302,7 @@
       }
       if (filtered.length > 0) {
         setMenuOpen(true);
-        $timeout(function() {
+        $timeout(function () {
           ctrl.filteredObj = filtered;
         }, 0.1);
       } else if (isTextSearch) {
diff --git a/horizon/static/framework/widgets/magic-search/magic-search.controller.spec.js b/horizon/static/framework/widgets/magic-search/magic-search.controller.spec.js
index 8f307b366..64c588eff 100644
--- a/horizon/static/framework/widgets/magic-search/magic-search.controller.spec.js
+++ b/horizon/static/framework/widgets/magic-search/magic-search.controller.spec.js
@@ -626,11 +626,52 @@
         expect(ctrl.facetChoices).toEqual([]);
       });
     });
+    describe('Test float menu', function () {
+      it('should float the menu at the top', function () {
+        // There is no scroll executed so far
+        ctrl.getScrollTop = function () {
+          return 100;
+        };
+
+        var elementUsed = {
+          width: angular.noop, css: angular.noop
+        };
+        spyOn(elementUsed, 'width');
+        spyOn(elementUsed, 'css');
+
+        ctrl.executeFloatMenu(elementUsed, 40, 140);
+
+        expect(elementUsed.width).toHaveBeenCalledWith('53.9%');
+        expect(elementUsed.css).toHaveBeenCalledWith( "z-index", 999);
+        expect(elementUsed.css).toHaveBeenCalledWith('position', 'fixed');
+        expect(elementUsed.css).toHaveBeenCalledWith('top', 140);
+
+      });
+
+      it('should fix the menu at the top', function () {
+        // There is some scroll executed so far
+        ctrl.getScrollTop = function () {
+          return 0;
+        };
+
+        var elementUsed = {
+          width: angular.noop, css: angular.noop
+        };
+        spyOn(elementUsed, 'width');
+        spyOn(elementUsed, 'css');
+
+        ctrl.executeFloatMenu(elementUsed, 40, 140);
+
+        expect(elementUsed.width).toHaveBeenCalledWith('');
+        expect(elementUsed.css).toHaveBeenCalledWith( "z-index", 999);
+        expect(elementUsed.css).toHaveBeenCalledWith('position', 'relative');
+        expect(elementUsed.css).toHaveBeenCalledWith('top', 0);
+      });
+    });
   });
 
   // NOTE: The javascript file being tested here isn't the magic-search code
   // as a whole, but instead the magic-overrides code.
-
   describe('MagicSearch module', function () {
     it('should be defined', function () {
       expect(angular.module('horizon.framework.widgets.magic-search')).toBeDefined();
diff --git a/openstack_dashboard/static/dashboard/scss/components/_sidebar.scss b/openstack_dashboard/static/dashboard/scss/components/_sidebar.scss
index c6762ba42..7bf684220 100644
--- a/openstack_dashboard/static/dashboard/scss/components/_sidebar.scss
+++ b/openstack_dashboard/static/dashboard/scss/components/_sidebar.scss
@@ -32,6 +32,7 @@
 
 #sidebar {
   width: $sidebar-width;
+  position: fixed;
 
   // Make sure the side nav is always shown at larger screen sizes,
   // regardless of previous state