KAZOO-2487: Already resolved + add animation on notification email field

submodules/users/users.css

@@ -288,13 +288,25 @@
 	margin-left: 7px;
 }
 
-#users_container .detail-user .email-border.open {
+#users_container .detail-user .email-border {
 	margin-bottom: 10px;
-	padding-top: 10px;
-	border: 2px dotted #A6A7A9;
+	border: 2px dotted transparent;
 	border-radius: 4px;
 }
 
+#users_container .detail-user .email-border.open {
+	padding: 10px 0;
+	border-color: #A6A7A9;
+}
+
+#users_container .detail-user .email-checkbox {
+	margin-bottom: 0;
+}
+
+#users_container .detail-user .email-group {
+	margin: 10px 0 0 0;
+}
+
 #users_container .detail-user .icon-wrapper {
 	display: inline-block;
 	width: 50px;

submodules/users/users.js

@@ -486,6 +486,8 @@ define(function(require){
 
 							template.find('#user_timezone').chosen({search_contains: true, width: "61%"});
 
+							data.extra.differentEmail ? template.find('.email-group').show() : template.find('.email-group').hide();
+
 							if(data.extra.mainDirectoryId) {
 								mainDirectoryId = data.extra.mainDirectoryId;
 							}
@@ -730,8 +732,13 @@ define(function(require){
 			});
 
 			template.on('ifChanged', '#notification_email', function() {
-				template.find('.email-border').toggleClass('open');
-				template.find('.email-group').toggleClass('hidden');
+				if ( template.find('.email-border').hasClass('open') ) {
+					template.find('.email-border').removeClass('open', 400);
+					template.find('.email-group').slideUp();
+				} else {
+					template.find('.email-group').slideDown();
+					template.find('.email-border').addClass('open', 400);
+				}
 			});
 
 			template.on('click', '.save-user', function() {

views/users-name.html

@@ -21,7 +21,7 @@
 				<input id="vmbox_number" class="input-small" required type="text" name="extra.vmboxNumber" value="{{extra.vmbox.mailbox}}"></input>
 			</div>
 
-			<div class="email-border{{#compare email '!==' username }} open{{/compare}}">
+			<div class="email-border{{#if extra.differentEmail }} open{{/if}}">
 				<div class="row-fields email-checkbox">
 					<label class="fix-left" for="notification_email">
 						<input id="notification_email" type="checkbox" name="extra.differentEmail"{{#if extra.differentEmail}} checked{{/if}}></input>
@@ -29,9 +29,9 @@
 					</label>
 				</div>
 
-				<div class="row-fields email-group{{#unless extra.differentEmail}} hidden{{/unless}}">
+				<div class="row-fields email-group">
 					<div class="icon-wrapper"><i class="icon-envelope"></i></div>
-					<input type="email" name="extra.email" id="email" placeholder="{{i18n.users.dialogCreationUser.notificationEmail}}" value="{{email}}">
+					<input type="email" name="extra.email" id="email" placeholder="{{i18n.users.dialogCreationUser.notificationEmail}}"{{#if extra.differentEmail}} value="{{email}}"{{/if}}>
 				</div>
 			</div>