TT#10972 Cosmetic changes to conversation view

Change-Id: I2454f6bba5b05030c4e25990bc385928ba95eff2

app.json

@@ -187,9 +187,6 @@
      *
      */
     "js": [{
-        "path": "libs/libphonenumber-js.min.js",
-        "includeInBundle": true
-    },{
         "path": "initLocalStorage.js",
         "includeInBundle": true
     },{

app/locales.js

@@ -2,7 +2,7 @@ Ext.define('Ngcp.csc.locales', {
     statics: {
         login: {
             title: {
-                en: 'Self Care Login',
+                en: 'Login to your Portal',
                 it: 'Connessione all\'Area di Amministrazione',
                 de: 'Ihr persönliches Portal',
                 fr: 'Connexion à l\'espace d\'administration',
@@ -145,11 +145,11 @@ Ext.define('Ngcp.csc.locales', {
                 }
             },
             section_title: {
-                en: 'Conversations.',
+                en: 'Conversations',
-                it: 'Conversations.',
+                it: 'Conversations',
-                de: 'Conversations.',
+                de: 'Conversations',
-                fr: 'Conversations.',
+                fr: 'Conversations',
-                sp: 'Conversations.'
+                sp: 'Conversations'
             },
             recent_calls: {
                 en: 'RECENT CALLS',
@@ -209,51 +209,156 @@ Ext.define('Ngcp.csc.locales', {
                 fr: 'Folder',
                 sp: 'Folder'
             },
-            location:{
+            location: {
                 en: 'Location',
                 it: 'Location',
                 de: 'Location',
                 fr: 'Location',
                 sp: 'Location'
             },
-            direction:{
+            direction: {
                 en: 'Direction',
                 it: 'Direction',
                 de: 'Direction',
                 fr: 'Direction',
                 sp: 'Direction'
             },
-            tooltips:{
+            received_call_from: {
-                call_types:{
+                en: 'Received call from',
-                    call:{
+                it: 'Received call from',
+                de: 'Received call from',
+                fr: 'Received call from',
+                sp: 'Received call from'
+            },
+            received_fax_from: {
+                en: 'Received fax from',
+                it: 'Received fax from',
+                de: 'Received fax from',
+                fr: 'Received fax from',
+                sp: 'Received fax from'
+            },
+            received_sms_from: {
+                en: 'Received sms from',
+                it: 'Received sms from',
+                de: 'Received sms from',
+                fr: 'Received sms from',
+                sp: 'Received sms from'
+            },
+            received_chat_message_from: {
+                en: 'Received chat message from',
+                it: 'Received chat message from',
+                de: 'Received chat message from',
+                fr: 'Received chat message from',
+                sp: 'Received chat message from'
+            },
+            received_voice_mail_from: {
+                en: 'Received voice mail from',
+                it: 'Received voice mail from',
+                de: 'Received voice mail from',
+                fr: 'Received voice mail from',
+                sp: 'Received voice mail from'
+            },
+            missed_call_from: {
+                en: 'Missed call from',
+                it: 'Missed call from',
+                de: 'Missed call from',
+                fr: 'Missed call from',
+                sp: 'Missed call from'
+            },
+            successful_call_to: {
+                en: 'Successful call to',
+                it: 'Successful call to',
+                de: 'Successful call to',
+                fr: 'Successful call to',
+                sp: 'Successful call to'
+            },
+            successful_fax_to: {
+                en: 'Successful fax to',
+                it: 'Successful fax to',
+                de: 'Successful fax to',
+                fr: 'Successful fax to',
+                sp: 'Successful fax to'
+            },
+            successful_sms_to: {
+                en: 'Sent sms to',
+                it: 'Sent sms to',
+                de: 'Sent sms to',
+                fr: 'Sent sms to',
+                sp: 'Sent sms to'
+            },
+            sent_chat_message_to: {
+                en: 'Sent chat message to',
+                it: 'Sent chat message to',
+                de: 'Sent chat message to',
+                fr: 'Sent chat message to',
+                sp: 'Sent chat message to'
+            },
+            unsuccessful_call_to: {
+                en: 'Unsuccessful call to',
+                it: 'Unsuccessful call to',
+                de: 'Unsuccessful call to',
+                fr: 'Unsuccessful call to',
+                sp: 'Unsuccessful call to'
+            },
+            unsuccessful_fax_to: {
+                en: 'Unsuccessful fax to',
+                it: 'Unsuccessful fax to',
+                de: 'Unsuccessful fax to',
+                fr: 'Unsuccessful fax to',
+                sp: 'Unsuccessful fax to'
+            },
+            successful_call_forward_to: {
+                en: 'Successful call forward to',
+                it: 'Successful call forward to',
+                de: 'Successful call forward to',
+                fr: 'Successful call forward to',
+                sp: 'Successful call forward to'
+            },
+            successful_sms_forward_to: {
+                en: 'Successful sms forward to',
+                it: 'Successful sms forward to',
+                de: 'Successful sms forward to',
+                fr: 'Successful sms forward to',
+                sp: 'Successful sms forward to'
+            },
+            unsuccessful_call_forward_to: {
+                en: 'Unsuccessful call forward to',
+                it: 'Unsuccessful call forward to',
+                de: 'Unsuccessful call forward to',
+                fr: 'Unsuccessful call forward to',
+                sp: 'Unsuccessful call forward to'
+            },
+            tooltips: {
+                call_types: {
+                    call: {
                         en: 'Call',
                         it: 'Call',
                         de: 'Call',
                         fr: 'Call',
                         sp: 'Call'
                     },
-                    sms:{
+                    sms: {
                         en: 'SMS',
                         it: 'SMS',
                         de: 'SMS',
                         fr: 'SMS',
                         sp: 'SMS'
                     },
-                    fax:{
+                    fax: {
                         en: 'Fax',
                         it: 'Fax',
                         de: 'Fax',
                         fr: 'Fax',
                         sp: 'Fax'
                     },
-                    voicemail:{
+                    voicemail: {
                         en: 'Voicemail',
                         it: 'Voicemail',
                         de: 'Voicemail',
                         fr: 'Voicemail',
                         sp: 'Voicemail'
                     },
-                    chat:{
+                    chat: {
                         en: 'Chat',
                         it: 'Chat',
                         de: 'Chat',
@@ -261,68 +366,68 @@ Ext.define('Ngcp.csc.locales', {
                         sp: 'Chat'
                     }
                 },
-                new_sms:{
+                new_sms: {
-                    en: 'Create and send a new SMS.',
+                    en: 'Send a new SMS',
-                    it: 'Create and send a new SMS.',
+                    it: 'Send a new SMS',
-                    de: 'Create and send a new SMS.',
+                    de: 'Send a new SMS',
-                    fr: 'Create and send a new SMS.',
+                    fr: 'Send a new SMS',
-                    sp: 'Create and send a new SMS.'
+                    sp: 'Send a new SMS'
                 },
-                new_call:{
+                new_call: {
-                    en: 'Call a new or an existing number.',
+                    en: 'Place a new Call',
-                    it: 'Call a new or an existing number.',
+                    it: 'Place a new Call',
-                    de: 'Call a new or an existing number.',
+                    de: 'Place a new Call',
-                    fr: 'Call a new or an existing number.',
+                    fr: 'Place a new Call',
-                    sp: 'Call a new or an existing number.'
+                    sp: 'Place a new Call'
                 },
-                new_fax:{
+                new_fax: {
-                    en: 'Create and send a new fax.',
+                    en: 'Send a new Fax',
-                    it: 'Create and send a new fax.',
+                    it: 'Send a new Fax',
-                    de: 'Create and send a new fax.',
+                    de: 'Send a new Fax',
-                    fr: 'Create and send a new fax.',
+                    fr: 'Send a new Fax',
-                    sp: 'Create and send a new fax.'
+                    sp: 'Send a new Fax'
                 },
-                recall:{
+                recall: {
-                    en: 'Call this number.',
+                    en: 'Call',
-                    it: 'Call this number.',
+                    it: 'Call',
-                    de: 'Call this number.',
+                    de: 'Call',
-                    fr: 'Call this number.',
+                    fr: 'Call',
-                    sp: 'Call this number.'
+                    sp: 'Call'
                 },
-                listen:{
+                listen: {
-                    en: 'Reproduce the message.',
+                    en: 'Play Message',
-                    it: 'Reproduce the message.',
+                    it: 'Play Message',
-                    de: 'Reproduce the message.',
+                    de: 'Play Message',
-                    sp: 'Reproduce the message.',
+                    sp: 'Play Message',
-                    fr: 'Reproduce the message.'
+                    fr: 'Play Message'
                 },
-                send_fax:{
+                send_fax: {
-                    en: 'Send a fax to this number.',
+                    en: 'Send Fax',
-                    it: 'Send a fax to this number.',
+                    it: 'Send Fax',
-                    de: 'Send a fax to this number.',
+                    de: 'Send Fax',
-                    fr: 'Send a fax to this number.',
+                    fr: 'Send Fax',
-                    sp: 'Send a fax to this number.'
+                    sp: 'Send Fax'
                 },
-                download_fax:{
+                download_fax: {
-                    en: 'Download this fax.',
+                    en: 'Download',
-                    it: 'Download this fax.',
+                    it: 'Download',
-                    de: 'Download this fax.',
+                    de: 'Download',
-                    fr: 'Download this fax.',
+                    fr: 'Download',
-                    sp: 'Download this fax.'
+                    sp: 'Download'
                 },
-                send_sms:{
+                send_sms: {
-                    en: 'Send an sms to this number.',
+                    en: 'Send SMS',
-                    it: 'Send an sms to this number.',
+                    it: 'Send SMS',
-                    de: 'Send an sms to this number.',
+                    de: 'Send SMS',
-                    fr: 'Send an sms to this number.',
+                    fr: 'Send SMS',
-                    sp: 'Send an sms to this number.'
+                    sp: 'Send SMS'
                 },
-                chat :{
+                chat: {
-                    en: 'Start a private conversation.',
+                    en: 'Send Chat Message',
-                    it: 'Start a private conversation.',
+                    it: 'Send Chat Message',
-                    de: 'Start a private conversation.',
+                    de: 'Send Chat Message',
-                    fr: 'Start a private conversation.',
+                    fr: 'Send Chat Message',
-                    sp: 'Start a private conversation.'
+                    sp: 'Send Chat Message'
                 }
             }
         },

classic/sass/src/view/core/Container.scss

@@ -2,7 +2,7 @@
     $ui: 'core-container',
     $ui-border-color: lightgray,
     $ui-border-width: 1px,
-    $ui-border-radius: 10px
+    $ui-border-radius: 1px
 );
 .x-panel-core-container {
     .x-panel-body {

classic/sass/src/view/core/GridCards.scss

@@ -20,12 +20,9 @@ $grid-row-cell-focus-border-color: '#fff';
         table-layout: auto;
         border: 1px solid lightgray;
         margin-bottom: 10px;
-        border-radius: 5px;
+        border-radius: 1px;
         margin-right: 11px;
         padding:10px;
-        -webkit-box-shadow: 0 8px 6px -6px lightgray;
-        -moz-box-shadow: 0 8px 6px -6px lightgray;
-        box-shadow: 0 8px 6px -6px lightgray;
     }
 
     .x-grid-td {

classic/sass/src/view/pages/conversations/Conversations.scss

@@ -7,6 +7,7 @@
     $ui: 'conversations-actions-btn'
     // btns customisations goes here
 );
+
 // custom rules
 .missed-call-color {
     color: rgb(234, 80, 0);
@@ -17,11 +18,44 @@
     color: $base-color;
 }
 
-
 .sms-preview, .chat-preview {
     padding: 16px;
 }
-.caller{
+
+.caller {
     font-size: 16px;
+}
+
+.x-grid-item {
+    padding: 0 !important;
+}
+
+.x-grid-cell-inner {
+    padding: 15px 0px 15px 10px;
+}
+
+.x-grid-rowbody {
+    width: 100%;
+    padding: 0;
+}
+
+.card-footer {
+    background: #efefef;
+    color: #666;
+    padding: 10px;
+}
+
+.conv-description {
+    color: #666;
     text-align: right;
+    font-size: 12px;
+}
+
+.x-btn-conversations-actions-btn-medium {
+    background: white;
+    border: none;
+    .x-fa,
+    .x-btn-inner {
+        color: $base-color;
+    }
 }

classic/src/view/login/Login.js

@@ -26,9 +26,10 @@ Ext.define('NgcpCsc.view.login.Login', {
             margin: '5 0'
         },
         items: [{
-                id: 'title',
+                id: 'login-title',
-                panel: 'label',
+                padding: '20 0 20 0',
-                title: Ngcp.csc.locales.login.title[localStorage.getItem('languageSelected')]
+                height: 70,
+                html: Ngcp.csc.locales.login.title[localStorage.getItem('languageSelected')]
             }, {
                 xtype: 'textfield',
                 name: 'username',
@@ -66,20 +67,6 @@ Ext.define('NgcpCsc.view.login.Login', {
                         cls: 'auth-password-trigger'
                     }
                 }
-            }, {
-                xtype: 'combo',
-                emptyText: Ngcp.csc.locales.login.choose_language[localStorage.getItem('languageSelected')],
-                padding: '0 0 0 15',
-                store: 'Languages',
-                queryMode: 'local',
-                id: 'login-language',
-                valueField: 'id',
-                displayField: 'language',
-                editable: false,
-                value: localStorage.getItem('languageSelected'),
-                listeners: {
-                    'select': 'languageSelection'
-                }
             },
             {
                 xtype: 'container',

classic/src/view/pages/conversations/Conversations.js

@@ -35,20 +35,20 @@ Ext.define('NgcpCsc.view.pages.conversations.Conversations', {
                 items: [{
                     text: Ngcp.csc.locales.conversations.btns.new_sms[localStorage.getItem('languageSelected')],
                     itemId: 'newSms',
-                    iconCls: 'x-fa fa-comment fa-2x',
+                    iconCls: 'x-fa fa-envelope fa',
                     margin: '0 20 0 0',
                     tooltip: Ngcp.csc.locales.conversations.tooltips.new_sms[localStorage.getItem('languageSelected')]
                 }, {
 
                     text: Ngcp.csc.locales.conversations.btns.new_call[localStorage.getItem('languageSelected')],
                     itemId: 'newCall',
-                    iconCls: 'x-fa fa-phone fa-2x',
+                    iconCls: 'x-fa fa-phone fa',
                     margin: '0 20 0 0',
                     tooltip: Ngcp.csc.locales.conversations.tooltips.new_call[localStorage.getItem('languageSelected')]
                 }, {
                     text: Ngcp.csc.locales.conversations.btns.new_fax[localStorage.getItem('languageSelected')],
                     itemId: 'newfax',
-                    iconCls: 'x-fa fa-fax fa-2x',
+                    iconCls: 'x-fa fa-file-text fa',
                     tooltip: Ngcp.csc.locales.conversations.tooltips.new_fax[localStorage.getItem('languageSelected')]
                 }]
             }]

classic/src/view/pages/conversations/ConversationsController.js

@@ -27,22 +27,22 @@ Ext.define('NgcpCsc.view.pages.conversations.ConversationsController', {
         switch (record.get('call_type')) {
             case 'call':
                 meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.tooltips.call_types.call[localStorage.getItem('languageSelected')] + '"';
-                icon = 'fa fa-phone-square green-icon fa-2x pointer';
+                icon = 'fa fa-phone green-icon pointer';
                 break;
             case 'voicemail':
-                icon = 'fa fa-envelope green-icon fa-2x pointer';
+                icon = 'fa fa-folder-open-o green-icon pointer';
                 break;
             case 'sms':
                 meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.tooltips.call_types.sms[localStorage.getItem('languageSelected')] + '"';
-                icon = 'fa fa-comment green-icon fa-2x pointer';
+                icon = 'fa fa-envelope-o green-icon pointer';
                 break;
             case 'chat':
                 meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.tooltips.call_types.chat[localStorage.getItem('languageSelected')] + '"';
-                icon = 'fa fa-wechat green-icon fa-2x pointer';
+                icon = 'fa fa-comment-o green-icon pointer';
                 break;
             case 'fax':
                 meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.tooltips.call_types.fax[localStorage.getItem('languageSelected')] + '"';
-                icon = 'fa fa-file-text green-icon fa-2x pointer';
+                icon = 'fa fa-file-text-o green-icon pointer';
                 break;
         };
         return Ext.String.format('<div class="{0}"></div>', icon);
@@ -50,24 +50,117 @@ Ext.define('NgcpCsc.view.pages.conversations.ConversationsController', {
 
     renderCallTypeIcons: function(value, meta, record) {
         var icon,
-            color = record.get('status') + '-call-color';
+            color = record.get('status') + '-call-color',
+            direction = record.get('direction');
         switch (record.get('direction')) {
             case 'incoming':
-                icon = color + ' fa fa-chevron-left fa-2x';
+                icon = color + ' fa fa-chevron-left';
                 meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.call_type.incoming[localStorage.getItem('languageSelected')] + '"';
                 break;
             case 'outgoing':
-                icon = color + ' fa fa-chevron-right fa-2x';
+                icon = color + ' fa fa-chevron-right';
                 meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.call_type.outgoing[localStorage.getItem('languageSelected')] + '"';
                 break;
             case 'forwarded':
                 meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.call_type.forwarded[localStorage.getItem('languageSelected')] + '"';
-                return '<div><span class="' + color + ' fa fa-chevron-right fa-2x"></span><span class="' + color + ' fa fa-chevron-right fa-2x"></span></div>';
+                return '<div><span class="' + color + ' fa fa-chevron-right"></span><span class="' + color + ' fa fa-chevron-right"></span></div>';
                 break;
         };
         return Ext.String.format('<div class="{0}"></div>', icon);
     },
 
+    renderDescription: function(value, meta, record) {
+        var desc;
+        switch (record.get('direction')) {
+            case 'incoming':
+                switch(record.get('status')) {
+                    case 'answered':
+                        switch(record.get('call_type')) {
+                            case 'call':
+                                desc = Ngcp.csc.locales.conversations.received_call_from[localStorage.getItem('languageSelected')];
+                                break;
+                            case 'fax':
+                                desc = Ngcp.csc.locales.conversations.received_fax_from[localStorage.getItem('languageSelected')];
+                                break;
+                            case 'sms':
+                                desc = Ngcp.csc.locales.conversations.received_sms_from[localStorage.getItem('languageSelected')];
+                                break;
+                            case 'chat':
+                                desc = Ngcp.csc.locales.conversations.received_chat_message_from[localStorage.getItem('languageSelected')];
+                                break;
+                            case 'voicemail':
+                                desc = Ngcp.csc.locales.conversations.received_voice_mail_from[localStorage.getItem('languageSelected')];
+                                break;
+                        }
+                        break;
+                    case 'missed':
+                        switch(record.get('call_type')) {
+                            case 'call':
+                                desc = Ngcp.csc.locales.conversations.missed_call_from[localStorage.getItem('languageSelected')];
+                                break;
+                            // there shouldn't be other missed types
+                        }
+                        break;
+                }
+                break;
+            case 'outgoing':
+                switch(record.get('status')) {
+                    case 'answered':
+                        switch(record.get('call_type')) {
+                            case 'call':
+                                desc = Ngcp.csc.locales.conversations.successful_call_to[localStorage.getItem('languageSelected')];
+                                break;
+                            case 'fax':
+                                desc = Ngcp.csc.locales.conversations.successful_fax_to[localStorage.getItem('languageSelected')];
+                                break;
+                            case 'sms':
+                                desc = Ngcp.csc.locales.conversations.successful_sms_to[localStorage.getItem('languageSelected')];
+                                break;
+                            case 'chat':
+                                desc = Ngcp.csc.locales.conversations.sent_chat_message_to[localStorage.getItem('languageSelected')];
+                                break;
+                        }
+                        break;
+                    case 'missed':
+                        switch(record.get('call_type')) {
+                            case 'call':
+                                desc = Ngcp.csc.locales.conversations.unsuccessful_call_to[localStorage.getItem('languageSelected')];
+                                break;
+                            case 'fax':
+                                desc = Ngcp.csc.locales.conversations.unsuccessful_fax_to[localStorage.getItem('languageSelected')];
+                                break;
+                            // there shouldn't be other missed types
+                        }
+                        break;
+                }
+                break;
+            case 'forwarded':
+                switch(record.get('status')) {
+                    case 'answered':
+                        switch(record.get('call_type')) {
+                            case 'call':
+                                desc = Ngcp.csc.locales.conversations.successful_call_forward_to[localStorage.getItem('languageSelected')];
+                                break;
+                            case 'sms':
+                                desc = Ngcp.csc.locales.conversations.successful_sms_forward_to[localStorage.getItem('languageSelected')];
+                                break;
+                            // there shouldn't be other forwarded types
+                        }
+                        break;
+                    case 'missed':
+                        switch(record.get('call_type')) {
+                            case 'call':
+                                desc = Ngcp.csc.locales.conversations.unsuccessful_call_forward_to[localStorage.getItem('languageSelected')];
+                                break;
+                            // there shouldn't be other missed types
+                        }
+                        break;
+                }
+                break;
+        };
+        return '<div class="conv-description">' + desc + '</div>';
+    },
+
     renderCaller: function(val) {
         return '<div class="caller">' + val + '</div>';
     },
@@ -169,35 +262,27 @@ Ext.define('NgcpCsc.view.pages.conversations.ConversationsController', {
         }
         switch (record.get('call_type')) {
             case 'call':
-                icon = 'fa fa-phone green-icon fa-2x pointer';
+                icon = 'fa fa-phone-square green-icon pointer';
                 meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.tooltips.recall[localStorage.getItem('languageSelected')] + '"';
                 break;
             case 'voicemail':
-                return '<div id="voicemail-' + record.get('id') + '" class="card-icon play" data-callback="reproduceVoicemail"><i class="fa fa-play green-icon fa-2x pointer" aria-hidden="true"></i></div>'
+                return '<div id="voicemail-' + record.get('id') + '" class="card-icon play" data-callback="reproduceVoicemail"><i class="fa fa-play green-icon pointer" aria-hidden="true"></i></div>'
                 break;
             case 'fax':
                 meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.tooltips.send_fax[localStorage.getItem('languageSelected')] + '"';
-                icon = 'fa fa-fax green-icon fa-2x pointer';
+                icon = 'fa fa-file-text green-icon pointer';
                 break;
             case 'sms':
                 meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.tooltips.send_sms[localStorage.getItem('languageSelected')] + '"';
-                icon = 'fa fa-comment green-icon fa-2x pointer';
+                icon = 'fa fa-envelope green-icon pointer';
                 break;
             case 'chat':
                 meta.tdAttr = 'data-qtip="' + Ngcp.csc.locales.conversations.tooltips.chat[localStorage.getItem('languageSelected')] + '"';
-                icon = 'fa fa-wechat green-icon fa-2x pointer';
+                icon = 'fa fa-comment green-icon pointer';
                 break;
         };
         return Ext.String.format('<div class="{0}"></div>', icon);
     },
-    // libphonenumber returns country codes; i did not find yet
-    // a free library which returns city name from areaCode like
-    // +43-1-23456 => {country:'AT', city:'Vienna'}
-    // https://github.com/halt-hammerzeit/libphonenumber-js
-    renderCity: function(value, meta, record) {
-        var lookupData = new libphonenumber.parse(record.get('source_cli'));
-        return lookupData.country;
-    },
 
     saveSettings: function() {
         this.fireEvent('showmessage', true, Ngcp.csc.locales.common.save_success[localStorage.getItem('languageSelected')]);

classic/src/view/pages/conversations/ConversationsGrid.js

@@ -31,7 +31,9 @@ Ext.define('NgcpCsc.view.pages.conversations.CallsGrid', {
 
     viewConfig: {
         stripeRows: false,
-        columnLines: false
+        columnLines: false,
+        // TODO: Added, but does not enable selection inside rowbody
+        enableTextSelection: true
     },
 
     columns: {
@@ -45,19 +47,16 @@ Ext.define('NgcpCsc.view.pages.conversations.CallsGrid', {
         }, {
             dataIndex: 'call_type',
             renderer: 'renderCallTypeIcons',
-            width: 60
+            width: 40
+        }, {
+            dataIndex: 'call_type',
+            renderer: 'renderDescription',
+            flex: 2
         }, {
             text: (this._groupCallsByMonth) ? Ngcp.csc.locales.common.number[localStorage.getItem('languageSelected')] : '',
-            flex: 1,
             dataIndex: 'source_cli',
-            renderer: 'renderCaller'
+            renderer: 'renderCaller',
-        }, {
+            flex: 3
-            renderer: 'renderCity',
-            dataIndex: 'city',
-            flex: 1
-        }, {
-            renderer: 'renderShortCut',
-            width: 40
         }]
     },
     initComponent: function() {
@@ -66,28 +65,24 @@ Ext.define('NgcpCsc.view.pages.conversations.CallsGrid', {
             ftype: 'rowbody',
             getAdditionalData: function(data, idx, record, orig) {
                 var content;
-                var footer = "<div class='pointer' id='card-footer-" + record.get('id') + "'><div><hr class='fade'></div><div>" + Ngcp.csc.formatter.timeSince(record.get('start_time')) + " " + Ngcp.csc.locales.common.ago[localStorage.getItem('languageSelected')] + "</div></div>"
+                var footer = "<div class='pointer card-footer' id='card-footer-" + record.get('id') + "'><div></div><div>" + Ngcp.csc.formatter.timeSince(record.get('start_time')) + " " + Ngcp.csc.locales.common.ago[localStorage.getItem('languageSelected')] + "</div></div>"
                 var previewCharNum = Ext.os.is.Desktop ? 110 : me.getWidth() / 7.5;
                 switch (record.get('call_type')) {
                     case 'call':
                         content = '<div class="card-wrapper hidden pointer" id=' + record.get('id') + '>' +
                             '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.date[localStorage.getItem('languageSelected')] + '</b>: ' + Ext.util.Format.date(record.get('start_time'), "d.m.Y h:i:s") + ' </div>' +
-                            '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.conversations.direction[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('direction') + ' </div>' +
                             '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.duration[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('duration') + '</div>' +
-                            '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.filters.status[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('status') + '</div>' +
                             '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.conversations.cost[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('charges') + record.get('currency') + ' </div>' +
-                            '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.conversations.location[localStorage.getItem('languageSelected')] + '</b>: ' + me.up('conversations').getController().renderCity(null, null, record) + ' </div>' +
                             '<div class="card-icon-row">' +
-                            '<div id="sendSms-' + record.get('id') + '" class="card-icon" data-callback="sendSms" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.new_sms[localStorage.getItem('languageSelected')] + '"><i class="fa fa-comment green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
+                            '<div id="sendSms-' + record.get('id') + '" class="card-icon" data-callback="sendSms" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.new_sms[localStorage.getItem('languageSelected')] + '"><i class="fa fa-envelope green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
-                            '<div id="startChat-' + record.get('id') + '" class="card-icon" data-callback="startChat" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.chat[localStorage.getItem('languageSelected')] + '"><i class="fa fa-wechat green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
+                            '<div id="startChat-' + record.get('id') + '" class="card-icon" data-callback="startChat" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.chat[localStorage.getItem('languageSelected')] + '"><i class="fa fa-comment green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
                             '<div id="startCall-' + record.get('id') + '" class="card-icon" data-callback="startCall" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.recall[localStorage.getItem('languageSelected')] + '"><i class="fa fa-phone green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
                             '</div></div>';
                         break;
                     case 'voicemail':
                         content = '<div class="card-wrapper hidden pointer" id=' + record.get('id') + '>' +
-                            '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.caller[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('number') + '</div>' +
-                            '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.duration[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('duration') + ' </div>' +
                             '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.date[localStorage.getItem('languageSelected')] + '</b>: ' + Ext.util.Format.date(record.get('start_time'), "d.m.Y h:i:s") + '</div>' +
+                            '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.duration[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('duration') + ' </div>' +
                             '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.conversations.folder[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('folder') + ' </div>' +
                             '<div class="card-icon-row">' +
                             '<div id="startCall-' + record.get('id') + '" class="card-icon" data-callback="startCall" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.recall[localStorage.getItem('languageSelected')] + '"><i class="fa fa-phone green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
@@ -101,12 +96,11 @@ Ext.define('NgcpCsc.view.pages.conversations.CallsGrid', {
                             '<div class="card-wrapper hidden pointer" id=' + record.get('id') + '>' +
                             '<div class="card-data-row ">' + record.get('text') + '</div>' +
                             '<div class="card-data-row "><b>' + Ngcp.csc.locales.common.date[localStorage.getItem('languageSelected')] + '</b>: ' + Ext.util.Format.date(record.get('start_time'), "d.m.Y h:i:s") + ' </div>' +
-                            '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.conversations.direction[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('direction') + ' </div>' +
                             '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.conversations.cost[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('charges') + record.get('currency') + ' </div>' +
                             '<div class="card-icon-row">' +
-                            '<div id="startChat-' + record.get('id') + '" class="card-icon" data-callback="startChat" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.chat[localStorage.getItem('languageSelected')] + '"><i class="fa fa-wechat green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
+                            '<div id="sendSms-' + record.get('id') + '" class="card-icon" data-callback="sendSms" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.send_sms[localStorage.getItem('languageSelected')] + '"><i class="fa fa-envelope green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
+                            '<div id="startChat-' + record.get('id') + '" class="card-icon" data-callback="startChat" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.chat[localStorage.getItem('languageSelected')] + '"><i class="fa fa-comment green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
                             '<div id="startCall-' + record.get('id') + '" class="card-icon" data-callback="startCall" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.recall[localStorage.getItem('languageSelected')] + '"><i class="fa fa-phone green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
-                            '<div id="sendSms-' + record.get('id') + '" class="card-icon" data-callback="sendSms" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.send_sms[localStorage.getItem('languageSelected')] + '"><i class="fa fa-comment green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
                             '</div></div>';
                         break;
                     case 'chat':
@@ -116,17 +110,17 @@ Ext.define('NgcpCsc.view.pages.conversations.CallsGrid', {
                             '<div class="card-data-row  ">' + record.get('text') + '</div>' +
                             '<div class="card-data-row "><b>' + Ngcp.csc.locales.common.date[localStorage.getItem('languageSelected')] + '</b>: ' + Ext.util.Format.date(record.get('start_time'), "d.m.Y h:i:s") + ' </div>' +
                             '<div class="card-icon-row">' +
-                            '<div id="startChat-' + record.get('id') + '" class="card-icon" data-callback="startChat" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.chat[localStorage.getItem('languageSelected')] + '"><i class="fa fa-wechat green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
+                            '<div id="startChat-' + record.get('id') + '" class="card-icon" data-callback="startChat" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.chat[localStorage.getItem('languageSelected')] + '"><i class="fa fa-comment green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
                             '</div></div>';
                         break;
                     case 'fax':
                         content = '<div class="card-wrapper hidden" id=' + record.get('id') + '>' +
+                            '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.date[localStorage.getItem('languageSelected')] + '</b>: ' + Ext.util.Format.date(record.get('start_time'), "d.m.Y h:i:s") + ' </div>' +
                             '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.duration[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('duration') + '</div>' +
                             '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.conversations.pages[localStorage.getItem('languageSelected')] + '</b>: ' + record.get('pages') + '</div>' +
-                            '<div class="card-data-row"><span></span><b>' + Ngcp.csc.locales.common.date[localStorage.getItem('languageSelected')] + '</b>: ' + Ext.util.Format.date(record.get('start_time'), "d.m.Y h:i:s") + ' </div>' +
                             '<div class="card-icon-row">' +
-                            '<div id="downloadFax-' + record.get('id') + '" class="card-icon" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.download_fax[localStorage.getItem('languageSelected')] + '"><a href="resources/docs/fax.pdf" target="_blank"><i class="fa fa-file-pdf-o green-icon fa-2x pointer" aria-hidden="true"></i></a></div>' +
+                            '<div id="downloadFax-' + record.get('id') + '" class="card-icon" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.download_fax[localStorage.getItem('languageSelected')] + '"><a href="resources/docs/fax.pdf" target="_blank"><i class="fa fa-download green-icon fa-2x pointer" aria-hidden="true"></i></a></div>' +
-                            '<div id="sendFax-' + record.get('id') + '" class="card-icon" data-callback="sendFax" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.send_fax[localStorage.getItem('languageSelected')] + '"><i class="fa fa-fax green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
+                            '<div id="sendFax-' + record.get('id') + '" class="card-icon" data-callback="sendFax" data-tooltip="' + Ngcp.csc.locales.conversations.tooltips.send_fax[localStorage.getItem('languageSelected')] + '"><i class="fa fa-file-text green-icon fa-2x pointer" aria-hidden="true"></i></div>' +
                             '</div></div>';
                         break;
                 }

index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
     <meta charset="UTF-8">
 
-    <title>NgcpCsc Dashboard</title>
+    <title>Sipwise Customer Portal</title>
 
 
     <script type="text/javascript">

resources/data/conversations.json

@@ -7,8 +7,8 @@
         "duration": 19.488,
         "charges": 40.112,
         "currency": "€",
-        "status": "missed",
+        "status": "answered",
-        "direction": "outgoing",
+        "direction": "incoming",
         "folder": "INBOX",
         "start_time": "2017-02-09T12:05:33.384000000+02:00"
     }, {
@@ -48,6 +48,7 @@
         "uid": "840",
         "text": "This is a chat message. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
         "direction": "incoming",
+        "source_cli": "John Doe",
         "status": "answered",
         "start_time": "2017-01-30T10:05:33.384000000+02:00"
     }, {
@@ -58,7 +59,7 @@
         "duration": 11.342,
         "charges": 0.000,
         "currency": "€",
-        "status": "missed",
+        "status": "answered",
         "direction": "incoming",
         "folder": "Old",
         "start_time": "2017-01-15T10:05:33.384000000+02:00"

sass/src/Application.scss

@@ -28,7 +28,3 @@ body.x-ios.x-webview.x-portrait {
 .center-txt {
     text-align: center;
 }
-
-hr.fade {
-    border-top: 1px solid lightgray;
-}

sass/src/view/main/Main.scss

@@ -5,3 +5,16 @@
 .circular {
     border-radius: 50%;
 }
+
+body .x-mask {
+    background: url(/resources/images/background.jpg) no-repeat center center fixed;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+}
+
+#login-title-body {
+    text-align: center;
+    font-size: 1.5em;
+}