Contacts: Improve loading and cleanup of dialogs.

5 files changed, 44 insertions, 29 deletions

diff --git a/apps/contacts/ajax/chooseaddressbook.php b/apps/contacts/ajax/chooseaddressbook.php
index 9088a4e9d7d..1ce8dd46eef 100644
--- a/apps/contacts/ajax/chooseaddressbook.php
+++ b/apps/contacts/ajax/chooseaddressbook.php
@@ -10,5 +10,6 @@
 OCP\JSON::checkLoggedIn();
 OCP\JSON::checkAppEnabled('contacts');
 
-$output = new OCP\Template("contacts", "part.chooseaddressbook");
-$output -> printpage();
+$tmpl = new OCP\Template("contacts", "part.chooseaddressbook");
+$page = $tmpl->fetchPage();
+OCP\JSON::success(array('data' => array('page'=>$page)));
diff --git a/apps/contacts/ajax/editaddress.php b/apps/contacts/ajax/editaddress.php
index 9fb35a0b5f7..969aeeba8f4 100644
--- a/apps/contacts/ajax/editaddress.php
+++ b/apps/contacts/ajax/editaddress.php
@@ -26,6 +26,7 @@ if($checksum) {
 $tmpl->assign('id',$id);
 $tmpl->assign('adr_types',$adr_types);
 
-$tmpl->printpage();
+$page = $tmpl->fetchPage();
+OCP\JSON::success(array('data' => array('page'=>$page, 'checksum'=>$checksum)));
 
 ?>
diff --git a/apps/contacts/ajax/editname.php b/apps/contacts/ajax/editname.php
index dc64eeb5101..9ba280ae542 100644
--- a/apps/contacts/ajax/editname.php
+++ b/apps/contacts/ajax/editname.php
@@ -35,9 +35,8 @@ if($id) {
 	$tmpl->assign('id',$id);
 } else {
 	bailOut(OC_Contacts_App::$l10n->t('Contact ID is missing.'));
-	//$addressbooks = OC_Contacts_Addressbook::active(OCP\USER::getUser());
-	//$tmpl->assign('addressbooks', $addressbooks);
 }
-$tmpl->printpage();
+$page = $tmpl->fetchPage();
+OCP\JSON::success(array('data' => array('page'=>$page)));
 
 ?>
diff --git a/apps/contacts/css/contacts.css b/apps/contacts/css/contacts.css
index 9aa63f016c1..1d02b3722dd 100644
--- a/apps/contacts/css/contacts.css
+++ b/apps/contacts/css/contacts.css
@@ -30,6 +30,7 @@ textarea { width: 80%; min-height: 5em; min-width: 30em; margin: 0 !important; p
 dl.form { width: 100%; float: left; clear: right; margin: 0; padding: 0; }
 .form dt { display: table-cell; clear: left; float: left; width: 7em; margin: 0; padding: 0.8em 0.5em 0 0; text-align:right; text-overflow:ellipsis; o-text-overflow: ellipsis; vertical-align: text-bottom; color: #bbb;/* white-space: pre-wrap; white-space: -moz-pre-wrap !important; white-space: -pre-wrap; white-space: -o-pre-wrap;*/ }
 .form dd { display: table-cell; clear: right; float: left; margin: 0; padding: 0px; white-space: nowrap; vertical-align: text-bottom; }
+label:hover, dt:hover { color: #333; }
 #address.form dt { min-width: 5em; }
 #address.form dl { min-width: 10em; }
 .droptarget { margin: 0.5em; padding: 0.5em; border: thin solid #ccc; -moz-border-radius:.3em; -webkit-border-radius:.3em; border-radius:.3em; }
@@ -65,6 +66,8 @@ dl.form { width: 100%; float: left; clear: right; margin: 0; padding: 0; }
 .contactsection { position: relative; float: left; /*max-width: 40em;*/ padding: 0.5em; height: auto: border: thin solid lightgray;/* -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em; background-color: #f8f8f8;*/ }
 
 #cropbox { margin: auto; }
+#contacts_details_photo_wrapper { min-width: 80px; }
+#contacts_details_photo_wrapper.wait { opacity: 0.6; filter:alpha(opacity=0.6); z-index:1000; background: url('%webroot%/core/img/loading.gif') no-repeat center center; cursor: wait; }
 #contacts_details_photo { border-radius: 0.5em; border: thin solid #bbb; margin: 0.3em; background: url('%webroot%/core/img/loading.gif') no-repeat center center; -moz-box-shadow: 0 1px 3px #777; -webkit-box-shadow: 0 1px 3px #777; box-shadow: 0 1px 3px #777; }
 #contacts_details_photo:hover { background: #fff; cursor: default; }
 #phototools { position:absolute; margin: 5px 0 0 10px; width:auto; height:22px; padding:0px; background-color:#fff; list-style-type:none; border-radius: 0.5em; -moz-box-shadow: 0 1px 3px #777; -webkit-box-shadow: 0 1px 3px #777; box-shadow: 0 1px 3px #777; }
@@ -76,7 +79,7 @@ dl.form { width: 100%; float: left; clear: right; margin: 0; padding: 0; }
 #addressdisplay { padding: 0.5em; }
 dl.addresscard { background-color: #fff; float: left; width: auto; margin: 0 0.3em 0.3em 0.3em; padding: 0; border: 0; }
 dl.addresscard dd {}
-dl.addresscard dt { padding: 0.3em; /*border-bottom: thin solid lightgray;*/ font-weight: bold; clear: both; color: #bbb;}
+dl.addresscard dt { padding: 0.3em; font-weight: bold; clear: both; color: #bbb;}
 dl.addresscard dt:hover { color:#777; }
 dl.addresscard dd > ul { margin: 0.3em; padding: 0.3em; }
 dl.addresscard .action { float: right; }
diff --git a/apps/contacts/js/contacts.js b/apps/contacts/js/contacts.js
index 34afdcc4e41..d8aa724a221 100644
--- a/apps/contacts/js/contacts.js
+++ b/apps/contacts/js/contacts.js
@@ -758,28 +758,29 @@ Contacts={
 				}
 			},
 			editName:function(){
-				var isnew = (this.id == '');
+				var params = {id: this.id};
 				/* Initialize the name edit dialog */
 				if($('#edit_name_dialog').dialog('isOpen') == true){
 					$('#edit_name_dialog').dialog('moveToTop');
 				}else{
-					$('#dialog_holder').load(OC.filePath('contacts', 'ajax', 'editname.php')+'?id='+this.id, function(jsondata){
-						if(jsondata.status != 'error'){
-							$('#edit_name_dialog' ).dialog({
+					$.getJSON(OC.filePath('contacts', 'ajax', 'editname.php'),{id: this.id},function(jsondata){
+						if(jsondata.status == 'success'){
+							$('body').append('<div id="name_dialog"></div>');
+							$('#name_dialog').html(jsondata.data.page).find('#edit_name_dialog' ).dialog({
 								modal: true,
-								closeOnEscape: (isnew == '' && false || true),
-								title:  (isnew && t('contacts', 'Add contact') || t('contacts', 'Edit name')),
+								closeOnEscape: true,
+								title:  t('contacts', 'Edit name'),
 								height: 'auto', width: 'auto',
 								buttons: {
 									'Ok':function() { 
 										Contacts.UI.Card.saveName(this);
-										$(this).dialog('destroy').remove();
+										$(this).dialog('close');
 									},
-									'Cancel':function() { $(this).dialog('destroy').remove(); }
+									'Cancel':function() { $(this).dialog('close'); }
 								},
 								close: function(event, ui) {
 									$(this).dialog('destroy').remove();
-									//return event;
+									$('#name_dialog').remove();
 								},
 								open: function(event, ui) {
 									// load 'N' property - maybe :-P
@@ -881,23 +882,23 @@ Contacts={
 			},
 			editAddress:function(obj, isnew){
 				var container = undefined;
-				var q = q = '?id=' + this.id;
+				var params = {id: this.id};
 				if(obj === 'new') {
 					isnew = true;
 					$('#addressdisplay dl').first().clone(true).insertAfter($('#addressdisplay dl').last()).show();
 					container = $('#addressdisplay dl').last();
 					container.removeClass('template').addClass('propertycontainer');
 				} else {
-					q = q + '&checksum='+Contacts.UI.checksumFor(obj);
+					params['checksum'] = Contacts.UI.checksumFor(obj); 
 				}
 				/* Initialize the address edit dialog */
 				if($('#edit_address_dialog').dialog('isOpen') == true){
 					$('#edit_address_dialog').dialog('moveToTop');
 				}else{
-					$('#dialog_holder').load(OC.filePath('contacts', 'ajax', 'editaddress.php')+q, function(jsondata){
-						if(jsondata.status != 'error'){
-							$('#edit_address_dialog' ).dialog({
-								/*modal: true,*/
+					$.getJSON(OC.filePath('contacts', 'ajax', 'editaddress.php'),params,function(jsondata){
+						if(jsondata.status == 'success'){
+							$('body').append('<div id="address_dialog"></div>');
+							$('#address_dialog').html(jsondata.data.page).find('#edit_address_dialog' ).dialog({
 								height: 'auto', width: 'auto',
 								buttons: {
 									'Ok':function() {
@@ -906,10 +907,10 @@ Contacts={
 										} else {
 											Contacts.UI.Card.saveAddress(this, obj, isnew);
 										}
-										$(this).dialog('destroy').remove();
+										$(this).dialog('close');
 									},
 									'Cancel':function() {
-										$(this).dialog('destroy').remove();
+										$(this).dialog('close');
 										if(isnew) {
 											container.remove();
 										}
@@ -917,6 +918,7 @@ Contacts={
 								},
 								close : function(event, ui) {
 									$(this).dialog('destroy').remove();
+									$('#address_dialog').remove();
 									if(isnew) {
 										container.remove();
 									}
@@ -1122,13 +1124,16 @@ Contacts={
 			},
 			loadPhoto:function(refresh){
 				$('#phototools li a').tipsy('hide');
+				var wrapper = $('#contacts_details_photo_wrapper');
+				wrapper.addClass('wait');
 				$.getJSON(OC.filePath('contacts', 'ajax', 'loadphoto.php'),{'id':this.id, 'refresh': refresh},function(jsondata){
 					if(jsondata.status == 'success'){
 						$('#contacts_details_photo_wrapper').data('checksum', jsondata.data.checksum);
-						$('#contacts_details_photo_wrapper').html(jsondata.data.page);
+						wrapper.html(jsondata.data.page).ready(function(){ wrapper.removeClass('wait').tipsy() });
 						Contacts.UI.Card.loadPhotoHandlers();
 					}
 					else{
+						wrapper.removeClass('wait');
 						OC.dialogs.alert(jsondata.data.message, t('contacts', 'Error'));
 					}
 				});
@@ -1143,6 +1148,7 @@ Contacts={
 						$('#edit_photo_dialog_img').html(jsondata.data.page);
 					}
 					else{
+						wrapper.removeClass('wait');
 						OC.dialogs.alert(jsondata.data.message, t('contacts', 'Error'));
 					}
 				});
@@ -1167,12 +1173,14 @@ Contacts={
 			savePhoto:function(){
 				var target = $('#crop_target');
 				var form = $('#cropform');
+				var wrapper = $('#contacts_details_photo_wrapper');
+				wrapper.addClass('wait');
 				form.submit();
 				target.load(function(){
 					var response=jQuery.parseJSON(target.contents().text());
 					if(response != undefined && response.status == 'success'){
 						// load cropped photo.
-						$('#contacts_details_photo_wrapper').html(response.data.page);
+						wrapper.html(response.data.page).ready(function(){ wrapper.removeClass('wait') });
 						Contacts.UI.Card.data.PHOTO = true;
 						Contacts.UI.Card.loadPhotoHandlers();
 					}else{
@@ -1280,16 +1288,19 @@ Contacts={
 				if($('#chooseaddressbook_dialog').dialog('isOpen') == true){
 					$('#chooseaddressbook_dialog').dialog('moveToTop');
 				}else{
-					$('#dialog_holder').load(OC.filePath('contacts', 'ajax', 'chooseaddressbook.php'), function(jsondata){
-						if(jsondata.status != 'error'){
-							$('#chooseaddressbook_dialog').dialog({
+					$('body').append('<div id="addressbook_dialog"></div>');
+					$.getJSON(OC.filePath('contacts', 'ajax', 'chooseaddressbook.php'), function(jsondata){
+						if(jsondata.status == 'success'){
+							$('#addressbook_dialog').html(jsondata.data.page).find('#chooseaddressbook_dialog').dialog({
 								width : 600,
 								close : function(event, ui) {
 									$(this).dialog('destroy').remove();
+									$('#addressbook_dialog').remove();
 								}
 							}).css('overflow','visible');
 						} else {
 							alert(jsondata.data.message);
+							$('#addressbook_dialog').remove();
 						}
 					});
 				}