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

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,11 +39,14 @@
                 label="Voicemails"
                 @click="filterByType('voicemail')"
             />
+        </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"
@@ -56,6 +59,12 @@
                 @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"
@@ -65,16 +74,17 @@
                 :size="40"
             />
         </div>
-            <div
-                v-if="!isNextPageRequesting && items.length === 0"
-                class="row justify-center"
-            >
-                {{ noResultsMessage }}
-            </div>
         <q-scroll-observable
             @scroll="scroll"
         />
-        </q-tabs>
+        <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-left 8px
-            padding-right 8px;
+            padding-right 8px
+
+    .csc-back-to-top
+        margin 0 15px 15px 0
 
 </style>