Return array from getAll in contactData. Create custom modal dom build ability in alertify with default header, body, footer dom. Update contactsmanager css class names. Add listener to add contact to contactsmanager on contactadded.

src/styles/components/_contactsmanager.scss

@@ -19,16 +19,16 @@
  *
  */
 
-.contactsManager {
-  .contactsContentHead {
+.contactsmanager {
+  .head {
     margin-bottom: 10px;
   }
-  .contactsDesc {
+  .desc {
     font-size: 20px;
     font-weight: normal;
     text-align: baseline;
   }
-  .contactsAddBtn {
+  .addbtn {
     font-size: 14px;
     .fa-users {
       font-size: 22px;
@@ -37,12 +37,12 @@
       font-size: 15px;
     }
   }
-  .contactsEditPicture {
+  .editpicture {
     vertical-align: middle;
     float: left;
     margin-right: 20px;
   }
-  .contactsUploadPicBtn {
+  .uploadbtn {
     margin-top: 7px;
   }
   .buddyPicture {
@@ -61,6 +61,29 @@
         top: -6px;
     }
   }
+  .editlist {
+    max-height: 250px;
+    overflow-y: scroll;
+    padding-right: 0px;
+  }
+  .table {
+    .picture {
+      width: 15%;
+      min-height: 46px;
+      text-align: center;
+      vertical-align: middle;
+    }
+    .name {
+      width: 70%;
+      padding-left: 5%;
+      text-align: left;
+      vertical-align: middle;
+    }
+    .action {
+      text-align: center;
+      vertical-align: middle;
+    }
+  }
 }
 
 .search {
@@ -77,28 +100,3 @@
     padding-left: 25px;
   }
 }
-
-.contactsEditList {
-  max-height: 250px;
-  overflow-y: scroll;
-  padding-right: 0px;
-}
-
-.contactsTable {
-  .picture {
-    width: 15%;
-    min-height: 46px;
-    text-align: center;
-    vertical-align: middle;
-  }
-  .name {
-    width: 70%;
-    padding-left: 5%;
-    text-align: left;
-    vertical-align: middle;
-  }
-  .action {
-    text-align: center;
-    vertical-align: middle;
-  }
-}

static/js/directives/contactsmanager.js

@@ -18,24 +18,29 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-define(['jquery', 'underscore', 'text!partials/contactsmanager.html'], function($, _, templateContactsManager) {
+define(['jquery', 'underscore', 'text!partials/contactsmanagerbutton.html', 'text!partials/contactsmanager.html'], function($, _, templateContactsManagerButton,templateContactsManager) {
 
-	return [function() {
+	return ['contacts', 'alertify', function(contacts, alertify) {
 
-		var contactsManagerController = ['$scope', '$modalInstance', 'contactData', function($scope, $modalInstance, contactData) {
-			$scope.contacts = contactData.getAllContacts();
-			$scope.close = function() {
-				$modalInstance.close('Close');
+		var contactsManagerController = ['$scope', '$modalInstance', 'contactData', 'data', 'defaultModalController', function($scope, $modalInstance, contactData, data, defaultModalController) {
+			$scope.contacts = null;
+
+			var getContacts = function() {
+				$scope.contacts = contactData.getAll();
 			};
+			getContacts();
+			contacts.e.on('contactadded', function() {
+				getContacts();
+			});
+
+			// Set state based on default controller
+			defaultModalController[3]($scope, $modalInstance, data);
 		}];
 
 		var controller = ['$scope', '$modal', function($scope, $modal) {
+			// Setup an api to pass the html body template to alertify
 			$scope.contactsManager = function() {
-				$modal.open({
-					template: templateContactsManager,
-					controller: contactsManagerController,
-					windowClass: 'contactsManager'
-				});
+				alertify.dialog.buildCustom({'windowClass': 'contactsmanager', 'header': _('Contacts Manager'), 'bodydom': templateContactsManager, 'footerdom': null, 'controller': contactsManagerController});
 			};
 		}];
 
@@ -44,6 +49,8 @@ define(['jquery', 'underscore', 'text!partials/contactsmanager.html'], function(
 		return {
 			scope: true,
 			restrict: 'E',
+			replace: true,
+			template: templateContactsManagerButton,
 			controller: controller,
 			link: link
 		};

static/js/services/alertify.js

@@ -50,7 +50,7 @@ define(["angular"], function(angular) {
 	}];
 
 	// Alertify uniquified api wrapper
-	return ["$window", "$modal", "$templateCache", "translation", function($window, $modal, $templateCache, translation) {
+	return ["$window", "$modal", "$templateCache", "translation", '$compile', function($window, $modal, $templateCache, translation, $compile) {
 
 		// Overwrite templates from dialogs with fontawesome/i18n variants.
 		$templateCache.put('/dialogs/error.html', '<div class="modal-header dialog-header-error"><button type="button" class="close" ng-click="close()">&times;</button><h4 class="modal-title text-danger"><span class="fa fa-warning"></span> <span ng-bind-html="header"></span></h4></div><div class="modal-body text-danger" ng-bind-html="msg"></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="close()">{{_("Close")}}</button></div>');
@@ -60,6 +60,9 @@ define(["angular"], function(angular) {
 
 		// Add new template for prompt.
 		$templateCache.put('/dialogs/prompt.html', '<div class="modal-header"><h4 class="modal-title"><span class="fa fa-star"></span> <span ng-bind-html="header"></span></h4></div><div class="modal-body"><ng-form name="promptDialog" novalidate role="form"><div class="form-group input-group-lg" ng-class="{true: \'has-error\'}[promptDialog.text.$dirty && promptDialog.text.$invalid]"><label class="control-label"></label><input type="text" id="{{id}}" class="form-control" name="text" ng-model="input.text" ng-keyup="hitEnter($event)" required></div></ng-form></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="cancel()">{{cancelButtonLabel}}</button><button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="(promptDialog.$dirty && promptDialog.$invalid) || promptDialog.$pristine">{{okButtonLabel}}</button></div>');
+		$templateCache.put('/base/headerdom.html', '<div class="modal-header"><button type="button" class="close" ng-click="close()">×</button><h4 class="modal-title" ng-bind-html="header"></h4></div>');
+		$templateCache.put('/base/bodydom.html', '<div class="modal-body" ng-bind-html="msg"></div>');
+		$templateCache.put('/base/footerdom.html', '<div class="modal-footer"><button type="button" class="btn btn-default" ng-click="close()">{{_("Close")}}</button></div>');
 
 		var defaultMessages = {
 			error: translation._("Error"),
@@ -143,6 +146,40 @@ define(["angular"], function(angular) {
 						}
 					}, 100);
 				});
+			},
+			buildCustom: function(data) {
+				var modaldom = '';
+
+				if (data.headerdom) {
+					modaldom += data.headerdom;
+				} else {
+					modaldom += $templateCache.get('/base/headerdom.html');
+				}
+
+				if (data.bodydom) {
+					modaldom += data.bodydom;
+				} else {
+					modaldom += $templateCache.get('/base/bodydom.html');
+				}
+
+				if (data.footerdom === undefined) {
+					modaldom += $templateCache.get('/base/footerdom.html');
+				// footer should not be included
+				} else if (data.footerdom === null) {
+					modaldom += '';
+				} else {
+					modaldom += data.footerdom;
+				}
+
+				$modal.open({
+					template: modaldom,
+					controller: data.controller || modalController,
+					resolve: {
+						data: function() { return data; },
+						defaultModalController: function() { return modalController; }
+					},
+					windowClass: data.windowClass || ''
+				});
 			}
 		};
 

static/js/services/contactdata.js

@@ -95,8 +95,8 @@ define(['underscore', 'jquery'], function(underscore, $) {
 				}
 				return null;
 			},
-			getAllContacts: function() {
-				return contacts;
+			getAll: function() {
+				return _.values(contacts);
 			}
 		};
 

static/partials/contactsmanager.html

@@ -1,14 +1,8 @@
-<div class="modal-header">
-  <button type="button" class="close" ng-click="close()"><span aria-hidden="true">×</span></button>
-  <h4 class="modal-title" id="myModalLabel">
-    {{_('Contacts Manager')}}
-  </h4>
-</div>
 <div class="modal-body">
-  <div class="row contactsContentHead">
+  <div class="row head">
     <div class="col-xs-offset-7 col-xs-5">
       <div class="pull-right">
-      <button class="btn btn-success contactsAddBtn">
+      <button class="btn btn-success addbtn">
         {{_('Find new contacts')}}&nbsp;
         <i class="fa fa-users"></i>
         <i class="fa fa-plus"></i>
@@ -17,8 +11,8 @@
     </div>
   </div>
   <div class="row">
-    <div class="col-xs-12 contactsEditList">
-      <table class="table table-bordered table-hover table-condensed contactsTable">
+    <div class="col-xs-12 editlist">
+      <table class="table table-bordered table-hover table-condensed ">
         <tbody>
           <tr ng-repeat="contact in contacts">
             <td class="picture">

static/partials/contactsmanageradd.html

@@ -5,7 +5,7 @@
   </h4>
 </div>
 <div class="modal-body">
-  <div class="row contactsContentHead">
+  <div class="row head">
     <div class="col-xs-12">
       <form class="form">
         <div class="row">
@@ -18,8 +18,8 @@
     </div>
   </div>
   <div class="row">
-    <div class="col-xs-12 contactsEditList">
-      <table class="table table-bordered table-hover table-condensed contactsTable">
+    <div class="col-xs-12 editlist">
+      <table class="table table-bordered table-hover table-condensed ">
         <tbody>
           <tr>
             <td class="picture">

static/partials/contactsmanagerbutton.html

@@ -0,0 +1,8 @@
+<div>
+  <legend>{{_('Contacts')}}</legend>
+  <div class="form-group">
+    <div class="col-xs-8 col-xs-offset-4">
+      <button class="btn btn-success" ng-click="contactsManager()">{{_('Contacts Manager')}}</button>
+    </div>
+  </div>
+</div>

static/partials/contactsmanageredit.html

@@ -20,7 +20,7 @@
             <div class="contactsEditPicture">
               <div class="userAvatar"></div>
             </div>
-            <buttton class="btn btn-info contactsUploadPicBtn">{{_('Upload')}}</buttton>
+            <buttton class="btn btn-info uploadbtn">{{_('Upload')}}</buttton>
           </div>
         </div>
       </form>

static/partials/settings.html

@@ -69,16 +69,9 @@
           </div>
         </div>
       </div>
-      <contacts-manager>
-        <div ng-if="userid">
-          <legend>{{_('Contacts')}}</legend>
-          <div class="form-group">
-            <div class="col-xs-8 col-xs-offset-4">
-              <button class="btn btn-success" ng-click="contactsManager()">{{_('Contacts Manager')}}</button>
-            </div>
-          </div>
-        </div>
-      <contacts-manager/>
+      <div ng-if="userid">
+        <contacts-manager/>
+      </div>
       <div ng-show="mediaSources.supported || isChrome">
         <legend>{{_('Media')}}</legend>
         <div ng-show="mediaSources.supported">