From 61466f74c952ce318c3ed3f54438c843327d203a Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Tue, 8 Jul 2014 11:47:39 +0200 Subject: [PATCH] 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 | 60 ++++++++++----------- static/js/directives/contactsmanager.js | 29 ++++++---- static/js/services/alertify.js | 39 +++++++++++++- static/js/services/contactdata.js | 4 +- static/partials/contactsmanager.html | 14 ++--- static/partials/contactsmanageradd.html | 6 +-- static/partials/contactsmanagerbutton.html | 8 +++ static/partials/contactsmanageredit.html | 2 +- static/partials/settings.html | 13 ++--- 9 files changed, 106 insertions(+), 69 deletions(-) create mode 100644 static/partials/contactsmanagerbutton.html diff --git a/src/styles/components/_contactsmanager.scss b/src/styles/components/_contactsmanager.scss index 9dad7999..1ca8dc3a 100644 --- a/src/styles/components/_contactsmanager.scss +++ b/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; - } -} diff --git a/static/js/directives/contactsmanager.js b/static/js/directives/contactsmanager.js index de23ce75..5c197e42 100644 --- a/static/js/directives/contactsmanager.js +++ b/static/js/directives/contactsmanager.js @@ -18,24 +18,29 @@ * along with this program. If not, see . * */ -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 }; diff --git a/static/js/services/alertify.js b/static/js/services/alertify.js index 76076917..89f4ce20 100644 --- a/static/js/services/alertify.js +++ b/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', '

'); @@ -60,6 +60,9 @@ define(["angular"], function(angular) { // Add new template for prompt. $templateCache.put('/dialogs/prompt.html', '

'); + $templateCache.put('/base/headerdom.html', '

'); + $templateCache.put('/base/bodydom.html', '
'); + $templateCache.put('/base/footerdom.html', '
'); 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 || '' + }); } }; diff --git a/static/js/services/contactdata.js b/static/js/services/contactdata.js index c4bb0249..5f6074af 100644 --- a/static/js/services/contactdata.js +++ b/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); } }; diff --git a/static/partials/contactsmanager.html b/static/partials/contactsmanager.html index 8484b141..d727cee9 100644 --- a/static/partials/contactsmanager.html +++ b/static/partials/contactsmanager.html @@ -1,14 +1,8 @@ -
- - -
-
+
-
-
- +
+
diff --git a/static/partials/contactsmanageradd.html b/static/partials/contactsmanageradd.html index d7764d73..e9cdf25d 100644 --- a/static/partials/contactsmanageradd.html +++ b/static/partials/contactsmanageradd.html @@ -5,7 +5,7 @@
-
+
@@ -18,8 +18,8 @@
-
- +
+
diff --git a/static/partials/contactsmanagerbutton.html b/static/partials/contactsmanagerbutton.html new file mode 100644 index 00000000..f892fa68 --- /dev/null +++ b/static/partials/contactsmanagerbutton.html @@ -0,0 +1,8 @@ +
+ {{_('Contacts')}} +
+
+ +
+
+
diff --git a/static/partials/contactsmanageredit.html b/static/partials/contactsmanageredit.html index b76e4455..b781649c 100644 --- a/static/partials/contactsmanageredit.html +++ b/static/partials/contactsmanageredit.html @@ -20,7 +20,7 @@
- {{_('Upload')}} + {{_('Upload')}} diff --git a/static/partials/settings.html b/static/partials/settings.html index 14b0e726..de5061c7 100644 --- a/static/partials/settings.html +++ b/static/partials/settings.html @@ -69,16 +69,9 @@ - -
- {{_('Contacts')}} -
-
- -
-
-
- +
+ +
{{_('Media')}}