From 3f79f48d84e9a692c66fac45fdf7080f57347131 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 27 Mar 2020 11:36:27 -0300
Subject: [PATCH] Displays search bar when reaching the top of items list.

---
 .../components/modals/exposers-modal.vue      |  2 +-
 .../components/other/processes-popup.vue      |  2 +-
 src/views/admin/pages/lists/items-page.vue    | 41 +++++++++++++++++--
 src/views/admin/scss/_variables.scss          | 10 ++++-
 4 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/views/admin/components/modals/exposers-modal.vue b/src/views/admin/components/modals/exposers-modal.vue
index 1ffff9de3..b956d94c7 100644
--- a/src/views/admin/components/modals/exposers-modal.vue
+++ b/src/views/admin/components/modals/exposers-modal.vue
@@ -624,7 +624,7 @@ export default {
                 position: relative;
             }
             .exposer-copy-popup {
-                animation-name: appear-from-top;
+                animation-name: appear-from-top-tooltip;
                 animation-duration: 0.3s;
                 position: absolute;
                 background: var(--tainacan-gray1);
diff --git a/src/views/admin/components/other/processes-popup.vue b/src/views/admin/components/other/processes-popup.vue
index b30264882..83f39e45c 100644
--- a/src/views/admin/components/other/processes-popup.vue
+++ b/src/views/admin/components/other/processes-popup.vue
@@ -291,7 +291,7 @@ export default {
         top: 48px;
         right: 40px;
         border-radius: 5px;
-        animation-name: appear-from-top;
+        animation-name: appear-from-top-tooltip;
         animation-duration: 0.3s;
         font-size: 0.75em;
 
diff --git a/src/views/admin/pages/lists/items-page.vue b/src/views/admin/pages/lists/items-page.vue
index 20c6c4f25..1f24d8cd8 100644
--- a/src/views/admin/pages/lists/items-page.vue
+++ b/src/views/admin/pages/lists/items-page.vue
@@ -1200,11 +1200,26 @@
             }, 500),
             handleMouseMoveOverList: _.debounce( function($event) {
 
+                // Handles search control bar
+                if (this.$refs['search-control']) {
+                    const bounding = this.$refs['search-control'].getBoundingClientRect();
+                    const isHidden = !(bounding.top >= 0 && bounding.bottom <= ((window.innerHeight || document.documentElement.clientHeight) + 136));
+                    
+                    if (isHidden && ($event.screenY <= 286)) {
+                        if (!(this.$refs['search-control'].classList.contains('floating-search-control')))
+                            this.$refs['search-control'].classList.add('floating-search-control');                    
+                    } else {
+                        if ((this.$refs['search-control'].classList.contains('floating-search-control')))
+                            this.$refs['search-control'].classList.remove('floating-search-control');
+                    }
+                }
+
+                // Handles pagination bar
                 if (this.$refs['items-pagination']) {
                     const bounding = this.$refs['items-pagination'].getBoundingClientRect();
                     const isHidden = !(bounding.top >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight));
                       
-                    if (isHidden && ($event.screenY + 150 >= window.screen.height)) {
+                    if (isHidden && ($event.screenY + 100 >= window.screen.height)) {
                         if (!(this.$refs['items-pagination'].classList.contains('floating-pagination'))) {
                             this.$refs['items-pagination'].classList.add('floating-pagination');
                             if (this.$refs['items-pagination'].children[0]) {
@@ -1396,7 +1411,7 @@
             }
         }
     }
-        
+
     .search-control {
         min-height: 42px;
         height: auto;
@@ -1405,6 +1420,26 @@
         display: flex;
         justify-content: space-between;
         flex-wrap: wrap;
+        transition: top 0.3s, opacity 0.3s, padding 0.3s, height 0.3s, position 0.3s;
+
+        &.floating-search-control {
+            position: sticky;
+            top: 0;
+            z-index: 99999999;
+            background: var(--tainacan-background-color);
+            animation: appear-from-top 0.2s;
+            opacity: 0.85;
+            border-bottom: 1px solid var(--tainacan-gray2);
+            padding: 20px var(--tainacan-one-column) 2px var(--tainacan-one-column);
+
+            &:hover {
+                opacity: 1;
+            }
+
+            .search-area .is-pulled-right {
+                display: none;
+            }
+        }
 
         .search-control-item {
             display: inline-block;
@@ -1606,7 +1641,7 @@
         min-height: 42px;
 
         .pagination-area {
-            opacity: 0.75;
+            opacity: 0.85;
             background: var(--tainacan-background-color);
             position: fixed;
             z-index: 99999;
diff --git a/src/views/admin/scss/_variables.scss b/src/views/admin/scss/_variables.scss
index d1fc520df..876a254ad 100644
--- a/src/views/admin/scss/_variables.scss
+++ b/src/views/admin/scss/_variables.scss
@@ -280,7 +280,7 @@ $modal-z: 9999999;
 }
 
 // Animations for background processes popup and url copy popup
-@keyframes appear-from-top {
+@keyframes appear-from-top-tooltip {
     from { 
         top: 24px;
         opacity: 0; 
@@ -290,6 +290,14 @@ $modal-z: 9999999;
         opacity: 1; 
     }
 }
+@keyframes appear-from-top {
+    from { 
+        top: -48px;
+    }
+    to { 
+        top: 0px; 
+    }
+}
 @keyframes appear-from-bottom {
     from { 
         bottom: -48px;