From a8e7df6385b15b3128da295aa456b9964b5d93e8 Mon Sep 17 00:00:00 2001
From: raxelsen <raxelsen@sipwise.com>
Date: Tue, 18 Sep 2018 14:07:05 +0200
Subject: [PATCH] TT#40352 See tabs nav sticky while scrolling down

What has been done:
- TT#44401, Implement back-to-top button
- TT#44402, Implement scroll-to-top when user clicks new tab
- TT#44403, Implement sticky tabs navigation

Change-Id: I46f23dc67466eb7a4fdec98d9030dc2fb193214c
---
 .../pages/Conversations/Conversations.vue     | 125 ++++++++++++------
 1 file changed, 85 insertions(+), 40 deletions(-)

diff --git a/src/components/pages/Conversations/Conversations.vue b/src/components/pages/Conversations/Conversations.vue
index b8425a88..1180e5a1 100644
--- a/src/components/pages/Conversations/Conversations.vue
+++ b/src/components/pages/Conversations/Conversations.vue
@@ -1,7 +1,7 @@
 <template>
     <csc-page
         ref="page"
-        class="csc-list-page"
+        class="csc-list-page csc-page-conversations"
     >
         <q-tabs
             inverted
@@ -39,42 +39,52 @@
                 label="Voicemails"
                 @click="filterByType('voicemail')"
             />
-            <q-list
-                no-border
-                inset-separator
-                sparse
-                multiline
-            >
-                <csc-conversation-item
-                    v-for="(item, index) in items"
-                    :key="item._id"
-                    :item="item"
-                    :call-available="isCallAvailable"
-                    @init-call="initCall"
-                    @download-fax="downloadFax"
-                    @download-voice-mail="downloadVoiceMail"
-                    @play-voice-mail="playVoiceMail"
-                />
-            </q-list>
-            <div
-                v-if="isNextPageRequesting"
-                class="row justify-center"
-            >
-                <q-spinner-dots
-                    color="primary"
-                    :size="40"
-                />
-            </div>
-            <div
-                v-if="!isNextPageRequesting && items.length === 0"
-                class="row justify-center"
-            >
-                {{ noResultsMessage }}
-            </div>
-            <q-scroll-observable
-                @scroll="scroll"
-            />
         </q-tabs>
+        <q-list
+            v-if="!isNextPageRequesting && items.length > 0"
+            no-border
+            inset-separator
+            sparse
+            multiline
+            class="csc-conversation-list"
+        >
+            <csc-conversation-item
+                v-for="(item, index) in items"
+                :key="item._id"
+                :item="item"
+                :call-available="isCallAvailable"
+                @init-call="initCall"
+                @download-fax="downloadFax"
+                @download-voice-mail="downloadVoiceMail"
+                @play-voice-mail="playVoiceMail"
+            />
+        </q-list>
+        <div
+            v-else-if="!isNextPageRequesting && items.length === 0"
+            class="row justify-center csc-conversation-list-message"
+        >
+            {{ noResultsMessage }}
+        </div>
+        <div
+            v-if="isNextPageRequesting"
+            class="row justify-center"
+        >
+            <q-spinner-dots
+                color="primary"
+                :size="40"
+            />
+        </div>
+        <q-scroll-observable
+            @scroll="scroll"
+        />
+        <q-btn
+          v-back-to-top.animate="backToTopProps"
+          round
+          color="primary"
+          class="fixed-bottom-right animate-pop csc-back-to-top"
+        >
+            <q-icon name="keyboard_arrow_up" />
+        </q-btn>
     </csc-page>
 </template>
 
@@ -98,7 +108,10 @@
         dom,
         QTabs,
         QTab,
-        QTabPane
+        QTabPane,
+        BackToTop,
+        QBtn,
+        QIcon
     } from 'quasar-framework'
     const { offset } = dom
     export default {
@@ -134,7 +147,12 @@
             QSpinnerDots,
             QTabs,
             QTab,
-            QTabPane
+            QTabPane,
+            QBtn,
+            QIcon
+        },
+        directives: {
+            BackToTop
         },
         mounted() {
             this.$store.commit('conversations/resetList');
@@ -168,6 +186,9 @@
                 else if(this.selectedTab === 'voicemail') {
                     return this.$t('pages.conversations.noVoicemailsMessage');
                 }
+            },
+            backToTopProps() {
+                return {offset: 100, duration: 200};
             }
         },
         methods: {
@@ -278,9 +299,30 @@
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
+
+    @import '../../../themes/app.variables.styl'
+
+    .page.csc-page-conversations
+        padding-top 0
+
+    .csc-conversation-list
+        padding 0
+
+    .csc-conversation-list-message
+        padding 16
+        padding 16px
+
     .q-infinite-scroll-message
         margin-bottom 50px
 
+    .conversations-tabs
+        position sticky
+        top $toolbar-min-height
+        z-index 12
+        background white
+        padding-top 16px
+        padding-bottom 16px
+
     .csc-voice-mail-item
         .csc-item-buttons
             position absolute
@@ -288,7 +330,10 @@
 
     .csc-item-buttons
         .q-btn
-            padding-left 8px;
-            padding-right 8px;
+            padding-left 8px
+            padding-right 8px
+
+    .csc-back-to-top
+        margin 0 15px 15px 0
 
 </style>