From 4d60f9d3bdcbb2634d9e08de9b23437d71fbbb1d Mon Sep 17 00:00:00 2001
From: Jakob Sack <kde@jakobsack.de>
Date: Sat, 22 Oct 2011 21:28:20 +0200
Subject: [PATCH] improved style in contacts

---
 apps/contacts/css/styles.css                  |  7 +-
 apps/contacts/js/interface.js                 |  5 +-
 .../templates/part.addpropertyform.php        | 72 -----------------
 apps/contacts/templates/part.details.php      | 77 ++++++++++++++++++-
 4 files changed, 76 insertions(+), 85 deletions(-)
 delete mode 100644 apps/contacts/templates/part.addpropertyform.php

diff --git a/apps/contacts/css/styles.css b/apps/contacts/css/styles.css
index 972902c0500..68f843b7aaf 100644
--- a/apps/contacts/css/styles.css
+++ b/apps/contacts/css/styles.css
@@ -1,19 +1,16 @@
-.contacts_details_left {text-align:right;vertical-align:top;padding:2px;}
-.contacts_details_right {text-align:left;vertical-align:top;padding:2px;}
-
 #contacts_details_name { font-weight:bold;font-size:1.1em;margin-left:25%;}
 #contacts_details_photo { margin:.5em 0em .5em 25%; }
 
 #contacts_deletecard {position:absolute;top:15px;right:0;}
 #contacts_details_list { list-style:none; }
 #contacts_details_list li { overflow:hidden; }
-#contacts_details_list li p.contacts_property_name { width:25%; float:left; }
+#contacts_details_list li p.contacts_property_name { width:25%; float:left;text-align:right;padding-right:0.3em; }
 #contacts_details_list li p.contacts_property_data, #contacts_details_list li ul.contacts_property_data { width:72%; overflow:hidden; }
 #contacts_addproperty, #contacts_addproperty_button { margin-left:25%; }
 
 .contacts_property_data ul, .contacts_property_data ol { list-style:none; }
 .contacts_property_data li { overflow: hidden; }
-.contacts_property_data li label { width:20%; float:left; }
+.contacts_property_data li label { width:20%; float:left; text-align:right;padding-right:0.3em; }
 .contacts_property_data li input { width:70%;overflow:hidden; }
 
 /* Form setup ----------------------------------------------------------------*/
diff --git a/apps/contacts/js/interface.js b/apps/contacts/js/interface.js
index da5c1f3760f..9270297f322 100644
--- a/apps/contacts/js/interface.js
+++ b/apps/contacts/js/interface.js
@@ -69,10 +69,7 @@ $(document).ready(function(){
 	$('#contacts_addpropertyform input[type="submit"]').live('click',function(){
 		$.post('ajax/addproperty.php',$('#contacts_addpropertyform').serialize(),function(jsondata){
 			if(jsondata.status == 'success'){
-				$('#contacts_details_list').append(jsondata.data.page);
-				$('#contacts_addpropertyform').remove();
-				$('#contacts_addcontactsparts').remove();
-				$('#contacts_addproperty').show();
+				$('#contacts_addpropertyform').before(jsondata.data.page);
 			}
 			else{
 				alert(jsondata.data.message);
diff --git a/apps/contacts/templates/part.addpropertyform.php b/apps/contacts/templates/part.addpropertyform.php
deleted file mode 100644
index b0e93b01604..00000000000
--- a/apps/contacts/templates/part.addpropertyform.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<li class="contacts_property_add">
-	<form id="contacts_addpropertyform">
-		<input type="hidden" name="id" value="<?php echo $_['id']; ?>">
-		<p class="contacts_property_name">
-			<select name="name" size="1">
-				<option value="ADR"><?php echo $l->t('Address'); ?></option>
-				<option value="TEL"><?php echo $l->t('Telephone'); ?></option>
-				<option value="EMAIL" selected="selected"><?php echo $l->t('Email'); ?></option>
-				<option value="ORG"><?php echo $l->t('Organization'); ?></option>
-			</select>
-		</p>
-		<p class="contacts_property_data" id="contacts_generic">
-			<input type="text" name="value" value="">
-		</p><br>
-		<input id="contacts_addproperty_button" type="submit">
-	</form>
-	<div id="contacts_addcontactsparts" style="display:none;">
-		<ul class="contacts_property_data" id="contacts_addresspart">
-			<li>
-				<label for="adr_type"><?php echo $l->t('Type'); ?></label>
-				<select id="adr_type" name="parameters[TYPE]" size="1">
-					<option value="work"><?php echo $l->t('Work'); ?></option>
-					<option value="home" selected="selected"><?php echo $l->t('Home'); ?></option>
-				</select>
-			</li>
-			<li>
-				<label for="adr_pobox"><?php echo $l->t('PO Box'); ?></label>
-				<input id="adr_pobox" type="text" name="value[0]" value="">
-			</li>
-			<li>
-				<label for="adr_extended"><?php echo $l->t('Extended'); ?></label>
-				<input id="adr_extended" type="text" name="value[1]" value="">
-			</li>
-			<li>
-				<label for="adr_street"><?php echo $l->t('Street'); ?></label>
-				<input id="adr_street" type="text" name="value[2]" value="">
-			</li>
-			<li>
-				<label for="adr_city"><?php echo $l->t('City'); ?></label>
-				<input id="adr_city" type="text" name="value[3]" value="">
-			</li>
-			<li>
-				<label for="adr_region"><?php echo $l->t('Region'); ?></label>
-				<input id="adr_region" type="text" name="value[4]" value="">
-			</li>
-			<li>
-				<label for="adr_zipcode"><?php echo $l->t('Zipcode'); ?></label>
-				<input id="adr_zipcode" type="text" name="value[5]" value="">
-			</li>
-			<li>
-				<label for="adr_country"><?php echo $l->t('Country'); ?></label>
-				<input id="adr_country" type="text" name="value[6]" value="">
-			</li>
-		</ul>
-		<p class="contacts_property_data" id="contacts_phonepart">
-			<input type="text" name="value" value="">
-			<select name="parameters[TYPE]" size="1">
-				<option value="home"><?php echo $l->t('Home'); ?></option>
-				<option value="cell" selected="selected"><?php echo $l->t('Mobile'); ?></option>
-				<option value="work"><?php echo $l->t('Work'); ?></option>
-				<option value="text"><?php echo $l->t('Text'); ?></option>
-				<option value="voice"><?php echo $l->t('Voice'); ?></option>
-				<option value="fax"><?php echo $l->t('Fax'); ?></option>
-				<option value="video"><?php echo $l->t('Video'); ?></option>
-				<option value="pager"><?php echo $l->t('Pager'); ?></option>
-			</select>
-		</p>
-		<p class="contacts_property_data" id="contacts_generic">
-			<input type="text" name="value" value="">
-		</p>
-	</div>
-</li>
diff --git a/apps/contacts/templates/part.details.php b/apps/contacts/templates/part.details.php
index afb2b468f0c..e9fa8356e8b 100644
--- a/apps/contacts/templates/part.details.php
+++ b/apps/contacts/templates/part.details.php
@@ -1,5 +1,6 @@
 <?php if(array_key_exists('FN',$_['details'])): ?>
 	<p id="contacts_details_name"><?php echo $_['details']['FN'][0]['value']; ?></p>
+	<img class="svg action" id="contacts_deletecard" src="<?php echo image_path('', 'actions/delete.svg'); ?>" title="<?php echo $l->t('Delete contact');?>" />
 
 	<?php if(isset($_['details']['PHOTO'])): // Emails first ?>
 		<img id="contacts_details_photo" src="photo.php?id=<?php echo $_['id']; ?>">
@@ -21,9 +22,77 @@
 				<?php endforeach; ?>
 			<?php endif; ?>
 		<?php endforeach; ?>
+		<li class="contacts_property_add">
+			<form id="contacts_addpropertyform">
+				<input type="hidden" name="id" value="<?php echo $_['id']; ?>">
+				<p class="contacts_property_name">
+					<select name="name" size="1">
+						<option value="ADR"><?php echo $l->t('Address'); ?></option>
+						<option value="TEL"><?php echo $l->t('Telephone'); ?></option>
+						<option value="EMAIL" selected="selected"><?php echo $l->t('Email'); ?></option>
+						<option value="ORG"><?php echo $l->t('Organization'); ?></option>
+					</select>
+				</p>
+				<p class="contacts_property_data" id="contacts_generic">
+					<input type="text" name="value" value="">
+				</p><br>
+				<input id="contacts_addproperty_button" type="submit" value="<?php echo $l->t('Add'); ?>">
+			</form>
+			<div id="contacts_addcontactsparts" style="display:none;">
+				<ul class="contacts_property_data" id="contacts_addresspart">
+					<li>
+						<label for="adr_type"><?php echo $l->t('Type'); ?></label>
+						<select id="adr_type" name="parameters[TYPE]" size="1">
+							<option value="work"><?php echo $l->t('Work'); ?></option>
+							<option value="home" selected="selected"><?php echo $l->t('Home'); ?></option>
+						</select>
+					</li>
+					<li>
+						<label for="adr_pobox"><?php echo $l->t('PO Box'); ?></label>
+						<input id="adr_pobox" type="text" name="value[0]" value="">
+					</li>
+					<li>
+						<label for="adr_extended"><?php echo $l->t('Extended'); ?></label>
+						<input id="adr_extended" type="text" name="value[1]" value="">
+					</li>
+					<li>
+						<label for="adr_street"><?php echo $l->t('Street'); ?></label>
+						<input id="adr_street" type="text" name="value[2]" value="">
+					</li>
+					<li>
+						<label for="adr_city"><?php echo $l->t('City'); ?></label>
+						<input id="adr_city" type="text" name="value[3]" value="">
+					</li>
+					<li>
+						<label for="adr_region"><?php echo $l->t('Region'); ?></label>
+						<input id="adr_region" type="text" name="value[4]" value="">
+					</li>
+					<li>
+						<label for="adr_zipcode"><?php echo $l->t('Zipcode'); ?></label>
+						<input id="adr_zipcode" type="text" name="value[5]" value="">
+					</li>
+					<li>
+						<label for="adr_country"><?php echo $l->t('Country'); ?></label>
+						<input id="adr_country" type="text" name="value[6]" value="">
+					</li>
+				</ul>
+				<p class="contacts_property_data" id="contacts_phonepart">
+					<input type="text" name="value" value="">
+					<select name="parameters[TYPE]" size="1">
+						<option value="home"><?php echo $l->t('Home'); ?></option>
+						<option value="cell" selected="selected"><?php echo $l->t('Mobile'); ?></option>
+						<option value="work"><?php echo $l->t('Work'); ?></option>
+						<option value="text"><?php echo $l->t('Text'); ?></option>
+						<option value="voice"><?php echo $l->t('Voice'); ?></option>
+						<option value="fax"><?php echo $l->t('Fax'); ?></option>
+						<option value="video"><?php echo $l->t('Video'); ?></option>
+						<option value="pager"><?php echo $l->t('Pager'); ?></option>
+					</select>
+				</p>
+				<p class="contacts_property_data" id="contacts_generic">
+					<input type="text" name="value" value="">
+				</p>
+			</div>
+		</li>
 	</ul>
-	<form>
-		<img class="svg action" id="contacts_deletecard" src="<?php echo image_path('', 'actions/delete.svg'); ?>" title="<?php echo $l->t('Delete contact');?>" />
-		<input type="button" id="contacts_addproperty" value="<?php echo $l->t('Add Property');?>">
-	</form>
 <?php endif; ?>