Contacts: Fix layout in contacts list that I had broken in an earlier fix :-P

remotes/origin/stable4
Thomas Tanghus 2012-05-14 17:40:16 +07:00
parent 4c6d11e223
commit de850dfa52
3 changed files with 19 additions and 20 deletions

@ -4,8 +4,7 @@
#leftcontent { top: 3.5em !important; padding: 0; margin: 0; } #leftcontent { top: 3.5em !important; padding: 0; margin: 0; }
#rightcontent { top: 3.5em !important; padding-top: 5px; } #rightcontent { top: 3.5em !important; padding-top: 5px; }
#contacts { background: #fff; width: 20em; left: 12.5em; top: 3.7em; bottom:3em; position: fixed; overflow: auto; padding: 0; margin: 0; } #contacts { background: #fff; width: 20em; left: 12.5em; top: 3.7em; bottom:3em; position: fixed; overflow: auto; padding: 0; margin: 0; }
#contacts li { height: 28px; display: block; margin: 0 0 0 5px; padding: 0 0 0 25px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-transition:background-color 200ms; -moz-transition:background-color 200ms; -o-transition:background-color 200ms; transition:background-color 200ms; } #contacts a { height: 23px; display: block; margin: 0 0 0 0; padding: 0 0 0 25px; }
#contacts li:hover { background-color: #eee }
#bottomcontrols { padding: 0; bottom:0px; height:2.8em; width: 20em; margin:0; background:#eee; border-top:1px solid #ccc; position:fixed; -moz-box-shadow: 0 -3px 3px -3px #000; -webkit-box-shadow: 0 -3px 3px -3px #000; box-shadow: 0 -3px 3px -3px #000;} #bottomcontrols { padding: 0; bottom:0px; height:2.8em; width: 20em; margin:0; background:#eee; border-top:1px solid #ccc; position:fixed; -moz-box-shadow: 0 -3px 3px -3px #000; -webkit-box-shadow: 0 -3px 3px -3px #000; box-shadow: 0 -3px 3px -3px #000;}
#contacts_newcontact { float: left; margin: 0.2em 0 0 1em; } #contacts_newcontact { float: left; margin: 0.2em 0 0 1em; }
#chooseaddressbook { float: right; margin: 0.2em 1em 0 0; } #chooseaddressbook { float: right; margin: 0.2em 1em 0 0; }

@ -160,9 +160,8 @@ Contacts={
// Name has changed. Update it and reorder. // Name has changed. Update it and reorder.
$('#fn').change(function(){ $('#fn').change(function(){
var name = $('#fn').val(); var name = $('#fn').val();
var item = $('#contacts [data-id="'+Contacts.UI.Card.id+'"]').clone(); var item = $('#contacts [data-id="'+Contacts.UI.Card.id+'"]');
$('#contacts [data-id="'+Contacts.UI.Card.id+'"]').remove(); $(item).find('a').html(name);
$(item).html(name);
var added = false; var added = false;
$('#contacts li').each(function(){ $('#contacts li').each(function(){
if ($(this).text().toLowerCase() > name.toLowerCase()) { if ($(this).text().toLowerCase() > name.toLowerCase()) {
@ -302,7 +301,7 @@ Contacts={
if(jsondata.status == 'success'){ if(jsondata.status == 'success'){
Contacts.UI.Card.loadContact(jsondata.data); Contacts.UI.Card.loadContact(jsondata.data);
$('#leftcontent .active').removeClass('active'); $('#leftcontent .active').removeClass('active');
var item = $('<li role="botton" data-id="'+jsondata.data.id+'" class="active" style="background: url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+jsondata.data.id+') no-repeat scroll 0% 0% transparent;">'+Contacts.UI.Card.fn+'</li>'); var item = $('<li data-id="'+jsondata.data.id+'" class="active"><a href="index.php?id='+jsondata.data.id+'" style="background: url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+jsondata.data.id+') no-repeat scroll 0% 0% transparent;">'+Contacts.UI.Card.fn+'</a></li>');
var added = false; var added = false;
$('#leftcontent ul li').each(function(){ $('#leftcontent ul li').each(function(){
if ($(this).text().toLowerCase() > Contacts.UI.Card.fn.toLowerCase()) { if ($(this).text().toLowerCase() > Contacts.UI.Card.fn.toLowerCase()) {
@ -625,7 +624,7 @@ Contacts={
q = q + '&id=' + this.id + '&name=' + name; q = q + '&id=' + this.id + '&name=' + name;
if(checksum != undefined && checksum != '') { // save if(checksum != undefined && checksum != '') { // save
q = q + '&checksum=' + checksum; q = q + '&checksum=' + checksum;
console.log('Saving: ' + q); //console.log('Saving: ' + q);
$(obj).attr('disabled', 'disabled'); $(obj).attr('disabled', 'disabled');
$.post(OC.filePath('contacts', 'ajax', 'saveproperty.php'),q,function(jsondata){ $.post(OC.filePath('contacts', 'ajax', 'saveproperty.php'),q,function(jsondata){
if(jsondata.status == 'success'){ if(jsondata.status == 'success'){
@ -643,7 +642,7 @@ Contacts={
} }
},'json'); },'json');
} else { // add } else { // add
console.log('Adding: ' + q); //console.log('Adding: ' + q);
$(obj).attr('disabled', 'disabled'); $(obj).attr('disabled', 'disabled');
$.post(OC.filePath('contacts', 'ajax', 'addproperty.php'),q,function(jsondata){ $.post(OC.filePath('contacts', 'ajax', 'addproperty.php'),q,function(jsondata){
if(jsondata.status == 'success'){ if(jsondata.status == 'success'){
@ -1498,8 +1497,8 @@ Contacts={
$('#contacts li').unbind('inview'); $('#contacts li').unbind('inview');
$('#contacts li').bind('inview', function(event, isInView, visiblePartX, visiblePartY) { $('#contacts li').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
if (isInView) { if (isInView) {
if (!$(this).attr('style')) { if (!$(this).find('a').attr('style')) {
$(this).css('background','url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+$(this).data('id')+') no-repeat'); $(this).find('a').css('background','url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+$(this).data('id')+') no-repeat');
} }
} }
})}, 500); })}, 500);
@ -1508,19 +1507,19 @@ Contacts={
// Add thumbnails to the contact list as they become visible in the viewport. // Add thumbnails to the contact list as they become visible in the viewport.
lazyupdate:function(){ lazyupdate:function(){
$('#contacts li').live('inview', function(){ $('#contacts li').live('inview', function(){
if (!$(this).attr('style')) { if (!$(this).find('a').attr('style')) {
$(this).css('background','url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+$(this).data('id')+') no-repeat'); $(this).find('a').css('background','url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+$(this).data('id')+') no-repeat');
} }
}); });
}, },
refreshThumbnail:function(id){ refreshThumbnail:function(id){
var item = $('#contacts [data-id="'+id+'"]'); var item = $('#contacts [data-id="'+id+'"]').find('a');
item.html(Contacts.UI.Card.fn); item.html(Contacts.UI.Card.fn);
item.css('background','url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+id+'&refresh=1'+Math.random()+') no-repeat'); item.css('background','url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+id+'&refresh=1'+Math.random()+') no-repeat');
}, },
scrollTo:function(id){ scrollTo:function(id){
$('#contacts').animate({ $('#contacts').animate({
scrollTop: $('#leftcontent li[data-id="'+id+'"]').offset().top}, 'slow','swing'); scrollTop: $('#leftcontent li[data-id="'+id+'"]').offset().top-20}, 'slow','swing');
} }
} }
} }
@ -1548,9 +1547,10 @@ $(document).ready(function(){
}); });
$('#contacts').click(function(event){ $('#contacts').click(function(event){
var $tgt = $(event.target); var $tgt = $(event.target);
if ($tgt.is('li')) { if ($tgt.is('li') || $tgt.is('a')) {
var id = $($tgt).data('id'); var item = $tgt.is('li')?$($tgt):($tgt).parent();
$($tgt).addClass('active'); var id = item.data('id');
item.addClass('active');
var oldid = $('#rightcontent').data('id'); var oldid = $('#rightcontent').data('id');
if(oldid != 0){ if(oldid != 0){
$('#contacts li[data-id="'+oldid+'"]').removeClass('active'); $('#contacts li[data-id="'+oldid+'"]').removeClass('active');
@ -1576,9 +1576,9 @@ $(document).ready(function(){
// bottom part of element is visible // bottom part of element is visible
} else { } else {
// whole part of element is visible // whole part of element is visible
if (!$(this).attr('style')) { if (!$(this).find('a').attr('style')) {
//alert($(this).data('id') + ' has background: ' + $(this).attr('style')); //alert($(this).data('id') + ' has background: ' + $(this).attr('style'));
$(this).css('background','url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+$(this).data('id')+') no-repeat'); $(this).find('a').css('background','url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+$(this).data('id')+') no-repeat');
}/* else { }/* else {
alert($(this).data('id') + ' has style ' + $(this).attr('style').match('url')); alert($(this).data('id') + ' has style ' + $(this).attr('style').match('url'));
}*/ }*/

@ -8,5 +8,5 @@
} }
} }
?> ?>
<li role="button" book-id="<?php echo $contact['addressbookid']; ?>" data-id="<?php echo $contact['id']; ?>"><?php echo $display; ?></li> <li role="button" book-id="<?php echo $contact['addressbookid']; ?>" data-id="<?php echo $contact['id']; ?>"><a href="index.php?id=<?php echo $contact['id']; ?>"><?php echo $display; ?></a></li>
<?php endforeach; ?> <?php endforeach; ?>