Avatar upload

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__header .contactdetails__logo.contact__icon {
-	background-color: transparent;
-	height: 75px;
-	width: 75px;
+
+.avatar-upload {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+
+	background-color: rgba(0,0,0,0.2);
 	font-size: 2.5em;
 	line-height: 75px;
+
+	display: none;
+
 }
-.contactdetails__header .contactdetails__logo.contact__icon > span {
+
+.avatar-upload > .icon-upload-white {
 	display: block;
 	width: 100%;
 	height: 100%;
 	opacity: 0.5;
 	cursor: pointer;
 }
-.contactdetails__header .contactdetails__logo.contact__icon:hover > span {
+.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

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

js/components/avatar/avatar_directive.js

@@ -0,0 +1,34 @@
+angular.module('contactsApp')
+.directive('avatar', function(ContactService) {
+	return {
+		scope: {
+			contact: '=data'
+		},
+		link: function(scope, element) {
+			var importText = t('contacts', 'Import');
+			scope.importText = importText;
+
+			var input = element.find('input');
+			input.bind('change', function() {
+				var file = input.get(0).files[0];
+				if (file.size > 1024*1024) { // 1 MB
+					OC.Notification.showTemporary(t('contacts', 'The selected image is too big (max 1MB)'));
+				} else {
+					var reader = new FileReader();
+
+					reader.addEventListener('load', function () {
+						scope.$apply(function() {
+							scope.contact.photo(reader.result);
+							ContactService.update(scope.contact);
+						});
+					}, false);
+
+					if (file) {
+						reader.readAsDataURL(file);
+					}
+				}
+			});
+		},
+		templateUrl: OC.linkTo('contacts', 'templates/avatar.html')
+	};
+});

js/components/contactDetails/contactDetails_controller.js

@@ -56,7 +56,6 @@ angular.module('contactsApp')
 				return;
 			}
 			ctrl.contact = contact;
-			ctrl.photo = ctrl.contact.photo();
 			ctrl.show = true;
 			$('#app-navigation-toggle').addClass('showdetails');
 

js/models/contact_model.js

@@ -90,12 +90,21 @@ angular.module('contactsApp')
 				}
 			},
 
-			photo: function() {
-				var property = this.getProperty('photo');
-				if(property) {
-					return property.value;
+			photo: function(value) {
+				if (angular.isDefined(value)) {
+					// setter
+					// splits image data into "data:image/jpeg" and base 64 encoded image
+					var imageData = value.split(';base64,');
+					var imageType = imageData[0].slice('data:'.length);
+
+					return this.setProperty('photo', { value: imageData[1], meta: {type: [imageType]} });
 				} else {
-					return undefined;
+					var property = this.getProperty('photo');
+					if(property) {
+						return 'data:' + property.meta.type + ';base64,' + property.value;
+					} else {
+						return undefined;
+					}
 				}
 			},
 

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/contact.html

@@ -1,5 +1,5 @@
 <a class="app-content-list-item-link" ng-click="ctrl.openContact()">
-    <img class="app-content-list-item-icon contact__icon" ng-show="ctrl.contact.photo()!==undefined" data-ng-src="data:image/png;base64,{{ctrl.contact.photo()}}" />
+    <img class="app-content-list-item-icon contact__icon" ng-show="ctrl.contact.photo()!==undefined" data-ng-src="{{ctrl.contact.photo()}}" />
     <div class="app-content-list-item-icon contact__icon" ng-show="ctrl.contact.photo()===undefined" ng-style="{'background-color': (ctrl.contact.uid() | contactColor) }">{{ ctrl.contact.displayName() | firstCharacter }}</div>
     <div class="app-content-list-item-star icon-star" data-starred="false"></div>
     <div class="app-content-list-item-line-one" ng-class="{'no-line-two':!ctrl.contact.email()}">{{ ctrl.contact.displayName() | newContact }}</div>

templates/contactDetails.html

@@ -8,8 +8,7 @@ <h2>{{ctrl.t.noContacts}}</h2>
 	</div>
 	<div ng-if="ctrl.contact!==undefined">
 		<header class="contactdetails__header" ng-style="{'background-color': (ctrl.contact.uid() | contactColor)}">
-			<img ng-if="ctrl.photo!==undefined" class="contactdetails__logo avatar" data-ng-src="data:image/png;base64,{{ctrl.photo}}" />
-			<div ng-if="ctrl.photo===undefined" class="contactdetails__logo contact__icon avatar--missing"></div>
+			<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"