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

TT#36173 Global: As a Customer I want to see the page title in the title bar

Browse Source 
Change-Id: Iee01c12896ebaec75653ed469785c0e88cd10983
changes/84/21584/5
Hans-Peter Herzog 7 years ago
parent 7abe8f2d44
commit 3f026fae89
15 changed files with 154 additions and 73 deletions
Show Stats Download Patch File Download Diff File

2
src/components/CscCall.vue
Unescape View File

@ -38,7 +38,7 @@
<q-field v-show="isPreparing" :helper="$t('call.inputNumber')" :count="64" dark
:error="validationEnabled && phoneNumberError" :error-label="$t('call.inputValidNumber')">
<q-input type="text" :float-label="$t('call.number')" :value="phoneNumber" @input="inputPhoneNumber"
ref="numberInput" dark clearable max="64" @blur="phoneNumberBlur" @focus="phoneNumberFocus"
ref="numberInput" dark clearable :max="64" @blur="phoneNumberBlur" @focus="phoneNumberFocus"
@keypress.space.prevent @keydown.space.prevent />
</q-field>
<div v-if="!isPreparing" class="phone-number">

8
src/components/CscPage.vue
Unescape View File

@ -1,8 +1,5 @@
<template>
<div class="page">
<q-fixed-position corner="top-left" :offset="[0,0]" :class="pageTitleClasses">
<h2>{{ title }}</h2>
</q-fixed-position>
<div class="page-content">
<slot></slot>
</div>
@ -47,8 +44,7 @@
.page {
position: relative;
padding: 60px;
padding-top: 100px;
padding: 48px;
margin: 0px;
}
@ -82,7 +78,7 @@
@media (max-width: $breakpoint-sm) {
.page {
padding: 16px;
padding-top: 70px;
padding-top: 32px;
margin: 0px;
}
.page .page-content {

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

@ -6,17 +6,37 @@
<q-icon name="menu"/>
</q-btn>
<q-toolbar-title>
{{ $t('title') }}
<span slot="subtitle"></span>
{{ pageTitle }}
<span slot="subtitle">{{ pageSubtitle }}</span>
</q-toolbar-title>
<q-btn flat @click="" icon-right="fa-user-circle">
<q-btn flat class="csc-toolbar-btn">
<q-icon name="question answer" />
<q-popover ref="communicationPopover">
<q-list item-separator link class="csc-toolbar-btn-popover">
<q-item @click="call();$refs.communicationPopover.close()" v-if="isCallAvailable">
<q-item-side icon="fa-phone" color="primary" />
<q-item-main :label="$t('startCall')" />
</q-item>
<q-item @click="showSendFax();$refs.communicationPopover.close()" v-if="hasFaxCapability && hasSendFaxFeature">
<q-item-side icon="fa-fax" color="primary"/>
<q-item-main :label="$t('sendFax')" />
</q-item>
<q-item @click="$refs.communicationPopover.close()" v-if="hasSmsCapability && hasSendSmsFeature">
<q-item-side icon="fa-send" color="primary"/>
<q-item-main :label="$t('sendSms')" />
</q-item>
</q-list>
</q-popover>
</q-btn>
<q-btn flat class="csc-toolbar-btn csc-toolbar-btn-right">
<q-icon name="fa-user-circle" class="csc-toolbar-btn-icon" />
<span id="user-login-as" class="gt-sm">{{ $t('loggedInAs') }}</span>
<span id="user-name" class="gt-xs">{{ getUsername }}</span>
<q-popover ref="popover">
<q-list item-separator link>
<q-list item-separator link class="csc-toolbar-btn-popover">
<q-item @click="logout()">
<q-item-side icon="exit to app" color="primary"/>
<q-item-main label="Logout" />
<q-item-side icon="exit to app"/>
</q-item>
</q-list>
</q-popover>
@ -89,19 +109,6 @@
</q-collapsible>
</q-list>
<router-view />
<q-fixed-position id="global-action-btn" corner="top-right" :offset="fabOffset" class="page-button transition-generic">
<q-fab v-if="hasCommunicationCapabilities" color="primary" icon="question answer" active-icon="clear" direction="down" flat>
<q-fab-action v-if="hasFaxCapability && hasSendFaxFeature" color="primary" @click="showSendFax()" icon="fa-fax">
<q-tooltip v-if="isDesktop" anchor="center right" self="center left" :offset="[15, 0]">{{ $t('sendFax') }}</q-tooltip>
</q-fab-action>
<q-fab-action v-if="hasSmsCapability && hasSendSmsFeature" color="primary" @click="" icon="fa-send">
<q-tooltip v-if="isDesktop" anchor="center right" self="center left" :offset="[15, 0]">{{ $t('sendSms') }}</q-tooltip>
</q-fab-action>
<q-fab-action v-if="isCallAvailable" color="primary" @click="call()" icon="fa-phone">
<q-tooltip v-if="isDesktop" anchor="center right" self="center left" :offset="[15, 0]">{{ $t('startCall') }}</q-tooltip>
</q-fab-action>
</q-fab>
</q-fixed-position>
<csc-call ref="cscCall" slot="right" @close="closeCall()" @fullscreen="toggleFullscreen()"
:fullscreen="isFullscreenEnabled" region="DE" />
<q-window-resize-observable @resize="onWindowResize" />
@ -236,14 +243,20 @@
},
fabOffset() {
if(Platform.is.mobile) {
return [1, 2];
return [16, 16];
}
else {
return [48, 17];
return [32, 32];
}
},
isDesktop() {
return Platform.is.desktop;
},
pageTitle() {
return this.$store.getters['pageTitle'];
},
pageSubtitle() {
return this.$store.getters['pageSubtitle'];
}
},
methods: {
@ -356,7 +369,8 @@
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '../../themes/quasar.variables.styl';
@import '../../themes/quasar.variables';
@import '../../themes/app.common';
#main-menu {
padding-top:60px;
@ -416,24 +430,6 @@
margin: 0;
}
#global-action-btn {
z-index: 1001;
}
@media only screen and (min-width: 425px) and (orientation: portrait) {
#global-action-btn {
margin: 15px 60px !important;
top: 60px;
}
}
@media only screen and (min-width: 768px) and (orientation: landscape) {
#global-action-btn {
margin: 17px 48px !important;
top: 60px;
}
}
.layout-aside.fixed.csc-call-fullscreen {
left: 0;
right: 0;
@ -529,4 +525,18 @@
font-size:24px;
}
.csc-toolbar-btn-popover
.q-item-main.q-item-section
margin-left 0
.q-toolbar
.csc-toolbar-btn.q-btn
padding-left 8px
padding-right 8px
.csc-toolbar-btn-right
.csc-toolbar-btn-icon
margin-right 8px
</style>

2
src/components/pages/CallBlocking/Privacy.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<csc-page title="Privacy">
<csc-page title="Privacy" class="csc-simple-page">
<q-toggle :label="(!callBlockingEnabled ? 'Hide' : 'Show') + ' Own Number'"
@input="toggle()" v-model="callBlockingEnabled"/>
</csc-page>

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

@ -1,7 +1,7 @@
<template>
<div class="dest-section">
<div class="dest-title">
<q-icon :name="icon" class="dest-icon" />
<q-icon :name="icon" class="dest-icon" size="24px" />
{{ title }}
</div>
<q-list no-border>

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

@ -1,6 +1,6 @@
<template>
<csc-page :title="$t('pages.home.title')" id="csc-page-home">
<div class="row md-gutter">
<div :class="gridClasses">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
<div @click="call()">
<q-card :class="{ 'home-card-inactive': !isCallAvailable,
@ -122,6 +122,16 @@
]),
isMobile() {
return Platform.is.mobile;
},
gridClasses() {
let classes = ['row'];
if(this.isMobile) {
classes.push('sm-gutter');
}
else {
classes.push('md-gutter');
}
return classes;
}
},
methods: {
@ -149,11 +159,11 @@
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '../../themes/quasar.variables.styl'
@import '../../themes/quasar.variables'
#csc-page-home
.q-card-actions
font-size 22px
font-size 18px
padding 0 10px 35px 10px
.q-card-main
@ -162,7 +172,7 @@
.home-card-active
cursor pointer
border solid 2px $primary
border solid 2px #c5e0ba
.home-icons
font-size 5.5rem
color $primary
@ -171,7 +181,7 @@
.home-card-inactive
cursor not-allowed
border solid 2px $grey
border solid 2px #eeeeee
.home-icons
font-size 5.5rem
color $grey
@ -180,6 +190,7 @@
@media (max-width: $breakpoint-sm)
#csc-page-home
padding 16px
.q-card-actions
font-size 16px
padding 0 10px 25px 10px

3
src/components/pages/PbxConfiguration/CscPbxDevice.vue
Unescape View File

@ -97,8 +97,7 @@
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '../../../themes/app.common'
@import '../../../themes/quasar.variables';
.csc-pbx-device
.csc-pbx-device-content

3
src/components/pages/PbxConfiguration/CscPbxDeviceConfig.vue
Unescape View File

@ -216,8 +216,7 @@
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '../../../themes/app.common'
@import '../../../themes/quasar.variables';
$spotSize = 25px
.csc-pbx-device-key-details

10
src/components/pages/PbxConfiguration/CscPbxDevices.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<csc-page :title="$t('pbxConfig.devicesTitle')">
<csc-page :title="$t('pbxConfig.devicesTitle')" class="csc-list-page">
<div v-if="isListLoadingVisible" class="row justify-center">
<q-spinner-dots color="primary" :size="40" />
</div>
@ -7,6 +7,7 @@
<q-pagination :value="listCurrentPage" :max="listLastPage" @change="changePage" />
</div>
<q-list no-border separator sparse multiline>
<q-item> </q-item>
<csc-pbx-device v-for="device in devices" :key="device.id" :device="device" @remove="removeDevice"
:modelOptions="modelOptions" :loading="isDeviceLoading(device.id)" />
</q-list>
@ -20,7 +21,7 @@
import { mapGetters } from 'vuex'
import CscPage from '../../CscPage'
import CscPbxDevice from './CscPbxDevice'
import { QSpinnerDots, QPagination, QList, Dialog } from 'quasar-framework'
import { QSpinnerDots, QPagination, QList, Dialog, QItem } from 'quasar-framework'
import { showToast } from '../../../helpers/ui'
export default {
@ -39,7 +40,8 @@
QSpinnerDots,
QPagination,
QList,
Dialog
Dialog,
QItem
},
computed: {
...mapGetters('pbxConfig', [
@ -94,5 +96,5 @@
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '../../../themes/app.common'
@import '../../../themes/app.common';
</style>

2
src/components/pages/PbxConfiguration/CscPbxGroup.vue
Unescape View File

@ -387,5 +387,5 @@
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '../../../themes/app.common'
@import '../../../themes/quasar.variables';
</style>

2
src/components/pages/PbxConfiguration/CscPbxSeat.vue
Unescape View File

@ -301,5 +301,5 @@
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '../../../themes/app.common'
@import '../../../themes/app.common';
</style>

2
src/components/pages/Reminder.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<csc-page :title="$t('pages.reminder.title')">
<csc-page :title="$t('pages.reminder.title')" class="csc-simple-page">
<q-field class="reminder-field">
<q-toggle :label="$t('pages.reminder.title') + (active ? ' enabled':' disabled')" @input="toggleReminder()" v-model="active" />
</q-field>

66
src/routes.js
Unescape View File

@ -1,4 +1,5 @@
import { i18n } from './i18n'
import DefaultLayout from './components/layouts/Default'
import Home from './components/pages/Home'
import Conversations from './components/pages/Conversations/Conversations'
@ -23,50 +24,97 @@ export default [
{
path: 'home',
component: Home,
meta: {
title: i18n.t('navigation.home.title'),
subtitle: i18n.t('navigation.home.subTitle')
}
},
{
path: 'conversations',
component: Conversations,
meta: {
title: i18n.t('navigation.conversations.title'),
subtitle: i18n.t('navigation.conversations.subTitle')
}
},
{
path: 'call-forward/always',
component: CallForwardAlways,
meta: {
title: i18n.t('navigation.callForward.title'),
subtitle: i18n.t('navigation.callForward.always')
}
},
{
path: 'call-forward/company-hours',
component: CallForwardCompanyHours
component: CallForwardCompanyHours,
meta: {
title: i18n.t('navigation.callForward.title'),
subtitle: i18n.t('navigation.callForward.companyHours')
}
},
{
path: 'call-forward/after-hours',
component: CallForwardAfterHours
component: CallForwardAfterHours,
meta: {
title: i18n.t('navigation.callForward.title'),
subtitle: i18n.t('navigation.callForward.afterHours')
}
},
{
path: 'call-blocking/incoming',
component: CallBlockingIncoming
component: CallBlockingIncoming,
meta: {
title: i18n.t('navigation.callBlocking.title'),
subtitle: i18n.t('navigation.callBlocking.incoming')
}
},
{
path: 'call-blocking/outgoing',
component: CallBlockingOutgoing
component: CallBlockingOutgoing,
meta: {
title: i18n.t('navigation.callBlocking.title'),
subtitle: i18n.t('navigation.callBlocking.outgoing')
}
},
{
path: 'call-blocking/privacy',
component: CallBlockingPrivacy
component: CallBlockingPrivacy,
meta: {
title: i18n.t('navigation.callBlocking.title'),
subtitle: i18n.t('navigation.callBlocking.privacy')
}
},
{
path: 'reminder',
component: Reminder
component: Reminder,
meta: {
title: i18n.t('navigation.reminder.title')
}
},
{
path: 'pbx-configuration/groups',
component: PbxConfigurationGroups
component: PbxConfigurationGroups,
meta: {
title: i18n.t('navigation.pbxConfiguration.title'),
subtitle: i18n.t('navigation.pbxConfiguration.groups')
}
},
{
path: 'pbx-configuration/seats',
component: PbxConfigurationSeats
component: PbxConfigurationSeats,
meta: {
title: i18n.t('navigation.pbxConfiguration.title'),
subtitle: i18n.t('navigation.pbxConfiguration.seats')
}
},
{
path: 'pbx-configuration/devices',
component: PbxConfigurationDevices
component: PbxConfigurationDevices,
meta: {
title: i18n.t('navigation.pbxConfiguration.title'),
subtitle: i18n.t('navigation.pbxConfiguration.devices')
}
}
]
},

9
src/store/index.js
Unescape View File

@ -1,5 +1,6 @@
'use strict';
import _ from 'lodash'
import Vue from 'vue'
import Vuex from 'vuex'
import CallBlockingModule from './call-blocking'
@ -25,5 +26,13 @@ export const store = new Vuex.Store({
reminder: ReminderModule,
user: UserModule,
communication: CommunicationModule
},
getters: {
pageTitle(state) {
return _.get(state, 'route.meta.title', 'Not defined');
},
pageSubtitle(state) {
return _.get(state, 'route.meta.subtitle', '');
}
}
});

7
src/themes/app.common.styl
Unescape View File

@ -1,6 +1,13 @@
@import 'quasar.variables'
@media (max-width: $breakpoint-sm)
.page.csc-list-page
padding 0
padding-top 16px
.page.csc-simple-page
padding 36px
.csc-no-entities
margin 15px

Write Preview
Loading…
Cancel
Save