TT#37314 Implement UI for player (buttons and progress bar)

Change-Id: Ia4eca0f95ba88de8ac4f14b05ccee1b872e0fc85

src/components/card/CscCardCollapsible.vue

@@ -76,8 +76,6 @@
     @import '../../themes/quasar.variables.styl'
 
     .csc-card-collapsible
-        .q-btn
-            margin-bottom 5px
         ul
             list-style none
             font-size 1rem

src/components/pages/Conversations/CscConversation.vue

@@ -35,6 +35,8 @@
             </ul>
         </div>
         <div v-if="!isType('fax')" slot="footer">
+<!--        <q-card-separator />
+            <csc-voicemail-player id="csc-voicemail-player" v-if="isType('voicemail')" :id="conversation.id" /> -->
             <q-card-separator />
             <q-card-actions align="center">
                 <q-btn flat round small color="primary" icon="call">
@@ -53,8 +55,8 @@
                     </q-popover>
                 </q-btn>
                 <q-btn v-if="isType('voicemail')" flat round small color="primary"
-                    icon="play_arrow" @click="downloadVoiceMail(conversation.id)">
-                    {{ $t('pages.conversations.buttons.play') }}
+                    icon="get_app" @click="downloadVoiceMail(conversation.id)">
+                    {{ $t('pages.conversations.buttons.download') }}
                 </q-btn>
             </q-card-actions>
         </div>
@@ -72,6 +74,7 @@
 
 <script>
     import CscCardCollapsible from '../../card/CscCardCollapsible'
+    import CscVoicemailPlayer from './CscVoicemailPlayer'
     import { QBtn, QPopover, QItem, QList, QCardActions,
         QChip, QCardSeparator } from 'quasar-framework'
     import numberFormat from '../../../filters/number-format'
@@ -88,7 +91,8 @@
             QChip,
             QCardSeparator,
             QCardActions,
-            CscCardCollapsible
+            CscCardCollapsible,
+            CscVoicemailPlayer
         },
         computed: {
             hasCollapsibleData() {

src/components/pages/Conversations/CscVoicemailPlayer.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="voicemail-player">
+        <div class="control-btns">
+            <q-btn class="play-pause-btn" round flat small color="primary" :icon="playPauseIcon"></q-btn>
+            <q-btn class="stop-btn" round flat small color="primary" icon="stop"></q-btn>
+        </div>
+        <q-progress
+            class="progress-bar"
+            :percentage="progress"
+            stripe 
+            animate
+            color="primary"
+        />
+    </div>
+</template>
+
+<script>
+    import { QProgress, QBtn } from 'quasar-framework'
+    export default {
+        name: 'csc-voicemail-player',
+        props: {
+            id: Number
+        },
+        components: {
+            QProgress,
+            QBtn
+        },
+        data () {
+            return {
+                progress: 77,
+                isPlaying: false
+            }
+        },
+        computed: {
+            playPauseIcon() {
+                return this.isPlaying ? 'pause': 'play_arrow';
+            }
+        }
+    }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+    @import '../../../themes/app.common'
+
+    .voicemail-player
+        width 100%
+        height 56px
+        display flex
+        justify-content space-around
+        align-items center
+        padding-left 16px
+        padding-right 16px
+        border-radius 4px
+        background-color #fff
+        .control-btns
+            display flex
+            justify-content space-between
+        .progress-bar
+            margin-left 16px 
+            margin-right 16px
+
+</style>

src/components/pages/CscVoicemailPlayer.vue

@@ -1,16 +0,0 @@
-<template>
-</template>
-
-<script>
-    export default {
-        name: 'csc-voicemail-player',
-        props: [
-        ],
-        components: {
-        }
-    }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-    @import '../../themes/app.common'
-</style>