sipwise
/
ngcp-csc-ui
mirror of https://github.com/sipwise/ngcp-csc-ui.git
1
0
Fork 0
Code Issues Releases Wiki Activity

TT#35360 Optimise destination list for mobile devices

Browse Source 
Change-Id: If133757db784f8ad798cab85dfb9f32256b3bb41
changes/54/20654/1
Tijana Maksimovic 7 years ago
parent 46aad5d561
commit f128aece3d
6 changed files with 86 additions and 33 deletions
Show Stats Download Patch File Download Diff File

4
src/components/pages/CallForward/CscAddDestinationForm.vue
Unescape View File

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

10
src/components/pages/CallForward/CscCallForwardDestinations.vue
Unescape View File

@ -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>

11
src/components/pages/CallForward/CscCallForwardTime.vue
Unescape View File

@ -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
i.q-icon.material-icons.on-left
margin-right 0
.q-btn.csc-call-forward-time-btn
.q-icon
margin-right 0
</style>

4
src/components/pages/CallForward/CscCallForwardTimes.vue
Unescape View File

@ -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>

64
src/components/pages/CallForward/CscDestination.vue
Unescape View File

@ -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,
Dialog, QBtn, QTooltip, QPopover, QList } from 'quasar-framework'
import { QItem, QItemMain, QItemSide, QItemTile,
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

26
src/components/pages/CallForward/CscDestinations.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save