add change avatar functionality

css/public/style.css

@@ -86,32 +86,54 @@
 	opacity: .7
 }
 
-.contactdetails__header .contactdetails__logo {
+avatar {
+	position: relative;
 	height: 75px;
 	width: 75px;
-	object-fit: cover;
-	background-color: transparent;
+	border-radius: 50%;
+	overflow: hidden;
 	flex-shrink: 0;
-	margin: 0;
 }
-.contactdetails__logo.contact__icon {
+
+.avatar-upload {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+
 	background-color: rgba(0,0,0,0.2);
-	height: 75px;
-	width: 75px;
 	font-size: 2.5em;
 	line-height: 75px;
+
+	display: none;
+
 }
-.contactdetails__logo.contact__icon > .icon-upload-white {
+
+.avatar-upload > .icon-upload-white {
 	display: block;
 	width: 100%;
 	height: 100%;
 	opacity: 0.5;
 	cursor: pointer;
 }
-.contactdetails__logo.contact__icon:hover > .icon-upload-white {
+.avatar-upload:hover > .icon-upload-white {
 	opacity: 0.7;
 }
 
+avatar:hover .avatar-upload,
+avatar.avatar--missing .avatar-upload {
+	display: block;
+}
+
+.contactdetails__logo {
+	height: 75px;
+	width: 75px;
+	object-fit: cover;
+	background-color: transparent;
+	margin: 0;
+}
+
 #check-all + label:before {
 	position: absolute;
 	top: 18px;

js/components/avatar/avatar_controller.js

@@ -1,5 +1,5 @@
 angular.module('contactsApp')
-.controller('avataruploadCtrl', function(ContactService) {
+.controller('avatarCtrl', function(ContactService) {
 	var ctrl = this;
 
 	ctrl.import = ContactService.import.bind(ContactService);

js/components/avatar/avatar_directive.js

@@ -1,5 +1,5 @@
 angular.module('contactsApp')
-.directive('avatarupload', function(ContactService) {
+.directive('avatar', function(ContactService) {
 	return {
 		scope: {
 			contact: '=data'
@@ -25,6 +25,6 @@ angular.module('contactsApp')
 				}
 			});
 		},
-		templateUrl: OC.linkTo('contacts', 'templates/avatarUpload.html')
+		templateUrl: OC.linkTo('contacts', 'templates/avatar.html')
 	};
 });

js/components/contactDetails/contactDetails_controller.js

@@ -88,8 +88,4 @@ angular.module('contactsApp')
 	ctrl.changeAddressBook = function (addressBook) {
 		ContactService.moveContact(ctrl.contact, addressBook);
 	};
-
-	ctrl.uploadAvatar = function() {
-		console.log('hi');
-	};
 });

templates/avatar.html

@@ -0,0 +1,5 @@
+<img ng-show="contact.photo()!==undefined" class="contactdetails__logo avatar" data-ng-src="{{contact.photo()}}" />
+<div class="avatar-upload">
+	<input type="file" id="avatar-upload" class="hidden-visually"/>
+	<label for="avatar-upload" class="icon-upload-white"></label>
+</div>

templates/avatarUpload.html

@@ -1,3 +0,0 @@
-<input type="file" id="contact-upload" class="hidden-visually"/>
-<label for="contact-upload" id="upload" class="icon-upload-white">
-</label>

templates/contactDetails.html

@@ -8,8 +8,7 @@
 	</div>
 	<div ng-if="ctrl.contact!==undefined">
 		<header class="contactdetails__header" ng-style="{'background-color': (ctrl.contact.uid() | contactColor)}">
-			<img ng-if="ctrl.contact.photo()!==undefined" class="contactdetails__logo avatar" data-ng-src="{{ctrl.contact.photo()}}" />
-			<avatarupload ng-if="ctrl.contact.photo()===undefined" data="ctrl.contact" class="contactdetails__logo contact__icon avatar--missing"></avatarupload>
+			<avatar data="ctrl.contact" ng-class="{'avatar--missing': ctrl.contact.photo()===undefined}"></avatar>
 			<div id="details-contact-infos">
 				<h2>
 					<input type="text" id="details-fullName" class="contactdetails__name" placeholder="{{ctrl.t.placeholderName}}" autocomplete="off"