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

TT#32750 Implement startpage with feature overview

Browse Source 
Change-Id: I7a0c3ae8b48774ea708f9f95e454ea991d345c8b
changes/14/19214/3
raxelsen 8 years ago committed by Hans-Peter Herzog
parent b81d974eeb
commit 31695ab2a9
4 changed files with 198 additions and 1 deletions
Show Stats Download Patch File Download Diff File

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

@ -23,6 +23,11 @@
</q-btn>
</q-toolbar>
<q-list id="main-menu" slot="left" no-border link inset-delimiter>
<q-side-link item to="/user/home">
<q-item-side icon="home"></q-item-side>
<q-item-main :label="$t('navigation.home.title')"
:sublabel="$t('navigation.home.subTitle')"/>
</q-side-link>
<q-side-link item to="/user/conversations">
<q-item-side icon="question answer"></q-item-side>
<q-item-main :label="$t('navigation.conversations.title')"

170
src/components/pages/Home.vue
Unescape View File

@ -0,0 +1,170 @@
<template>
<csc-page :title="$t('pages.home.title')">
<div class="row md-gutter">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
<div @click="call()">
<q-card :class="{ 'home-card-inactive': !isCallAvailable,
'home-card-active': isCallAvailable }"
class="no-margin"
flat>
<q-card-main align="center">
<q-icon name="call" class="home-icons" />
</q-card-main>
<q-card-actions align="center">
{{ $t('pages.home.cards.voiceCall') }}
</q-card-actions>
</q-card>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
<div @click="call()">
<q-card :class="{ 'home-card-inactive': !isCallAvailable,
'home-card-active': isCallAvailable }"
class="no-margin"
flat>
<q-card-main align="center">
<q-icon name="video call" class="home-icons" />
</q-card-main>
<q-card-actions align="center">
{{ $t('pages.home.cards.videoCall') }}
</q-card-actions>
</q-card>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
<div @click="call()">
<q-card :class="{ 'home-card-inactive': !isCallAvailable,
'home-card-active': isCallAvailable }"
class="no-margin"
flat>
<q-card-main align="center">
<q-icon name="screen share" class="home-icons" />
</q-card-main>
<q-card-actions align="center">
{{ $t('pages.home.cards.screenShare') }}
</q-card-actions>
</q-card>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
<router-link to="/user/call-forward/always">
<q-card class="home-card-active no-margin" flat>
<q-card-main align="center">
<q-icon name="phone forwarded" class="home-icons" />
</q-card-main>
<q-card-actions align="center">
{{ $t('pages.home.cards.callForward') }}
</q-card-actions>
</q-card>
</router-link>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
<router-link to="/user/call-blocking/incoming">
<q-card class="home-card-active no-margin" flat>
<q-card-main align="center">
<q-icon name="block" class="home-icons" />
</q-card-main>
<q-card-actions align="center">
{{ $t('pages.home.cards.callBlocking') }}
</q-card-actions>
</q-card>
</router-link>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
<router-link to="/user/reminder">
<q-card class="home-card-active no-margin" flat>
<q-card-main align="center">
<q-icon name="alarm" class="home-icons" />
</q-card-main>
<q-card-actions align="center">
{{ $t('pages.home.cards.reminder') }}
</q-card-actions>
</q-card>
</router-link>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
<q-card @click="buddyList()" class="home-card-inactive no-margin" flat>
<q-card-main align="center">
<q-icon name="contacts" class="home-icons" />
</q-card-main>
<q-card-actions align="center">
{{ $t('pages.home.cards.buddyList') }}
</q-card-actions>
</q-card>
</div>
</div>
</csc-page>
</template>
<script>
import CscPage from '../CscPage'
import CscCall from '../CscCall'
import { mapGetters } from 'vuex'
import { QCard, QCardMain, QCardActions, QIcon } from 'quasar-framework'
import { showGlobalWarning } from '../../helpers/ui'
export default {
data() {
return {
}
},
components: {
CscPage,
CscCall,
QCard,
QCardMain,
QCardActions,
QIcon
},
computed: {
...mapGetters('call', [
'isCallAvailable'
])
},
methods: {
call() {
if(this.isCallAvailable) {
this.$store.commit('layout/showRight');
} else {
showGlobalWarning(this.$i18n.t('pages.home.featureNotAvailable'));
}
},
buddyList() {
showGlobalWarning(this.$i18n.t('pages.home.featureNotAvailable'));
}
}
}
</script>
<style lang="stylus">
@import '~variables'
.q-card-actions
font-size 22px
padding 0 10px 35px 10px
.home-card-active
cursor pointer
border solid 2px $primary
.home-icons
font-size 6rem
color $primary
.q-card-actions
color $primary
.home-card-inactive
cursor not-allowed
border solid 2px $grey
.home-icons
font-size 6rem
color $grey
.q-card-actions
color $grey
@media (max-width: $breakpoint-sm)
.q-card-actions
font-size 16px
padding 0 10px 25px 10px
.home-card-active
.home-icons
font-size 3rem
.home-card-inactive
.home-icons
font-size 3rem
</style>

18
src/locales/en.json
Unescape View File

@ -17,6 +17,10 @@
"callNotAvailable": "Could not initialize call functionality properly"
},
"navigation": {
"home": {
"title": "Home",
"subTitle": "Access to main features"
},
"conversations": {
"title": "Conversations",
"subTitle": "Calls, SMS, VoiceMails"
@ -146,6 +150,20 @@
"addInputError": "Input a valid number or subscriber name",
"timeout": "Timeout",
"destination": "Destination"
},
"home": {
"title": "Home",
"cards": {
"voiceCall": "Voice Call",
"videoCall": "Video Call",
"screenShare": "Screen Share",
"callForward": "Call Forward",
"callBlocking": "Call Blocking",
"reminder": "Reminder",
"buddyList": "Buddy List",
"welcome": "Welcome"
},
"featureNotAvailable": "This feature is currently not available"
}
},
"call": {

6
src/routes.js
Unescape View File

@ -4,6 +4,10 @@ export default [
path: '/user',
component: require('./components/layouts/Default').default,
children: [
{
path: 'home',
component: require('./components/pages/Home').default,
},
{
path: 'conversations',
component: require('./components/pages/Conversations').default,
@ -55,7 +59,7 @@ export default [
},
{
path: '/',
redirect: {path:'/user/conversations'}
redirect: {path:'/user/home'}
},
{
path: '*',

Write Preview
Loading…
Cancel
Save