UI-3111: Refactor caller id privacy feature with better description (#71)

* Refactor caller id privacy for the users submodule

* Refactor caller id privacy for the  devices submodule

app.js

@@ -30,6 +30,15 @@ define(function(require) {
 		requests: {},
 		subscribe: {},
 		appFlags: {
+			common: {
+				outboundPrivacy: [
+					'default',
+					'none',
+					'number',
+					'name',
+					'full'
+				]
+			},
 			global: {}
 		},
 

i18n/en-US.json

@@ -18,6 +18,20 @@
 		"vmboxes": "Voicemail Boxes"
 	},
 
+	"commonMisc": {
+		"outboundPrivacy": {
+			"label": "Caller-ID privacy",
+			"tooltip": "Determines what appears as Caller-ID for offnet outbound calls.",
+			"values": {
+				"default": "- Default -",
+				"none": "Hide nothing",
+				"number": "Hide number only",
+				"name": "Hide name only",
+				"full": "Hide name and number"
+			}
+		}
+	},
+
 	"groups": {
 		"addFromSpare": "Add from Spare Numbers",
 		"add": "Add Group",
@@ -507,15 +521,7 @@
 			"languageHelp": "This will change the language of the text displayed in the UI",
 			"timezoneHelp": "This will set the Timezone used for this User's devices and Voicemail Box",
 			"ringingHelp": "This will set the Ringing Timeout for this User and his Devices. For example, if you set it to 20, this user will be rung for 20 seconds before the system moves to his Voicemail Box",
-			"mainExtensionHelp": "This will define the Caller-ID used for this User for calls inside the system, as well as setting his Presence ID to that number",
-			"outbound_privacy": {
-				"type": "Caller-ID privacy ",
-				"default": "Default",
-				"none": "None",
-				"number": "Number",
-				"name": "Name",
-				"full": "Full"
-			}
+			"mainExtensionHelp": "This will define the Caller-ID used for this User for calls inside the system, as well as setting his Presence ID to that number"
 		},
 		"delete": "Delete User",
 		"errorCallerId": "Before configuring the Caller-ID of this user, you need to assign them a number",

submodules/devices/devices.js

@@ -746,6 +746,12 @@ define(function(require) {
 			var self = this,
 				defaults = {
 					extra: {
+						outboundPrivacy: _.map(self.appFlags.common.outboundPrivacy, function(strategy) {
+							return {
+								key: strategy,
+								value: self.i18n.active().commonMisc.outboundPrivacy.values[strategy]
+							};
+						}),
 						hasE911Numbers: !_.isEmpty(data.e911Numbers),
 						e911Numbers: data.e911Numbers,
 						restrictions: data.listClassifiers,

submodules/users/users.css

@@ -348,11 +348,6 @@
 	cursor: default !important;
 }
 
-#users_container .detail-user .row-fields .presence-id-select {
-	margin-left: 10px;
-	width: 72px;
-}
-
 #users_container .detail-user .row-fields .timeout-edit {
 	margin-left: 50px;
 }
@@ -371,6 +366,14 @@
 	display: block;
 }
 
+#users_container .detail-user .row-fields .inline-block {
+	display: inline-block;
+}
+
+#users_container .detail-user .row-fields .inline-block select {
+	margin: 0 7px;
+}
+
 #users_container .detail-user .email-border {
 	margin-bottom: 10px;
 	border: 2px dotted transparent;

submodules/users/users.js

@@ -238,7 +238,13 @@ define(function(require) {
 							iconColor: 'monster-red',
 							title: self.i18n.active().users.do_not_disturb.title
 						}
-					}
+					},
+					outboundPrivacy: _.map(self.appFlags.common.outboundPrivacy, function(item) {
+						return {
+							key: item,
+							value: self.i18n.active().commonMisc.outboundPrivacy.values[item]
+						};
+					})
 				};
 
 			if (!('extra' in dataUser)) {

views/devices-sip_device.html

@@ -223,16 +223,21 @@
 				</div>
 
 				<div class="control-group">
-					<label class="control-label checkbox">
-						<span>{{ i18n.devices.popupSettings.miscellaneous.outbound_privacy.type }}</span>
-						<select class="input-small" name="caller_id_options.outbound_privacy">
-							<option value="default"{{#compare caller_id_options.outbound_privacy "===" "default"}} selected{{/compare}}>{{ i18n.devices.popupSettings.miscellaneous.outbound_privacy.default }}</option>
-							<option value="none"{{#compare caller_id_options.outbound_privacy "===" "none"}} selected{{/compare}}>{{ i18n.devices.popupSettings.miscellaneous.outbound_privacy.none }}</option>
-							<option value="number"{{#compare caller_id_options.outbound_privacy "===" "number"}} selected{{/compare}}>{{ i18n.devices.popupSettings.miscellaneous.outbound_privacy.number }}</option>
-							<option value="name"{{#compare caller_id_options.outbound_privacy "===" "name"}} selected{{/compare}}>{{ i18n.devices.popupSettings.miscellaneous.outbound_privacy.name }}</option>
-							<option value="full"{{#compare caller_id_options.outbound_privacy "===" "full"}} selected{{/compare}}>{{ i18n.devices.popupSettings.miscellaneous.outbound_privacy.full }}</option>
-						</select>
+					<label for="outbound_privacy" class="control-label checkbox">
+						{{i18n.commonMisc.outboundPrivacy.label}}
+						<i class="fa fa-question-circle fa-lg" data-toggle="tooltip" title="{{i18n.commonMisc.outboundPrivacy.tooltip}}"></i>
 					</label>
+					<div class="controls">
+						<select name="caller_id_options.outbound_privacy" id="outbound_privacy" class="input-medium">
+						{{#select caller_id_options.outbound_privacy}}
+							{{#each extra.outboundPrivacy}}
+								<option value="{{key}}">
+									{{value}}
+								</option>
+							{{/each}}
+						{{/select}}
+						</select>
+					</div>
 				</div>
 
 				<div class="rtp-line clearfix">

views/devices-softphone.html

@@ -180,16 +180,21 @@
 				</div>
 
 				<div class="control-group">
-					<label class="control-label checkbox">
-						<span>{{ i18n.devices.popupSettings.miscellaneous.outbound_privacy.type }}</span>
-						<select class="input-small" name="caller_id_options.outbound_privacy">
-							<option value="default"{{#compare caller_id_options.outbound_privacy "===" "default"}} selected{{/compare}}>{{ i18n.devices.popupSettings.miscellaneous.outbound_privacy.default }}</option>
-							<option value="none"{{#compare caller_id_options.outbound_privacy "===" "none"}} selected{{/compare}}>{{ i18n.devices.popupSettings.miscellaneous.outbound_privacy.none }}</option>
-							<option value="number"{{#compare caller_id_options.outbound_privacy "===" "number"}} selected{{/compare}}>{{ i18n.devices.popupSettings.miscellaneous.outbound_privacy.number }}</option>
-							<option value="name"{{#compare caller_id_options.outbound_privacy "===" "name"}} selected{{/compare}}>{{ i18n.devices.popupSettings.miscellaneous.outbound_privacy.name }}</option>
-							<option value="full"{{#compare caller_id_options.outbound_privacy "===" "full"}} selected{{/compare}}>{{ i18n.devices.popupSettings.miscellaneous.outbound_privacy.full }}</option>
-						</select>
+					<label for="outbound_privacy" class="control-label checkbox">
+						{{i18n.commonMisc.outboundPrivacy.label}}
+						<i class="fa fa-question-circle fa-lg" data-toggle="tooltip" title="{{i18n.commonMisc.outboundPrivacy.tooltip}}"></i>
 					</label>
+					<div class="controls">
+						<select name="caller_id_options.outbound_privacy" id="outbound_privacy" class="input-medium">
+						{{#select caller_id_options.outbound_privacy}}
+							{{#each extra.outboundPrivacy}}
+								<option value="{{key}}">
+									{{value}}
+								</option>
+							{{/each}}
+						{{/select}}
+						</select>
+					</div>
 				</div>
 
 				<div class="control-group">

views/users-name.html

@@ -107,26 +107,43 @@
 			</div>
 
 			<div class="row-fields">
-				<div class="fa fa-wrapper" data-original-title="{{i18n.users.editionForm.mainExtensionHelp}}" data-placement="top" data-toggle="tooltip"><i class="icon-telicon-extensions"></i></div>
-				<label>{{ i18n.users.editionForm.presenceId }}</label>
-				<select name="presence_id" class="presence-id-select">
+				<div class="fa fa-wrapper" data-toggle="tooltip" title="{{i18n.users.editionForm.mainExtensionHelp}}" data-placement="top">
+					<i class="icon-telicon-extensions"></i>
+				</div>
+				<div class="inline-block">
+					<label for="presence_id">
+						{{ i18n.users.editionForm.presenceId }}
+					</label>
+					<select name="presence_id" id="presence_id" class="input-small">
 					{{#select presence_id}}
 						{{#each extra.presenceIdOptions}}
-							<option value="{{ this.key }}">{{ this.value }}</option>
+							<option value="{{key}}">
+								{{value}}
+							</option>
 						{{/each}}
 					{{/select}}
-				</select>
+					</select>
+				</div>
 			</div>
 
 			<div class="row-fields">
-				<lavel class="fix-left">{{ i18n.users.editionForm.outbound_privacy.type }}</label>
-				<select id="privacy_type" name="caller_id_options.outbound_privacy">
-					<option value="default"{{#compare caller_id_options.outbound_privacy "===" "default"}} selected{{/compare}}>{{ i18n.users.editionForm.outbound_privacy.default }}</option>
-					<option value="none"{{#compare caller_id_options.outbound_privacy "===" "none"}} selected{{/compare}}>{{ i18n.users.editionForm.outbound_privacy.none }}</option>
-					<option value="number"{{#compare caller_id_options.outbound_privacy "===" "number"}} selected{{/compare}}>{{ i18n.users.editionForm.outbound_privacy.number }}</option>
-					<option value="name"{{#compare caller_id_options.outbound_privacy "===" "name"}} selected{{/compare}}>{{ i18n.users.editionForm.outbound_privacy.name }}</option>
-					<option value="full"{{#compare caller_id_options.outbound_privacy "===" "full"}} selected{{/compare}}>{{ i18n.users.editionForm.outbound_privacy.full }}</option>
-				</select>
+				<div class="fa fa-wrapper" data-toggle="tooltip" title="{{i18n.commonMisc.outboundPrivacy.tooltip}}" data-placement="top">
+					<i class="fa fa-user-secret"></i>
+				</div>
+				<div class="inline-block">
+					<label for="outbound_privacy">
+						{{ i18n.commonMisc.outboundPrivacy.label }}
+					</label>
+					<select name="caller_id_options.outbound_privacy" id="outbound_privacy" class="input-medium">
+					{{#select caller_id_options.outbound_privacy}}
+						{{#each extra.outboundPrivacy}}
+							<option value="{{key}}">
+								{{value}}
+							</option>
+						{{/each}}
+					{{/select}}
+					</select>
+				</div>
 			</div>
 		</div>
 		<!--<div class="advanced-fields content-centered span3">