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

17
src/components/CscPage.vue
Unescape View File

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

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

@ -379,7 +379,7 @@
}
.q-card.page {
padding: 15px;
padding: 0px;
margin: 0;
}

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

@ -1,6 +1,6 @@
<template>
<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') }}
<q-popover ref="popover">
<q-list separator link>
@ -151,8 +151,12 @@
@import '../../../themes/quasar.variables.styl'
.add-destination-form
margin 0 15px
margin 0
.q-slider.label-always
padding 15px 0 5px
height 50px
.add-destination-button
padding-left 0px
padding-right 0px
</style>

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

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

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

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

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

@ -1,11 +1,13 @@
<template>
<q-field>
<div class="row no-wrap">
<q-input class="col-7"
<q-item>
<q-item-main>
<q-item-tile class="row no-wrap">
<q-input
class="col"
v-model="weekday"
readonly />
<q-datetime
class="col-2"
class="col"
color="primary"
v-model="from"
align="right"
@ -13,26 +15,28 @@
format24h
readonly />
<q-datetime
class="col-2"
class="col"
color="primary"
v-model="to"
align="right"
type="time"
format24h
readonly />
</q-item-tile>
</q-item-main>
<q-item-side>
<q-btn flat
class="col-1"
color="negative"
icon="delete"
@click="deleteTime(index)">
</q-btn>
</div>
</q-field>
</q-item-side>
</q-item>
</template>
<script>
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 'quasar-extras/animate/bounceInRight.css'
import 'quasar-extras/animate/bounceOutRight.css'
@ -51,7 +55,11 @@
QInput,
QDatetime,
Dialog,
QBtn
QBtn,
QItem,
QItemMain,
QItemTile,
QItemSide
},
computed: {
...mapGetters('callForward', {
@ -124,4 +132,10 @@
</script>
<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>

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

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

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

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

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

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

4
src/locales/en.json
Unescape View File

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

Write Preview
Loading…
Cancel
Save