TT#35360 Optimise destination list for mobile devices

Change-Id: If133757db784f8ad798cab85dfb9f32256b3bb41

src/components/pages/CallForward/CscAddDestinationForm.vue

@@ -155,8 +155,4 @@
         .q-slider.label-always
             padding 15px 0 5px
             height 50px
-
-    .add-destination-button
-        padding-left 0px
-        padding-right 0px
 </style>

src/components/pages/CallForward/CscCallForwardDestinations.vue

@@ -1,16 +1,19 @@
 <template>
     <div class="dest-card">
         <csc-destinations :title="$t('pages.callForward.whenOnline')"
+            class="csc-destinations"
             :group="destinations.online"
             group-name="cfu"
             :timeset="timeset"
             icon="smartphone" />
         <csc-destinations :title="$t('pages.callForward.whenBusy')"
+            class="csc-destinations"
             :group="destinations.busy"
             group-name="cfb"
             :timeset="timeset"
             icon="phonelink_ring" />
         <csc-destinations :title="$t('pages.callForward.whenOffline')"
+            class="csc-destinations"
             :group="destinations.offline"
             group-name="cfna"
             :timeset="timeset"
@@ -23,7 +26,6 @@
     import { startLoading, stopLoading,
         showGlobalError, showToast } from '../../../helpers/ui'
     import CscDestinations from './CscDestinations'
-    import { QCard } from 'quasar-framework'
     export default {
         name: 'csc-call-forward-destinations',
         props: [
@@ -35,7 +37,6 @@
             }
         },
         components: {
-            QCard,
             CscDestinations
         },
         computed: {
@@ -148,4 +149,9 @@
     .dest-card
         max-width 100%
         margin auto
+        .csc-destinations
+            .dest-icon
+                font-size 18px
+                margin-bottom 5px 
+
 </style>

src/components/pages/CallForward/CscCallForwardTime.vue

@@ -24,8 +24,9 @@
                     readonly />
             </q-item-tile>
         </q-item-main>
-        <q-item-side>
+        <q-item-side class="csc-call-forward-time-btn-container">
             <q-btn flat
+                class="csc-call-forward-time-btn"
                 color="negative"
                 icon="delete"
                 @click="deleteTime(index)">
@@ -133,9 +134,9 @@
 
 <style lang="stylus" rel="stylesheet/stylus">
 
-    div.q-item-side.q-item-side-left.q-item-section
+    .q-item-side.csc-call-forward-time-btn-container
         margin-left 0
-
+        .q-btn.csc-call-forward-time-btn
-    i.q-icon.material-icons.on-left
+            .q-icon
-        margin-right 0
+                margin-right 0
 </style>

src/components/pages/CallForward/CscCallForwardTimes.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="times-card" flat>
+    <div class="times-card">
         <q-list no-border>
             <csc-call-forward-time class="csc-call-forward-times" v-if="times.length > 0" v-for="(time, index) in times"
                 :key="index" :time="time" :index="index" />
@@ -67,6 +67,4 @@
 
     .add-time
         margin-top 0
-        padding-left 0
-        padding-right 0
 </style>

src/components/pages/CallForward/CscDestination.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
-        <q-item class="csc-destination" :key="index" v-for="(destination, index) in destinations">
+        <q-item highlight separator class="csc-destination" :key="index" v-for="(destination, index) in destinations">
             <q-item-main>
-                <div class="dest-row" :class="{ terminated: destination.terminated }">
+                <div v-if="$q.platform.is.desktop" class="dest-row" :class="{ terminated: destination.terminated }">
                     <span v-if="index == 0">
                         {{ $t('pages.callForward.firstRing') }}
                     </span>
@@ -27,6 +27,41 @@
                         {{ $t('pages.callForward.terminatedTooltip') }}
                     </q-tooltip>
                 </div>
+                <div v-if="$q.platform.is.mobile" class="dest-row" :class="{ terminated: destination.terminated, mobile: mobileClasses }">
+                    <q-item-tile class="dest-values" label>
+                        <span v-if="!isNumber(destination.destination)">
+                            <span v-if="index == 0">
+                                {{ $t('pages.callForward.firstRing') }}
+                            </span>
+                            <span v-else-if="index > 0">
+                                {{ $t('pages.callForward.thenRing') }}
+                            </span>
+                        </span>
+                        {{ destination.destination | destinationFormat }}
+                    </q-item-tile>
+                    <q-item-tile class="dest-sublabel" sublabel>
+                        <span v-if="index == 0 && isNumber(destination.destination)">
+                            {{ $t('pages.callForward.firstRing') }}
+                        </span>
+                        <span v-else-if="index > 0 && isNumber(destination.destination)">
+                            {{ $t('pages.callForward.thenRing') }}
+                        </span>
+                        <span v-if="isNumber(destination.destination)">
+                            <span>
+                                {{ $t('pages.callForward.for') }}
+                            </span>
+                            <span class="dest-values">
+                                {{ destination.timeout }}
+                            </span>
+                            <span>
+                                {{ $t('pages.callForward.secs') }}
+                            </span>
+                        </span>
+                    </q-item-tile>
+                    <q-tooltip v-if="destination.terminated">
+                        {{ $t('pages.callForward.terminatedTooltip') }}
+                    </q-tooltip>
+                </div>
             </q-item-main>
             <q-item-side class="dest-btns" icon="more_vert" right>
                 <q-popover ref="popover">
@@ -56,8 +91,8 @@
     import _ from 'lodash'
     import { startLoading, stopLoading,
         showGlobalError } from '../../../helpers/ui'
-    import { QItem, QItemMain, QItemSide,
+    import { QItem, QItemMain, QItemSide, QItemTile,
-        Dialog, QBtn, QTooltip, QPopover, QList } from 'quasar-framework'
+        Dialog, QBtn, QTooltip, QPopover, QList, Platform } from 'quasar-framework'
     export default {
         name: 'csc-destination',
         props: [
@@ -70,6 +105,7 @@
             QItem,
             QItemMain,
             QItemSide,
+            QItemTile,
             Dialog,
             QBtn,
             QTooltip,
@@ -80,7 +116,14 @@
             ...mapState('callForward', [
                 'changeDestinationState',
                 'changeDestinationError'
-            ])
+            ]),
+            mobileClasses() {
+                let classes = ['dest-row'];
+                if(Platform.is.mobile) {
+                    classes.push('mobile');
+                }
+                return classes;
+            }
         },
         watch: {
             changeDestinationState(state) {
@@ -158,6 +201,17 @@
 <style lang="stylus" rel="stylesheet/stylus">
     @import '../../../themes/quasar.variables.styl'
 
+    .dest-row.mobile
+        padding 16px
+        padding-left 0
+        .dest-values > span
+            font-weight 300
+
+    .dest-row.mobile .dest-sublabel span
+        font-weight 300
+
+    .dest-row.terminated.mobile
+        color $grey
 
     .q-item.csc-destination
         padding 0px

src/components/pages/CallForward/CscDestinations.vue

@@ -4,20 +4,18 @@
             <q-icon :name="icon" class="dest-icon" />
             {{ title }}
         </div>
-        <div>
+        <q-list no-border>
-            <q-list no-border>
+            <q-item v-if="group.length === 0" class="dest-row csc-no-destination">
-                <q-item v-if="group.length === 0" class="dest-row csc-no-destination">
+                <span> {{ $t('pages.callForward.forwardToNowhere') }} </span>
-                    <span> {{ $t('pages.callForward.forwardToNowhere') }} </span>
+            </q-item>
-                </q-item>
+            <div v-else :key="index" v-for="(destinationset, index) in group">
-                <div v-else :key="index" v-for="(destinationset, index) in group">
+                <csc-destination v-bind="destinationset"
-                    <csc-destination v-bind="destinationset"
+                    :prev-dest-id="previousDestinationsetId(index)"
-                        :prev-dest-id="previousDestinationsetId(index)"
+                    :next-dest-id="nextDestinationsetId(index)"
-                        :next-dest-id="nextDestinationsetId(index)"
+                />
-                    />
+            </div>
-                </div>
+        </q-list>
-            </q-list>
+        <csc-add-destination-form v-bind="lastDestinationset" />
-            <csc-add-destination-form v-bind="lastDestinationset" />
-        </div>
     </div>
 </template>