From c99db3da08d248cb77210ee9dd0b637de0de584a Mon Sep 17 00:00:00 2001
From: Roberto Rosario <roberto.rosario@mayan-edms.com>
Date: Sun, 15 Dec 2019 05:15:59 -0400
Subject: [PATCH] Make list toolbar sticky HTML element

Signed-off-by: Roberto Rosario <roberto.rosario@mayan-edms.com>
---
 HISTORY.rst                                   |  4 ++
 .../appearance/static/appearance/css/base.css |  6 +++
 .../static/appearance/js/mayan_app.js         | 47 +++++++++++++++++++
 .../templates/appearance/list_toolbar.html    |  3 ++
 .../appearance/templates/appearance/root.html |  1 +
 5 files changed, 61 insertions(+)

diff --git a/HISTORY.rst b/HISTORY.rst
index 9b9ae2c203..443b016b51 100644
--- a/HISTORY.rst
+++ b/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.
diff --git a/mayan/apps/appearance/static/appearance/css/base.css b/mayan/apps/appearance/static/appearance/css/base.css
index 1964cdd3a8..e02bd83a2e 100644
--- a/mayan/apps/appearance/static/appearance/css/base.css
+++ b/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;
+}
diff --git a/mayan/apps/appearance/static/appearance/js/mayan_app.js b/mayan/apps/appearance/static/appearance/js/mayan_app.js
index 38b219464c..06a51de56c 100644
--- a/mayan/apps/appearance/static/appearance/js/mayan_app.js
+++ b/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) {
diff --git a/mayan/apps/appearance/templates/appearance/list_toolbar.html b/mayan/apps/appearance/templates/appearance/list_toolbar.html
index 610585d891..d20ef50f0e 100644
--- a/mayan/apps/appearance/templates/appearance/list_toolbar.html
+++ b/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 %}
diff --git a/mayan/apps/appearance/templates/appearance/root.html b/mayan/apps/appearance/templates/appearance/root.html
index 9766d35cd4..6e7f15b1df 100644
--- a/mayan/apps/appearance/templates/appearance/root.html
+++ b/mayan/apps/appearance/templates/appearance/root.html
@@ -130,6 +130,7 @@
                 app.resizeFullHeight();
                 app.setupSelect2();
                 app.setupScrollView();
+                app.setupListToolbar();
             }
 
             jQuery(document).ready(function() {