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

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) {

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();

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