Move button to the side bar - fixes #483 (#493)

css/public/style.css

@@ -363,7 +363,6 @@ li.addressBook-share-item span.shareeIdentifier {
 
 /* Contacts List */
 #new-contact-button {
-	margin: 14px auto; /* to have the same height than a contact*/
 }
 
 

js/components/contactList/contactList_controller.js

@@ -10,7 +10,7 @@ angular.module('contactsApp')
 	ctrl.invalid = false;
 
 	ctrl.t = {
-		addContact : t('contacts', 'Add contact'),
+		addContact : t('contacts', '+ New contact'),
 		emptySearch : t('contacts', 'No search result for {query}', {query: ctrl.searchTerm})
 	};
 
@@ -157,21 +157,6 @@ angular.module('contactsApp')
 		ctrl.invalid = (displayName === '');
 	});
 
-	ctrl.createContact = function() {
-		ContactService.create().then(function(contact) {
-			['tel', 'adr', 'email'].forEach(function(field) {
-				var defaultValue = vCardPropertiesService.getMeta(field).defaultValue || {value: ''};
-				contact.addProperty(field, defaultValue);
-			} );
-			if ([t('contacts', 'All contacts'), t('contacts', 'Not grouped')].indexOf($routeParams.gid) === -1) {
-				contact.categories($routeParams.gid);
-			} else {
-				contact.categories('');
-			}
-			$('#details-fullName').focus();
-		});
-	};
-
 	ctrl.hasContacts = function () {
 		if (!ctrl.contacts) {
 			return false;

js/components/newContactButton/newContactButton_controller.js

@@ -0,0 +1,23 @@
+angular.module('contactsApp')
+.controller('newContactButtonCtrl', function($scope, ContactService, $routeParams, vCardPropertiesService) {
+	var ctrl = this;
+
+	ctrl.t = {
+		addContact : t('contacts', '+ New contact')
+	};
+
+	ctrl.createContact = function() {
+		ContactService.create().then(function(contact) {
+			['tel', 'adr', 'email'].forEach(function(field) {
+				var defaultValue = vCardPropertiesService.getMeta(field).defaultValue || {value: ''};
+				contact.addProperty(field, defaultValue);
+			} );
+			if ([t('contacts', 'All contacts'), t('contacts', 'Not grouped')].indexOf($routeParams.gid) === -1) {
+				contact.categories($routeParams.gid);
+			} else {
+				contact.categories('');
+			}
+			$('#details-fullName').focus();
+		});
+	};
+});

js/components/newContactButton/newContactButton_directive.js

@@ -0,0 +1,11 @@
+angular.module('contactsApp')
+.directive('newcontactbutton', function() {
+	return {
+		restrict: 'EA', // has to be an attribute to work with core css
+		scope: {},
+		controller: 'newContactButtonCtrl',
+		controllerAs: 'ctrl',
+		bindToController: {},
+		templateUrl: OC.linkTo('contacts', 'templates/newContactButton.html')
+	};
+});

templates/contactList.html

@@ -1,6 +1,4 @@
 <div style="height: 90%" class="contacts-list" ng-class="{loading: ctrl.loading, 'mobile-show': ctrl.show}">
-        <button ng-show="!ctrl.loading && !ctrl.invalid" class="app-content-list-button" id="new-contact-button"
-				type="button" name="button" ng-click="ctrl.createContact()">{{ctrl.t.addContact}}</button>
         <div class="app-content-list-item"
 			 ng-repeat="contact in ctrl.contactList = (ctrl.contacts | contactGroupFilter:ctrl.routeParams.gid | localeOrderBy:'displayName' | filter:query) as filtered track by contact.uid()"
 			 contact data="contact"

templates/main.php

@@ -25,7 +25,7 @@ vendor_style('select2/select2');
 
 <div id="app" ng-app="contactsApp">
 	<div id="app-navigation">
-
+		<newContactButton></newContactButton>
 		<ul groupList></ul>
 
 		<div id="app-settings">

templates/newContactButton.html

@@ -0,0 +1,2 @@
+<button ng-show="!ctrl.loading && !ctrl.invalid" class="app-content-list-button" id="new-contact-button"
+		type="button" name="button" ng-click="ctrl.createContact()">{{ctrl.t.addContact}}</button>