Merge branch 'master' of github.com:2600hz/monster-ui-voip

i18n/en-US.json

@@ -918,9 +918,7 @@
 			"hangup1": "Hangup",
 			"hangup2": "Cause",
 			"details1": "Call",
-			"details2": "Details",
-			"report1": "Submit",
-			"report2": "Report"
+			"actions": "Actions"
 		},
 		"reportCall": "Report Call",
 		"loaderMessage": "Scroll down or click here to load additional Call Logs.",
@@ -937,7 +935,14 @@
 		"thisDay": "Today",
 		"custom": "Custom",
 		"callsFrom": "Showing calls from",
-		"callsTo": "to"
+		"callsTo": "to",
+		"__comment": "UI-",
+		"__version": "v4.0",
+		"loading": "Loading additional information...",
+		"actions": {
+			"report": "Report Call",
+			"details": "Technical Details"
+		}
 	},
 
 	"myOffice": {
@@ -1059,7 +1064,10 @@
 			"call_recording": "Call Recording",
 			"__comment": "UI-1395: Added voicemail[single_mailbox_login] feature code",
 			"__version": "3.20",
-			"voicemail[single_mailbox_login]": "Check Voicemail (auto login)"
+			"voicemail[single_mailbox_login]": "Check Voicemail (auto login)",
+			"__comment": "UI-2256: adding move feature code",
+			"__version": "4.0",
+			"move": "Move"
 		},
 		"__comment": "UI-1028, v3.20_s0: Added categories for the feature codes.",
 		"categories": {

style/app.css

@@ -14,47 +14,4 @@
 
 #voip_container .left-menu > div {
 	margin-top: 10px;
-}
-
-/* Feature Popups */
-.feature-popup-container {
-	width: 510px;
-}
-
-.feature-popup-container .actions,
-.feature-popup-container .content {
-	padding: 15px 25px;
-	border-top: 1px solid #ccc;
-}
-
-.feature-popup-container .actions .monster-link {
-	margin-right: 10px;
-}
-
-.feature-popup-container .switch {
-	display: inline-block;
-	margin-left: 15px;
-}
-
-.feature-popup-container .content.disabled {
-	display: none;
-}
-
-.feature-popup-container form {
-	margin-bottom: 40px;
-}
-
-.feature-popup-container form .main-line {
-	position: relative;
-	height: 70px; /* Adding extra space for validation messages */
-	line-height: 60px;
-}
-
-.feature-popup-container form .main-line label.monster-invalid {
-	top: 45px;
-}
-
-.feature-popup-container input,
-.feature-popup-container select {
-	margin-left: 10px;
 }

submodules/callLogs/callLogs.css

@@ -82,11 +82,11 @@
 #call_logs_container .grid-row-group .grid-row:not(:first-of-type) {
 	border-top: solid 1px #e3e3e3;
 }
-#call_logs_container .grid-row-group:last-of-type:not(.open) .a-leg {
+#call_logs_container .grid-row-group:last-of-type:not(.open) .main-leg {
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 }
-#call_logs_container .grid-row-group.open:last-of-type .b-leg:last-of-type {
+#call_logs_container .grid-row-group.open:last-of-type .extra-leg:last-of-type {
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 }
@@ -110,21 +110,37 @@
 #call_logs_container .grid-row.no-match {
 	display: none;
 }
-#call_logs_container .grid-row-group:not(.open) .grid-row.a-leg.has-b-legs > .grid-cell:first-child {
+#call_logs_container .grid-row-group:not(.open) .grid-row.main-leg > .grid-cell:first-child {
 	border-left: solid 2px #22a5ff;
 }
 #call_logs_container .grid-row-group.open .grid-row > .grid-cell:first-child {
 	border-left: solid 2px #44cc44;
 }
-#call_logs_container .grid-row.a-leg.has-b-legs:hover {
+#call_logs_container .grid-row.main-leg:hover {
 	background-color: #eee;
 	cursor: pointer;
 }
-#call_logs_container .grid-row.b-leg {
-	background-color: #fcfcfc;
+#call_logs_container .grid-row-group .extra-legs {
 	display: none;
 }
 
+#call_logs_container .grid-row-group .extra-legs .loading-container {
+	background: #fff;
+	border-left: 1px solid #ddd;
+	border-top: 1px solid #ddd;
+	padding: 15px;
+	text-align: center;
+}
+
+#call_logs_container .grid-row-group .extra-legs .loading-container i {
+	margin-left: 10px;
+}
+
+#call_logs_container .grid-row.extra-leg {
+	background-color: #fcfcfc;
+	border-top: solid 1px #e3e3e3;
+}
+
 #call_logs_container .grid-cell {
 	display: inline-block;
 	padding: 10px 5px;
@@ -144,10 +160,10 @@
 	width: 12%;
 }
 #call_logs_container .grid-cell.from {
-	width: 20%;
+	width: 25%;
 }
 #call_logs_container .grid-cell.to {
-	width: 20%;
+	width: 25%;
 }
 #call_logs_container .grid-cell.duration {
 	width: 9%;
@@ -155,9 +171,6 @@
 #call_logs_container .grid-cell.hangup {
 	width: 15%;
 }
-#call_logs_container .call-logs-grid.no-report-link .grid-cell.hangup {
-	width: 25%;
-}
 #call_logs_container .grid-cell.full-width {
 	width: 100%;
 }
@@ -166,16 +179,14 @@
 	font-size: 12px;
 	font-style: italic;
 }
-#call_logs_container .grid-cell.details {
+#call_logs_container .grid-cell.actions {
 	width: 10%;
 }
-#call_logs_container .grid-cell.details i:hover {
+#call_logs_container .grid-cell.actions i:hover {
 	color: #22a5ff;
 	cursor: pointer;
 }
-#call_logs_container .grid-cell.report {
-	width: 10%;
-}
+
 #call_logs_container .sub-cell {
 	height: 20px;
 	overflow: hidden;

submodules/callLogs/callLogs.js

@@ -42,6 +42,7 @@ define(function(require){
 			delete self.loneBLegs;
 			self.callLogsGetCdrs(fromDate, toDate, function(cdrs, nextStartKey) {
 				cdrs = self.callLogsFormatCdrs(cdrs);
+
 				dataTemplate.cdrs = cdrs;
 				template = $(monster.template(self, 'callLogs-layout', dataTemplate));
 
@@ -145,7 +146,7 @@ define(function(require){
 											 + cdr.fromNumber + "|" + cdr.toName + "|"
 											 + cdr.toNumber + "|" + cdr.hangupCause + "|"
 											 + callIds).toLowerCase(),
-								rowGroup = template.find('.grid-row.a-leg[data-id="'+cdr.id+'"]').parents('.grid-row-group');
+								rowGroup = template.find('.grid-row.main-leg[data-id="'+cdr.id+'"]').parents('.grid-row-group');
 							if(searchString.indexOf(searchValue) >= 0) {
 								matchedResults = true;
 								rowGroup.show();
@@ -174,20 +175,38 @@ define(function(require){
 				}
 			});
 
-			template.on('click', '.a-leg.has-b-legs', function(e) {
-				var rowGroup = $(this).parents('.grid-row-group');
+			template.on('click', '.grid-row.main-leg', function(e) {
+				var $this = $(this),
+					rowGroup = $this.parents('.grid-row-group'),
+					callId = $this.data('id'),
+					extraLegs = rowGroup.find('.extra-legs');
+
 				if(rowGroup.hasClass('open')) {
 					rowGroup.removeClass('open');
-					rowGroup.find('.b-leg').slideUp();
+					extraLegs.slideUp();
 				} else {
+					// Reset all slidedDown legs
 					template.find('.grid-row-group').removeClass('open');
-					template.find('.b-leg').slideUp();
+					template.find('.extra-legs').slideUp();
+
+					// Slide down current leg
 					rowGroup.addClass('open');
-					rowGroup.find('.b-leg').slideDown();
+					extraLegs.slideDown();
+
+					if(!extraLegs.hasClass('data-loaded')) {
+						self.callLogsGetLegs(callId, function(cdrs) {
+							var formattedCdrs = self.callLogsFormatCdrs(cdrs);
+
+							rowGroup.find('.extra-legs')
+									.empty()
+									.addClass('data-loaded')
+									.append(monster.template(self, 'callLogs-interactionLegs', { cdrs: formattedCdrs }));
+						});
+					}
 				}
 			});
 
-			template.on('click', '.grid-cell.details i', function(e) {
+			template.on('click', '.grid-cell.actions .details-cdr', function(e) {
 				e.stopPropagation();
 				var cdrId = $(this).parents('.grid-row').data('id');
 				self.callLogsShowDetailsPopup(cdrId);
@@ -285,49 +304,28 @@ define(function(require){
 			}
 
 			self.callApi({
-				resource: 'cdrs.list',
+				resource: 'cdrs.listByInteraction',
 				data: {
 					accountId: self.accountId,
 					filters: filters
 				},
 				success: function(data, status) {
-					var cdrs = {},
-						groupedLegs = _.groupBy(data.data, function(val) { return (val.direction === 'inbound' || !val.bridge_id) ? 'aLegs' : 'bLegs' });
-
-					if(self.lastALeg) {
-						groupedLegs.aLegs.splice(0, 0, self.lastALeg);
-					}
-					// if(self.loneBLegs && self.loneBLegs.length) {
-					// 	groupedLegs.bLegs = self.loneBLegs.concat(groupedLegs.bLegs);
-					// }
-					if(data['next_start_key']) {
-						self.lastALeg = groupedLegs.aLegs.pop();
-					}
-
-					_.each(groupedLegs.aLegs, function(val) {
-						var call_id = val.call_id || val.id;
-						cdrs[call_id] = { aLeg: val, bLegs: {} };
-					});
+					callback(data.data, data['next_start_key']);
+				}
+			});
+		},
 
-					if(self.loneBLegs && self.loneBLegs.length > 0) {
-						_.each(self.loneBLegs, function(val) {
-							if('other_leg_call_id' in val && val.other_leg_call_id in cdrs) {
-								cdrs[val.other_leg_call_id].bLegs[val.id] = val;
-							}
-						});
-					}
-					self.loneBLegs = [];
-					_.each(groupedLegs.bLegs, function(val) {
-						if('other_leg_call_id' in val) {
-							if(val.other_leg_call_id in cdrs) {
-								cdrs[val.other_leg_call_id].bLegs[val.id] = val;
-							} else {
-								self.loneBLegs.push(val);
-							}
-						}
-					});
+		callLogsGetLegs: function(callId, callback) {
+			var self = this;
 
-					callback(cdrs, data['next_start_key']);
+			self.callApi({
+				resource: 'cdrs.listLegs',
+				data: {
+					accountId: self.accountId,
+					callId: callId
+				},
+				success: function(data) {
+					callback && callback(data.data);
 				}
 			});
 		},
@@ -387,20 +385,8 @@ define(function(require){
 					};
 				};
 
-			_.each(cdrs, function(val, key) {
-				if(!('aLeg' in val)) {
-					// Handling lone b-legs as standalone a-legs
-					_.each(val.bLegs, function(v, k) {
-						result.push($.extend({ bLegs: [] }, formatCdr(v)));
-					});
-				} else {
-					var cdr = formatCdr(val.aLeg);
-					cdr.bLegs = [];
-					_.each(val.bLegs, function(v, k) {
-						cdr.bLegs.push(formatCdr(v));
-					});
-					result.push(cdr);
-				}
+			_.each(cdrs, function(v) {
+				result.push(formatCdr(v));
 			});
 
 			result.sort(function(a, b) {

submodules/featureCodes/featureCodes.js

@@ -48,7 +48,8 @@ define(function(require){
 				"call_waiting[action=enable]",
 				"call_waiting[action=disable]",
 				"sound_test_service",
-				"call_recording"
+				"call_recording",
+				"move"
 			]
 		},
 
@@ -98,7 +99,9 @@ define(function(require){
 			_.each(featureCodeData, function(callflow) {
 				// Some old callflows have been created with the feature code key, so we had the check to make sure they also have a name associated
 				if(callflow.featurecode.hasOwnProperty('name')) {
-					var category = 'misc';
+					var category = 'misc',
+						hasStar = (callflow.hasOwnProperty('numbers') && callflow.numbers.length && callflow.numbers[0].substr(0,1) === '*') || (callflow.hasOwnProperty('patterns') && callflow.patterns.length && callflow.patterns[0].substr(0,3) === '^\\*');
+
 					_.find(self.categories, function(cat, key) {
 						if(cat.indexOf(callflow.featurecode.name) >= 0) {
 							category = key;
@@ -114,10 +117,12 @@ define(function(require){
 						};
 					}
 
+					console.log(hasStar);
 					featureCodes[category].codes.push({
 						key: callflow.featurecode.name,
 						name: self.i18n.active().featureCodes.labels[callflow.featurecode.name] || callflow.featurecode.name,
-						number: callflow.featurecode.number ? callflow.featurecode.number.replace(/\\/g,'') : ''
+						number: callflow.featurecode.number ? callflow.featurecode.number.replace(/\\/g,'') : '',
+						hasStar: hasStar
 					});
 				}
 			});

submodules/groups/groups.css

@@ -441,7 +441,7 @@
 }
 
 #groups_container .detail-features .features-grid .feature .fa-wrapper,
-.feature-popup-container .feature-fa-wrapper{
+.monster-feature-popup-container .feature-fa-wrapper{
 	display: inline-block;
 	margin: 20px;
 	width: 60px;
@@ -463,7 +463,7 @@
 }
 
 #groups_container .detail-features .features-grid .feature .fa-wrapper.active,
-.feature-popup-container .feature-fa-wrapper.active{
+.monster-feature-popup-container .feature-fa-wrapper.active{
 	background: #19d332; /* Old browsers */
 	background: -moz-radial-gradient(center, ellipse cover,  hsl(128,79%,46%) 0%, hsl(132,46%,46%) 61%, hsl(0,0%,0%) 99%); /* FF3.6+ */
 	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,hsl(128,79%,46%)), color-stop(61%,hsl(132,46%,46%)), color-stop(99%,hsl(0,0%,0%))); /* Chrome,Safari4+ */
@@ -480,99 +480,99 @@
 }
 
 /* Call Recording Feature */
-.feature-popup-container[data-feature="call_recording"] form {
+.monster-feature-popup-container[data-feature="call_recording"] form {
 	margin-bottom: 0;
 }
-.feature-popup-container[data-feature="call_recording"] form > div {
+.monster-feature-popup-container[data-feature="call_recording"] form > div {
 	position: relative;
 	margin-bottom: 10px;
 }
-.feature-popup-container[data-feature="call_recording"] form span {
+.monster-feature-popup-container[data-feature="call_recording"] form span {
 	display: inline-block;
 	width: 120px;
 	vertical-align: text-bottom;
 	text-align: right;
 }
-.feature-popup-container[data-feature="call_recording"] form label.monster-invalid {
+.monster-feature-popup-container[data-feature="call_recording"] form label.monster-invalid {
 	top: 30px;
 	left: 130px;
 }
 
 /* Ringback Feature */
-.feature-popup-container[data-feature="ringback"] {
+.monster-feature-popup-container[data-feature="ringback"] {
 	width: 516px;
 }
 
-.feature-popup-container[data-feature="ringback"] .media-dropdown {
+.monster-feature-popup-container[data-feature="ringback"] .media-dropdown {
 	margin-bottom: 0px;
 }
-.feature-popup-container[data-feature="ringback"] .upload-toggle {
+.monster-feature-popup-container[data-feature="ringback"] .upload-toggle {
 	margin-left: 10px;
 	width: 117px;
 }
-.feature-popup-container[data-feature="ringback"] .upload-div {
+.monster-feature-popup-container[data-feature="ringback"] .upload-div {
 	display: none;
 	margin-top: 20px;
 }
-.feature-popup-container[data-feature="ringback"] .upload-div .upload-input {
+.monster-feature-popup-container[data-feature="ringback"] .upload-div .upload-input {
 	margin: 0;
 	width: 330px;
 }
-.feature-popup-container[data-feature="ringback"] .upload-div button.upload-action {
+.monster-feature-popup-container[data-feature="ringback"] .upload-div button.upload-action {
 	margin-left: 10px;
 	padding-left: 19px;
 	padding-right: 19px;
 }
 
-.feature-popup-container[data-feature="ringback"] .upload-div button > i {
+.monster-feature-popup-container[data-feature="ringback"] .upload-div button > i {
 	margin-right: 0;
 	padding-right: 0;
 }
 
-.feature-popup-container[data-feature="ringback"] .upload-div .file-upload {
+.monster-feature-popup-container[data-feature="ringback"] .upload-div .file-upload {
 	margin: 0;
 }
-.feature-popup-container[data-feature="ringback"] .upload-div .file-upload > input {
+.monster-feature-popup-container[data-feature="ringback"] .upload-div .file-upload > input {
 	margin: 0;
 	width: 205px;
 	padding: 6px;
 }
 
 /* Next Action Feature */
-.feature-popup-container[data-feature="next_action"] {
+.monster-feature-popup-container[data-feature="next_action"] {
 	width: 540px;
 }
 
-.feature-popup-container[data-feature="next_action"] .next-action > * {
+.monster-feature-popup-container[data-feature="next_action"] .next-action > * {
 	vertical-align: middle;
 	margin: 0;
 }
 
-.feature-popup-container[data-feature="next_action"] .next-action > *:not(:first-child) {
+.monster-feature-popup-container[data-feature="next_action"] .next-action > *:not(:first-child) {
 	margin-left: 10px;
 }
 
 
 /* Allow Call Forward Feature */
-.feature-popup-container[data-feature="forward"] .help-box {
+.monster-feature-popup-container[data-feature="forward"] .help-box {
 	margin: 5px 20px 20px
 }
 
 /* CID Prepend Feature */
-.feature-popup-container[data-feature="prepend"] form {
+.monster-feature-popup-container[data-feature="prepend"] form {
 	margin-bottom: 0;
 }
-.feature-popup-container[data-feature="prepend"] form > div {
+.monster-feature-popup-container[data-feature="prepend"] form > div {
 	position: relative;
 	margin-bottom: 10px;
 }
-.feature-popup-container[data-feature="prepend"] form span {
+.monster-feature-popup-container[data-feature="prepend"] form span {
 	display: inline-block;
 	width: 160px;
 	vertical-align: middle;
 	text-align: right;
 }
-.feature-popup-container[data-feature="prepend"] form input {
+.monster-feature-popup-container[data-feature="prepend"] form input {
 	margin-bottom: 0;
 	width: 100px;
 }

submodules/strategy/strategy.js

@@ -142,6 +142,12 @@ define(function(require){
 				pattern: '^\\*5([0-9]*)$',
 				moduleName: 'park',
 				actionName: 'retrieve'
+			},
+			{
+				name: 'move',
+				number: '6683',
+				callflowNumber: '6683',
+				moduleName: 'move'
 			}
 		],
 
@@ -2879,9 +2885,7 @@ define(function(require){
 						var callflow = {
 							flow: {
 								children: {},
-								data: $.extend(true, (featureCode.extraData || {}), {
-									action: featureCode.actionName
-								}),
+								data: featureCode.extraData || {},
 								module: featureCode.moduleName
 							},
 							featurecode: {
@@ -2890,6 +2894,12 @@ define(function(require){
 							}
 						};
 
+						if(featureCode.hasOwnProperty('actionName')) {
+							callflow.flow.data = $.extend(callflow.flow.data, {
+								action: featureCode.actionName
+							});
+						}
+
 						if('pattern' in featureCode) {
 							callflow.patterns = [ featureCode.pattern ];
 						}
@@ -3119,13 +3129,15 @@ define(function(require){
 							resource: 'callflow.list',
 							data: {
 								accountId: self.accountId,
-								filters: { 'has_key':'owner_id' }
+								filters: { 
+									has_key:'owner_id',
+									filter_type: 'mainUserCallflow',
+									paginate: 'false'
+								}
 							},
 							success: function(data, status) {
-								var userCallflows = _.filter(data.data, function(callflow) { 
-									return (callflow.type === 'mainUserCallflow' || !('type' in callflow)); 
-								});
-								_callback(null, userCallflows);
+								var mapCallflowsByOwnerId = _.indexBy(data.data, 'owner_id');
+								_callback(null, mapCallflowsByOwnerId);
 							}
 						});
 					},
@@ -3220,11 +3232,11 @@ define(function(require){
 					});
 
 					_.each(results.users, function(user) {
-						var userCallflow = _.find(results.userCallflows, function(callflow) { return callflow.owner_id === user.id });
-						if(userCallflow) {
-							user.id = userCallflow.id;
+						if(results.userCallflows.hasOwnProperty(user.id)) {
+							user.id = results.userCallflows[user.id].id;
 							user.module = 'callflow';
-						} else {
+						}
+						else {
 							user.module = 'user';
 						}
 						callEntities.userCallflows.push(user);

submodules/users/users.css

@@ -253,7 +253,7 @@
 
 #users_container .actions .spare-devices {
 	line-height: 30px;
-	margin-left: 10px;
+	margin-right: 10px;
 }
 
 #users_container .actions .buy-dropdown {
@@ -527,7 +527,7 @@
 }
 
 #users_container .detail-features .features-grid .feature .fa-wrapper,
-.feature-popup-container .feature-fa-wrapper{
+.monster-feature-popup-container .feature-fa-wrapper{
 	display: inline-block;
 	margin: 20px;
 	width: 60px;
@@ -549,7 +549,7 @@
 }
 
 #users_container .detail-features .features-grid .feature .fa-wrapper.active,
-.feature-popup-container .feature-fa-wrapper.active{
+.monster-feature-popup-container .feature-fa-wrapper.active{
 	background: #19d332; /* Old browsers */
 	background: -moz-radial-gradient(center, ellipse cover,  hsl(128,79%,46%) 0%, hsl(132,46%,46%) 61%, hsl(0,0%,0%) 99%); /* FF3.6+ */
 	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,hsl(128,79%,46%)), color-stop(61%,hsl(132,46%,46%)), color-stop(99%,hsl(0,0%,0%))); /* Chrome,Safari4+ */
@@ -661,36 +661,36 @@
 }
 
 /* Caller-ID User Feature Popup */
-.feature-popup-container[data-feature="caller_id"] {
+.monster-feature-popup-container[data-feature="caller_id"] {
 	width: 525px;
 }
 
-.feature-popup-container .caller-id-select {
+.monster-feature-popup-container .caller-id-select {
 	margin-top: 5px;
 }
 
 /* Hot Desking User Feature Popup */
-.feature-popup-container[data-feature="hotdesk"] #pin {
+.monster-feature-popup-container[data-feature="hotdesk"] #pin {
 	margin-top: 10px;
 }
 
 /* VM To Email User Feature Popup */
-.feature-popup-container[data-feature="vm_to_email"] #email {
+.monster-feature-popup-container[data-feature="vm_to_email"] #email {
 	margin-top: 8px;
 }
 
-.feature-popup-container[data-feature="vm_to_email"] .main-line {
+.monster-feature-popup-container[data-feature="vm_to_email"] .main-line {
 	height: auto;
 	line-height: 20px;
 	margin: 10px 0 30px 0;
 }
 
 /* Conferencing */
-.feature-popup-container[data-feature="conferencing"] form {
+.monster-feature-popup-container[data-feature="conferencing"] form {
 	margin-bottom: 0;
 }
 
-.feature-popup-container[data-feature="conferencing"] form .list-numbers {
+.monster-feature-popup-container[data-feature="conferencing"] form .list-numbers {
 	display: inline-block;
 	font-weight: 600;
 	height: 65px;
@@ -701,86 +701,86 @@
 	width: 180px;
 }
 
-.feature-popup-container[data-feature="conferencing"] form .list-numbers[data-count="1"] {
+.monster-feature-popup-container[data-feature="conferencing"] form .list-numbers[data-count="1"] {
 	line-height: 61px;
 }
 
-.feature-popup-container[data-feature="conferencing"] form .list-numbers[data-count="2"] {
+.monster-feature-popup-container[data-feature="conferencing"] form .list-numbers[data-count="2"] {
 	line-height: 32px;
 }
 
-.feature-popup-container[data-feature="conferencing"] form .list-numbers[data-count="3"] {
+.monster-feature-popup-container[data-feature="conferencing"] form .list-numbers[data-count="3"] {
 	line-height: 20px;
 }
 
 /* Music-On-Hold Feature */
-.feature-popup-container[data-feature="music_on_hold"] .media-dropdown {
+.monster-feature-popup-container[data-feature="music_on_hold"] .media-dropdown {
 	margin-bottom: 0px;
 }
-.feature-popup-container[data-feature="music_on_hold"] .upload-toggle {
+.monster-feature-popup-container[data-feature="music_on_hold"] .upload-toggle {
 	margin-left: 10px;
 	min-width: 117px;
 }
-.feature-popup-container[data-feature="music_on_hold"] .upload-div {
+.monster-feature-popup-container[data-feature="music_on_hold"] .upload-div {
 	display: none;
 	margin-top: 20px;
 }
-.feature-popup-container[data-feature="music_on_hold"] .upload-div .upload-input {
+.monster-feature-popup-container[data-feature="music_on_hold"] .upload-div .upload-input {
 	margin: 0;
 	width: 330px;
 }
-.feature-popup-container[data-feature="music_on_hold"] .upload-div button.upload-action {
+.monster-feature-popup-container[data-feature="music_on_hold"] .upload-div button.upload-action {
 	margin-left: 10px;
 	padding-left: 19px;
 	padding-right: 19px;
 }
 
-.feature-popup-container[data-feature="music_on_hold"] .upload-div button > i {
+.monster-feature-popup-container[data-feature="music_on_hold"] .upload-div button > i {
 	margin-right: 0;
 	padding-right: 0;
 }
 
-.feature-popup-container[data-feature="music_on_hold"] .upload-div .file-upload {
+.monster-feature-popup-container[data-feature="music_on_hold"] .upload-div .file-upload {
 	margin: 0;
 }
-.feature-popup-container[data-feature="music_on_hold"] .upload-div .file-upload > input {
+.monster-feature-popup-container[data-feature="music_on_hold"] .upload-div .file-upload > input {
 	margin: 0;
 	padding: 6px;
 	width: 192px;
 }
 
 /* Faxing Feature Popup */
-.feature-popup-container[data-feature='faxing'] {
+.monster-feature-popup-container[data-feature='faxing'] {
 	overflow: hidden;
 }
 
-.feature-popup-container[data-feature='faxing'] #faxbox_form {
+.monster-feature-popup-container[data-feature='faxing'] #faxbox_form {
 	margin-bottom: 0;
 }
 
-.feature-popup-container[data-feature='faxing'] #faxbox_form a {
+.monster-feature-popup-container[data-feature='faxing'] #faxbox_form a {
 	color: #22a5ff;
 	text-decoration: underline;
 }
 
-.feature-popup-container[data-feature='faxing'] #faxbox_form a:hover {
+.monster-feature-popup-container[data-feature='faxing'] #faxbox_form a:hover {
 	text-decoration: none;
 }
 
-.feature-popup-container[data-feature='faxing'] #faxbox_form p {
+.monster-feature-popup-container[data-feature='faxing'] #faxbox_form p {
 	line-height: 30px;
 }
 
-.feature-popup-container[data-feature='faxing'] #faxbox_form .monster-primary-color {
+.monster-feature-popup-container[data-feature='faxing'] #faxbox_form .monster-primary-color {
 	color: #22a5ff;
 }
 
-.feature-popup-container[data-feature='faxing'] #faxbox_form .number-selector {
+.monster-feature-popup-container[data-feature='faxing'] #faxbox_form .number-selector {
 	display: inline-block;
 	margin: 0 10px;
 }
 
-.feature-popup-container[data-feature='faxing'] #faxbox_form #helper_content {
+.monster-feature-popup-container[data-feature='faxing'] #faxbox_form #helper_content {
 	margin-top: 10px;
 }
 
@@ -808,7 +808,7 @@
 }
 
 /* Find me Follow me feature popup */
-.feature-popup-container[data-feature="find_me_follow_me"] {
+.monster-feature-popup-container[data-feature="find_me_follow_me"] {
 	width: 620px;
 }
 

views/callLogs-cdrsList.html

@@ -1,6 +1,6 @@
 {{#each cdrs}}
 <div class="grid-row-group">
-	<div class="grid-row a-leg {{#if this.bLegs.length}}has-b-legs{{/if}}" data-id="{{this.id}}">
+	<div class="grid-row main-leg" data-id="{{this.id}}">
 		<div class="grid-cell direction">
 			<div class="sub-cell single-cell">
 				{{#if this.isOutboundCall}}
@@ -40,65 +40,16 @@
 				<span class="cause-title">{{this.hangupCause}}</span>
 			</div>
 		</div>
-		<div class="grid-cell details">
+		<div class="grid-cell actions">
 			<div class="sub-cell single-cell">
-				<i class="fa fa-cog fa-lg"></i>
+				{{#if ../showReport}}<a class="monster-link" href="{{this.mailtoLink}}"><i data-placement="top" data-toggle="tooltip" data-placement="top" data-original-title="{{ @root.i18n.callLogs.actions.report }}" class="fa fa-lg fa-fire-extinguisher"></i></a>{{/if}}
 			</div>
 		</div>
-		{{#if ../showReport}}
-		<div class="grid-cell report">
-			<div class="sub-cell single-cell">
-				<a class="monster-link" href="{{this.mailtoLink}}">{{@root.i18n.callLogs.reportCall}}</a>
-			</div>
-		</div>
-		{{/if}}
 	</div>
-	{{#each this.bLegs}}
-	<div class="grid-row b-leg" data-id={{this.id}}>
-		<div class="grid-cell direction">
-			<div class="sub-cell single-cell"></div>
-		</div>
-		<div class="grid-cell datetime">
-			<div class="sub-cell cell-top">{{this.date}}</div>
-			<div class="sub-cell cell-bottom">{{this.time}}</div>
-		</div>
-		<div class="grid-cell from">
-			{{#if this.fromName}}
-			<div class="sub-cell cell-top">{{formatPhoneNumber this.fromNumber}}</div>
-			<div class="sub-cell cell-bottom">{{this.fromName}}</div>
-			{{else}}
-			<div class="sub-cell single-cell">{{formatPhoneNumber this.fromNumber}}</div>
-			{{/if}}
-		</div>
-		<div class="grid-cell to">
-			{{#if this.toName}}
-			<div class="sub-cell cell-top">{{formatPhoneNumber this.toNumber}}</div>
-			<div class="sub-cell cell-bottom">{{this.toName}}</div>
-			{{else}}
-			<div class="sub-cell single-cell">{{formatPhoneNumber this.toNumber}}</div>
-			{{/if}}
-		</div>
-		<div class="grid-cell duration">
-			<div class="sub-cell single-cell">
-				{{this.duration}}
-			</div>
-		</div>
-		<div class="grid-cell hangup">
-			<div class="sub-cell single-cell" title="{{this.hangupCause}}">
-				{{this.hangupCause}}
-			</div>
-		</div>
-		<div class="grid-cell details">
-			<div class="sub-cell single-cell">
-				<i class="fa fa-cog fa-lg"></i>
-			</div>
-		</div>
-		{{#if ../../showReport}}
-		<div class="grid-cell report">
-			<div class="sub-cell single-cell"></div>
+	<div class="extra-legs">
+		<div class="loading-container">
+			{{@root.i18n.callLogs.loading}} <i class="fa fa-spinner fa-spin monster-blue fa-lg"></i>
 		</div>
-		{{/if}}
 	</div>
-	{{/each}}
 </div>
 {{/each}}

views/callLogs-interactionLegs.html

@@ -0,0 +1,42 @@
+{{#each cdrs}}
+	<div class="grid-row extra-leg" data-id={{this.id}}>
+		<div class="grid-cell direction">
+			<div class="sub-cell single-cell"></div>
+		</div>
+		<div class="grid-cell datetime">
+			<div class="sub-cell cell-top">{{this.date}}</div>
+			<div class="sub-cell cell-bottom">{{this.time}}</div>
+		</div>
+		<div class="grid-cell from">
+			{{#if this.fromName}}
+			<div class="sub-cell cell-top">{{formatPhoneNumber this.fromNumber}}</div>
+			<div class="sub-cell cell-bottom">{{this.fromName}}</div>
+			{{else}}
+			<div class="sub-cell single-cell">{{formatPhoneNumber this.fromNumber}}</div>
+			{{/if}}
+		</div>
+		<div class="grid-cell to">
+			{{#if this.toName}}
+			<div class="sub-cell cell-top">{{formatPhoneNumber this.toNumber}}</div>
+			<div class="sub-cell cell-bottom">{{this.toName}}</div>
+			{{else}}
+			<div class="sub-cell single-cell">{{formatPhoneNumber this.toNumber}}</div>
+			{{/if}}
+		</div>
+		<div class="grid-cell duration">
+			<div class="sub-cell single-cell">
+				{{this.duration}}
+			</div>
+		</div>
+		<div class="grid-cell hangup">
+			<div class="sub-cell single-cell cause-title" title="{{this.hangupCause}}">
+				{{this.hangupCause}}
+			</div>
+		</div>
+		<div class="grid-cell actions">
+			<div class="sub-cell single-cell">
+				<i class="fa fa-cog fa-lg details-cdr" data-toggle="tooltip" data-placement="top" data-original-title="{{ @root.i18n.callLogs.actions.details }}"></i>
+			</div>
+		</div>
+	</div>
+{{/each}}

views/callLogs-layout.html

@@ -42,7 +42,7 @@
 	</div>
 
 	<div class="call-logs-content">
-		<div class="call-logs-grid{{#unless showReport}} no-report-link{{/unless}}">
+		<div class="call-logs-grid">
 			<div class="grid-row-group">
 				<div class="grid-row header-row">
 					<div class="grid-cell direction">
@@ -71,16 +71,9 @@
 						<div class="sub-cell cell-top">{{i18n.callLogs.gridHeaders.hangup1}}</div>
 						<div class="sub-cell cell-bottom">{{i18n.callLogs.gridHeaders.hangup2}}</div>
 					</div>
-					<div class="grid-cell details">
-						<div class="sub-cell cell-top">{{i18n.callLogs.gridHeaders.details1}}</div>
-						<div class="sub-cell cell-bottom">{{i18n.callLogs.gridHeaders.details2}}</div>
+					<div class="grid-cell actions">
+						<div class="sub-cell single-cell">{{i18n.callLogs.gridHeaders.actions}}</div>
 					</div>
-					{{#if showReport}}
-					<div class="grid-cell report">
-						<div class="sub-cell cell-top">{{i18n.callLogs.gridHeaders.report1}}</div>
-						<div class="sub-cell cell-bottom">{{i18n.callLogs.gridHeaders.report2}}</div>
-					</div>
-					{{/if}}
 				</div>
 			</div>
 			<div class="grid-row no-match">

views/featureCodes-layout.html

@@ -5,16 +5,16 @@
 	<div class="feature-codes-content">
 		{{#each featureCodes}}
 			<div class="feature-codes-category">
-				<div class="category-header">{{this.category}}</div>
+				<div class="category-header">{{category}}</div>
 				<div class="category-content">
-					{{#each this.codes}}
+					{{#each codes}}
 					<div class="feature-code-line">
 						<div class="feature-code-label">
-							{{this.name}}
+							{{name}}
 						</div>
 						<div class="feature-code">
-							<div class="code-prefix">*</div>
-							<div class="code-number">{{this.number}}</div>
+							<div class="code-prefix">{{#if hasStar}}*{{/if}}</div>
+							<div class="code-number">{{number}}</div>
 						</div>
 					</div>
 					{{/each}}

views/groups-feature-call_recording.html

@@ -1,4 +1,4 @@
-<div class="feature-popup-container" data-feature="call_recording">
+<div class="monster-feature-popup-container" data-feature="call_recording">
 	<div class="feature-popup-title">
 		<div class="feature-fa-wrapper">
 			<i class="{{group.extra.mapFeatures.call_recording.icon}}"></i>

views/groups-feature-forward.html

@@ -1,4 +1,4 @@
-<div class="feature-popup-container" data-feature="forward">
+<div class="monster-feature-popup-container" data-feature="forward">
 	<div class="feature-popup-title">
 		<div class="feature-fa-wrapper">
 			<i class="{{group.extra.mapFeatures.forward.icon}}"></i>

views/groups-feature-next_action.html

@@ -1,4 +1,4 @@
-<div class="feature-popup-container" data-feature="next_action">
+<div class="monster-feature-popup-container" data-feature="next_action">
 	<div class="feature-popup-title">
 		<div class="feature-fa-wrapper">
 			<i class="{{group.extra.mapFeatures.next_action.icon}}"></i>

views/groups-feature-prepend.html

@@ -1,4 +1,4 @@
-<div class="feature-popup-container" data-feature="prepend">
+<div class="monster-feature-popup-container" data-feature="prepend">
 	<div class="feature-popup-title">
 		<div class="feature-fa-wrapper">
 			<i class="{{group.extra.mapFeatures.prepend.icon}}"></i>

views/groups-feature-ringback.html

@@ -1,4 +1,4 @@
-<div class="feature-popup-container" data-feature="ringback">
+<div class="monster-feature-popup-container" data-feature="ringback">
 	<div class="feature-popup-title">
 		<div class="feature-fa-wrapper">
 			<i class="{{group.extra.mapFeatures.ringback.icon}}"></i>

views/groups-numbers.html

@@ -66,7 +66,7 @@
 				<ul class="dropdown-menu" role="menu">
 					<li><a class="buy-link" data-type="regular" href="#">{{i18n.strategy.numberLinks.buy.regular}}</a></li>
 					<li><a class="buy-link" data-type="tollfree" href="#">{{i18n.strategy.numberLinks.buy.tollfree}}</a></li>
-					<li><a class="buy-link" data-type="vanity" href="#">{{i18n.strategy.numberLinks.buy.vanity}}</a></li>
+					<!-- <li><a class="buy-link" data-type="vanity" href="#">{{i18n.strategy.numberLinks.buy.vanity}}</a></li> -->
 				</ul>
 			</li>
 		</ul>

views/myOffice-callerIdPopup.html

@@ -1,4 +1,4 @@
-<div id="my_office_caller_id_popup" class="feature-popup-container">
+<div id="my_office_caller_id_popup" class="monster-feature-popup-container">
 	<!-- <div class="feature-popup-title">
 		<div class="feature-fa-wrapper">
 			<i class="fa fa-user"></i>

views/myOffice-musicOnHoldPopup.html

@@ -1,4 +1,4 @@
-<div id="my_office_music_on_hold_popup" class="feature-popup-container">
+<div id="my_office_music_on_hold_popup" class="monster-feature-popup-container">
 	<div class="feature-popup-header">
 		<div class="feature-fa-wrapper">
 			<i class="fa fa-music"></i>

views/strategy-confnum.html

@@ -23,7 +23,7 @@
 				<ul class="dropdown-menu" role="menu">
 					<li><a class="buy-link" data-type="regular" href="#">{{i18n.strategy.numberLinks.buy.regular}}</a></li>
 					<li><a class="buy-link" data-type="tollfree" href="#">{{i18n.strategy.numberLinks.buy.tollfree}}</a></li>
-					<li><a class="buy-link" data-type="vanity" href="#">{{i18n.strategy.numberLinks.buy.vanity}}</a></li>
+					<!-- <li><a class="buy-link" data-type="vanity" href="#">{{i18n.strategy.numberLinks.buy.vanity}}</a></li> -->
 				</ul>
 			</li>
 		</ul>

views/strategy-customConferenceGreeting.html

@@ -1,4 +1,4 @@
-<div id="strategy_custom_conference_greeting" class="feature-popup-container">
+<div id="strategy_custom_conference_greeting" class="monster-feature-popup-container">
 	<div class="feature-popup-title">
 		<div class="feature-fa-wrapper">
 			<i class="fa fa-volume-up"></i>

views/strategy-faxingnum.html

@@ -23,7 +23,7 @@
 				<ul class="dropdown-menu" role="menu">
 					<li><a class="buy-link" data-type="regular" href="#">{{i18n.strategy.numberLinks.buy.regular}}</a></li>
 					<li><a class="buy-link" data-type="tollfree" href="#">{{i18n.strategy.numberLinks.buy.tollfree}}</a></li>
-					<li><a class="buy-link" data-type="vanity" href="#">{{i18n.strategy.numberLinks.buy.vanity}}</a></li>
+					<!-- <li><a class="buy-link" data-type="vanity" href="#">{{i18n.strategy.numberLinks.buy.vanity}}</a></li> -->
 				</ul>
 			</li>
 		</ul>

views/strategy-numbers.html

@@ -49,7 +49,7 @@
 				<ul class="dropdown-menu" role="menu">
 					<li><a class="buy-link" data-type="regular" href="#">{{i18n.strategy.numberLinks.buy.regular}}</a></li>
 					<li><a class="buy-link" data-type="tollfree" href="#">{{i18n.strategy.numberLinks.buy.tollfree}}</a></li>
-					<li><a class="buy-link" data-type="vanity" href="#">{{i18n.strategy.numberLinks.buy.vanity}}</a></li>
+					<!-- <li><a class="buy-link" data-type="vanity" href="#">{{i18n.strategy.numberLinks.buy.vanity}}</a></li> -->
 				</ul>
 			</li>
 		</ul>

views/users-devices.html

@@ -18,8 +18,9 @@
 	</div>
 
 	<div class="actions">
+		<a class="spare-devices monster-link pull-left" href="javascript:void(0);"><i class="fa fa-list monster-green"></i>{{ i18n.users.devices.spareDevice }}</a>
 		<div class="dropdown pull-left">
-			<a href="#" class="add-device monster-link dropdown-toggle" data-toggle="dropdown"><i class="fa fa-plus-circle monster-green"></i>{{ i18n.users.devices.newDevice }}</a>
+			<a href="#" class="add-device monster-link dropdown-toggle" data-toggle="dropdown"><i class="fa fa-plus monster-green"></i>{{ i18n.users.devices.newDevice }}</a>
 			<ul class="dropdown-menu">
 				<li><a class="create-device" data-type="sip_device"><i class="icon-telicon-voip-phone"></i>{{ i18n.devices.types.sip_device }}</a></li>
 				<li><a class="create-device" data-type="cellphone"><i class="fa fa-phone"></i>{{ i18n.devices.types.cellphone }}</a></li>
@@ -31,7 +32,6 @@
 				<li><a class="create-device" data-type="sip_uri"><i class="icon-telicon-voip-phone"></i>{{ i18n.devices.types.sip_uri }}</a></li>
 			</ul>
 		</div>
-		<a class="spare-devices monster-link" href="javascript:void(0);"><i class="fa fa-phone monster-green"></i>{{ i18n.users.devices.spareDevice }}</a>
 
 		<div class="pull-right">
 			<a class="cancel-link monster-link blue" href="javascript:void(0);">{{ i18n.cancel }}</a>

views/users-feature-call_forward.html

@@ -1,4 +1,4 @@
-<div class="feature-popup-container" data-feature="call_forward">
+<div class="monster-feature-popup-container" data-feature="call_forward">
 	<div class="feature-popup-title">
 		<div class="feature-fa-wrapper">
 			<i class="{{extra.mapFeatures.call_forward.icon}}"></i>

views/users-feature-call_recording.html

@@ -1,4 +1,4 @@
-<div class="feature-popup-container" data-feature="call_recording">
+<div class="monster-feature-popup-container" data-feature="call_recording">
 	<div class="feature-popup-title">
 		<div class="feature-fa-wrapper">
 			<i class="{{user.extra.mapFeatures.call_recording.icon}}"></i>

views/users-feature-caller_id.html

@@ -1,4 +1,4 @@
-<div class="feature-popup-container" data-feature="caller_id">
+<div class="monster-feature-popup-container" data-feature="caller_id">
 	<div class="feature-popup-title">
 		<div class="feature-fa-wrapper">
 			<i class="{{extra.mapFeatures.caller_id.icon}}"></i>

views/users-feature-conferencing.html

@@ -1,4 +1,4 @@
-<div class="feature-popup-container" data-feature="conferencing">
+<div class="monster-feature-popup-container" data-feature="conferencing">
 	<div class="feature-popup-title">
 		<div class="feature-fa-wrapper">
 			<i class="{{user.extra.mapFeatures.conferencing.icon}}"></i>

views/users-feature-faxing.html

@@ -1,4 +1,4 @@
-<div class="feature-popup-container" data-feature="faxing">
+<div class="monster-feature-popup-container" data-feature="faxing">
 	<div class="feature-popup-title">
 		<div class="feature-fa-wrapper">
 			<i class="{{user.extra.mapFeatures.faxing.icon}}"></i>

views/users-feature-find_me_follow_me.html

@@ -1,4 +1,4 @@
-<div class="feature-popup-container" data-feature="find_me_follow_me">
+<div class="monster-feature-popup-container" data-feature="find_me_follow_me">
 	<div class="feature-popup-title">
 		<div class="feature-fa-wrapper">
 			<i class="{{currentUser.extra.mapFeatures.find_me_follow_me.icon}}"></i>

views/users-feature-hotdesk.html

@@ -1,4 +1,4 @@
-<div class="feature-popup-container" data-feature="hotdesk">
+<div class="monster-feature-popup-container" data-feature="hotdesk">
 	<div class="feature-popup-title">
 		<div class="feature-fa-wrapper">
 			<i class="{{extra.mapFeatures.hotdesk.icon}}"></i>

views/users-feature-music_on_hold.html

@@ -1,4 +1,4 @@
-<div class="feature-popup-container" data-feature="music_on_hold">
+<div class="monster-feature-popup-container" data-feature="music_on_hold">
 	<div class="feature-popup-title">
 		<div class="feature-fa-wrapper">
 			<i class="{{user.extra.mapFeatures.music_on_hold.icon}}"></i>

views/users-feature-vm_to_email.html

@@ -1,4 +1,4 @@
-<div class="feature-popup-container" data-feature="vm_to_email">
+<div class="monster-feature-popup-container" data-feature="vm_to_email">
 	<div class="feature-popup-title">
 		<div class="feature-fa-wrapper">
 			<i class="{{extra.mapFeatures.vm_to_email.icon}}"></i>

views/users-numbers.html

@@ -62,15 +62,15 @@
 
 	<div class="actions">
 		<a href="#" class="spare-link monster-link pull-left{{#if emptySpare}} disabled{{/if}}">
-			<i class="fa fa-plus monster-green fa-lg"></i>{{ i18n.users.addFromSpare }}
+			<i class="fa fa-list monster-green"></i>{{ i18n.users.addFromSpare }}
 		</a>
 		<ul class="buy-dropdown nav pull-left">
 			<li class="dropdown">
-				<a href="#" class="dropdown-toggle buy-dropdown monster-link" data-toggle="dropdown" data-target="#"><i class="fa fa-shopping-cart monster-green fa-lg"></i>{{ i18n.strategy.numberLinks.buy.link }}</a>
+				<a href="#" class="dropdown-toggle buy-dropdown monster-link" data-toggle="dropdown" data-target="#"><i class="fa fa-shopping-cart monster-green"></i>{{ i18n.strategy.numberLinks.buy.link }}</a>
 				<ul class="dropdown-menu" role="menu">
 					<li><a class="buy-link" data-type="regular" href="#">{{i18n.strategy.numberLinks.buy.regular}}</a></li>
 					<li><a class="buy-link" data-type="tollfree" href="#">{{i18n.strategy.numberLinks.buy.tollfree}}</a></li>
-					<li><a class="buy-link" data-type="vanity" href="#">{{i18n.strategy.numberLinks.buy.vanity}}</a></li>
+					<!-- <li><a class="buy-link" data-type="vanity" href="#">{{i18n.strategy.numberLinks.buy.vanity}}</a></li> -->
 				</ul>
 			</li>
 		</ul>