From c2fa8ce2b68a4ab0e6d3d2211bcbddb1c2061f71 Mon Sep 17 00:00:00 2001 From: Robert Axelsen Date: Wed, 8 Feb 2017 13:02:32 +0100 Subject: [PATCH] TT#10057 Ngcp-csc implement new cf module styling Adjust layout and styling of sections, for call forward module, so that it meets new requirements (from 27.01 meeting). Change-Id: I3d0adc914aec796ece36143a6fd7c8491a1e42cf --- app/locales.js | 57 +++++---- .../view/pages/callforward/CallForward.scss | 110 ++++++++++++----- classic/src/view/login/Login.js | 1 - .../src/view/pages/callforward/CallForward.js | 2 +- .../pages/callforward/CallForwardMainForm.js | 111 +++++++++--------- .../pages/callforward/CallForwardMainGrid.js | 12 +- 6 files changed, 178 insertions(+), 115 deletions(-) diff --git a/app/locales.js b/app/locales.js index 2f831cb8..56f5d473 100644 --- a/app/locales.js +++ b/app/locales.js @@ -572,18 +572,18 @@ Ext.define('Ngcp.csc.locales', { sp: 'List B' }, first_ring: { - en: 'First ring:', - it: 'First ring:', - de: 'First ring:', - fr: 'First ring:', - sp: 'First ring:' + en: 'first ring', + it: 'first ring', + de: 'first ring', + fr: 'first ring', + sp: 'first ring' }, then_forward_to: { - en: 'Then forward to:', - it: 'Then forward to:', - de: 'Then forward to:', - fr: 'Then forward to:', - sp: 'Then forward to:' + en: 'then forward to', + it: 'then forward to', + de: 'then forward to', + fr: 'then forward to', + sp: 'then forward to' }, add_new_destination: { en: 'ADD NEW DESTINATION', @@ -593,25 +593,25 @@ Ext.define('Ngcp.csc.locales', { sp: 'ADD NEW DESTINATION' }, when_phone_online: { - en: 'When My Phone is Online:', - it: 'When My Phone is Online:', - de: 'When My Phone is Online:', - fr: 'When My Phone is Online:', - sp: 'When My Phone is Online:' + en: 'When I am online ...', + it: 'When I am online ...', + de: 'When I am online ...', + fr: 'When I am online ...', + sp: 'When I am online ...' }, when_phone_busy: { - en: 'When My Phone is Busy:', - it: 'When My Phone is Busy:', - de: 'When My Phone is Busy:', - fr: 'When My Phone is Busy:', - sp: 'When My Phone is Busy:' + en: 'When I am busy ...', + it: 'When I am busy ...', + de: 'When I am busy ...', + fr: 'When I am busy ...', + sp: 'When I am busy ...' }, when_phone_offline: { - en: 'When My Phone is Offline:', - it: 'When My Phone is Offline:', - de: 'When My Phone is Offline:', - fr: 'When My Phone is Offline:', - sp: 'When My Phone is Offline:' + en: 'When I am offline ...', + it: 'When I am offline ...', + de: 'When I am offline ...', + fr: 'When I am offline ...', + sp: 'When I am offline ...' }, drag_text: { en: 'Drag and drop to move', @@ -710,6 +710,13 @@ Ext.define('Ngcp.csc.locales', { de: 'Enter secs', fr: '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: { diff --git a/classic/sass/src/view/pages/callforward/CallForward.scss b/classic/sass/src/view/pages/callforward/CallForward.scss index 34663218..c48d0249 100644 --- a/classic/sass/src/view/pages/callforward/CallForward.scss +++ b/classic/sass/src/view/pages/callforward/CallForward.scss @@ -1,32 +1,43 @@ /* mixins */ -@include extjs-panel-ui ( - $ui: 'cf-container', -); +@include extjs-panel-ui ( $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 ( - $ui: 'cf-widget', -); - -@include extjs-panel-ui ( - $ui: 'cf-mainform', -); +/* custom css */ +/* 1. CallForwardMainForm */ +.x-panel-cf-mainform { + #busyFirstDest-labelTextEl, + #offlineFirstDest-labelTextEl, + #onlineFirstDest-labelTextEl, + .cf-formtext { + font-weight: 600; + margin-bottom: 7px; + } +} -@include extjs-panel-ui ( - $ui: 'cf-grid', -); +.x-panel-cf-mainform .cf-formtext:nth-child(2n+1) { + margin: 10px 40px 0 0; +} -/* custom css */ -.x-panel-cf-container .x-autocontainer-innerCt { - font-size: 120%; +.x-panel-cf-mainform .cf-subheader { padding-top: 20px; } -.x-panel-cf-widget { - border: solid 1px; - border-color: #d0d0d0; - padding: 20px 10px; +.x-panel-cf-mainform { + #busyFirstRingFields, + #offlineFirstRingFields, + #onlineFirstRingFields { + margin-bottom: 10px; + } } +/* 2. CallForwardMainForm segmented buttons */ .x-panel-cf-mainform .x-segmented-button .x-btn-button-default-small { display: inline-block; } @@ -39,17 +50,44 @@ float: left; } -.cf-subheader { - font-weight: 600; +.x-panel-cf-mainform .x-segmented-button { + white-space: nowrap; } -.cf-subtitle { - font-size: 110%; - font-weight: 600; +.x-panel-cf-mainform .x-segmented-button:first-child { + margin-bottom: 10px; } -.cf-deactivate-day { - color: #B4B8B3; +.x-panel-cf-mainform .x-segmented-button-item-horizontal { + 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 { @@ -58,10 +96,26 @@ } .x-panel-cf-grid .cf-tpl-fa { - font-size: .7em; + font-size: 0.7em; margin: 0 4px; } .x-panel-cf-grid .x-grid-row { 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; +} diff --git a/classic/src/view/login/Login.js b/classic/src/view/login/Login.js index 3278adec..eae29e72 100644 --- a/classic/src/view/login/Login.js +++ b/classic/src/view/login/Login.js @@ -81,7 +81,6 @@ Ext.define('NgcpCsc.view.login.Login', { 'select': 'languageSelection' } }, - // TODO: remember me & forgotten pswd { xtype: 'container', layout: 'hbox', diff --git a/classic/src/view/pages/callforward/CallForward.js b/classic/src/view/pages/callforward/CallForward.js index fad0eb42..a9dee082 100644 --- a/classic/src/view/pages/callforward/CallForward.js +++ b/classic/src/view/pages/callforward/CallForward.js @@ -68,7 +68,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForward', { xtype: 'core-container', items: [{ padding: '0 0 20 0', - html: Ext.String.format('
{0}
', Ngcp.csc.locales.callforward.subtitle[localStorage.getItem('languageSelected')]) + html: Ext.String.format('
{0}
', Ngcp.csc.locales.callforward.subtitle[localStorage.getItem('languageSelected')]) }, { xtype: 'callforwardmainform' }] diff --git a/classic/src/view/pages/callforward/CallForwardMainForm.js b/classic/src/view/pages/callforward/CallForwardMainForm.js index 85390fcd..a1c178b7 100644 --- a/classic/src/view/pages/callforward/CallForwardMainForm.js +++ b/classic/src/view/pages/callforward/CallForwardMainForm.js @@ -8,7 +8,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', { }, fieldDefaults: { - labelAlign: 'top' + labelSeparator : '' }, margin: '0 10 0 0', @@ -82,6 +82,10 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', { iconCls: 'x-fa fa-pencil', iconAlign: 'right' }] + }, { + xtype: 'container', + userCls: 'cf-formtext', + html: Ngcp.csc.locales.callforward.for_calling_parties[localStorage.getItem('languageSelected')] }, { xtype: 'segmentedbutton', itemId: 'sourceButtons', @@ -107,35 +111,28 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', { iconCls: 'x-fa fa-pencil', iconAlign: 'right' }] - }, { - xtype: 'panel', - userCls: 'cf-subheader-large', - html: Ngcp.csc.locales.callforward.when_phone_online[localStorage.getItem('languageSelected')] + '
', - height: 50, - ui: 'cf-container', - margin: '0 0 10 0' }, { xtype: 'container', - userCls: 'cf-subheader', - html: Ngcp.csc.locales.callforward.first_ring[localStorage.getItem('languageSelected')], - height: 25 + userCls: 'cf-formtext cf-subheader', + html: Ngcp.csc.locales.callforward.when_phone_online[localStorage.getItem('languageSelected')] }, { xtype: 'panel', layout: 'hbox', id: 'onlineFirstRingFields', - height: 50, padding: '0 11 0 0', + margin: '0 0 0 50', items: [{ xtype: 'combo', store: ['Own phone', 'Voicemail', 'Fax2Mail', 'None'], id: 'onlineFirstDest', + fieldLabel: Ngcp.csc.locales.callforward.first_ring[localStorage.getItem('languageSelected')], value: 'Own phone', allowBlank: false, editable: false, listeners: { change: 'selectFirstRing' }, - flex: 5 + flex: 8 }, { xtype: 'combo', 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', allowBlank: false, editable: false, - flex: 1, + flex: 2, + margin: '0 0 0 10', bind: { hidden: '{online_timeout_hidden}' } }] }, { xtype: 'container', - html: Ngcp.csc.locales.callforward.then_forward_to[localStorage.getItem('languageSelected')], - userCls: 'cf-subheader' - }, - onlineGrid, - { + layout: 'hbox', + margin: '10 0 0 50', + items: [{ + 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')], xtype: 'button', id: 'onlineButton', @@ -164,35 +167,28 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', { element: 'el', click: 'addEmptyRow' } - }, { - xtype: 'panel', - userCls: 'cf-subheader-large', - html: Ngcp.csc.locales.callforward.when_phone_busy[localStorage.getItem('languageSelected')] + '
', - height: 50, - ui: 'cf-container', - margin: '0 0 10 0' }, { xtype: 'container', - userCls: 'cf-subheader', - html: Ngcp.csc.locales.callforward.first_ring[localStorage.getItem('languageSelected')], - height: 25 + userCls: 'cf-formtext cf-subheader', + html: Ngcp.csc.locales.callforward.when_phone_busy[localStorage.getItem('languageSelected')] }, { xtype: 'panel', layout: 'hbox', id: 'busyFirstRingFields', - height: 50, padding: '0 11 0 0', + margin: '0 0 0 50', items: [{ xtype: 'combo', store: ['Own phone', 'Voicemail', 'Fax2Mail', 'None'], id: 'busyFirstDest', + fieldLabel: Ngcp.csc.locales.callforward.first_ring[localStorage.getItem('languageSelected')], value: 'None', allowBlank: false, editable: false, listeners: { change: 'selectFirstRing' }, - flex: 5 + flex: 8 }, { xtype: 'combo', 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', allowBlank: false, editable: false, - flex: 1, + flex: 2, + margin: '0 0 0 10', bind: { hidden: '{busy_timeout_hidden}' } }] }, { xtype: 'container', - html: Ngcp.csc.locales.callforward.then_forward_to[localStorage.getItem('languageSelected')], - userCls: 'cf-subheader' - }, - busyGrid, - { + layout: 'hbox', + margin: '10 0 0 50', + items: [{ + 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')], xtype: 'button', id: 'busyButton', @@ -221,35 +223,28 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', { element: 'el', click: 'addEmptyRow' } - }, { - xtype: 'panel', - userCls: 'cf-subheader-large', - html: Ngcp.csc.locales.callforward.when_phone_offline[localStorage.getItem('languageSelected')] + '
', - height: 50, - ui: 'cf-container', - margin: '0 0 10 0' }, { xtype: 'container', - userCls: 'cf-subheader', - html: Ngcp.csc.locales.callforward.first_ring[localStorage.getItem('languageSelected')], - height: 25 + userCls: 'cf-formtext cf-subheader', + html: Ngcp.csc.locales.callforward.when_phone_offline[localStorage.getItem('languageSelected')] }, { xtype: 'panel', layout: 'hbox', id: 'offlineFirstRingFields', - height: 50, padding: '0 11 0 0', + margin: '0 0 0 50', items: [{ xtype: 'combo', store: ['Own phone', 'Voicemail', 'Fax2Mail', 'None'], id: 'offlineFirstDest', + fieldLabel: Ngcp.csc.locales.callforward.first_ring[localStorage.getItem('languageSelected')], value: 'None', allowBlank: false, editable: false, listeners: { change: 'selectFirstRing' }, - flex: 5 + flex: 8 }, { xtype: 'combo', 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', allowBlank: false, editable: false, - flex: 1, + flex: 2, + margin: '0 0 0 10', bind: { hidden: '{offline_timeout_hidden}' } }] }, { xtype: 'container', - html: Ngcp.csc.locales.callforward.then_forward_to[localStorage.getItem('languageSelected')], - userCls: 'cf-subheader' - }, - offlineGrid, - { + layout: 'hbox', + margin: '10 0 0 50', + items: [{ + 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')], xtype: 'button', id: 'offlineButton', diff --git a/classic/src/view/pages/callforward/CallForwardMainGrid.js b/classic/src/view/pages/callforward/CallForwardMainGrid.js index aaddb7fd..218a16f5 100644 --- a/classic/src/view/pages/callforward/CallForwardMainGrid.js +++ b/classic/src/view/pages/callforward/CallForwardMainGrid.js @@ -3,13 +3,19 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainGrid', { selModel: 'cellmodel', + rowLines: false, + width: '100%', + hideHeaders: true, + ui: 'cf-grid', + viewConfig: { plugins: { ptype: 'gridviewdragdrop', dragText: Ngcp.csc.locales.callforward.drag_text[localStorage.getItem('languageSelected')] }, markDirty: false, - emptyText: Ngcp.csc.locales.callforward.nowhere[localStorage.getItem('languageSelected')] + emptyText: Ngcp.csc.locales.callforward.nowhere[localStorage.getItem('languageSelected')], + stripeRows: false }, plugins: { @@ -17,10 +23,6 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainGrid', { clicksToEdit: 1 }, - hideHeaders: true, - - ui: 'cf-grid', - initComponent: function() { var me = this;