Smoother profile picture loading - hopefully.

diff --git a/apps/contacts/ajax/loadphoto.php b/apps/contacts/ajax/loadphoto.php
index 61b5356edce31c3bb28b3cd6d43c990d85ef037a..a35631055eba7f82b657c49b13c761888f2d0eb1 100644 (file)
--- a/apps/contacts/ajax/loadphoto.php
+++ b/apps/contacts/ajax/loadphoto.php
@@ -42,11 +42,5 @@ foreach($vcard->children as $property){
        }
 }
 
-$tmpl = new OCP\Template("contacts", "part.contactphoto");
-$tmpl->assign('id', $id);
-if($refresh) {
-       $tmpl->assign('refresh', 1);
-}
-$page = $tmpl->fetchPage();
-OCP\JSON::success(array('data' => array('page'=>$page, 'checksum'=>$checksum)));
-?>
+OCP\JSON::success(array('data' => array('checksum'=>$checksum)));
+

diff --git a/apps/contacts/css/contacts.css b/apps/contacts/css/contacts.css
index 1766c28761ec03e270afc03ec32e479a85b786bd..ce4daa1d3a1fc37a70b26d4fb63c2e4c66365d12 100644 (file)
--- a/apps/contacts/css/contacts.css
+++ b/apps/contacts/css/contacts.css
@@ -73,10 +73,10 @@ label:hover, dt:hover { color: #333; }
 .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: 120px; }
+#contacts_details_photo_wrapper { width: 200px; }
 #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; }
+.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; opacity: 1; }
+.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; }
 #phototools li { display: inline; }
 #phototools li a { float:left; cursor:pointer; width:22px; height:22px; opacity: 0.6; }

diff --git a/apps/contacts/js/contacts.js b/apps/contacts/js/contacts.js
index d357e5060808bd93147fbf86529a543445146802..9d41b70a314e8a155e186427f5e30ca6808795bf 100644 (file)
--- a/apps/contacts/js/contacts.js
+++ b/apps/contacts/js/contacts.js
@@ -144,6 +144,31 @@ Contacts={
                        $('#edit_name').click(function(){Contacts.UI.Card.editName()});
                        $('#edit_name').keydown(function(){Contacts.UI.Card.editName()});
                        
+                       $('#phototools li a').click(function() {
+                               $(this).tipsy('hide');
+                       });
+                       $('#contacts_details_photo_wrapper').hover(
+                               function () {
+                                       $('#phototools').slideDown(200);
+                               },
+                               function () {
+                                       $('#phototools').slideUp(200);
+                               }
+                       );
+                       $('#phototools').hover(
+                               function () {
+                                       $(this).removeClass('transparent');
+                               },
+                               function () {
+                                       $(this).addClass('transparent');
+                               }
+                       );
+                       $('#phototools .upload').click(function() {
+                               $('#file_upload_start').trigger('click');
+                       });
+                       $('#phototools .cloud').click(function() {
+                               OC.dialogs.filepicker(t('contacts', 'Select photo'), Contacts.UI.Card.cloudPhotoSelected, false, 'image', true);
+                       });
                        /* Initialize the photo edit dialog */
                        $('#edit_photo_dialog').dialog({ 
                                autoOpen: false, modal: true, height: 'auto', width: 'auto'
@@ -1109,25 +1134,6 @@ Contacts={
                        loadPhotoHandlers:function(){
                                $('#phototools li a').tipsy('hide');
                                $('#phototools li a').tipsy();
-                               $('#phototools li a').click(function() {
-                                       $(this).tipsy('hide');
-                               });
-                               $('#contacts_details_photo_wrapper').hover(
-                                       function () {
-                                               $('#phototools').slideDown(200);
-                                       },
-                                       function () {
-                                               $('#phototools').slideUp(200);
-                                       }
-                               );
-                               $('#phototools').hover(
-                                       function () {
-                                               $(this).removeClass('transparent');
-                                       },
-                                       function () {
-                                               $(this).addClass('transparent');
-                                       }
-                               );
                                if(this.data.PHOTO) {
                                        $('#phototools .delete').click(function() {
                                                $(this).tipsy('hide');
@@ -1138,16 +1144,12 @@ Contacts={
                                                $(this).tipsy('hide');
                                                Contacts.UI.Card.editCurrentPhoto();
                                        });
+                                       $('#phototools .delete').show();
+                                       $('#phototools .edit').show();
                                } else {
                                        $('#phototools .delete').hide();
                                        $('#phototools .edit').hide();
                                }
-                               $('#phototools .upload').click(function() {
-                                       $('#file_upload_start').trigger('click');
-                               });
-                               $('#phototools .cloud').click(function() {
-                                       OC.dialogs.filepicker(t('contacts', 'Select photo'), Contacts.UI.Card.cloudPhotoSelected, false, 'image', true);
-                               });
                        },
                        cloudPhotoSelected:function(path){
                                $.getJSON(OC.filePath('contacts', 'ajax', 'oc_photo.php'),{'path':path,'id':Contacts.UI.Card.id},function(jsondata){
@@ -1162,22 +1164,33 @@ Contacts={
                                });
                        },
                        loadPhoto:function(refresh){
+                               var self = this;
+                               var refreshstr = (refresh?'&refresh=1'+Math.random():'')
                                $('#phototools li a').tipsy('hide');
                                var wrapper = $('#contacts_details_photo_wrapper');
-                               wrapper.addClass('wait');
+                               wrapper.addClass('loading').addClass('wait');
+                               
+                               var img = new Image();
+                               $(img).load(function () {
+                                       $('img.contacts_details_photo').remove()
+                                       $(this).addClass('contacts_details_photo').hide();
+                                       wrapper.removeClass('loading').removeClass('wait');
+                                       $(this).insertAfter($('#phototools')).fadeIn();
+                               }).error(function () {
+                                       // notify the user that the image could not be loaded
+                                       $(t('contacts','something went wrong.')).insertAfter($('#phototools'));
+                               }).attr('src', OC.linkTo('contacts', 'photo.php')+'?id='+self.id+refreshstr);
+               
                                $.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);
-                                               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'));
                                        }
                                });
                                $('#file_upload_form').show();
-                               $('#contacts_propertymenu_dropdown a[data-type="PHOTO"]').parent().hide();
                        },
                        editCurrentPhoto:function(){
                                $.getJSON(OC.filePath('contacts', 'ajax', 'currentphoto.php'),{'id':this.id},function(jsondata){
@@ -1213,15 +1226,15 @@ Contacts={
                                var target = $('#crop_target');
                                var form = $('#cropform');
                                var wrapper = $('#contacts_details_photo_wrapper');
+                               var self = this;
                                wrapper.addClass('wait');
                                form.submit();
                                target.load(function(){
                                        var response=jQuery.parseJSON(target.contents().text());
                                        if(response != undefined && response.status == 'success'){
                                                // load cropped photo.
-                                               wrapper.html(response.data.page).ready(function(){ wrapper.removeClass('wait') });
+                                               self.loadPhoto(true);
                                                Contacts.UI.Card.data.PHOTO = true;
-                                               Contacts.UI.Card.loadPhotoHandlers();
                                        }else{
                                                OC.dialogs.alert(response.data.message, t('contacts', 'Error'));
                                                wrapper.removeClass('wait');

diff --git a/apps/contacts/templates/part.contact.php b/apps/contacts/templates/part.contact.php
index 5757563fe5b852ba3b3b0f153c87a70d67bcbccb..bb574372e52a749d08e3562d6e2063533dcda332 100644 (file)
--- a/apps/contacts/templates/part.contact.php
+++ b/apps/contacts/templates/part.contact.php
@@ -18,7 +18,14 @@ $id = isset($_['id']) ? $_['id'] : '';
 
        <iframe name="file_upload_target" id='file_upload_target' src=""></iframe>
        <div class="tip propertycontainer" id="contacts_details_photo_wrapper" title="<?php echo $l->t('Drop photo to upload'); ?> (max <?php echo $_['uploadMaxHumanFilesize']; ?>)" data-element="PHOTO">
+       <ul id="phototools" class="transparent hidden">
+               <li><a class="svg delete" title="<?php echo $l->t('Delete current photo'); ?>"></a></li>
+               <li><a class="svg edit" title="<?php echo $l->t('Edit current photo'); ?>"></a></li>
+               <li><a class="svg upload" title="<?php echo $l->t('Upload new photo'); ?>"></a></li>
+               <li><a class="svg cloud" title="<?php echo $l->t('Select photo from ownCloud'); ?>"></a></li>
+       </ul>
        </div>
+       <img />
        </div> <!-- contact_photo -->
 
        <div id="contact_identity" class="contactsection">
@@ -104,7 +111,6 @@ $id = isset($_['id']) ? $_['id'] : '';
        <div id="contacts_propertymenu">
        <button class="button" id="contacts_propertymenu_button"><?php echo $l->t('Add field'); ?></button>
        <ul id="contacts_propertymenu_dropdown" role="menu" class="hidden">
-               <li><a role="menuitem" data-type="PHOTO"><?php echo $l->t('Profile picture'); ?></a></li>
                <li><a role="menuitem" data-type="ORG"><?php echo $l->t('Organization'); ?></a></li>
                <li><a role="menuitem" data-type="NICKNAME"><?php echo $l->t('Nickname'); ?></a></li>
                <li><a role="menuitem" data-type="BDAY"><?php echo $l->t('Birthday'); ?></a></li>

diff --git a/apps/contacts/templates/part.contactphoto.php b/apps/contacts/templates/part.contactphoto.php
deleted file mode 100644 (file)
index bddf4cc..0000000
--- a/apps/contacts/templates/part.contactphoto.php
+++ /dev/null
@@ -1,16 +0,0 @@
-<?php 
-$id = $_['id'];
-$wattr = isset($_['width'])?'width="'.$_['width'].'"':'';
-$hattr = isset($_['height'])?'height="'.$_['height'].'"':'';
-$rand = isset($_['refresh'])?'&refresh='.rand():'';
-?>
-<ul id="phototools" class="transparent hidden">
-       <li><a class="svg delete" title="<?php echo $l->t('Delete current photo'); ?>"></a></li>
-       <li><a class="svg edit" title="<?php echo $l->t('Edit current photo'); ?>"></a></li>
-       <li><a class="svg upload" title="<?php echo $l->t('Upload new photo'); ?>"></a></li>
-       <li><a class="svg cloud" title="<?php echo $l->t('Select photo from ownCloud'); ?>"></a></li>
-</ul>
-<img class="loading" id="contacts_details_photo" <?php echo $wattr; ?> <?php echo $hattr; ?> src="<?php echo OCP\Util::linkToAbsolute('contacts', 'photo.php'); ?>?id=<?php echo $id.$rand; ?>" />
-<progress id="contacts_details_photo_progress" style="display:none;" value="0" max="100">0 %</progress>
-
-