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

TT#34859 CallForwarding: Polish timeset and destination list for mobile devices

Browse Source 
Change-Id: Ie694b707f448c0c390ce46e41b49dc2055f7ec1a
changes/12/20512/3
Tijana Maksimovic 8 years ago committed by Hans-Peter Herzog
parent 9042140b60
commit 7842fa27b4
11 changed files with 211 additions and 163 deletions
Show Stats Download Patch File Download Diff File

2
src/components/CscCall.vue
Unescape View File

@ -351,7 +351,7 @@
} }
.csc-call .q-card { .csc-call .q-card {
margin:0; margin: 0;
} }
.csc-call .q-card-main { .csc-call .q-card-main {

17
src/components/CscPage.vue
Unescape View File

@ -47,8 +47,9 @@
.page { .page {
position: relative; position: relative;
padding: 60px; padding: 30px;
padding-top: 100px; padding-top: 100px;
margin: 0px;
} }
.page h2 { .page h2 {
@ -60,8 +61,6 @@
.page .page-title { .page .page-title {
padding: 30px; padding: 30px;
padding-left: 60px;
padding-right: 60px;
z-index: 1000; z-index: 1000;
right: 0; 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: -moz-linear-gradient(top, rgba(255,255,255,1) 44%, rgba(255,255,255,0.86) 71%, rgba(255,255,255,0) 100%);
@ -80,9 +79,15 @@
@media (max-width: $breakpoint-sm) { @media (max-width: $breakpoint-sm) {
.page { .page {
padding: 30px; padding: 16px;
padding-top: 100px; padding-top: 70px;
margin: 0px;
} }
.page .page-content {
margin: 0px;
padding: 0px;
}
.page h2 { .page h2 {
margin: 0px; margin: 0px;
font-size: 22px; font-size: 22px;
@ -90,7 +95,7 @@
} }
.page .page-title { .page .page-title {
padding: 30px; padding: 16px;
} }
} }

4
src/components/layouts/Default.vue
Unescape View File

@ -373,13 +373,13 @@
} }
.q-card { .q-card {
margin:15px; margin: 15px;
margin-left: 0px; margin-left: 0px;
margin-right: 0px; margin-right: 0px;
} }
.q-card.page { .q-card.page {
padding: 15px; padding: 0px;
margin: 0; margin: 0;
} }

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

@ -1,6 +1,6 @@
<template> <template>
<div class="add-destination-form"> <div class="add-destination-form">
<q-btn v-if="!isFormEnabled" flat color="primary" icon="fa-plus"> <q-btn v-if="!isFormEnabled" flat color="primary" icon="fa-plus" class="add-destination-button">
{{ $t('pages.callForward.addDestinationButton') }} {{ $t('pages.callForward.addDestinationButton') }}
<q-popover ref="popover"> <q-popover ref="popover">
<q-list separator link> <q-list separator link>
@ -151,8 +151,12 @@
@import '../../../themes/quasar.variables.styl' @import '../../../themes/quasar.variables.styl'
.add-destination-form .add-destination-form
margin 0 15px margin 0
.q-slider.label-always .q-slider.label-always
padding 15px 0 5px padding 15px 0 5px
height 50px height 50px
.add-destination-button
padding-left 0px
padding-right 0px
</style> </style>

97
src/components/pages/CallForward/CscAddTimeForm.vue
Unescape View File

@ -1,44 +1,41 @@
<template> <template>
<div class="add-times"> <q-item class="csc-add-time-form">
<div class="title" v-if="typeIsNew"> <q-item-main>
{{ title }} <q-item-tile class="row no-wrap">
</div> <q-select
<div class="row no-wrap"> class="col"
<q-field class="col-8"> v-model="selectedWeekday"
<q-select v-model="selectedWeekday"
:options="selectOptions" /> :options="selectOptions" />
</q-field> <q-datetime
<q-field class="col-2"> class="col"
<q-datetime color="primary"
color="primary" v-model="timeFromConverted"
v-model="timeFromConverted" align="right"
align="right" type="time"
type="time" format24h />
format24h /> <q-datetime
</q-field> class="col"
<q-field class="col-2" color="primary"
:error="timeHasError" v-model="timeToConverted"
:error-label="$t('pages.callForward.times.selectValidTime')"> align="right"
<q-datetime type="time"
color="primary" format24h />
v-model="timeToConverted" </q-item-tile>
align="right" <q-item-tile>
type="time" <q-btn flat dark @click="disableForm()">
format24h /> {{ $t('buttons.cancel') }}
</q-field> </q-btn>
</div> <q-btn flat color="primary" icon-right="fa-save" @click="addTime()">
<q-btn flat dark @click="disableForm()"> {{ $t('buttons.save') }}
{{ $t('buttons.cancel') }} </q-btn>
</q-btn> </q-item-tile>
<q-btn flat color="primary" icon-right="fa-save" @click="addTime()"> </q-item-main>
{{ $t('buttons.save') }} </q-item>
</q-btn>
</div>
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { QField, QSelect, QDatetime, QCardTitle, import { QField, QSelect, QDatetime, QList, QItem, QItemMain, QItemTile,
QBtn, date } from 'quasar-framework' QBtn, date } from 'quasar-framework'
import { showGlobalError } from '../../../helpers/ui' import { showGlobalError } from '../../../helpers/ui'
export default { export default {
@ -68,7 +65,10 @@
QField, QField,
QSelect, QSelect,
QDatetime, QDatetime,
QCardTitle, QList,
QItem,
QItemMain,
QItemTile,
QBtn, QBtn,
date date
}, },
@ -147,12 +147,35 @@
<style lang="stylus" rel="stylesheet/stylus"> <style lang="stylus" rel="stylesheet/stylus">
@import '../../../themes/quasar.variables.styl' @import '../../../themes/quasar.variables.styl'
.csc-add-time-form
padding 0
width calc(100% - 56px)
@media only screen and (min-width: 320px) {
.csc-add-time-form {
width calc(100% - 43px)
}
}
@media only screen and (min-width: 360px) {
.csc-add-time-form {
width calc(100% - 50.09px)
}
}
@media only screen and (min-width: 411px) {
.csc-add-time-form {
width calc(100% - 56px)
}
}
.add-times .add-times
margin-right 30px width 100%
.title .title
color $primary color $primary
line-height $csc-subtitle-line-height line-height $csc-subtitle-line-height
font-size $csc-subtitle-font-size font-size $csc-subtitle-font-size
font-weight $csc-subtitle-font-weight font-weight $csc-subtitle-font-weight
</style> </style>

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

@ -1,21 +1,21 @@
<template> <template>
<q-card class="dest-card"> <div class="dest-card">
<csc-destinations :title="$t('pages.callForward.whenOnline')" <csc-destinations :title="$t('pages.callForward.whenOnline')"
:group="destinations.online" :group="destinations.online"
group-name="cfu" group-name="cfu"
:timeset="timeset" :timeset="timeset"
icon="signal_wifi_4_bar" /> icon="smartphone" />
<csc-destinations :title="$t('pages.callForward.whenBusy')" <csc-destinations :title="$t('pages.callForward.whenBusy')"
:group="destinations.busy" :group="destinations.busy"
group-name="cfb" group-name="cfb"
:timeset="timeset" :timeset="timeset"
icon="record_voice_over" /> icon="phonelink_ring" />
<csc-destinations :title="$t('pages.callForward.whenOffline')" <csc-destinations :title="$t('pages.callForward.whenOffline')"
:group="destinations.offline" :group="destinations.offline"
group-name="cfna" group-name="cfna"
:timeset="timeset" :timeset="timeset"
icon="signal_wifi_off" /> icon="phonelink_erase" />
</q-card> </div>
</template> </template>
<script> <script>
@ -144,4 +144,8 @@
</script> </script>
<style lang="stylus" rel="stylesheet/stylus"> <style lang="stylus" rel="stylesheet/stylus">
.dest-card
max-width 100%
margin auto
</style> </style>

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

@ -1,38 +1,42 @@
<template> <template>
<q-field> <q-item>
<div class="row no-wrap"> <q-item-main>
<q-input class="col-7" <q-item-tile class="row no-wrap">
v-model="weekday" <q-input
readonly /> class="col"
<q-datetime v-model="weekday"
class="col-2" readonly />
color="primary" <q-datetime
v-model="from" class="col"
align="right" color="primary"
type="time" v-model="from"
format24h align="right"
readonly /> type="time"
<q-datetime format24h
class="col-2" readonly />
color="primary" <q-datetime
v-model="to" class="col"
align="right" color="primary"
type="time" v-model="to"
format24h align="right"
readonly /> type="time"
format24h
readonly />
</q-item-tile>
</q-item-main>
<q-item-side>
<q-btn flat <q-btn flat
class="col-1"
color="negative" color="negative"
icon="delete" icon="delete"
@click="deleteTime(index)"> @click="deleteTime(index)">
</q-btn> </q-btn>
</div> </q-item-side>
</q-field> </q-item>
</template> </template>
<script> <script>
import { QField, QInput, QDatetime, Dialog, import { QField, QInput, QDatetime, Dialog,
QBtn, Alert, date } from 'quasar-framework' QBtn, QItem, QItemMain, QItemTile, QItemSide, Alert, date } from 'quasar-framework'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import 'quasar-extras/animate/bounceInRight.css' import 'quasar-extras/animate/bounceInRight.css'
import 'quasar-extras/animate/bounceOutRight.css' import 'quasar-extras/animate/bounceOutRight.css'
@ -51,7 +55,11 @@
QInput, QInput,
QDatetime, QDatetime,
Dialog, Dialog,
QBtn QBtn,
QItem,
QItemMain,
QItemTile,
QItemSide
}, },
computed: { computed: {
...mapGetters('callForward', { ...mapGetters('callForward', {
@ -124,4 +132,10 @@
</script> </script>
<style lang="stylus" rel="stylesheet/stylus"> <style lang="stylus" rel="stylesheet/stylus">
div.q-item-side.q-item-side-left.q-item-section
margin-left 0
i.q-icon.material-icons.on-left
margin-right 0
</style> </style>

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

@ -1,32 +1,25 @@
<template> <template>
<q-card class="times-card" flat> <div class="times-card" flat>
<q-card-title class="times-title"> <q-list no-border>
Times <csc-call-forward-time class="csc-call-forward-times" v-if="times.length > 0" v-for="(time, index) in times"
</q-card-title> :key="index" :time="time" :index="index" />
<q-card-main> </q-list>
<csc-call-forward-time v-if="times.length > 0" v-for="(time, index) in times" <csc-add-time-form v-if="activeTimeForm" type="existing" :title="$t('pages.callForward.times.addCompanyHours')" timeset="Company Hours" ref="addFormExisting" />
:time="time" :index="index" /> <q-btn v-else
<csc-add-time-form v-if="activeTimeForm" type="existing" :title="$t('pages.callForward.times.addCompanyHours')" :timesetName="timesetName" ref="addFormExisting" /> color="primary"
</q-card-main> class="add-time"
<q-card-actions v-if="!activeTimeForm"> icon="fa-plus" flat
<q-field> @click="enableAddForm()">
<q-btn color="primary" {{ $t('pages.callForward.times.addTimeButton') }}
class="add-time" </q-btn>
icon="fa-plus" flat </div>
@click="enableAddForm()">
{{ $t('pages.callForward.times.addTimeButton') }}
</q-btn>
</q-field>
</q-card-actions>
</q-card>
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import CscCallForwardTime from './CscCallForwardTime' import CscCallForwardTime from './CscCallForwardTime'
import CscAddTimeForm from './CscAddTimeForm' import CscAddTimeForm from './CscAddTimeForm'
import { QCard, QCardTitle, QCardMain, QCardActions, import { QField, QBtn, QList } from 'quasar-framework'
QField, QBtn } from 'quasar-framework'
export default { export default {
name: 'csc-call-forward-times', name: 'csc-call-forward-times',
props: [ props: [
@ -41,12 +34,9 @@
components: { components: {
CscCallForwardTime, CscCallForwardTime,
CscAddTimeForm, CscAddTimeForm,
QCard,
QCardTitle,
QCardMain,
QCardActions,
QField, QField,
QBtn QBtn,
QList
}, },
computed: { computed: {
...mapState('callForward', [ ...mapState('callForward', [
@ -67,6 +57,16 @@
<style lang="stylus" rel="stylesheet/stylus"> <style lang="stylus" rel="stylesheet/stylus">
@import '../../../themes/quasar.variables.styl' @import '../../../themes/quasar.variables.styl'
.times-title .csc-call-forward-times
color $primary padding 0
.times-card
max-width 100%
margin auto
margin-bottom 30px
.add-time
margin-top 0
padding-left 0
padding-right 0
</style> </style>

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

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<q-item v-for="(destination, index) in destinations"> <q-item class="csc-destination" :key="index" v-for="(destination, index) in destinations">
<q-item-main> <q-item-main>
<div class="dest-row" :class="{ terminated: destination.terminated}"> <div class="dest-row" :class="{ terminated: destination.terminated }">
<span v-if="index == 0"> <span v-if="index == 0">
{{ $t('pages.callForward.firstRing') }} {{ $t('pages.callForward.firstRing') }}
</span> </span>
@ -28,27 +28,23 @@
</q-tooltip> </q-tooltip>
</div> </div>
</q-item-main> </q-item-main>
<q-item-side class="dest-btns" right> <q-item-side class="dest-btns" icon="more_vert" right>
<span v-if="destinations.length > 1"> <q-popover ref="popover">
<q-btn flat <q-list separator link>
:class="{btnhidden: hasNoDownOption(index)}" <q-item v-if="destinations.length > 1 && !hasNoUpOption(index)" @click="moveDestination('up', index), $refs.popover[index].close()">
color="secondary" <q-item-main :label="$t('buttons.moveUp')" />
icon="keyboard_arrow_down" <q-item-side icon="keyboard_arrow_up" color="secondary"></q-item-side>
@click="moveDestination('down', index)"> </q-item>
</q-btn> <q-item v-if="destinations.length > 1 && !hasNoDownOption(index)" @click="moveDestination('down', index), $refs.popover[index].close()">
<q-btn flat <q-item-main :label="$t('buttons.moveDown')" />
:class="{btnhidden: hasNoUpOption(index)}" <q-item-side icon="keyboard_arrow_down" color="secondary"></q-item-side>
color="secondary" </q-item>
icon="keyboard_arrow_up" <q-item @click="deleteDestination(index), $refs.popover[index].close()">
@click="moveDestination('up', index)"> <q-item-main :label="$t('buttons.remove')" />
</q-btn> <q-item-side icon="delete" color="negative"></q-item-side>
</span> </q-item>
<q-btn flat </q-list>
color="negative" </q-popover>
icon="delete"
@click="deleteDestination(index)">
{{ $t('buttons.remove') }}
</q-btn>
</q-item-side> </q-item-side>
</q-item> </q-item>
</div> </div>
@ -61,7 +57,7 @@
import { startLoading, stopLoading, import { startLoading, stopLoading,
showGlobalError } from '../../../helpers/ui' showGlobalError } from '../../../helpers/ui'
import { QItem, QItemMain, QItemSide, import { QItem, QItemMain, QItemSide,
Dialog, QBtn, QTooltip } from 'quasar-framework' Dialog, QBtn, QTooltip, QPopover, QList } from 'quasar-framework'
export default { export default {
name: 'csc-destination', name: 'csc-destination',
props: [ props: [
@ -76,7 +72,9 @@
QItemSide, QItemSide,
Dialog, Dialog,
QBtn, QBtn,
QTooltip QTooltip,
QPopover,
QList
}, },
computed: { computed: {
...mapState('callForward', [ ...mapState('callForward', [
@ -160,7 +158,15 @@
<style lang="stylus" rel="stylesheet/stylus"> <style lang="stylus" rel="stylesheet/stylus">
@import '../../../themes/quasar.variables.styl' @import '../../../themes/quasar.variables.styl'
.q-item.csc-destination
padding 0px
.dest-row .dest-row
color $secondary
white-space nowrap
overflow hidden
font-size 16px
.dest-values .dest-values
font-weight 500 font-weight 500
@ -169,6 +175,8 @@
.dest-btns .dest-btns
display inline-block display inline-block
position absolute
right 0px
.btnhidden .btnhidden
opacity 0 opacity 0

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

@ -1,19 +1,15 @@
<template> <template>
<div class="dest-section"> <div class="dest-section">
<q-card-title class="dest-title"> <div class="dest-title">
<q-icon :name="icon" class="dest-icon" /> <q-icon :name="icon" class="dest-icon" />
{{ title }} {{ title }}
</q-card-title> </div>
<q-card-main> <div>
<q-list no-border> <q-list no-border>
<div v-if="group.length === 0"> <q-item v-if="group.length === 0" class="dest-row csc-no-destination">
<q-item> <span> {{ $t('pages.callForward.forwardToNowhere') }} </span>
<div class="dest-row"> </q-item>
<span> {{ $t('pages.callForward.forwardToNowhere') }} </span> <div v-else :key="index" v-for="(destinationset, index) in group">
</div>
</q-item>
</div>
<div v-else 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)"
@ -21,7 +17,7 @@
</div> </div>
</q-list> </q-list>
<csc-add-destination-form v-bind="lastDestinationset" /> <csc-add-destination-form v-bind="lastDestinationset" />
</q-card-main> </div>
</div> </div>
</template> </template>
@ -29,8 +25,7 @@
import _ from 'lodash' import _ from 'lodash'
import CscDestination from './CscDestination' import CscDestination from './CscDestination'
import CscAddDestinationForm from './CscAddDestinationForm' import CscAddDestinationForm from './CscAddDestinationForm'
import { QCardTitle, QCardMain, QCardSeparator, import { QList, QItem, QIcon } from 'quasar-framework'
QItem, QList, QIcon } from 'quasar-framework'
export default { export default {
name: 'csc-destinations', name: 'csc-destinations',
props: [ props: [
@ -41,11 +36,8 @@
'timeset' 'timeset'
], ],
components: { components: {
QCardTitle,
QCardMain,
QList, QList,
QItem, QItem,
QCardSeparator,
QIcon, QIcon,
CscDestination, CscDestination,
CscAddDestinationForm CscAddDestinationForm
@ -76,21 +68,17 @@
@import '../../../themes/quasar.variables.styl' @import '../../../themes/quasar.variables.styl'
.dest-section .dest-section
.dest-title padding-top 30px
padding 0 15px padding-bottom 30px
.dest-title:first-child
padding 20px 15px 0 15px
.q-item
padding 0 15px
.q-list
margin-bottom 0
.dest-row
inline-block
.dest-title .dest-title
color $primary color $secondary
font-size 16px
.dest-icon .dest-icon
margin-right 5px margin-right 5px
.q-item.csc-no-destination
margin-left 0px
padding 0
</style> </style>

4
src/locales/en.json
Unescape View File

@ -10,7 +10,9 @@
"save": "Save", "save": "Save",
"remove": "Remove", "remove": "Remove",
"edit": "Edit", "edit": "Edit",
"add": "Add" "add": "Add",
"moveUp": "Move up",
"moveDown": "Move down"
}, },
"toasts": { "toasts": {
"callAvailable": "You are now able to start and receive calls", "callAvailable": "You are now able to start and receive calls",

Write Preview
Loading…
Cancel
Save