Larger clickable space for checkboxes. Possibly fixes owncloud/#326.

css/contacts.css

@@ -7,9 +7,9 @@
 }
 #content li { cursor: default; }
 #contactsHeader input[type=checkbox] {
-	margin-top: 4px;
-	margin-left: 17px;
-	margin-right: 18px;
+	position: absolute;
+	top: 18px;
+	left: 18px;
 }
 #content input[type=radio] { 
 	width: 12px; height: 12px; 
@@ -673,14 +673,11 @@ fieldset.adr ul li input.label { margin-top: -4px !important; }
 	vertical-align: middle;
 	margin-bottom: 2px;
 }
-#contactsHeader .toggle {
-	margin: 0 15px;
-	opacity: 1;
-}
 #contactsHeader select {
 	width: auto;
 	max-width: 120px;
 	height: 22px;
+	margin-left: 50px;
 	font-weight: normal;
 	color: black;
 	border: 0;
@@ -777,6 +774,12 @@ tbody tr.contact.active, tbody tr.contact:hover {
 	position: absolute;
 	z-index: 1;
 }
+#contactlist tbody > tr > td.name > input[type=checkbox] + label, #select_all + label {
+	height: 50px;
+	position: absolute;
+	width: 50px;
+	z-index: 5;
+}
 #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;
 }

js/app.js

@@ -809,6 +809,12 @@ OC.Contacts = OC.Contacts || {
 				self.showActions(['toggle', 'add', 'download', 'groups', 'delete', 'favorite', 'merge']);
 			}
 		});
+		
+		this.$contactList.on('click', 'label', function(event) {
+			var id = $(this).attr('for');
+			$(id).prop('checked', !checkBoxes.prop('checked'));
+			return false; // Prevent opening contact
+		});
 
 		this.$sortOrder.on('change', function() {
 			$(this).blur().addClass('loading');

templates/contacts.php

@@ -67,7 +67,8 @@
 				<tr id="contactsHeader" class="hidden-on-load">
 					<td class="name">
 						<span class="actions_left">
-						<input type="checkbox" class="toggle" title="<?php p($l->t('(De-)select all')); ?>" />
+						<input type="checkbox" class="toggle" id="select_all" title="<?php p($l->t('(De-)select all')); ?>" />
+						<label for="select_all"></label>
 						<select class="action sort permanent" name="sort" title="<?php p($l->t('Sort order')); ?>">
 							<option value="fn"><?php p($l->t('Display name')); ?></option>
 							<option value="fl"><?php p($l->t('First- Lastname')); ?></option>
@@ -205,7 +206,8 @@
 <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}" />
+			<input type="checkbox" id="select-{id}" name="id" value="{id}" />
+			<label for="select-{id}"></label>
 			<div class="avatar"></div>
 			<a href="#{id}" class="nametext">{name}</a>
 		</td>