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

TT#125301 Branding - Secondary color is used to colorize the background

Browse Source 
Primary color: Interactive elements (Buttons, MenuItems, Icons, etc. ...)
Secondary color: Background

Important: The color scheme is dark, therefore the primary
colour must be a light color and the secondary must be darker one.

Change-Id: Id499930dd56757416ec027cb36adfe0aeb31e74d
mr9.5.2
Hans-Peter Herzog 4 years ago
parent d1cb5f7467
commit 0742b47a24
18 changed files with 12 additions and 363 deletions
Show Stats Download Patch File Download Diff File

1
quasar.conf.js
Unescape View File

@ -38,7 +38,6 @@ module.exports = function (/* ctx */) {
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
css: [
'app.fonts.styl',
'app.common.styl',
'app.styl'
],

1
src/components/CscPopupMenu.vue
Unescape View File

@ -4,7 +4,6 @@
>
<q-list
v-bind="$attrs"
class="bg-dark"
v-on="$listeners"
>
<slot />

1
src/components/CscSearchInput.vue
Unescape View File

@ -7,7 +7,6 @@
>
<q-input
v-model="phraseInput"
dark
:label="label"
:disable="searching"
@keyup.enter="search"

2
src/components/CscTimeRange.vue
Unescape View File

@ -7,7 +7,6 @@
filled
mask="time"
:rules="['time']"
dark
dense
no-error-icon
:placeholder="$t('Start time')"
@ -51,7 +50,6 @@
filled
mask="time"
:rules="['time']"
dark
dense
no-error-icon
:placeholder="$t('End time')"

2
src/components/call-forwarding/CscCfGroupCondition.vue
Unescape View File

@ -1,6 +1,6 @@
<template>
<q-card
class="bg-dark no-padding no-margin relative-position"
class="no-padding no-margin relative-position bg-transparent"
>
<q-item
class="no-margin no-padding"

1
src/components/pages/CallForward/CscSourcesetsForm.vue
Unescape View File

@ -2,7 +2,6 @@
<div class="add-source-form">
<q-input
v-model="source"
dark
autofocus
:label="$t('Source')"
color="primary"

4
src/components/pages/NewCallForward/CscNewCallForwardDateRange.vue
Unescape View File

@ -101,7 +101,6 @@
>
<q-input
v-model="dayFromFormatted"
dark
:placeholder="$t('Start date')"
@click="openDayFrom()"
>
@ -115,7 +114,6 @@
<q-input
v-model="dayToFormatted"
:disable="!dayFrom"
dark
:placeholder="$t('End date')"
@click="openDayTo()"
>
@ -132,7 +130,6 @@
>
<q-input
v-model="hourFromFormatted"
dark
:disable="!dayFrom"
:placeholder="$t('Start time')"
@click="openHourFrom()"
@ -146,7 +143,6 @@
</q-input>
<q-input
v-model="hourToFormatted"
dark
:placeholder="$t('End time')"
:disable="!dayTo"
@click="openHourTo()"

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

@ -6,7 +6,7 @@
:pagination.sync="pagination"
:hide-pagination="true"
row-key="name"
class="csc-item-odd"
class="csc-item-odd no-shadow"
>
<template v-slot:loading>
<q-inner-loading

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

@ -64,7 +64,6 @@
>
<q-input
v-model="changes.identifier"
dark
@keyup.enter="save"
/>
<csc-fade>

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

@ -54,7 +54,6 @@
>
<q-btn
v-if="!selectedFile"
dark
flat
color="primary"
icon="folder"
@ -64,7 +63,6 @@
</q-btn>
<q-btn
v-if="selectedFile && !isUploading"
dark
flat
color="primary"
icon="cloud_upload"
@ -74,7 +72,6 @@
</q-btn>
<q-btn
v-if="selectedFile && !isUploading"
dark
flat
color="white"
icon="undo"

320
src/css/app.common.styl
Unescape View File

@ -1,320 +0,0 @@
//.csc-phone-number
// font-weight bold
//
//.csc-main-spinner
// text-align center
//
//.csc-inline-alert
// box-shadow none
// .q-alert
// box-shadow none
//
//.q-field
// position relative
//
//.csc-toggle-disabled
// .q-option-label
// color $faded
//
//.csc-item-field
// .csc-item-value
// display inline-block
// margin-right 4px
// .csc-item-value::after
// content ','
// .csc-item-value:last-child:after
// content ''
//
//.csc-item-label
// font-weight normal
//
//.csc-item-value
// font-weight bold
//
//.csc-form-info
// display block
//
// .csc-info-text
// display inline-block
//
//.csc-form
// position relative
// .csc-form-actions
// margin-top 16px
//
//.margin-xs
// margin 8px
//
//.margin-sm
// margin 16px
//
//@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
// color $body-color
//
//.csc-important
// font-weight bold
//
//.csc-entity
// position relative
//
// .q-btn
// .on-left
// margin-right 0
//
// .csc-entity-title .q-chip-main
// color white
//
// .csc-entity-title-text
// padding-left 6px
//
// .q-card-title
// color white
//
// .q-card-title-extra
// .q-btn
// padding-left 8px
// padding-right 8px
//
//.csc-form-field
// margin-bottom 40px
//
// .q-field-icon
// color $primary
//
//.csc-black-label
// color black
//
//.csc-list-item.q-item
// align-items center
// color $body-color
// padding $flex-gutter-sm
// padding-left $flex-gutter-sm * 1.4
// .q-item-label
// color $body-color
// span
// color $body-color
// .q-item-sublabel
// color $body-color
// span
// color $body-color
//
//.csc-list-item.csc-item-collapsed.q-item
// .q-item-main
// margin-left $flex-gutter-sm * 1.4
// .q-item-side-left
// min-width auto
//
//.csc-list-form
// padding $flex-gutter-sm
//.csc-username
// font-weight bold
//
//.csc-list-actions-pinned.q-item-side-right
// position absolute
// top 50%
// right $flex-gutter-sm
// margin-top -22px
// .q-btn
// padding-left $flex-gutter-xs
// padding-right $flex-gutter-xs
// .q-icon
// margin 0
//.csc-item-expanded
// .csc-list-actions-pinned.q-item-side-right
// top $flex-gutter-sm
// right $flex-gutter-sm
// margin auto
// .q-item-main
// padding-top $flex-gutter-md
//
//.csc-form-actions-spinner
// display flex
// align-items center
//
//.csc-item-buttons
// .q-btn
// padding-left $flex-gutter-xs
// padding-right $flex-gutter-xs
// .on-left
// margin-right 0
//
//
//.csc-item-buttons-menu
// .q-item-side
// min-width auto
//
//.csc-item-loader
// position absolute
// top 0
// bottom 0
//.csc-list-message
// text-align center
//
//.q-inner-loading
// background $main-menu-background
//
//.csc-item-title
// font-weight bold
// text-overflow ellipsis
// .csc-item-label
// font-weight bold
// vertical-align middle
// i
// vertical-align middle
//.csc-item-subtitle
// .csc-item-label
// font-weight normal
// .csc-item-value
// font-weight bold
//
//.q-chip.text-white
// color $dark
// .q-chip-main
// color $dark
// .q-chip-side
// color $dark
//
//.csc-item-highlight,
//.csc-item-highlight:hover
// background alpha($primary, 0.3) !important
//
//.csc-conf-full-height
// position relative
// top 0
// min-height "calc(100vh - %s)" % (2 * $call-footer-height + $call-footer-height / 2)
//
//.csc-button.q-btn
//.csc-conf-button.q-btn
// .q-btn-inner
// color black
//
//input.q-input-target
// height auto
//
//.csc-additional
// padding-right $flex-gutter-lg
// padding-bottom $flex-gutter-xs
// .q-option-label
// color $light
//
//.csc-list-collapsible
// margin-top $flex-gutter-md
// .q-item
// padding-left 0
// margin-bottom 10px
// .q-item-section
// padding 10px 0 !important
// .q-item-icon
// color $primary
// .csc-sublabel
// color $light
// margin-bottom $flex-gutter-sm
// .q-item-label
// padding-left $flex-gutter-sm
// .q-item-link
// background alpha(white, 0.04)
// .q-item-link:hover
// background alpha(white, 0.10)
//
//.csc-collapsible-label-warning
// .q-item-link
// border-left .2rem solid $negative
// .csc-item-invalid
// border-bottom .2rem solid $negative
//
//.animated.faster
// animation-duration 500ms
//
//.csc-add-button
// margin-bottom $flex-gutter-sm
//
//.csc-input-btn.q-btn
// padding-left $flex-gutter-xs
// padding-right $flex-gutter-xs
// .q-btn-inner
// i
// margin 0
//
//.csc-conf-avatar
// font-size 137px
// color $conf-participant-icon-color
// padding-left 11px
// background-color transparent;
// box-shadow none
// position relative
// width 100%
// height 100%
// top 0px
// left -22px
// right 0
// margin auto
// @media (max-width: $breakpoint-sm)
// font-size 60px
// left -16px
// top -30px
//.csc-conf-selected-avatar
// width: 220px;
// height: 220px;
// font-size 220px
// color $conf-participant-icon-color
// background-color transparent;
// box-shadow none
// position absolute
// top 0
// bottom 0
// left 0
// right 0
// margin auto
//.csc-conf-participant-cont
// margin-bottom 25px
// width 115px
// height 115px
// background $conf-participant-box-color
// cursor pointer
// @media (max-width: $breakpoint-sm)
// width 50px
// height 50px
// margin-bottom 10px
// .csc-conf-participants-item-title
// position relative
// background white
// bottom 24px
// text-align center
// padding 0
// background $conf-participant-box-color
// @media (max-width: $breakpoint-sm)
// display none
// .q-card-title
// color $primary
// font-size 12px
// line-height 24px
// .csc-media-cont
// height 100% !important
// width 100% !important
// video
// height 100%
// position relative
// left 50% !important
// transform translateX(-50%)
//
//.csc-text-action
// color $primary
// cursor pointer
// font-weight bold
//
//.csc-cf-row
// margin-bottom $flex-gutter-sm
//
//.q-fab-active-icon.material-icons,
//.q-fab-icon.material-icons {
// display: inherit;
//}

2
src/css/app.styl
Unescape View File

@ -6,7 +6,7 @@ body.body--light
background-color white
body.body--dark
background-color $secondary
background-color var(--q-color-secondary)
.bg-main-menu
background-color $main-menu-background
.bg-page

7
src/css/quasar.variables.styl
Unescape View File

@ -12,6 +12,8 @@
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.
$darkBase = #151d30
$primary = #40cc3d
$secondary = #3b3440
$tertiary = #6e747f
@ -23,14 +25,13 @@ $negative = #de2a2a
$info = #38c7ce
$warning = #ffcc24
$faded = #999999
$dark = #151d30
$dark = alpha($darkBase, 80%)
$white = #ffffff
$light = #cccccc
$main-menu-background = alpha(#151d30, 80%)
$main-menu-background = $dark
$main-menu-background-light = alpha($primary, 10%)
$main-menu-item-hover-background = lighten($main-menu-background, 12%)
$main-menu-title-color = $white
$main-menu-title-hover-color = $white

3
src/pages/CscPageCallRecording.vue
Unescape View File

@ -35,6 +35,7 @@
<template>
<div class="q-pa-md">
<q-table
class="no-shadow"
:data="data"
:columns="columns"
:loading="$wait.is('csc-call-recordings')"
@ -102,7 +103,7 @@
:loading="$wait.is('csc-call-recordings') && $wait.is('loading-stream-' + props.row.id)"
:hide-pagination="true"
row-key="name"
class="csc-item-odd"
class="csc-item-odd no-shadow"
>
<template v-slot:loading>
<q-inner-loading

1
src/pages/CscPageFaxSettings.vue
Unescape View File

@ -1,6 +1,7 @@
<template>
<csc-page-sticky-tabs
v-model="selectedTab"
class="q-pa-lg"
>
<template
v-slot:tabs

22
src/pages/CscPageHome.vue
Unescape View File

@ -117,25 +117,3 @@ export default {
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
//.csc-call-page-mobile
// min-height calc(100vh - 203px)
//.csc-call-page
// .csc-communication-actions
// position absolute
// top $header-height
// right 0
// left 0
// .q-btn
// box-shadow none
// .q-btn-inner
// color $dark
//.csc-info
// background-color $info
// padding $flex-gutter-md
// margin-bottom $flex-gutter-lg
// .csc-info-text
// line-height 1.4em
// color $white
</style>

1
src/pages/CscPagePbxAutoAttendant.vue
Unescape View File

@ -4,6 +4,7 @@
>
<div class="q-pa-md">
<q-table
class="no-shadow"
:data="data"
:columns="columns"
:loading="$wait.is('csc-pbx-auto-attendant')"

1
src/pages/CscPageRegisteredDevices.vue
Unescape View File

@ -5,6 +5,7 @@
class="q-pa-lg"
>
<q-table
class="no-shadow"
:columns="columns"
:data="subscriberRegistrations"
:loading="$wait.is('loadSubscriberRegistrations')"

Write Preview
Loading…
Cancel
Save