From 0386e1fcfc78e7334586b193ec67d1c9ea4fbef7 Mon Sep 17 00:00:00 2001
From: Jan ten Bokkel <>
Date: Sat, 14 Dec 2013 15:22:42 +0100
Subject: [PATCH] Implemented default ownCloud contact avatars. Fixes
 https://github.com/owncloud/contacts/issues/287

---
 css/contacts.css         | 15 ++++++++++-----
 js/contacts.js           |  2 ++
 lib/utils/properties.php |  2 +-
 templates/contacts.php   |  4 +++-
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/css/contacts.css b/css/contacts.css
index 41f98098..dbc103b7 100644
--- a/css/contacts.css
+++ b/css/contacts.css
@@ -552,10 +552,6 @@ input:not([type=checkbox]).propertytype {
 	text-align: right; 
 	margin: 0;
 }
-
-.thumbnail {
-	background-image:url('%appswebroot%/contacts/img/person.png');
-}
 input[type=checkbox].propertytype { width: 10px; }
 .contactphoto { 
 	border: 1px solid #bbb; 
@@ -720,7 +716,14 @@ fieldset.adr ul li input.label { margin-top: -4px !important; }
 	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
 #contactlist .nametext {
-	margin-left: 10px;
+	margin-left: 55px;
+}
+#contactlist .avatar {
+	position: absolute;
+	margin-top: 10px;
+	height: 32px;
+	width: 32px;
+ 	margin-left: 10px;
 }
 /* Override default style for an open cpntact */
 tbody tr, tbody tr.hover {
@@ -749,6 +752,8 @@ tbody tr.contact.active, tbody tr.contact:hover {
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0;
 	float:left;
 	margin: 32px 0 4px 32px;
+	position: absolute;
+	z-index: 1;
 }
 #contactlist tbody > tr:hover > td.name > input[type=checkbox]:first-child {
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1;
diff --git a/js/contacts.js b/js/contacts.js
index fb423f00..ee70743a 100644
--- a/js/contacts.js
+++ b/js/contacts.js
@@ -1576,6 +1576,8 @@ OC.Contacts = OC.Contacts || {};
 	 */
 	Contact.prototype.setThumbnail = function($elem, refresh) {
 		if(!this.data.thumbnail && !refresh) {
+			this.getListItemElement().find('.avatar').css('height', '32px');
+			this.getListItemElement().find('.avatar').imageplaceholder(this.getDisplayName());
 			return;
 		}
 		if(!$elem) {
diff --git a/lib/utils/properties.php b/lib/utils/properties.php
index cdf42d50..e356c0de 100644
--- a/lib/utils/properties.php
+++ b/lib/utils/properties.php
@@ -29,7 +29,7 @@ Properties::$l10n = \OCP\Util::getL10N('contacts');
 Class Properties {
 
 	const THUMBNAIL_PREFIX = 'contact-thumbnail-';
-	const THUMBNAIL_SIZE = 28;
+	const THUMBNAIL_SIZE = 32;
 
 	private static $deleteindexstmt;
 	private static $updateindexstmt;
diff --git a/templates/contacts.php b/templates/contacts.php
index 6791303c..7d0fbf4b 100644
--- a/templates/contacts.php
+++ b/templates/contacts.php
@@ -189,7 +189,9 @@
 <script id="contactListItemTemplate" type="text/template">
 	<tr class="contact" data-id="{id}" data-parent="{parent}" data-backend="{backend}">
 		<td class="name thumbnail">
-			<input type="checkbox" name="id" value="{id}" /><a href="#{id}" class="nametext">{name}</a>
+			<input type="checkbox" name="id" value="{id}" />
+			<div class="avatar"></div>
+			<a href="#{id}" class="nametext">{name}</a>
 		</td>
 		<td class="email">
 			<a href="mailto:{email}">{email}&nbsp;</a>