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

TT#10057 Ngcp-csc implement new cf module styling

Browse Source 
Adjust layout and styling of sections, for call forward module, so
that it meets new requirements (from 27.01 meeting).

Change-Id: I3d0adc914aec796ece36143a6fd7c8491a1e42cf
changes/13/11213/3
Robert Axelsen 8 years ago
parent 9a1d5e0d3d
commit c2fa8ce2b6
6 changed files with 178 additions and 115 deletions

57
app/locales.js
Unescape View File

@ -572,18 +572,18 @@ Ext.define('Ngcp.csc.locales', {
sp: 'List B' sp: 'List B'
}, },
first_ring: { first_ring: {
en: 'First ring:', en: 'first ring',
it: 'First ring:', it: 'first ring',
de: 'First ring:', de: 'first ring',
fr: 'First ring:', fr: 'first ring',
sp: 'First ring:' sp: 'first ring'
}, },
then_forward_to: { then_forward_to: {
en: 'Then forward to:', en: 'then forward to',
it: 'Then forward to:', it: 'then forward to',
de: 'Then forward to:', de: 'then forward to',
fr: 'Then forward to:', fr: 'then forward to',
sp: 'Then forward to:' sp: 'then forward to'
}, },
add_new_destination: { add_new_destination: {
en: 'ADD NEW DESTINATION', en: 'ADD NEW DESTINATION',
@ -593,25 +593,25 @@ Ext.define('Ngcp.csc.locales', {
sp: 'ADD NEW DESTINATION' sp: 'ADD NEW DESTINATION'
}, },
when_phone_online: { when_phone_online: {
en: 'When My Phone is Online:', en: 'When I am online ...',
it: 'When My Phone is Online:', it: 'When I am online ...',
de: 'When My Phone is Online:', de: 'When I am online ...',
fr: 'When My Phone is Online:', fr: 'When I am online ...',
sp: 'When My Phone is Online:' sp: 'When I am online ...'
}, },
when_phone_busy: { when_phone_busy: {
en: 'When My Phone is Busy:', en: 'When I am busy ...',
it: 'When My Phone is Busy:', it: 'When I am busy ...',
de: 'When My Phone is Busy:', de: 'When I am busy ...',
fr: 'When My Phone is Busy:', fr: 'When I am busy ...',
sp: 'When My Phone is Busy:' sp: 'When I am busy ...'
}, },
when_phone_offline: { when_phone_offline: {
en: 'When My Phone is Offline:', en: 'When I am offline ...',
it: 'When My Phone is Offline:', it: 'When I am offline ...',
de: 'When My Phone is Offline:', de: 'When I am offline ...',
fr: 'When My Phone is Offline:', fr: 'When I am offline ...',
sp: 'When My Phone is Offline:' sp: 'When I am offline ...'
}, },
drag_text: { drag_text: {
en: 'Drag and drop to move', en: 'Drag and drop to move',
@ -710,6 +710,13 @@ Ext.define('Ngcp.csc.locales', {
de: 'Enter secs', de: 'Enter secs',
fr: 'Enter secs', fr: 'Enter secs',
sp: 'Enter secs' sp: 'Enter secs'
},
for_calling_parties: {
en: 'For calling parties ...',
it: 'For calling parties ...',
de: 'For calling parties ...',
fr: 'For calling parties ...',
sp: 'For calling parties ...'
} }
}, },
filters: { filters: {

110
classic/sass/src/view/pages/callforward/CallForward.scss
Unescape View File

@ -1,32 +1,43 @@
/* mixins */ /* mixins */
@include extjs-panel-ui ( @include extjs-panel-ui ( $ui: 'cf-container', );
$ui: 'cf-container', @include extjs-panel-ui ( $ui: 'cf-widget', );
); @include extjs-panel-ui ( $ui: 'cf-mainform', );
@include extjs-panel-ui ( $ui: 'cf-grid', );
@mixin icon($icon) {
@include fa-icon;
@extend .fa;
@extend .fa-#{$icon}::before;
};
@include extjs-panel-ui ( /* custom css */
$ui: 'cf-widget', /* 1. CallForwardMainForm */
); .x-panel-cf-mainform {
#busyFirstDest-labelTextEl,
@include extjs-panel-ui ( #offlineFirstDest-labelTextEl,
$ui: 'cf-mainform', #onlineFirstDest-labelTextEl,
); .cf-formtext {
font-weight: 600;
margin-bottom: 7px;
}
}
@include extjs-panel-ui ( .x-panel-cf-mainform .cf-formtext:nth-child(2n+1) {
$ui: 'cf-grid', margin: 10px 40px 0 0;
); }
/* custom css */ .x-panel-cf-mainform .cf-subheader {
.x-panel-cf-container .x-autocontainer-innerCt {
font-size: 120%;
padding-top: 20px; padding-top: 20px;
} }
.x-panel-cf-widget { .x-panel-cf-mainform {
border: solid 1px; #busyFirstRingFields,
border-color: #d0d0d0; #offlineFirstRingFields,
padding: 20px 10px; #onlineFirstRingFields {
margin-bottom: 10px;
}
} }
/* 2. CallForwardMainForm segmented buttons */
.x-panel-cf-mainform .x-segmented-button .x-btn-button-default-small { .x-panel-cf-mainform .x-segmented-button .x-btn-button-default-small {
display: inline-block; display: inline-block;
} }
@ -39,17 +50,44 @@
float: left; float: left;
} }
.cf-subheader { .x-panel-cf-mainform .x-segmented-button {
font-weight: 600; white-space: nowrap;
} }
.cf-subtitle { .x-panel-cf-mainform .x-segmented-button:first-child {
font-size: 110%; margin-bottom: 10px;
font-weight: 600;
} }
.cf-deactivate-day { .x-panel-cf-mainform .x-segmented-button-item-horizontal {
color: #B4B8B3; display: inline-block;
width: 32%;
height: 35px;
margin-right: 5px;
margin-left: 5px;
}
.x-panel-cf-mainform .x-segmented-button-item-horizontal.x-segmented-button-first {
margin-left: 10px;
}
.x-panel-cf-mainform .x-segmented-button-item-horizontal.x-segmented-button-last {
margin-right: 0;
}
/* 2. CallForwardMainForm grid */
.x-panel-cf-mainform div.x-grid-empty::before {
@include icon(circle);
font-size: 0.7em;
margin: 0 4px;
}
.x-panel-cf-mainform .x-grid-empty {
margin-top: -2px;
color: black;
}
.x-panel-cf-mainform .x-grid-row {
background: white;
} }
.x-panel-cf-grid .x-grid-cell-inner { .x-panel-cf-grid .x-grid-cell-inner {
@ -58,10 +96,26 @@
} }
.x-panel-cf-grid .cf-tpl-fa { .x-panel-cf-grid .cf-tpl-fa {
font-size: .7em; font-size: 0.7em;
margin: 0 4px; margin: 0 4px;
} }
.x-panel-cf-grid .x-grid-row { .x-panel-cf-grid .x-grid-row {
height: 32px; height: 32px;
} }
/* 2. CallForwardMainForm other */
.x-panel-cf-widget {
border: solid 1px;
border-color: #d0d0d0;
padding: 20px 10px;
}
.cf-deactivate-day {
color: #B4B8B3;
}
.cf-title {
font-size: 110%;
font-weight: 600;
}

1
classic/src/view/login/Login.js
Unescape View File

@ -81,7 +81,6 @@ Ext.define('NgcpCsc.view.login.Login', {
'select': 'languageSelection' 'select': 'languageSelection'
} }
}, },
// TODO: remember me & forgotten pswd
{ {
xtype: 'container', xtype: 'container',
layout: 'hbox', layout: 'hbox',

2
classic/src/view/pages/callforward/CallForward.js
Unescape View File

@ -68,7 +68,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForward', {
xtype: 'core-container', xtype: 'core-container',
items: [{ items: [{
padding: '0 0 20 0', padding: '0 0 20 0',
html: Ext.String.format('<div class="fa fa-mail-forward cf-subtitle"> {0}</div>', Ngcp.csc.locales.callforward.subtitle[localStorage.getItem('languageSelected')]) html: Ext.String.format('<div class="fa fa-mail-forward cf-title"> {0}</div>', Ngcp.csc.locales.callforward.subtitle[localStorage.getItem('languageSelected')])
}, { }, {
xtype: 'callforwardmainform' xtype: 'callforwardmainform'
}] }]

111
classic/src/view/pages/callforward/CallForwardMainForm.js
Unescape View File

@ -8,7 +8,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
}, },
fieldDefaults: { fieldDefaults: {
labelAlign: 'top' labelSeparator : ''
}, },
margin: '0 10 0 0', margin: '0 10 0 0',
@ -82,6 +82,10 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
iconCls: 'x-fa fa-pencil', iconCls: 'x-fa fa-pencil',
iconAlign: 'right' iconAlign: 'right'
}] }]
}, {
xtype: 'container',
userCls: 'cf-formtext',
html: Ngcp.csc.locales.callforward.for_calling_parties[localStorage.getItem('languageSelected')]
}, { }, {
xtype: 'segmentedbutton', xtype: 'segmentedbutton',
itemId: 'sourceButtons', itemId: 'sourceButtons',
@ -107,35 +111,28 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
iconCls: 'x-fa fa-pencil', iconCls: 'x-fa fa-pencil',
iconAlign: 'right' iconAlign: 'right'
}] }]
}, {
xtype: 'panel',
userCls: 'cf-subheader-large',
html: Ngcp.csc.locales.callforward.when_phone_online[localStorage.getItem('languageSelected')] + '<hr>',
height: 50,
ui: 'cf-container',
margin: '0 0 10 0'
}, { }, {
xtype: 'container', xtype: 'container',
userCls: 'cf-subheader', userCls: 'cf-formtext cf-subheader',
html: Ngcp.csc.locales.callforward.first_ring[localStorage.getItem('languageSelected')], html: Ngcp.csc.locales.callforward.when_phone_online[localStorage.getItem('languageSelected')]
height: 25
}, { }, {
xtype: 'panel', xtype: 'panel',
layout: 'hbox', layout: 'hbox',
id: 'onlineFirstRingFields', id: 'onlineFirstRingFields',
height: 50,
padding: '0 11 0 0', padding: '0 11 0 0',
margin: '0 0 0 50',
items: [{ items: [{
xtype: 'combo', xtype: 'combo',
store: ['Own phone', 'Voicemail', 'Fax2Mail', 'None'], store: ['Own phone', 'Voicemail', 'Fax2Mail', 'None'],
id: 'onlineFirstDest', id: 'onlineFirstDest',
fieldLabel: Ngcp.csc.locales.callforward.first_ring[localStorage.getItem('languageSelected')],
value: 'Own phone', value: 'Own phone',
allowBlank: false, allowBlank: false,
editable: false, editable: false,
listeners: { listeners: {
change: 'selectFirstRing' change: 'selectFirstRing'
}, },
flex: 5 flex: 8
}, { }, {
xtype: 'combo', xtype: 'combo',
store: ['for 10 secs', 'for 20 secs', 'for 30 secs', 'for 40 secs', 'for 50 secs', 'for 60 secs'], store: ['for 10 secs', 'for 20 secs', 'for 30 secs', 'for 40 secs', 'for 50 secs', 'for 60 secs'],
@ -143,18 +140,24 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
id: 'onlineFirstTimeout', id: 'onlineFirstTimeout',
allowBlank: false, allowBlank: false,
editable: false, editable: false,
flex: 1, flex: 2,
margin: '0 0 0 10',
bind: { bind: {
hidden: '{online_timeout_hidden}' hidden: '{online_timeout_hidden}'
} }
}] }]
}, { }, {
xtype: 'container', xtype: 'container',
html: Ngcp.csc.locales.callforward.then_forward_to[localStorage.getItem('languageSelected')], layout: 'hbox',
userCls: 'cf-subheader' margin: '10 0 0 50',
}, items: [{
onlineGrid, xtype: 'container',
{ html: Ngcp.csc.locales.callforward.then_forward_to[localStorage.getItem('languageSelected')],
userCls: 'cf-formtext'
},
onlineGrid
]
}, {
html: Ngcp.csc.locales.callforward.add_new_destination[localStorage.getItem('languageSelected')], html: Ngcp.csc.locales.callforward.add_new_destination[localStorage.getItem('languageSelected')],
xtype: 'button', xtype: 'button',
id: 'onlineButton', id: 'onlineButton',
@ -164,35 +167,28 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
element: 'el', element: 'el',
click: 'addEmptyRow' click: 'addEmptyRow'
} }
}, {
xtype: 'panel',
userCls: 'cf-subheader-large',
html: Ngcp.csc.locales.callforward.when_phone_busy[localStorage.getItem('languageSelected')] + '<hr>',
height: 50,
ui: 'cf-container',
margin: '0 0 10 0'
}, { }, {
xtype: 'container', xtype: 'container',
userCls: 'cf-subheader', userCls: 'cf-formtext cf-subheader',
html: Ngcp.csc.locales.callforward.first_ring[localStorage.getItem('languageSelected')], html: Ngcp.csc.locales.callforward.when_phone_busy[localStorage.getItem('languageSelected')]
height: 25
}, { }, {
xtype: 'panel', xtype: 'panel',
layout: 'hbox', layout: 'hbox',
id: 'busyFirstRingFields', id: 'busyFirstRingFields',
height: 50,
padding: '0 11 0 0', padding: '0 11 0 0',
margin: '0 0 0 50',
items: [{ items: [{
xtype: 'combo', xtype: 'combo',
store: ['Own phone', 'Voicemail', 'Fax2Mail', 'None'], store: ['Own phone', 'Voicemail', 'Fax2Mail', 'None'],
id: 'busyFirstDest', id: 'busyFirstDest',
fieldLabel: Ngcp.csc.locales.callforward.first_ring[localStorage.getItem('languageSelected')],
value: 'None', value: 'None',
allowBlank: false, allowBlank: false,
editable: false, editable: false,
listeners: { listeners: {
change: 'selectFirstRing' change: 'selectFirstRing'
}, },
flex: 5 flex: 8
}, { }, {
xtype: 'combo', xtype: 'combo',
store: ['for 10 secs', 'for 20 secs', 'for 30 secs', 'for 40 secs', 'for 50 secs', 'for 60 secs'], store: ['for 10 secs', 'for 20 secs', 'for 30 secs', 'for 40 secs', 'for 50 secs', 'for 60 secs'],
@ -200,18 +196,24 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
id: 'busyFirstTimeout', id: 'busyFirstTimeout',
allowBlank: false, allowBlank: false,
editable: false, editable: false,
flex: 1, flex: 2,
margin: '0 0 0 10',
bind: { bind: {
hidden: '{busy_timeout_hidden}' hidden: '{busy_timeout_hidden}'
} }
}] }]
}, { }, {
xtype: 'container', xtype: 'container',
html: Ngcp.csc.locales.callforward.then_forward_to[localStorage.getItem('languageSelected')], layout: 'hbox',
userCls: 'cf-subheader' margin: '10 0 0 50',
}, items: [{
busyGrid, xtype: 'container',
{ html: Ngcp.csc.locales.callforward.then_forward_to[localStorage.getItem('languageSelected')],
userCls: 'cf-formtext'
},
busyGrid
]
}, {
html: Ngcp.csc.locales.callforward.add_new_destination[localStorage.getItem('languageSelected')], html: Ngcp.csc.locales.callforward.add_new_destination[localStorage.getItem('languageSelected')],
xtype: 'button', xtype: 'button',
id: 'busyButton', id: 'busyButton',
@ -221,35 +223,28 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
element: 'el', element: 'el',
click: 'addEmptyRow' click: 'addEmptyRow'
} }
}, {
xtype: 'panel',
userCls: 'cf-subheader-large',
html: Ngcp.csc.locales.callforward.when_phone_offline[localStorage.getItem('languageSelected')] + '<hr>',
height: 50,
ui: 'cf-container',
margin: '0 0 10 0'
}, { }, {
xtype: 'container', xtype: 'container',
userCls: 'cf-subheader', userCls: 'cf-formtext cf-subheader',
html: Ngcp.csc.locales.callforward.first_ring[localStorage.getItem('languageSelected')], html: Ngcp.csc.locales.callforward.when_phone_offline[localStorage.getItem('languageSelected')]
height: 25
}, { }, {
xtype: 'panel', xtype: 'panel',
layout: 'hbox', layout: 'hbox',
id: 'offlineFirstRingFields', id: 'offlineFirstRingFields',
height: 50,
padding: '0 11 0 0', padding: '0 11 0 0',
margin: '0 0 0 50',
items: [{ items: [{
xtype: 'combo', xtype: 'combo',
store: ['Own phone', 'Voicemail', 'Fax2Mail', 'None'], store: ['Own phone', 'Voicemail', 'Fax2Mail', 'None'],
id: 'offlineFirstDest', id: 'offlineFirstDest',
fieldLabel: Ngcp.csc.locales.callforward.first_ring[localStorage.getItem('languageSelected')],
value: 'None', value: 'None',
allowBlank: false, allowBlank: false,
editable: false, editable: false,
listeners: { listeners: {
change: 'selectFirstRing' change: 'selectFirstRing'
}, },
flex: 5 flex: 8
}, { }, {
xtype: 'combo', xtype: 'combo',
store: ['for 10 secs', 'for 20 secs', 'for 30 secs', 'for 40 secs', 'for 50 secs', 'for 60 secs'], store: ['for 10 secs', 'for 20 secs', 'for 30 secs', 'for 40 secs', 'for 50 secs', 'for 60 secs'],
@ -257,18 +252,24 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
id: 'offlineFirstTimeout', id: 'offlineFirstTimeout',
allowBlank: false, allowBlank: false,
editable: false, editable: false,
flex: 1, flex: 2,
margin: '0 0 0 10',
bind: { bind: {
hidden: '{offline_timeout_hidden}' hidden: '{offline_timeout_hidden}'
} }
}] }]
}, { }, {
xtype: 'container', xtype: 'container',
html: Ngcp.csc.locales.callforward.then_forward_to[localStorage.getItem('languageSelected')], layout: 'hbox',
userCls: 'cf-subheader' margin: '10 0 0 50',
}, items: [{
offlineGrid, xtype: 'container',
{ html: Ngcp.csc.locales.callforward.then_forward_to[localStorage.getItem('languageSelected')],
userCls: 'cf-formtext'
},
offlineGrid
]
}, {
html: Ngcp.csc.locales.callforward.add_new_destination[localStorage.getItem('languageSelected')], html: Ngcp.csc.locales.callforward.add_new_destination[localStorage.getItem('languageSelected')],
xtype: 'button', xtype: 'button',
id: 'offlineButton', id: 'offlineButton',

12
classic/src/view/pages/callforward/CallForwardMainGrid.js
Unescape View File

@ -3,13 +3,19 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainGrid', {
selModel: 'cellmodel', selModel: 'cellmodel',
rowLines: false,
width: '100%',
hideHeaders: true,
ui: 'cf-grid',
viewConfig: { viewConfig: {
plugins: { plugins: {
ptype: 'gridviewdragdrop', ptype: 'gridviewdragdrop',
dragText: Ngcp.csc.locales.callforward.drag_text[localStorage.getItem('languageSelected')] dragText: Ngcp.csc.locales.callforward.drag_text[localStorage.getItem('languageSelected')]
}, },
markDirty: false, markDirty: false,
emptyText: Ngcp.csc.locales.callforward.nowhere[localStorage.getItem('languageSelected')] emptyText: Ngcp.csc.locales.callforward.nowhere[localStorage.getItem('languageSelected')],
stripeRows: false
}, },
plugins: { plugins: {
@ -17,10 +23,6 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainGrid', {
clicksToEdit: 1 clicksToEdit: 1
}, },
hideHeaders: true,
ui: 'cf-grid',
initComponent: function() { initComponent: function() {
var me = this; var me = this;

Write Preview
Loading…
Cancel
Save