From ee8cded40ec39b4654bbe3ce07cba316c0adccc4 Mon Sep 17 00:00:00 2001
From: Thomas Tanghus <thomas@tanghus.net>
Date: Fri, 5 Apr 2013 22:21:08 +0200
Subject: [PATCH] Contacts: Add thumbnails to merge list and move list item to
 template.

---
 css/contacts.css       | 13 +++++++++++++
 js/app.js              | 18 +++++++++++++-----
 templates/contacts.php |  4 +++-
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/css/contacts.css b/css/contacts.css
index 98563f93..b02b706a 100644
--- a/css/contacts.css
+++ b/css/contacts.css
@@ -475,6 +475,19 @@ input[type="checkbox"].propertytype { width: 10px; }
 #dialog-merge-contacts .mergelist {
 	margin: 10px;
 }
+#dialog-merge-contacts .mergelist > li {
+	text-indent: 30px;
+	height: 30px;
+	-webkit-transition:background-image 500ms; -moz-transition:background-image 500ms; -o-transition:background-image 500ms;  transition:background-image 500ms;
+	position:relative;
+	background-position: 0 .2em !important; background-repeat:no-repeat !important;
+}
+#dialog-merge-contacts .mergelist > li > input:radio {
+	/*margin-left: 25px;*/
+}
+#dialog-merge-contacts .mergelist > li > label {
+	font-weight: normal;
+}
 .no-svg .favorite { display: inline-block; float: left; height: 20px; width: 20px; background-image:url('%appswebroot%/contacts/img/inactive_star.png'); }
 .no-svg .favorite.active, .favorite:hover { background-image:url('%appswebroot%/contacts/img/active_star.png'); }
 .no-svg .favorite.inactive { background-image:url('%appswebroot%/contacts/img/inactive_star.png'); }
diff --git a/js/app.js b/js/app.js
index a40ce41e..05b563e8 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1387,12 +1387,20 @@ OC.Contacts = OC.Contacts || {
 			this.$mergeContactsTmpl = $('#mergeContactsTemplate');
 		}
 		var $dlg = this.$mergeContactsTmpl.octemplate();
-		var $contactList = $dlg.find('.mergelist');
+		var $liTmpl = $dlg.find('li').detach();
+		var $mergeList = $dlg.find('.mergelist');
 		$.each(contacts, function(idx, contact) {
-			var checked = idx === 0 ? 'checked ' : '';
-			var $li = $('<li><input type="radio" {checked} name="contact" value="{id}">{displayname}</li>')
-				.octemplate({checked: checked, id: contact.getId(), displayname: contact.getDisplayName()});
-			$contactList.append($li);
+			var $li = $liTmpl
+				.octemplate({idx: idx, id: contact.getId(), displayname: contact.getDisplayName()});
+			if(!contact.data.thumbnail) {
+				$li.addClass('thumbnail');
+			} else {
+				$li.css('background-image', 'url(data:image/png;base64,' + contact.data.thumbnail + ')');
+			}
+			if(idx === 0) {
+				$li.find('input:radio').prop('checked', true);
+			}
+			$mergeList.append($li);
 		});
 		this.$contactList.addClass('dim');
 		$('#merge_contacts_dialog').html($dlg).ocdialog({
diff --git a/templates/contacts.php b/templates/contacts.php
index ced03cf5..a77370ce 100644
--- a/templates/contacts.php
+++ b/templates/contacts.php
@@ -146,7 +146,9 @@
 	<div id="dialog-merge-contacts" title="<?php p($l->t('Merge contacts')); ?>">
 		<p><?php p($l->t('Which contact should the data be merged into?')); ?></p>
 		<fieldset>
-			<ul class="mergelist"></ul>
+			<ul class="mergelist">
+				<li><input id="mergee_{idx}" type="radio" name="contact" value="{id}"><label for="mergee_{idx}" >{displayname}</label></li>
+			</ul>
 		</fieldset>
 		<p>
 		<input type="checkbox" id="delete_other" name="delete_other" />