Some UI and code restructering according to usability tests: https://mail.kde.org/pipermail/owncloud/2012-May/003194.html

4 files changed, 53 insertions, 47 deletions

diff --git a/apps/contacts/ajax/addcontact.php b/apps/contacts/ajax/addcontact.php
index dc083df1fa5..ee451098f1d 100755
--- a/apps/contacts/ajax/addcontact.php
+++ b/apps/contacts/ajax/addcontact.php
@@ -45,6 +45,7 @@ if(!$aid) {
 }
 OC_Contacts_App::getAddressbook( $aid ); // is owner access check
 
+$isnew = isset($_POST['isnew'])?$_POST['isnew']:false;
 $fn = trim($_POST['fn']);
 $n = trim($_POST['n']);
 
@@ -53,7 +54,7 @@ $vcard->setUID();
 $vcard->setString('FN',$fn);
 $vcard->setString('N',$n);
 
-$id = OC_Contacts_VCard::add($aid,$vcard);
+$id = OC_Contacts_VCard::add($aid,$vcard, null, $isnew);
 if(!$id) {
 	OCP\JSON::error(array('data' => array('message' => OC_Contacts_App::$l10n->t('There was an error adding the contact.'))));
 	OCP\Util::writeLog('contacts','ajax/addcontact.php: Recieved non-positive ID on adding card: '.$id, OCP\Util::ERROR);
diff --git a/apps/contacts/css/contacts.css b/apps/contacts/css/contacts.css
index 71137e79ec8..1dd6648c477 100644
--- a/apps/contacts/css/contacts.css
+++ b/apps/contacts/css/contacts.css
@@ -102,5 +102,6 @@ input[type="checkbox"] { width: 20px; height: 20px; vertical-align: bottom; }
 .propertycontainer[data-element="TEL"] > input[type="text"] { width: 10em !important; float: left; }
 .propertylist li > input[type="checkbox"],input[type="radio"] { float: left; clear: left; width: 20px; height: 20px; vertical-align: middle; }
 .propertylist li > select { float: left; max-width: 8em; }
-.typelist { float: left; max-width: 10em; border: 0; background-color: #fff; } /* for multiselect */
+.typelist[type="button"] { float: left; max-width: 10em; border: 0; background-color: #fff; color: #bbb} /* for multiselect */
+.typelist[type="button"]:hover { color: #777; } /* for multiselect */
 .addresslist { clear: both; font-weight: bold; }
diff --git a/apps/contacts/js/contacts.js b/apps/contacts/js/contacts.js
index 44b29792206..ee9fadfffb5 100644
--- a/apps/contacts/js/contacts.js
+++ b/apps/contacts/js/contacts.js
@@ -149,7 +149,34 @@ Contacts={
 					click: function() { $(this).dialog('close'); }
 				}
 			] );
+
+			$('#fn').blur(function(){
+				if($('#fn').val() == '') {
+					OC.dialogs.alert(t('contacts','The name field cannot be empty. Please enter a name for this contact.'), t('contacts','Name is empty'), function() { $('#fn').focus(); });
+					$('#fn').focus();
+					return false;
+				}
+			});
 			
+			// Name has changed. Update it and reorder.
+			$('#fn').change(function(){
+				var name = $('#fn').val();
+				var item = $('#contacts [data-id="'+Contacts.UI.Card.id+'"]').clone();
+				$('#contacts [data-id="'+Contacts.UI.Card.id+'"]').remove();
+				$(item).find('a').html(name);
+				var added = false;
+				$('#contacts li').each(function(){
+					if ($(this).text().toLowerCase() > name.toLowerCase()) {
+						$(this).before(item).fadeIn('fast');
+						added = true;
+						return false;
+					}
+				});
+				if(!added) {
+					$('#leftcontent ul').append(item);
+				}
+			});
+
 			$('#categories').multiple_autocomplete({source: categories});
 			$('#contacts_deletecard').tipsy({gravity: 'ne'});
 			$('#contacts_downloadcard').tipsy({gravity: 'ne'});
@@ -212,6 +239,12 @@ Contacts={
 			doImport:function(){
 				Contacts.UI.notImplemented();
 			},
+			editNew:function(){ // add a new contact
+				this.id = ''; this.fn = ''; this.fullname = ''; this.givname = ''; this.famname = ''; this.addname = ''; this.honpre = ''; this.honsuf = '';
+				//Contacts.UI.Card.add(t('contacts', 'Contact')+';'+t('contacts', 'New')+';;;', t('contacts', 'New Contact'), '', true);
+				Contacts.UI.Card.add(';;;;;', '', '', true);
+				return false;
+			},
 			add:function(n, fn, aid, isnew){ // add a new contact
 				var card = $('#card')[0];
 				if(!card) {
@@ -224,7 +257,7 @@ Contacts={
 						}
 					});
 				}
-				$.post(OC.filePath('contacts', 'ajax', 'addcontact.php'), { n: n, fn: fn, aid: aid },
+				$.post(OC.filePath('contacts', 'ajax', 'addcontact.php'), { n: n, fn: fn, aid: aid, isnew: isnew },
 				  function(jsondata) {
 					if (jsondata.status == 'success'){
 						$('#rightcontent').data('id',jsondata.data.id);
@@ -248,11 +281,11 @@ Contacts={
 								if(isnew) { // add some default properties
 									Contacts.UI.Card.addProperty('EMAIL');
 									Contacts.UI.Card.addProperty('TEL');
-									Contacts.UI.Card.addProperty('NICKNAME');
-									Contacts.UI.Card.addProperty('ORG');
-									Contacts.UI.Card.addProperty('CATEGORIES');
+									//Contacts.UI.Card.addProperty('NICKNAME');
+									//Contacts.UI.Card.addProperty('ORG');
+									//Contacts.UI.Card.addProperty('CATEGORIES');
 									$('#fn').focus();
-									$('#fn').select();
+									//$('#fn').val('');
 								}
 							}
 							else{
@@ -463,11 +496,6 @@ Contacts={
 					}
 				});
 			},
-			editNew:function(){ // add a new contact
-				this.id = ''; this.fn = ''; this.fullname = ''; this.givname = ''; this.famname = ''; this.addname = ''; this.honpre = ''; this.honsuf = '';
-				Contacts.UI.Card.add(t('contacts', 'Contact')+';'+t('contacts', 'New')+';;;', t('contacts', 'New Contact'), '', true);
-				return false;
-			},
 			savePropertyInternal:function(name, fields, oldchecksum, checksum){
 				// TODO: Add functionality for new fields.
 				//console.log('savePropertyInternal: ' + name + ', fields: ' + fields + 'checksum: ' + checksum);
@@ -521,7 +549,7 @@ Contacts={
 				q = q + '&id=' + this.id + '&name=' + name;
 				if(checksum != undefined && checksum != '') { // save
 					q = q + '&checksum=' + checksum;
-					console.log('Saving: ' + q);
+					//console.log('Saving: ' + q);
 					$(obj).attr('disabled', 'disabled');
 					$.post(OC.filePath('contacts', 'ajax', 'saveproperty.php'),q,function(jsondata){
 						if(jsondata.status == 'success'){
@@ -539,7 +567,7 @@ Contacts={
 						}
 					},'json');
 				} else { // add
-					console.log('Adding: ' + q);
+					//console.log('Adding: ' + q);
 					$(obj).attr('disabled', 'disabled');
 					$.post(OC.filePath('contacts', 'ajax', 'addproperty.php'),q,function(jsondata){
 						if(jsondata.status == 'success'){
@@ -1404,7 +1432,9 @@ Contacts={
 				});
 			},
 			refreshThumbnail:function(id){
-				$('#contacts [data-id="'+id+'"]').find('a').css('background','url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+id+'&refresh=1'+Math.random()+') no-repeat');
+				var item = $('#contacts [data-id="'+id+'"]').find('a');
+				item.html(Contacts.UI.Card.fn);
+				item.css('background','url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+id+'&refresh=1'+Math.random()+') no-repeat');
 			}
 		}
 	}
@@ -1484,33 +1514,6 @@ $(document).ready(function(){
 		Contacts.UI.Card.saveProperty(this);
 	});
 
-	$('#fn').blur(function(){
-		if($('#fn').val() == '') {
-			OC.dialogs.alert(t('contacts','The name field cannot be empty. Please enter a name for this contact.'), t('contacts','Name is empty'), function() { $('#fn').focus(); });
-			$('#fn').focus();
-			return false;
-		}
-	});
-	
-	// Name has changed. Update it and reorder.
-	$('#fn').change(function(){
-		var name = $('#fn').val();
-		var item = $('#contacts [data-id="'+Contacts.UI.Card.id+'"]').clone();
-		$('#contacts [data-id="'+Contacts.UI.Card.id+'"]').remove();
-		$(item).find('a').html(name);
-		var added = false;
-		$('#contacts li').each(function(){
-			if ($(this).text().toLowerCase() > name.toLowerCase()) {
-				$(this).before(item).fadeIn('fast');
-				added = true;
-				return false;
-			}
-		});
-		if(!added) {
-			$('#leftcontent ul').append(item);
-		}
-	});
-
 	// Profile picture upload handling
 	// New profile picture selected
 	$('#file_upload_start').change(function(){
diff --git a/apps/contacts/lib/vcard.php b/apps/contacts/lib/vcard.php
index eb33d223071..c2ab0e07e91 100755
--- a/apps/contacts/lib/vcard.php
+++ b/apps/contacts/lib/vcard.php
@@ -261,19 +261,20 @@ class OC_Contacts_VCard{
 	 * @param string $uri the uri of the card, default based on the UID
 	 * @return insertid on success or null if no card.
 	 */
-	public static function add($aid, OC_VObject $card, $uri=null){
+	public static function add($aid, OC_VObject $card, $uri=null, $isnew=false){
 		if(is_null($card)){
 			OCP\Util::writeLog('contacts','OC_Contacts_VCard::add. No vCard supplied', OCP\Util::ERROR);
 			return null;
 		};
 
-		OC_Contacts_App::loadCategoriesFromVCard($card);
-
-		self::updateValuesFromAdd($aid, $card);
+		if(!$isnew) {
+			OC_Contacts_App::loadCategoriesFromVCard($card);
+			self::updateValuesFromAdd($aid, $card);
+		}
 
 		$fn = $card->getAsString('FN');
 		if (empty($fn)) {
-			$fn = null;
+			$fn = '';
 		}
 
 		if (!$uri) {