Make list toolbar sticky HTML element

Signed-off-by: Roberto Rosario <roberto.rosario@mayan-edms.com>

HISTORY.rst

@@ -1,3 +1,7 @@
+3.3.6 (2019-12-XX)
+==================
+- Make list toolbar stick to the top of the view when scrolling.
+
 3.3.5 (2019-12-13)
 ==================
 - Pin django-timezone-field to version 3.1. GitLab issue #698.

mayan/apps/appearance/static/appearance/css/base.css

@@ -634,3 +634,9 @@ a i {
 .banner-server-error {
     margin-top: 10px;
 }
+
+/* List toolbar affix */
+#list-toolbar.affix {
+    top: 60px;  /* OuterHeight of navbar */
+    z-index: 90;
+}

mayan/apps/appearance/static/appearance/js/mayan_app.js

@@ -277,6 +277,53 @@ class MayanApp {
         })
     }
 
+    setupListToolbar () {
+        var $listToolbar = $('#list-toolbar');
+
+        if ($listToolbar.length !== 0) {
+            var $listToolbarClearfix = $listToolbar.closest('.clearfix');
+            var $listToolbarSpacer = $('#list-toolbar-spacer');
+            var navBarOuterHeight = $('.navbar-fixed-top').outerHeight();
+
+            $listToolbarSpacer.height($listToolbarClearfix.height()).hide();
+
+            $listToolbar.css(
+                {
+                    width: $listToolbarClearfix.width(),
+                }
+            );
+
+            $listToolbar.affix({
+                offset: {
+                    top: $listToolbar.offset().top - navBarOuterHeight,
+                },
+            });
+
+            $listToolbar.on('affix.bs.affix', function () {
+                $listToolbarSpacer.show();
+
+                $listToolbar.css(
+                    {
+                        width: $listToolbarClearfix.width(),
+                    }
+                );
+            });
+
+
+            $listToolbar.on('affix-top.bs.affix', function () {
+                $listToolbarSpacer.hide();
+            });
+
+            this.window.on('resize', function () {
+                $listToolbar.css(
+                    {
+                        width: $listToolbarClearfix.width(),
+                    }
+                );
+            });
+        }
+    }
+
     setupNavbarCollapse () {
         $(document).keyup(function(e) {
             if (e.keyCode === 27) {

mayan/apps/appearance/templates/appearance/list_toolbar.html

@@ -4,6 +4,8 @@
 {% load navigation_tags %}
 
 {% if is_paginated or links_multi_menus_results %}
+<div id="list-toolbar-spacer"></div>
+<nav id="list-toolbar">
     <div class="well center-block toolbar">
 {% endif %}
 
@@ -89,4 +91,5 @@
 {% if is_paginated or links_multi_menus_results %}
     <div class="clearfix"></div>
     </div>
+</nav>
 {% endif %}

mayan/apps/appearance/templates/appearance/root.html

@@ -130,6 +130,7 @@
                 app.resizeFullHeight();
                 app.setupSelect2();
                 app.setupScrollView();
+                app.setupListToolbar();
             }
 
             jQuery(document).ready(function() {