TT#36173 Global: As a Customer I want to see the page title in the title bar

Change-Id: Iee01c12896ebaec75653ed469785c0e88cd10983

src/components/CscCall.vue

@@ -38,7 +38,7 @@
                     <q-field v-show="isPreparing" :helper="$t('call.inputNumber')" :count="64" dark
                              :error="validationEnabled && phoneNumberError" :error-label="$t('call.inputValidNumber')">
                         <q-input type="text" :float-label="$t('call.number')" :value="phoneNumber" @input="inputPhoneNumber"
-                                 ref="numberInput" dark clearable max="64" @blur="phoneNumberBlur" @focus="phoneNumberFocus"
+                                 ref="numberInput" dark clearable :max="64" @blur="phoneNumberBlur" @focus="phoneNumberFocus"
                                  @keypress.space.prevent @keydown.space.prevent />
                     </q-field>
                     <div v-if="!isPreparing" class="phone-number">

src/components/CscPage.vue

@@ -1,8 +1,5 @@
 <template>
     <div class="page">
-        <q-fixed-position corner="top-left" :offset="[0,0]" :class="pageTitleClasses">
-            <h2>{{ title }}</h2>
-        </q-fixed-position>
         <div class="page-content">
             <slot></slot>
         </div>
@@ -47,8 +44,7 @@
 
     .page {
         position: relative;
-        padding: 60px;
+        padding: 48px;
-        padding-top: 100px;
         margin: 0px;
     }
 
@@ -82,7 +78,7 @@
     @media (max-width: $breakpoint-sm) {
         .page {
             padding: 16px;
-            padding-top: 70px;
+            padding-top: 32px;
             margin: 0px;
         }
         .page .page-content {

src/components/layouts/Default.vue

@@ -6,17 +6,37 @@
                 <q-icon name="menu"/>
             </q-btn>
             <q-toolbar-title>
-                {{ $t('title') }}
+                {{ pageTitle }}
-                <span slot="subtitle"></span>
+                <span slot="subtitle">{{ pageSubtitle }}</span>
             </q-toolbar-title>
-            <q-btn flat @click="" icon-right="fa-user-circle">
+            <q-btn flat class="csc-toolbar-btn">
+                <q-icon name="question answer" />
+                <q-popover ref="communicationPopover">
+                    <q-list item-separator link class="csc-toolbar-btn-popover">
+                        <q-item @click="call();$refs.communicationPopover.close()" v-if="isCallAvailable">
+                            <q-item-side icon="fa-phone" color="primary" />
+                            <q-item-main :label="$t('startCall')" />
+                        </q-item>
+                        <q-item @click="showSendFax();$refs.communicationPopover.close()" v-if="hasFaxCapability && hasSendFaxFeature">
+                            <q-item-side icon="fa-fax" color="primary"/>
+                            <q-item-main :label="$t('sendFax')" />
+                        </q-item>
+                        <q-item @click="$refs.communicationPopover.close()" v-if="hasSmsCapability && hasSendSmsFeature">
+                            <q-item-side icon="fa-send" color="primary"/>
+                            <q-item-main :label="$t('sendSms')" />
+                        </q-item>
+                    </q-list>
+                </q-popover>
+            </q-btn>
+            <q-btn flat class="csc-toolbar-btn csc-toolbar-btn-right">
+                <q-icon name="fa-user-circle" class="csc-toolbar-btn-icon" />
                 <span id="user-login-as" class="gt-sm">{{ $t('loggedInAs') }}</span>
                 <span id="user-name" class="gt-xs">{{ getUsername }}</span>
                 <q-popover ref="popover">
-                    <q-list item-separator link>
+                    <q-list item-separator link class="csc-toolbar-btn-popover">
                         <q-item @click="logout()">
+                            <q-item-side icon="exit to app" color="primary"/>
                             <q-item-main label="Logout" />
-                            <q-item-side icon="exit to app"/>
                         </q-item>
                     </q-list>
                 </q-popover>
@@ -89,19 +109,6 @@
             </q-collapsible>
         </q-list>
         <router-view />
-        <q-fixed-position id="global-action-btn" corner="top-right" :offset="fabOffset" class="page-button transition-generic">
-            <q-fab v-if="hasCommunicationCapabilities" color="primary" icon="question answer" active-icon="clear" direction="down" flat>
-                <q-fab-action v-if="hasFaxCapability && hasSendFaxFeature" color="primary" @click="showSendFax()" icon="fa-fax">
-                    <q-tooltip v-if="isDesktop" anchor="center right" self="center left" :offset="[15, 0]">{{ $t('sendFax') }}</q-tooltip>
-                </q-fab-action>
-                <q-fab-action v-if="hasSmsCapability && hasSendSmsFeature" color="primary" @click="" icon="fa-send">
-                    <q-tooltip v-if="isDesktop" anchor="center right" self="center left" :offset="[15, 0]">{{ $t('sendSms') }}</q-tooltip>
-                </q-fab-action>
-                <q-fab-action v-if="isCallAvailable" color="primary" @click="call()" icon="fa-phone">
-                    <q-tooltip v-if="isDesktop" anchor="center right" self="center left" :offset="[15, 0]">{{ $t('startCall') }}</q-tooltip>
-                </q-fab-action>
-            </q-fab>
-        </q-fixed-position>
         <csc-call ref="cscCall" slot="right" @close="closeCall()" @fullscreen="toggleFullscreen()"
                   :fullscreen="isFullscreenEnabled" region="DE" />
         <q-window-resize-observable @resize="onWindowResize" />
@@ -236,14 +243,20 @@
             },
             fabOffset() {
                 if(Platform.is.mobile) {
-                    return [1, 2];
+                    return [16, 16];
                 }
                 else {
-                    return [48, 17];
+                    return [32, 32];
                 }
             },
             isDesktop() {
                 return Platform.is.desktop;
+            },
+            pageTitle() {
+                return this.$store.getters['pageTitle'];
+            },
+            pageSubtitle() {
+                return this.$store.getters['pageSubtitle'];
             }
         },
         methods: {
@@ -356,7 +369,8 @@
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
-    @import '../../themes/quasar.variables.styl';
+    @import '../../themes/quasar.variables';
+    @import '../../themes/app.common';
 
     #main-menu {
         padding-top:60px;
@@ -416,24 +430,6 @@
         margin: 0;
     }
 
-    #global-action-btn {
-        z-index: 1001;
-    }
-
-    @media only screen and (min-width: 425px) and (orientation: portrait) {
-        #global-action-btn {
-            margin: 15px 60px !important;
-            top: 60px;
-        }
-    }
-
-    @media only screen and (min-width: 768px) and (orientation: landscape) {
-        #global-action-btn {
-            margin: 17px 48px !important;
-            top: 60px;
-        }
-    }
-
     .layout-aside.fixed.csc-call-fullscreen {
         left: 0;
         right: 0;
@@ -529,4 +525,18 @@
         font-size:24px;
     }
 
+    .csc-toolbar-btn-popover
+        .q-item-main.q-item-section
+            margin-left 0
+
+    .q-toolbar
+
+        .csc-toolbar-btn.q-btn
+            padding-left 8px
+            padding-right 8px
+
+        .csc-toolbar-btn-right
+            .csc-toolbar-btn-icon
+                margin-right 8px
+
 </style>

src/components/pages/CallBlocking/Privacy.vue

@@ -1,5 +1,5 @@
 <template>
-    <csc-page title="Privacy">
+    <csc-page title="Privacy" class="csc-simple-page">
         <q-toggle :label="(!callBlockingEnabled ? 'Hide' : 'Show') + ' Own Number'"
                 @input="toggle()" v-model="callBlockingEnabled"/>
     </csc-page>

src/components/pages/CallForward/CscDestinations.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="dest-section">
         <div class="dest-title">
-            <q-icon :name="icon" class="dest-icon" />
+            <q-icon :name="icon" class="dest-icon" size="24px" />
             {{ title }}
         </div>
         <q-list no-border>

src/components/pages/Home.vue

@@ -1,6 +1,6 @@
 <template>
     <csc-page :title="$t('pages.home.title')" id="csc-page-home">
-        <div class="row md-gutter">
+        <div :class="gridClasses">
             <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
                 <div @click="call()">
                     <q-card :class="{ 'home-card-inactive': !isCallAvailable,
@@ -122,6 +122,16 @@
             ]),
             isMobile() {
                 return Platform.is.mobile;
+            },
+            gridClasses() {
+                let classes = ['row'];
+                if(this.isMobile) {
+                    classes.push('sm-gutter');
+                }
+                else {
+                    classes.push('md-gutter');
+                }
+                return classes;
             }
         },
         methods: {
@@ -149,11 +159,11 @@
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
-    @import '../../themes/quasar.variables.styl'
+    @import '../../themes/quasar.variables'
 
     #csc-page-home
         .q-card-actions
-            font-size 22px
+            font-size 18px
             padding 0 10px 35px 10px
 
         .q-card-main
@@ -162,7 +172,7 @@
 
         .home-card-active
             cursor pointer
-            border solid 2px $primary
+            border solid 2px #c5e0ba
             .home-icons
                 font-size 5.5rem
                 color $primary
@@ -171,7 +181,7 @@
 
     .home-card-inactive
         cursor not-allowed
-        border solid 2px $grey
+        border solid 2px #eeeeee
         .home-icons
             font-size 5.5rem
             color $grey
@@ -180,6 +190,7 @@
 
     @media (max-width: $breakpoint-sm)
         #csc-page-home
+            padding 16px
             .q-card-actions
                 font-size 16px
                 padding 0 10px 25px 10px

src/components/pages/PbxConfiguration/CscPbxDevice.vue

@@ -97,8 +97,7 @@
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
-    @import '../../../themes/app.common'
+    @import '../../../themes/quasar.variables';
-
     .csc-pbx-device
 
         .csc-pbx-device-content

src/components/pages/PbxConfiguration/CscPbxDeviceConfig.vue

@@ -216,8 +216,7 @@
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
-    @import '../../../themes/app.common'
+    @import '../../../themes/quasar.variables';
-
     $spotSize = 25px
 
     .csc-pbx-device-key-details

src/components/pages/PbxConfiguration/CscPbxDevices.vue

@@ -1,5 +1,5 @@
 <template>
-    <csc-page :title="$t('pbxConfig.devicesTitle')">
+    <csc-page :title="$t('pbxConfig.devicesTitle')" class="csc-list-page">
         <div v-if="isListLoadingVisible" class="row justify-center">
             <q-spinner-dots color="primary" :size="40" />
         </div>
@@ -7,6 +7,7 @@
             <q-pagination :value="listCurrentPage" :max="listLastPage" @change="changePage" />
         </div>
         <q-list no-border separator sparse multiline>
+            <q-item> </q-item>
             <csc-pbx-device v-for="device in devices" :key="device.id" :device="device" @remove="removeDevice"
                             :modelOptions="modelOptions" :loading="isDeviceLoading(device.id)" />
         </q-list>
@@ -20,7 +21,7 @@
     import { mapGetters } from 'vuex'
     import CscPage  from '../../CscPage'
     import CscPbxDevice from './CscPbxDevice'
-    import { QSpinnerDots, QPagination, QList, Dialog } from 'quasar-framework'
+    import { QSpinnerDots, QPagination, QList, Dialog, QItem } from 'quasar-framework'
     import { showToast } from '../../../helpers/ui'
 
     export default {
@@ -39,7 +40,8 @@
             QSpinnerDots,
             QPagination,
             QList,
-            Dialog
+            Dialog,
+            QItem
         },
         computed: {
             ...mapGetters('pbxConfig', [
@@ -94,5 +96,5 @@
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
-    @import '../../../themes/app.common'
+    @import '../../../themes/app.common';
 </style>

src/components/pages/PbxConfiguration/CscPbxGroup.vue

@@ -387,5 +387,5 @@
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
-    @import '../../../themes/app.common'
+    @import '../../../themes/quasar.variables';
 </style>

src/components/pages/PbxConfiguration/CscPbxSeat.vue

@@ -301,5 +301,5 @@
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
-    @import '../../../themes/app.common'
+    @import '../../../themes/app.common';
 </style>

src/components/pages/Reminder.vue

@@ -1,5 +1,5 @@
 <template>
-    <csc-page :title="$t('pages.reminder.title')">
+    <csc-page :title="$t('pages.reminder.title')" class="csc-simple-page">
         <q-field class="reminder-field">
             <q-toggle :label="$t('pages.reminder.title') + (active ? ' enabled':' disabled')" @input="toggleReminder()" v-model="active" />
         </q-field>

src/routes.js

@@ -1,4 +1,5 @@
 
+import { i18n } from './i18n'
 import DefaultLayout from './components/layouts/Default'
 import Home from './components/pages/Home'
 import Conversations from './components/pages/Conversations/Conversations'
@@ -23,50 +24,97 @@ export default [
             {
                 path: 'home',
                 component: Home,
+                meta: {
+                    title: i18n.t('navigation.home.title'),
+                    subtitle: i18n.t('navigation.home.subTitle')
+                }
             },
             {
                 path: 'conversations',
                 component: Conversations,
+                meta: {
+                    title: i18n.t('navigation.conversations.title'),
+                    subtitle: i18n.t('navigation.conversations.subTitle')
+                }
             },
             {
                 path: 'call-forward/always',
                 component: CallForwardAlways,
+                meta: {
+                    title: i18n.t('navigation.callForward.title'),
+                    subtitle: i18n.t('navigation.callForward.always')
+                }
             },
             {
                 path: 'call-forward/company-hours',
-                component: CallForwardCompanyHours
+                component: CallForwardCompanyHours,
+                meta: {
+                    title: i18n.t('navigation.callForward.title'),
+                    subtitle: i18n.t('navigation.callForward.companyHours')
+                }
             },
             {
                 path: 'call-forward/after-hours',
-                component: CallForwardAfterHours
+                component: CallForwardAfterHours,
+                meta: {
+                    title: i18n.t('navigation.callForward.title'),
+                    subtitle: i18n.t('navigation.callForward.afterHours')
+                }
             },
             {
                 path: 'call-blocking/incoming',
-                component: CallBlockingIncoming
+                component: CallBlockingIncoming,
+                meta: {
+                    title: i18n.t('navigation.callBlocking.title'),
+                    subtitle: i18n.t('navigation.callBlocking.incoming')
+                }
             },
             {
                 path: 'call-blocking/outgoing',
-                component: CallBlockingOutgoing
+                component: CallBlockingOutgoing,
+                meta: {
+                    title: i18n.t('navigation.callBlocking.title'),
+                    subtitle: i18n.t('navigation.callBlocking.outgoing')
+                }
             },
             {
                 path: 'call-blocking/privacy',
-                component: CallBlockingPrivacy
+                component: CallBlockingPrivacy,
+                meta: {
+                    title: i18n.t('navigation.callBlocking.title'),
+                    subtitle: i18n.t('navigation.callBlocking.privacy')
+                }
             },
             {
                 path: 'reminder',
-                component: Reminder
+                component: Reminder,
+                meta: {
+                    title: i18n.t('navigation.reminder.title')
+                }
             },
             {
                 path: 'pbx-configuration/groups',
-                component: PbxConfigurationGroups
+                component: PbxConfigurationGroups,
+                meta: {
+                    title: i18n.t('navigation.pbxConfiguration.title'),
+                    subtitle: i18n.t('navigation.pbxConfiguration.groups')
+                }
             },
             {
                 path: 'pbx-configuration/seats',
-                component: PbxConfigurationSeats
+                component: PbxConfigurationSeats,
+                meta: {
+                    title: i18n.t('navigation.pbxConfiguration.title'),
+                    subtitle: i18n.t('navigation.pbxConfiguration.seats')
+                }
             },
             {
                 path: 'pbx-configuration/devices',
-                component: PbxConfigurationDevices
+                component: PbxConfigurationDevices,
+                meta: {
+                    title: i18n.t('navigation.pbxConfiguration.title'),
+                    subtitle: i18n.t('navigation.pbxConfiguration.devices')
+                }
             }
         ]
     },

src/store/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
+import _ from 'lodash'
 import Vue from 'vue'
 import Vuex from 'vuex'
 import CallBlockingModule from './call-blocking'
@@ -25,5 +26,13 @@ export const store = new Vuex.Store({
         reminder: ReminderModule,
         user: UserModule,
         communication: CommunicationModule
+    },
+    getters: {
+        pageTitle(state) {
+            return _.get(state, 'route.meta.title', 'Not defined');
+        },
+        pageSubtitle(state) {
+            return _.get(state, 'route.meta.subtitle', '');
+        }
     }
 });

src/themes/app.common.styl

@@ -1,6 +1,13 @@
 
 @import 'quasar.variables'
 
+@media (max-width: $breakpoint-sm)
+    .page.csc-list-page
+        padding 0
+        padding-top 16px
+
+    .page.csc-simple-page
+        padding 36px
 
 .csc-no-entities
     margin 15px