TT#24903 Improve page title styling

Change-Id: Ide968981bc9b8a7d56fac564bb861ed484a6113f

src/components/CscPage.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="page">
-        <q-fixed-position corner="top-left" :offset="[0,0]" class="page-title transition-generic">
+        <q-fixed-position corner="top-left" :offset="[0,0]" :class="pageTitleClasses">
             <h2>{{ title }}</h2>
         </q-fixed-position>
         <div class="page-content">
@@ -10,7 +10,10 @@
 </template>
 
 <script>
+
     import { QIcon, QFixedPosition, QFab, QFabAction, QTooltip } from 'quasar-framework'
+    import { mapState, mapGetters } from 'vuex'
+
     export default {
         name: 'csc-page',
         props: [
@@ -25,6 +28,19 @@
             QFab,
             QFabAction,
             QTooltip
+        },
+        computed: {
+            pageTitleClasses() {
+                var classes = ['page-title', 'transition-generic'];
+                if(this.right) {
+                    classes.push('page-title-right');
+                }
+
+                console.log(classes);
+
+                return classes;
+            },
+            ...mapGetters('layout', ['left', 'right'])
         }
     }
 </script>
@@ -49,8 +65,15 @@
         padding: 30px;
         padding-left: 60px;
         padding-right: 60px;
-        background-color: white;
         z-index: 1000;
+        right: 0;
+        background: -moz-linear-gradient(top, rgba(255,255,255,1) 44%, rgba(255,255,255,0.86) 71%, rgba(255,255,255,0) 100%);
+        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 44%,rgba(255,255,255,0.86) 71%,rgba(255,255,255,0) 100%);
+        background: linear-gradient(to bottom, rgba(255,255,255,1) 44%,rgba(255,255,255,0.86) 71%,rgba(255,255,255,0) 100%);
+    }
+
+    .page .page-title.page-title-right {
+        right: $layout-aside-right-width;
     }
 
     .page .page-button {
@@ -71,8 +94,6 @@
 
         .page .page-title {
             padding: 30px;
-            background-color: white;
-            z-index: 1000;
         }
     }
 
@@ -80,4 +101,6 @@
         margin-right: 10px;
         font-size: 24px !important;
     }
+
+
 </style>

src/components/layouts/Default.vue

@@ -1,5 +1,5 @@
 <template>
-    <q-layout ref="layout" view="lHh LpR lFf" :right-breakpoint="1100">
+    <q-layout ref="layout" view="lHh LpR lFf" :right-breakpoint="1100" v-model="layout">
         <q-toolbar slot="header">
             <q-btn flat @click="$refs.layout.toggleLeft()">
                 <q-icon name="menu"/>
@@ -83,10 +83,8 @@
             </q-collapsible>
         </q-list>
         <router-view />
-        <q-fixed-position corner="top-right" :offset="[20, 20]" class="page-button transition-generic">
+        <q-fixed-position id="global-action-btn" corner="top-right" :offset="[48, 17]" class="page-button transition-generic">
-            <q-fab v-if=""
+            <q-fab color="primary" icon="question answer" active-icon="clear" direction="down" flat>
-                   color="primary" icon="question answer"
-                   active-icon="clear" direction="down" flat>
                 <q-fab-action v-if="hasFaxCapability" color="primary" @click="" icon="fa-fax">
                     <q-tooltip anchor="center right" self="center left" :offset="[15, 0]">{{ $t('sendFax') }}</q-tooltip>
                 </q-fab-action>
@@ -166,6 +164,14 @@
             CscCall
         },
         computed: {
+            layout: {
+                get(){
+                    return this.$store.state.layout.sides;
+                },
+                set(sides) {
+                    this.$store.commit('layout/updateSides', sides);
+                }
+            },
             ...mapGetters('call', [
                 'isCallAvailable',
                 'hasCallInitFailure'
@@ -272,4 +278,9 @@
         padding: 15px;
         margin: 0;
     }
+
+    #global-action-btn {
+        z-index: 1001;
+    }
+
 </style>

src/store/index.js

@@ -9,6 +9,7 @@ import CallBlockingModule from './call-blocking'
 import ReminderModule from './reminder'
 import CallModule from './call'
 import ConversationsModule from './conversations'
+import LayoutModule from './layout'
 
 Vue.use(Vuex);
 
@@ -19,6 +20,7 @@ export const store = new Vuex.Store({
         callBlocking: CallBlockingModule,
         reminder: ReminderModule,
         call: CallModule,
-        conversations: ConversationsModule
+        conversations: ConversationsModule,
+        layout: LayoutModule
     }
 });

src/store/layout.js

@@ -0,0 +1,37 @@
+'use strict';
+
+export default {
+    namespaced: true,
+    state: {
+        sides: {
+            left: true,
+            right: false
+        }
+    },
+    getters: {
+        right(state) {
+            return state.sides.right;
+        },
+        left(state) {
+            return state.sides.left;
+        }
+    },
+    mutations: {
+        updateSides(state, sides) {
+            state.sides = sides;
+        },
+        showRight(state){
+            state.sides.right = true;
+        },
+        hideRight(state){
+            state.sides.right = false;
+        },
+        showLeft(state){
+            state.sides.left = true;
+        },
+        hideLeft(state){
+            state.sides.left = false;
+        }
+    },
+    actions: {}
+};