Add mobile style from Mail app, ref #36

- Maximise the field width and align delete icons
- Added back button
- Don't load first contact when mobile layout
- Hide the contact list when showing contact details

2 files changed, 31 insertions, 4 deletions

diff --git a/js/components/contactDetails/contactDetails_controller.js b/js/components/contactDetails/contactDetails_controller.js
index 04da1b3f..6c14ef34 100644
--- a/js/components/contactDetails/contactDetails_controller.js
+++ b/js/components/contactDetails/contactDetails_controller.js
@@ -1,8 +1,19 @@
 angular.module('contactsApp')
-.controller('contactdetailsCtrl', function(ContactService, AddressBookService, vCardPropertiesService, $routeParams, $scope) {
+.controller('contactdetailsCtrl', function(ContactService, AddressBookService, vCardPropertiesService, $route, $routeParams, $scope) {
+
 	var ctrl = this;
 
 	ctrl.loading = true;
+	ctrl.show = false;
+
+	ctrl.clearContact = function() {
+		$route.updateParams({
+			gid: $routeParams.gid,
+			uid: undefined
+		});
+		ctrl.show = false;
+		ctrl.contact = undefined;
+	};
 
 	ctrl.uid = $routeParams.uid;
 	ctrl.t = {
@@ -35,11 +46,16 @@ angular.module('contactsApp')
 
 	ctrl.changeContact = function(uid) {
 		if (typeof uid === 'undefined') {
+			ctrl.show = false;
+			$('#app-navigation-toggle').removeClass('showdetails');
 			return;
 		}
 		ContactService.getById(uid).then(function(contact) {
 			ctrl.contact = contact;
 			ctrl.photo = ctrl.contact.photo();
+			ctrl.show = true;
+			$('#app-navigation-toggle').addClass('showdetails');
+
 			ctrl.addressBook = _.find(ctrl.addressBooks, function(book) {
 				return book.displayName === ctrl.contact.addressBookId;
 			});
diff --git a/js/components/contactList/contactList_controller.js b/js/components/contactList/contactList_controller.js
index d3358372..eeebab60 100644
--- a/js/components/contactList/contactList_controller.js
+++ b/js/components/contactList/contactList_controller.js
@@ -6,6 +6,7 @@ angular.module('contactsApp')
 
 	ctrl.contactList = [];
 	ctrl.searchTerm = '';
+	ctrl.show = true;
 
 	ctrl.t = {
 		addContact : t('contacts', 'Add contact'),
@@ -69,7 +70,8 @@ angular.module('contactsApp')
 	ContactService.getAll().then(function(contacts) {
 		$scope.$apply(function() {
 			ctrl.contacts = contacts;
-			if (!_.isEmpty(ctrl.contacts)) {
+			// If desktop version, load first contact (see css for min-width media query)
+			if (!_.isEmpty(ctrl.contacts) && $(window).width() > 768) {
 				ctrl.setSelectedId(_.sortBy(contacts, function(contact) {
 					return contact.fullName();
 				})[0].uid());
@@ -78,7 +80,13 @@ angular.module('contactsApp')
 		});
 	});
 
-	$scope.$watch('ctrl.routeParams.uid', function(newValue) {
+	$scope.$watch('ctrl.routeParams.uid', function(newValue, oldValue) {
+		// Used for mobile view to clear the url
+		if(typeof oldValue != 'undefined' && typeof newValue == 'undefined') {
+			// no contact selected
+			ctrl.show = true;
+			return;
+		}
 		if(newValue === undefined) {
 			// we might have to wait until ng-repeat filled the contactList
 			if(ctrl.contactList && ctrl.contactList.length > 0) {
@@ -98,6 +106,9 @@ angular.module('contactsApp')
 					unbindWatch(); // unbind as we only want one update
 				});
 			}
+		} else {
+			// displaying contact details
+			ctrl.show = false;
 		}
 	});
 
@@ -106,7 +117,7 @@ angular.module('contactsApp')
 		ctrl.contactList = [];
 		// watch for next contactList update
 		var unbindWatch = $scope.$watch('ctrl.contactList', function() {
-			if(ctrl.contactList && ctrl.contactList.length > 0) {
+			if(ctrl.contactList && ctrl.contactList.length > 0 && $(window).width() > 768) {
 				$route.updateParams({
 					gid: $routeParams.gid,
 					uid: ctrl.contactList[0].uid()