From 20faef9c65563fcf8bceaa2dac665d55538d56b2 Mon Sep 17 00:00:00 2001 From: Robert Axelsen Date: Wed, 23 Aug 2017 15:30:45 +0200 Subject: [PATCH] TT#20674 Rtc panel inititation change title color Change-Id: I43bdc9d7056b6d9f25ea76642344fd33f574a99a --- app/utils/locales.js | 12 ++++++-- .../sass/src/view/common/rtc/RtcPanel.scss | 24 ++++++++++----- classic/src/view/common/rtc/RtcController.js | 16 ++++++++++ classic/src/view/common/rtc/RtcPanel.js | 29 ++++++++----------- classic/src/view/common/rtc/composer/Phone.js | 28 +++++++++--------- 5 files changed, 68 insertions(+), 41 deletions(-) diff --git a/app/utils/locales.js b/app/utils/locales.js index 68fbee85..fc05f3c5 100644 --- a/app/utils/locales.js +++ b/app/utils/locales.js @@ -1621,10 +1621,18 @@ Ext.define('Ngcp.csc.locales', { sp: 'Sms sent.' }, sendAudio: { - en: 'Audio Call' + en: 'Audio Call', + de: 'Audio Call', + it: 'Audio Call', + fr: 'Audio Call', + sp: 'Audio Call' }, sendVideo: { - en: 'Video Call' + en: 'Video Call', + de: 'Video Call', + it: 'Video Call', + fr: 'Video Call', + sp: 'Video Call' } }, faxsend: { diff --git a/classic/sass/src/view/common/rtc/RtcPanel.scss b/classic/sass/src/view/common/rtc/RtcPanel.scss index 9ff76825..cfa493f8 100644 --- a/classic/sass/src/view/common/rtc/RtcPanel.scss +++ b/classic/sass/src/view/common/rtc/RtcPanel.scss @@ -2,7 +2,7 @@ $border-radius : 50%; .rtc-panel{ .x-tool-expand-right:before{ - content: '\f0d9' !important + content: '\f0d9' !important; } } .rtc-container { @@ -15,7 +15,7 @@ $border-radius : 50%; } .rtc-avatar { - border-radius: $border-radius ; + border-radius: $border-radius; width: 100px !important; margin: 0 auto !important; display: block; @@ -23,14 +23,14 @@ $border-radius : 50%; } .rtc-icons { - border-radius: $border-radius ; + border-radius: $border-radius; margin-right: 10px; width: 35px; } .rtc-icons-big { - border-radius: $border-radius ; - .x-fa:before{ + border-radius: $border-radius; + .x-fa:before { margin-left: -7px; } } @@ -44,8 +44,18 @@ $border-radius : 50%; display: none; } } + .rtc-digit { - .x-btn-inner-default-small{ - font-size:16px; + .x-btn-inner-default-small { + font-size: 16px; + } +} + +.rtc-title-call-initiation { + .x-panel-header { + background: #a65048; + .x-tool-tool-el { + background: #a65048; + } } } diff --git a/classic/src/view/common/rtc/RtcController.js b/classic/src/view/common/rtc/RtcController.js index b30e274e..ece20fb7 100644 --- a/classic/src/view/common/rtc/RtcController.js +++ b/classic/src/view/common/rtc/RtcController.js @@ -135,6 +135,7 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', { } } }, + minimizeRtcPanel: function() { this.getView().collapse(); }, @@ -150,6 +151,7 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', { this.fireEvent('expandContacts'); return false; }, + emulateCall: function(audioOn, videoOn) { var me = this; var vm = me.getViewModel(); @@ -205,6 +207,7 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', { me.startMedia(vm.get('micEnabled'), vm.get('videoEnabled')); } }, + toggleCall: function(btn) { if (btn.pressed) { // this can be also checked against vm.get('callEnabled') this.emulateCall(true, false); @@ -212,6 +215,7 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', { this.endCall(); } }, + endCall: function() { var vm = this.getViewModel(); var videoObj = this.lookupReference('videoObj'); @@ -271,11 +275,13 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', { var vm = this.getViewModel(); vm.set('phoneKeyboardHidden', !btn.pressed); }, + digitNumber: function(btn) { var vm = this.getViewModel(); var currentNum = vm.get('numberToCall'); vm.set('numberToCall', currentNum + btn.getText()) }, + startNewCall: function() { var vm = this.getViewModel(); var currentNum = vm.get('numberToCall'); @@ -284,6 +290,7 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', { }); this.showRtcPanel(record, 'startCall'); }, + sendFax: function() { var me = this; var vm = me.getViewModel(); @@ -313,6 +320,7 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', { this.getView().close(); }, + sendSms: function() { var me = this; var vm = me.getViewModel(); @@ -372,5 +380,13 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', { }).catch(function(err){ console.error(err); }); + }, + + // parameter state true causes the class for the background color change to + // be added, and parameter state false causes the class to be removed + setRtcpanelTitleColor: function (state) { + var rtcpanel = Ext.getCmp('rtcpanel'); + rtcpanel.toggleCls('rtc-title-call-initiation', state); } + }); diff --git a/classic/src/view/common/rtc/RtcPanel.js b/classic/src/view/common/rtc/RtcPanel.js index f62fe5f5..16affc35 100644 --- a/classic/src/view/common/rtc/RtcPanel.js +++ b/classic/src/view/common/rtc/RtcPanel.js @@ -1,33 +1,29 @@ Ext.define('NgcpCsc.view.common.rtc.RtcPanel', { extend: 'Ext.panel.Panel', + id: 'rtcpanel', xtype: 'rtc', controller: 'rtc', - viewModel: 'rtc', padding: '0 0 0 1', - width: '30%', - closable: true, - collapseDirection: 'left', - cls: 'rtc-panel', bind: { title: '{title}' }, - tools: [ { + tools: [{ glyph: 'xf065@FontAwesome', callback: 'toggleFullscreen', - bind:{ + bind: { hidden: '{!videoEnabled}' } - },{ + }, { type: 'minimize', callback: 'minimizeRtcPanel' }], @@ -55,14 +51,13 @@ Ext.define('NgcpCsc.view.common.rtc.RtcPanel', { defaults: { cls: 'rtc-container' }, - items: [ - { - margin:20, - hidden:true, + items: [{ + margin: 20, + hidden: true, width: '100%', reference: 'videoObj', html: "" - },{ + }, { cls: 'rtc-avatar-container', reference: 'avatar', items: { @@ -96,7 +91,7 @@ Ext.define('NgcpCsc.view.common.rtc.RtcPanel', { userCls: '{setuserCls}' }, handler: 'toggleCall' - }, { + }, { iconCls: Ngcp.csc.icons.microphone, bind: { pressed: '{micEnabled}', @@ -104,7 +99,7 @@ Ext.define('NgcpCsc.view.common.rtc.RtcPanel', { hidden: '{!micEnabled}' }, handler: 'toggleAudioVideo' - },{ + }, { iconCls: Ngcp.csc.icons.microphone_slash, bind: { pressed: '{micEnabled}', @@ -112,7 +107,7 @@ Ext.define('NgcpCsc.view.common.rtc.RtcPanel', { hidden: '{micEnabled}' }, handler: 'toggleAudioVideo' - }, { + }, { iconCls: Ngcp.csc.icons.video, bind: { pressed: '{videoEnabled}', @@ -135,4 +130,4 @@ Ext.define('NgcpCsc.view.common.rtc.RtcPanel', { }, { xtype: 'fax-composer' }] -}) +}); diff --git a/classic/src/view/common/rtc/composer/Phone.js b/classic/src/view/common/rtc/composer/Phone.js index 4ff82f54..4787467b 100644 --- a/classic/src/view/common/rtc/composer/Phone.js +++ b/classic/src/view/common/rtc/composer/Phone.js @@ -15,7 +15,7 @@ Ext.define('NgcpCsc.view.common.composer.Phone', { hideTrigger: true, width: '80%', bind: '{numberToCall}', - reference:'callNumberInput' + reference: 'callNumberInput' }, { xtype: 'button', enableToggle: true, @@ -33,24 +33,22 @@ Ext.define('NgcpCsc.view.common.composer.Phone', { layout: 'center', items: [{ xtype: 'container', - items: [ - { - xtype: 'button', - text : Ngcp.csc.locales.rtc.sendAudio[localStorage.getItem('languageSelected')], - iconCls: Ngcp.csc.icons.microphone, - margin: '0 10 0 0', - listeners: { + items: [{ + xtype: 'button', + text: Ngcp.csc.locales.rtc.sendAudio[localStorage.getItem('languageSelected')], + iconCls: Ngcp.csc.icons.microphone, + margin: '0 10 0 0', + listeners: { - } - },{ - xtype: 'button', - text : Ngcp.csc.locales.rtc.sendVideo[localStorage.getItem('languageSelected')], - iconCls: Ngcp.csc.icons.video } - ] + }, { + xtype: 'button', + text: Ngcp.csc.locales.rtc.sendVideo[localStorage.getItem('languageSelected')], + iconCls: Ngcp.csc.icons.video + }] }] }, { hidden: true, - html: '' + html: '' }] })