From 2e246adece01f81d133c8b4d02423ee38a5a072a Mon Sep 17 00:00:00 2001
From: Robert Axelsen <raxelsen@sipwise.com>
Date: Thu, 1 Jun 2017 11:23:05 +0200
Subject: [PATCH] TT#16852 Csc call blocking toggle fixes
What has been done:
1. Change to capital first for Allow/Block and Hide/Show
2. Reverse the coloring of the Allow/Block text
3. Adjust toggle section html and listener class, to solve issue
with doubleclicking Allow/Block text "spawning" new icons,
and make for a cleaner code
4. Add notification messages for toggle icon clicks
5. Refactor the toggleBlockCalls() controller to account for all
properly show messages also for privacy module
6. Remove some unused code in controller and locales
Change-Id: I422a43733a9090d2bbe17cb6279af4093377e429
---
app/utils/locales.js | 84 +++++++++----------
.../view/pages/callblocking/CallBlocking.scss | 3 +
.../src/view/pages/reminder/Reminder.scss | 18 ++++
.../view/pages/callblocking/CallBlocking.js | 8 +-
.../callblocking/CallBlockingController.js | 45 +++++-----
classic/src/view/pages/reminder/Reminder.js | 6 +-
.../view/pages/reminder/ReminderController.js | 2 +-
7 files changed, 96 insertions(+), 70 deletions(-)
diff --git a/app/utils/locales.js b/app/utils/locales.js
index 919754a2..25a96e8c 100644
--- a/app/utils/locales.js
+++ b/app/utils/locales.js
@@ -507,19 +507,33 @@ Ext.define('Ngcp.csc.locales', {
fr: 'To block anonymous calls you may just submit the empty string.',
sp: 'To block anonymous calls you may just submit the empty string.'
},
- allow_mode_success: {
- en: 'Allow mode successfully set.',
- it: 'Allow mode successfully set.',
- de: 'Allow mode successfully set.',
- fr: 'Allow mode successfully set.',
- sp: 'Allow mode successfully set.'
- },
- block_mode_success: {
- en: 'Block mode successfully set.',
- it: 'Block mode successfully set.',
- de: 'Block mode successfully set.',
- fr: 'Block mode successfully set.',
- sp: 'Block mode successfully set.'
+ mode_allow_success: {
+ en: 'Mode set to allow.',
+ it: 'Mode set to allow.',
+ de: 'Mode set to allow.',
+ fr: 'Mode set to allow.',
+ sp: 'Mode set to allow.'
+ },
+ mode_block_success: {
+ en: 'Mode set to block.',
+ it: 'Mode set to block.',
+ de: 'Mode set to block.',
+ fr: 'Mode set to block.',
+ sp: 'Mode set to block.'
+ },
+ number_show_success: {
+ en: 'Privacy set to show own number.',
+ it: 'Privacy set to show own number.',
+ de: 'Privacy set to show own number.',
+ fr: 'Privacy set to show own number.',
+ sp: 'Privacy set to show own number.'
+ },
+ number_hide_success: {
+ en: 'Privacy set to hide own number.',
+ it: 'Privacy set to hide own number.',
+ de: 'Privacy set to hide own number.',
+ fr: 'Privacy set to hide own number.',
+ sp: 'Privacy set to hide own number.'
},
enable_or_disable: {
en: 'Enable or disable number',
@@ -542,20 +556,6 @@ Ext.define('Ngcp.csc.locales', {
fr: 'Please enter a number.',
sp: 'Please enter a number.'
},
- hide_mode_on: {
- en: 'Hide mode succcessfully turned on.',
- it: 'Hide mode succcessfully turned on.',
- de: 'Hide mode succcessfully turned on.',
- fr: 'Hide mode succcessfully turned on.',
- sp: 'Hide mode succcessfully turned on.'
- },
- hide_mode_off: {
- en: 'Hide mode succcessfully turned off.',
- it: 'Hide mode succcessfully turned off.',
- de: 'Hide mode succcessfully turned off.',
- fr: 'Hide mode succcessfully turned off.',
- sp: 'Hide mode succcessfully turned off.'
- },
allow: {
en: 'Allow',
it: 'Allow',
@@ -615,11 +615,11 @@ Ext.define('Ngcp.csc.locales', {
sp: 'Allow'
},
suffix: {
- en: 'block',
- it: 'block',
- de: 'block',
- fr: 'block',
- sp: 'block'
+ en: 'Block',
+ it: 'Block',
+ de: 'Block',
+ fr: 'Block',
+ sp: 'Block'
}
},
outgoing: {
@@ -638,11 +638,11 @@ Ext.define('Ngcp.csc.locales', {
sp: 'Allow'
},
suffix: {
- en: 'block',
- it: 'block',
- de: 'block',
- fr: 'block',
- sp: 'block'
+ en: 'Block',
+ it: 'Block',
+ de: 'Block',
+ fr: 'Block',
+ sp: 'Block'
}
},
privacy: {
@@ -661,11 +661,11 @@ Ext.define('Ngcp.csc.locales', {
sp: 'Show own number'
},
suffix: {
- en: 'hide own number',
- it: 'hide own number',
- de: 'hide own number',
- fr: 'hide own number',
- sp: 'hide own number'
+ en: 'Hide own number',
+ it: 'Hide own number',
+ de: 'Hide own number',
+ fr: 'Hide own number',
+ sp: 'Hide own number'
}
}
}
diff --git a/classic/sass/src/view/pages/callblocking/CallBlocking.scss b/classic/sass/src/view/pages/callblocking/CallBlocking.scss
index 37408c11..cf047cff 100644
--- a/classic/sass/src/view/pages/callblocking/CallBlocking.scss
+++ b/classic/sass/src/view/pages/callblocking/CallBlocking.scss
@@ -23,4 +23,7 @@
.grey {
color: grey;
}
+ .toggle-icon {
+ display: inline;
+ }
}
diff --git a/classic/sass/src/view/pages/reminder/Reminder.scss b/classic/sass/src/view/pages/reminder/Reminder.scss
index 3f86ccb3..c9c722c4 100644
--- a/classic/sass/src/view/pages/reminder/Reminder.scss
+++ b/classic/sass/src/view/pages/reminder/Reminder.scss
@@ -9,3 +9,21 @@
color: $base-color;
font: 500 14px/18px var(--font-family);
}
+
+.toggle-section {
+ .x-fa {
+ color: $base-color;
+ }
+ .toggle-prefix {
+ margin-right: 10px;
+ }
+ .toggle-suffix {
+ margin-left: 10px;
+ }
+ .grey {
+ color: grey;
+ }
+ .toggle-icon {
+ display: inline;
+ }
+}
diff --git a/classic/src/view/pages/callblocking/CallBlocking.js b/classic/src/view/pages/callblocking/CallBlocking.js
index 695be84a..b7855b0e 100644
--- a/classic/src/view/pages/callblocking/CallBlocking.js
+++ b/classic/src/view/pages/callblocking/CallBlocking.js
@@ -11,7 +11,7 @@ Ext.define('NgcpCsc.view.pages.callblocking.CallBlocking', {
click: {
fn: 'onIconClicked',
element: 'el',
- delegate: 'div.toggle-section'
+ delegate: 'div.toggle-icon'
},
afterrender: 'afterCBRendered'
},
@@ -19,7 +19,7 @@ Ext.define('NgcpCsc.view.pages.callblocking.CallBlocking', {
initComponent: function() {
var instructionText = window.location.hash === '#callblocking/incoming' ? Ngcp.csc.locales.callblocking.new_entry_instructions[localStorage.getItem('languageSelected')] + ' ' + Ngcp.csc.locales.callblocking.new_entry_anonymous[localStorage.getItem('languageSelected')] : Ngcp.csc.locales.callblocking.new_entry_instructions[localStorage.getItem('languageSelected')];
var vm = this.getViewModel();
- var submoduleStates = vm.get(this._vmPrefix + 'block_mode') === 'on' ? ['', 'on', ' grey'] : [' grey', 'off', ''];
+ var submoduleStates = vm.get(this._vmPrefix + 'block_mode') === 'on' ? [' grey', 'on', ''] : ['', 'off', ' grey'];
var submoduleName = this._vmPrefix.slice(0, -1);
this.dockedItems = [{
@@ -37,9 +37,9 @@ Ext.define('NgcpCsc.view.pages.callblocking.CallBlocking', {
margin: '0 0 10 0'
}, {
xtype: 'panel',
- html: '<div id="toggleBlockCalls-' + submoduleName + '" class="toggle-section" data-callback="toggleBlockCalls">' +
+ html: '<div id="toggleBlockCalls-' + submoduleName + '" class="toggle-section">' +
'<span id="toggleTextPrefix-' + submoduleName + '" class="toggle-prefix' + submoduleStates[0] + '">' + Ngcp.csc.locales.callblocking.submodules[submoduleName].prefix[localStorage.getItem('languageSelected')] + '</span>' +
- '<i id="iconAllowBlock-' + submoduleName + '" class="pointer toggle-icon ' + Ngcp.csc.icons.toggle[submoduleStates[1] + '2x'] + '" aria-hidden="true" data-qtip="' + Ngcp.csc.locales.callblocking.enable_or_disable[localStorage.getItem('languageSelected')] + '"></i>' +
+ '<div class="toggle-icon" data-callback="toggleBlockCalls"><i id="iconAllowBlock-' + submoduleName + '" class="pointer ' + Ngcp.csc.icons.toggle[submoduleStates[1] + '2x'] + '" aria-hidden="true" data-qtip="' + Ngcp.csc.locales.callblocking.enable_or_disable[localStorage.getItem('languageSelected')] + '"></i></div>' +
'<span id="toggleTextSuffix-' + submoduleName + '" class="toggle-suffix' + submoduleStates[2] + '">' + Ngcp.csc.locales.callblocking.submodules[submoduleName].suffix[localStorage.getItem('languageSelected')] + '</span>' +
'</div>'
}, {
diff --git a/classic/src/view/pages/callblocking/CallBlockingController.js b/classic/src/view/pages/callblocking/CallBlockingController.js
index 238a11c6..9e163d65 100644
--- a/classic/src/view/pages/callblocking/CallBlockingController.js
+++ b/classic/src/view/pages/callblocking/CallBlockingController.js
@@ -119,26 +119,6 @@ Ext.define('NgcpCsc.view.pages.callblocking.CallBlockingController', {
vm.set('new_number', '');
},
- clickAllowModeButton: function() {
- var vm = this.getViewModel();
- var blockAllowMode = vm.get('block_mode');
- if (blockAllowMode === 'allow') {
- this.fireEvent('showmessage', true, Ngcp.csc.locales.callblocking.allow_mode_success[localStorage.getItem('languageSelected')]);
- } else if (blockAllowMode === 'block') {
- this.fireEvent('showmessage', true, Ngcp.csc.locales.callblocking.block_mode_success[localStorage.getItem('languageSelected')]);
- };
- },
-
- clickHideModeButton: function() {
- var vm = this.getViewModel();
- var hideMode = vm.get('hide_mode');
- if (hideMode === 'on') {
- this.fireEvent('showmessage', true, Ngcp.csc.locales.callblocking.hide_mode_on[localStorage.getItem('languageSelected')]);
- } else if (hideMode === 'off') {
- this.fireEvent('showmessage', true, Ngcp.csc.locales.callblocking.hide_mode_off[localStorage.getItem('languageSelected')]);
- };
- },
-
deleteRecord: function(event) {
var rec = event.record;
var currentRoute = window.location.hash;
@@ -169,6 +149,7 @@ Ext.define('NgcpCsc.view.pages.callblocking.CallBlockingController', {
},
toggleBlockCalls: function(event) {
+ var me = this;
var vm = this.getViewModel();
var submoduleName = event.getTarget().id.split('-')[1];
var classList = event.target.classList;
@@ -182,6 +163,30 @@ Ext.define('NgcpCsc.view.pages.callblocking.CallBlockingController', {
classList.add('fa-toggle-' + newValueToUse);
prefixElementClassList.toggle('grey');
suffixElementClassList.toggle('grey');
+ switch (newValueToUse) {
+ case ('on') :
+ switch (submoduleName) {
+ case 'incoming':
+ case 'outgoing':
+ me.fireEvent('showmessage', true, Ngcp.csc.locales.callblocking.mode_block_success[localStorage.getItem('languageSelected')]);
+ break;
+ case 'privacy':
+ me.fireEvent('showmessage', true, Ngcp.csc.locales.callblocking.number_hide_success[localStorage.getItem('languageSelected')]);
+ break;
+ };
+ break;
+ case ('off'):
+ switch (submoduleName) {
+ case 'incoming':
+ case 'outgoing':
+ me.fireEvent('showmessage', true, Ngcp.csc.locales.callblocking.mode_allow_success[localStorage.getItem('languageSelected')]);
+ break;
+ case 'privacy':
+ me.fireEvent('showmessage', true, Ngcp.csc.locales.callblocking.number_show_success[localStorage.getItem('languageSelected')]);
+ break;
+ };
+ break;
+ };
}
});
diff --git a/classic/src/view/pages/reminder/Reminder.js b/classic/src/view/pages/reminder/Reminder.js
index 68935686..b5d018d2 100644
--- a/classic/src/view/pages/reminder/Reminder.js
+++ b/classic/src/view/pages/reminder/Reminder.js
@@ -11,7 +11,7 @@ Ext.define('NgcpCsc.view.pages.reminder.Reminder', {
click: {
fn: 'onIconClicked',
element: 'el',
- delegate: 'div.toggle-section'
+ delegate: 'div.toggle-icon'
}
},
@@ -36,9 +36,9 @@ Ext.define('NgcpCsc.view.pages.reminder.Reminder', {
{
xtype: 'panel',
margin: '0 0 15 0',
- html: '<div id="toggleReminderActive" class="toggle-section" data-callback="toggleReminderActive">' +
+ html: '<div id="toggleReminderActive" class="toggle-section">' +
'<span id="toggleTextPrefixReminder" class="toggle-prefix' + submoduleStates[0] + '">' + Ngcp.csc.locales.reminder.active[localStorage.getItem('languageSelected')] + '</span>' +
- '<i id="iconAllowBlock-reminder" class="pointer toggle-icon ' + Ngcp.csc.icons.toggle[submoduleStates[1] + '2x'] + '" aria-hidden="true" data-qtip="' + Ngcp.csc.locales.reminder.activate_or_deactivate[localStorage.getItem('languageSelected')] + '"></i>' +
+ '<div class="toggle-icon" data-callback="toggleReminderActive"><i id="iconAllowBlock-reminder" class="pointer toggle-icon ' + Ngcp.csc.icons.toggle[submoduleStates[1] + '2x'] + '" aria-hidden="true" data-qtip="' + Ngcp.csc.locales.reminder.activate_or_deactivate[localStorage.getItem('languageSelected')] + '"></i></div>' +
'<span id="toggleTextSuffixReminder" class="toggle-suffix' + submoduleStates[2] + '">' + Ngcp.csc.locales.reminder.inactive[localStorage.getItem('languageSelected')] + '</span>' +
'</div>'
}, {
diff --git a/classic/src/view/pages/reminder/ReminderController.js b/classic/src/view/pages/reminder/ReminderController.js
index 9912720f..7b08b2b3 100644
--- a/classic/src/view/pages/reminder/ReminderController.js
+++ b/classic/src/view/pages/reminder/ReminderController.js
@@ -7,7 +7,7 @@ Ext.define('NgcpCsc.view.pages.reminder.ReminderController', {
var currentReminderIsMode = vm.get('reminder.reminder_status');
switch (currentReminderIsMode) {
case false:
- this.fireEvent('showmessage', false, Ngcp.csc.locales.reminder.reminder_set_to_inactive[localStorage.getItem('languageSelected')]);
+ this.fireEvent('showmessage', true, Ngcp.csc.locales.reminder.reminder_set_to_inactive[localStorage.getItem('languageSelected')]);
break;
case true:
this.fireEvent('showmessage', true, Ngcp.csc.locales.reminder.reminder_set_to_active[localStorage.getItem('languageSelected')]);