TT#20674 Rtc panel inititation change title color

Change-Id: I43bdc9d7056b6d9f25ea76642344fd33f574a99a

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: {

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;
+        }
     }
 }

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);
     }
+
 });

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: "<video width=100% id=videoTag height=240></video>"
-        },{
+        }, {
             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'
     }]
-})
+});

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: '<audio id="ring" src="'+Ext.manifest.resources.path+'/audio/skype_ring.mp3" preload="auto"></audio>'
+        html: '<audio id="ring" src="' + Ext.manifest.resources.path + '/audio/skype_ring.mp3" preload="auto"></audio>'
     }]
 })