Contacts: First work on cleaner design.

1 files changed, 37 insertions, 34 deletions

diff --git a/apps/contacts/templates/part.contact.php b/apps/contacts/templates/part.contact.php
index d243c2b5e14..961ce693e65 100644
--- a/apps/contacts/templates/part.contact.php
+++ b/apps/contacts/templates/part.contact.php
@@ -21,12 +21,12 @@ $id = isset($_['id']) ? $_['id'] : '';
 	<img class="svg action" id="contacts_deletecard" src="<?php echo image_path('', 'actions/delete.svg'); ?>" title="<?php echo $l->t('Delete contact');?>" />
 	</div>
 
-	<div class="contactsection">
+	<div id="contact_photo" class="contactsection">
 
-	<form style="display:none;" id="file_upload_form" action="ajax/uploadphoto.php" method="post" enctype="multipart/form-data" target="file_upload_target" class="propertycontainer" data-element="PHOTO">
-	<fieldset id="photo" class="formfloat">
+	<form class="float" id="file_upload_form" action="ajax/uploadphoto.php" method="post" enctype="multipart/form-data" target="file_upload_target" class="propertycontainer" data-element="PHOTO">
+	<fieldset id="photo">
 	<a class="action delete" onclick="$(this).tipsy('hide');Contacts.UI.Card.deleteProperty(this, 'single');" title="<?php echo $l->t('Delete'); ?>"></a>
-		<div id="contacts_details_photo_wrapper" title="<?php echo $l->t('Click or drop to upload picture'); ?> (max <?php echo $_['uploadMaxHumanFilesize']; ?>)">
+		<div class="tip" id="contacts_details_photo_wrapper" title="<?php echo $l->t('Click or drop to upload picture'); ?> (max <?php echo $_['uploadMaxHumanFilesize']; ?>)">
 		<!-- img style="padding: 1em;" id="contacts_details_photo" alt="Profile picture"  src="photo.php?id=<?php echo $_['id']; ?>" / -->
 		<progress id="contacts_details_photo_progress" style="display:none;" value="0" max="100">0 %</progress>
 		</div>
@@ -37,43 +37,40 @@ $id = isset($_['id']) ? $_['id'] : '';
 		<iframe name="file_upload_target" id='file_upload_target' src=""></iframe>
 	</fieldset>
 	</form>
-	<form id="contact_identity" method="post" <?php echo ($_['id']==''||!isset($_['id'])?'style="display:none;"':''); ?>>
+	</div>
+
+	<div id="contact_identity" class="contactsection">
+	<form method="post">
 	<input type="hidden" name="id" value="<?php echo $_['id'] ?>">
-	<fieldset class="propertycontainer" data-element="N"><input type="hidden" id="n" class="contacts_property" name="value" value="" /></fieldset>
-	<fieldset id="ident" class="formfloat">
+	<fieldset id="ident" class="contactpart">
 	<!-- legend>Name</legend -->
-	<dl class="form">
-		<!-- dt><label for="n"><?php echo $l->t('Name'); ?></label></dt>
-		<dd style="padding-top: 0.8em;vertical-align: text-bottom;"><span id="n" type="text"></span></dd -->
-		<dt><label for="fn"><?php echo $l->t('Display name'); ?></label></dt>
-		<dd class="propertycontainer" data-element="FN">
-		<select id="fn_select" title="<?php echo $l->t('Format custom, Short name, Full name, Reverse or Reverse with comma'); ?>" style="width:16em;">
-		</select><a id="edit_name" class="action edit" title="<?php echo $l->t('Edit name details'); ?>"></a>
-		</dd>
+	<span class="propertycontainer" data-element="N"><input type="hidden" id="n" class="contacts_property" name="value" value="" /></span>
+	<span id="name" class="propertycontainer" data-element="FN">
+	<select class="float" id="fn_select" title="<?php echo $l->t('Format custom, Short name, Full name, Reverse or Reverse with comma'); ?>" style="width:16em;">
+	</select><a id="edit_name" class="action edit" title="<?php echo $l->t('Edit name details'); ?>"></a>
+	</span>
+	<dl id="identityprops" class="form">
 		<dt style="display:none;" id="org_label" data-element="ORG"><label for="org"><?php echo $l->t('Organization'); ?></label></dt>
-		<dd style="display:none;" class="propertycontainer" id="org_value" data-element="ORG"><input id="org"  required="required" name="value[ORG]" type="text" class="contacts_property" style="width:16em;" name="value" value="" placeholder="<?php echo $l->t('Organization'); ?>" /><a class="action delete" onclick="$(this).tipsy('hide');Contacts.UI.Card.deleteProperty(this, 'single');" title="<?php echo $l->t('Delete'); ?>"></a></dd>
+		<dd style="display:none;" class="propertycontainer" id="org_value" data-element="ORG"><input id="org" required="required" name="value[ORG]" type="text" class="contacts_property big" name="value" value="" placeholder="<?php echo $l->t('Organization'); ?>" /><a class="action delete" onclick="$(this).tipsy('hide');Contacts.UI.Card.deleteProperty(this, 'single');" title="<?php echo $l->t('Delete'); ?>"></a></dd>
 		<dt style="display:none;" id="nickname_label" data-element="NICKNAME"><label for="nickname"><?php echo $l->t('Nickname'); ?></label></dt>
-		<dd style="display:none;" class="propertycontainer" id="nickname_value" data-element="NICKNAME"><input id="nickname" required="required" name="value[NICKNAME]" type="text" class="contacts_property" style="width:16em;" name="value" value="" placeholder="<?php echo $l->t('Enter nickname'); ?>" /><a class="action delete" onclick="$(this).tipsy('hide');Contacts.UI.Card.deleteProperty(this, 'single');" title="<?php echo $l->t('Delete'); ?>"></a></dd>
+		<dd style="display:none;" class="propertycontainer" id="nickname_value" data-element="NICKNAME"><input id="nickname" required="required" name="value[NICKNAME]" type="text" class="contacts_property big" name="value" value="" placeholder="<?php echo $l->t('Enter nickname'); ?>" /><a class="action delete" onclick="$(this).tipsy('hide');Contacts.UI.Card.deleteProperty(this, 'single');" title="<?php echo $l->t('Delete'); ?>"></a></dd>
 		<dt style="display:none;" id="bday_label" data-element="BDAY"><label for="bday"><?php echo $l->t('Birthday'); ?></label></dt>
-		<dd style="display:none;" class="propertycontainer" id="bday_value" data-element="BDAY"><input id="bday"  required="required" name="value" type="text" class="contacts_property" value="" placeholder="<?php echo $l->t('dd-mm-yyyy'); ?>" /><a class="action delete" onclick="$(this).tipsy('hide');Contacts.UI.Card.deleteProperty(this, 'single');" title="<?php echo $l->t('Delete'); ?>"></a></dd>
-		<dt style="display:none;" id="categories_label" data-element="CATEGORIES"><label for="categories"><?php echo $l->t('Categories'); ?></label></dt>
-		<dd style="display:none;" class="propertycontainer" id="categories_value" data-element="CATEGORIES"><input id="categories" required="required" name="value[CATEGORIES]" type="text" class="contacts_property" style="width:16em;" name="value" value="" placeholder="<?php echo $l->t('Categories'); ?>" /><a class="action delete" onclick="$(this).tipsy('hide');Contacts.UI.Card.deleteProperty(this, 'single');" title="<?php echo $l->t('Delete'); ?>"></a><a class="action edit" onclick="$(this).tipsy('hide');OCCategories.edit();" title="<?php echo $l->t('Edit categories'); ?>"></a></dd>
+		<dd style="display:none;" class="propertycontainer" id="bday_value" data-element="BDAY"><input id="bday"  required="required" name="value" type="text" class="contacts_property big" value="" placeholder="<?php echo $l->t('dd-mm-yyyy'); ?>" /><a class="action delete" onclick="$(this).tipsy('hide');Contacts.UI.Card.deleteProperty(this, 'single');" title="<?php echo $l->t('Delete'); ?>"></a></dd>
+		<dt style="display:none;" id="categories_label" data-element="CATEGORIES"><label for="categories"><?php echo $l->t('Groups'); ?></label></dt>
+		<dd style="display:none;" class="propertycontainer" id="categories_value" data-element="CATEGORIES"><input id="categories" required="required" name="value[CATEGORIES]" type="text" class="contacts_property bold" name="value" value="" placeholder="
+<?php echo $l->t('Separate groups with commas'); ?>" /><a class="action delete" onclick="$(this).tipsy('hide');Contacts.UI.Card.deleteProperty(this, 'single');" title="<?php echo $l->t('Delete'); ?>"></a><a class="action edit" onclick="$(this).tipsy('hide');OCCategories.edit();" title="<?php echo $l->t('Edit categories'); ?>"></a></dd>
 	</dl>
 	</fieldset>
-	<fieldset id="note" class="formfloat propertycontainer contactpart" style="display:none;" data-element="NOTE">
-	<legend><?php echo $l->t('Note'); ?><a class="action delete" onclick="$(this).tipsy('hide');Contacts.UI.Card.deleteProperty(this, 'single');" title="<?php echo $l->t('Delete'); ?>"></a></legend>
-	<textarea class="contacts_property note" name="value" cols="60" rows="10"></textarea>
-	</fieldset>
 	</form>
 	</div>
 
 	<!-- div class="delimiter"></div -->
-	<form id="contact_communication" method="post" style="display: none;">
-	<div class="contactsection">
+	<div id="contact_communication" class="contactsection">
+	<form method="post">
 		<!-- email addresses -->
-		<div id="emails" style="display:none;">
+		<div id="emails">
 		<fieldset class="contactpart">
-		<legend><?php echo $l->t('Email'); ?></legend>
+		<!-- legend><?php echo $l->t('Email'); ?></legend -->
 			<ul id="emaillist" class="propertylist">
 			<li class="template" style="white-space: nowrap; display: none;" data-element="EMAIL">
 				<input type="checkbox" class="contacts_property" name="parameters[TYPE][]" value="PREF" title="<?php echo $l->t('Preferred'); ?>" />
@@ -83,9 +80,9 @@ $id = isset($_['id']) ? $_['id'] : '';
 		</div> <!-- email addresses-->
 
 		<!-- Phone numbers -->
-		<div id="phones" style="display:none;">
+		<div id="phones">
 		<fieldset class="contactpart">
-		<legend><?php echo $l->t('Phone'); ?></legend>
+		<!-- legend><?php echo $l->t('Phone'); ?></legend -->
 			<ul id="phonelist" class="propertylist">
 				<li class="template" style="white-space: nowrap; display: none;" data-element="TEL">
 				<input type="checkbox" class="contacts_property" name="parameters[TYPE][]" value="PREF" title="<?php echo $l->t('Preferred'); ?>" /> 
@@ -100,7 +97,7 @@ $id = isset($_['id']) ? $_['id'] : '';
 		<!-- Addresses -->
 		<div id="addresses" style="display:none;">
 		<fieldset class="contactpart">
-		<legend><?php echo $l->t('Address'); ?></legend>
+		<!-- legend><?php echo $l->t('Address'); ?></legend -->
 		<div id="addressdisplay">
 			<dl class="addresscard template" style="display: none;" data-element="ADR"><dt>
 			<input class="adr contacts_property" name="value" type="hidden" value="" />
@@ -111,11 +108,17 @@ $id = isset($_['id']) ? $_['id'] : '';
 		</fieldset>
 		</div>
 		</div> <!-- Addresses -->
+	</form>
 	</div>
-	<!-- a id="add_address" onclick="Contacts.UI.Card.editAddress('new', true)" class="add" title="<?php echo $l->t('Add address'); ?>"></a -->
-	</div> 
+	<div id="contact_note" class="contactsection">
+	<form class="float" method="post">
+	<fieldset id="note" class="formfloat propertycontainer contactpart" data-element="NOTE">
+	<!-- legend><?php echo $l->t('Note'); ?> --><a class="action delete" onclick="$(this).tipsy('hide');Contacts.UI.Card.deleteProperty(this, 'single');" title="<?php echo $l->t('Delete'); ?>"></a><!-- /legend -->
+	<textarea class="contacts_property note" name="value" cols="40" rows="10" placeholder="<?php echo $l->t('Notes'); ?>"></textarea>
+	</fieldset>
 	</form>
-</div>
+	</div> <!-- contact_note -->
+</div> <!-- card -->
 <div id="edit_photo_dialog" title="Edit photo">
 		<div id="edit_photo_dialog_img"></div>
 </div>