TT#84202 As a Customer, I want to see the Send Fax button in a new location together with the other media functions

Change-Id: I15325909b7e7618cbc5eded3fb32d1cf04bcc958

src/components/Login.vue

@@ -135,7 +135,9 @@
         Platform,
         QSpinnerDots,
         QToolbar,
-        QPopover
+        QPopover,
+        QFabAction,
+        QFab
     } from 'quasar-framework'
     import {
         getLanguageLabel
@@ -158,7 +160,9 @@
             QSpinnerDots,
             QToolbar,
             QPopover,
-            CscLanguageMenu
+            CscLanguageMenu,
+            QFabAction,
+            QFab
         },
         data () {
             return {

src/components/layouts/CscLanguageMenu.vue

@@ -3,7 +3,7 @@
         no-border
         link
         highlight
-        class="csc-language-selection csc-toolbar-btn-popover"
+        class="csc-language-selection csc-toolbar-btn-popover no-padding"
     >
         <q-collapsible
             ref="languageCollapsible"

src/components/layouts/CscUserMenu.vue

@@ -1,5 +1,6 @@
 <template>
     <q-list
+        class="no-padding"
         no-border
         link
     >

src/components/layouts/Default.vue

@@ -13,6 +13,7 @@
                 slot="header"
             >
                 <q-btn
+                    class="csc-user-menu-button"
                     v-if="isMobile"
                     flat
                     color="white"
@@ -22,6 +23,39 @@
                         name="menu"
                     />
                 </q-btn>
+                <q-btn
+                    v-if="hasFaxCapability && hasSendFaxFeature"
+                    class="csc-user-menu-button bg-primary text-dark"
+                    flat
+                    color="primary"
+                    round
+                    small
+                >
+                    <q-icon
+                        name="apps"
+                    />
+                    <q-popover
+                        ref="appPopover"
+                    >
+                        <q-list
+                            class="no-padding"
+                            no-border
+                        >
+                            <q-item
+                                link
+                                @click="showSendFax();$refs.appPopover.close()"
+                            >
+                                <q-item-side
+                                    icon="fa-fax"
+                                    color="primary"
+                                />
+                                <q-item-main
+                                    :label="$t('communication.sendFax')"
+                                />
+                            </q-item>
+                        </q-list>
+                    </q-popover>
+                </q-btn>
                 <q-btn
                     class="csc-user-menu-button no-shadow"
                     v-if="!isMobile"
@@ -109,10 +143,7 @@
             :is-pbx-admin="isPbxAdmin"
             :is-pbx-configuration="isPbxConfiguration"
         />
-        <router-view
-            :has-fax="hasFaxCapability && hasSendFaxFeature"
-            @send-fax="showSendFax()"
-        />
+        <router-view />
         <csc-send-fax
             ref="sendFax"
         />
@@ -179,7 +210,9 @@
         QItemTile,
         QPopover,
         QSideLink,
-        QCollapsible
+        QCollapsible,
+        QFabAction,
+        QFab
     } from 'quasar-framework'
     import CscMainMenu from "./MainMenu"
     import CscLanguageMenu from "./CscLanguageMenu"
@@ -232,7 +265,9 @@
             CscCall,
             CscSendFax,
             CscLogo,
-            CscUserMenu
+            CscUserMenu,
+            QFabAction,
+            QFab
         },
         computed: {
             ...mapGetters([
@@ -499,7 +534,8 @@
         top 4px
         position absolute
     .csc-user-menu-button
-        margin 0 0.2rem
+        margin-left 0
+        margin-right 0.2rem
         padding 0.2rem
         .on-left
             margin 0

src/components/pages/Home.vue

@@ -8,18 +8,6 @@
             <div
                 class="col col-xs-12 col-md-6 col-lg-4"
             >
-                <div
-                    v-if="hasFax"
-                    class="csc-communication-actions row justify-center"
-                >
-                    <q-btn
-                        v-if="hasFax"
-                        icon="fa-fax"
-                        round
-                        color="primary"
-                        @click="sendFax()"
-                    />
-                </div>
                 <q-alert
                     v-if="!isCallInitializing && desktopSharingInstall"
                     v-model="desktopSharingInstall"
@@ -104,15 +92,11 @@
             QBtn
         },
         props: [
-            'hasFax'
         ],
         methods: {
             numberInputChanged(number) {
                 this.$store.commit('call/numberInputChanged', number);
             },
-            sendFax() {
-                this.$emit('send-fax');
-            },
             dialpadClick(value) {
                 let number = this.callNumberInput + value;
                 this.$store.commit('call/numberInputChanged', number);