Icons as CSS classes, hide net/home/mail/notify-update divs with no value

This commit is contained in:
fabrixxm 2011-04-28 19:01:35 +02:00
parent 0ac4d6ecc9
commit daa7dc983b
16 changed files with 133 additions and 42 deletions

View file

@ -2631,7 +2631,7 @@ if(! function_exists('get_plink')) {
function get_plink($item) { function get_plink($item) {
$a = get_app(); $a = get_app();
$plink = (((x($item,'plink')) && (! $item['private'])) ? '<div class="wall-item-links-wrapper"><a href="' $plink = (((x($item,'plink')) && (! $item['private'])) ? '<div class="wall-item-links-wrapper"><a href="'
. $item['plink'] . '" title="' . t('link to source') . '" target="external-link" ><img src="' . $a->get_baseurl() . '/images/remote-link.gif" alt="' . t('link to source') . '" /></a></div>' : ''); . $item['plink'] . '" title="' . t('link to source') . '" target="external-link" class="icon remote-link"></a></div>' : '');
return $plink; return $plink;
}} }}

BIN
images/icons.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

View file

@ -91,19 +91,20 @@
$.get("ping",function(data) { $.get("ping",function(data) {
$(data).find('result').each(function() { $(data).find('result').each(function() {
var net = $(this).find('net').text(); var net = $(this).find('net').text();
if(net == 0) { net = ''; } if(net == 0) { net = ''; $('#net-update').hide() } else { $('#net-update').show() }
$('#net-update').html(net); $('#net-update').html(net);
var home = $(this).find('home').text(); var home = $(this).find('home').text();
if(home == 0) { home = ''; } if(home == 0) { home = ''; $('#home-update').hide() } else { $('#home-update').show() }
$('#home-update').html(home); $('#home-update').html(home);
var mail = $(this).find('mail').text(); var mail = $(this).find('mail').text();
if(mail == 0) { mail = ''; } if(mail == 0) { mail = ''; $('#mail-update').hide() } else { $('#mail-update').show() }
$('#mail-update').html(mail); $('#mail-update').html(mail);
var intro = $(this).find('intro').text(); var intro = $(this).find('intro').text();
var register = $(this).find('register').text(); var register = $(this).find('register').text();
if(intro == 0) { intro = ''; } if(intro == 0) { intro = ''; }
if(register != 0 && intro != '') { intro = intro+'/'+register; } if(register != 0 && intro != '') { intro = intro+'/'+register; }
if(register != 0 && intro == '') { intro = '0/'+register; } if(register != 0 && intro == '') { intro = '0/'+register; }
if (intro == '') { $('#notify-update').hide() } else { $('#notify-update').show() }
$('#notify-update').html(intro); $('#notify-update').html(intro);
}); });
@ -161,15 +162,11 @@
} }
function imgbright(node) { function imgbright(node) {
$(node).attr("src",$(node).attr("src").replace('hide','show')); $(node).removeClass("drophide").addClass("drop");
$(node).css('width',24);
$(node).css('height',24);
} }
function imgdull(node) { function imgdull(node) {
$(node).attr("src",$(node).attr("src").replace('show','hide')); $(node).removeClass("drop").addClass("drophide");
$(node).css('width',16);
$(node).css('height',16);
} }
// Since our ajax calls are asynchronous, we will give a few // Since our ajax calls are asynchronous, we will give a few

View file

@ -18,13 +18,13 @@
<div id="contact-edit-nav-wrapper" > <div id="contact-edit-nav-wrapper" >
<div id="contact-edit-links" > <div id="contact-edit-links" >
<a href="contacts/$contact_id/block" id="contact-edit-block-link" ><img src="images/b_block.gif" alt="$blockunblock" title="$block_text"/></a> <a href="contacts/$contact_id/block" class="icon block" id="contact-edit-block-link" title="$block_text"></a>
<a href="contacts/$contact_id/ignore" id="contact-edit-ignore-link" ><img src="images/no.gif" alt="$ignorecont" title="$ignore_text"/></a> <a href="contacts/$contact_id/ignore" class="icon no" id="contact-edit-ignore-link" title="$ignore_text"></a>
<a href="crepair/$contact_id" id="contact-edit-repair" ><img src="images/tools.png" alt="$altcrepair" title="$lblcrepair"/></a> <a href="crepair/$contact_id" class="icon tools" id="contact-edit-repair" title="$lblcrepair"></a>
</div> </div>
<div id="contact-drop-links" > <div id="contact-drop-links" >
<a href="contacts/$contact_id/drop" id="contact-edit-drop-link" onclick="return confirmDelete();" ><img src="images/b_drophide.gif" alt="$delete" title="$delete" onmouseover="imgbright(this);" onmouseout="imgdull(this);" /></a> <a href="contacts/$contact_id/drop" class="icon drophide" id="contact-edit-drop-link" onclick="return confirmDelete();" title="$delete" onmouseover="imgbright(this);" onmouseout="imgdull(this);"></a>
</div> </div>
<div id="contact-edit-nav-end"></div> <div id="contact-edit-nav-end"></div>

View file

@ -7,7 +7,7 @@
</div> </div>
<div class="contact-entry-direction-end" ></div> <div class="contact-entry-direction-end" ></div>
<div class="contact-entry-edit-links" > <div class="contact-entry-edit-links" >
<a href="contacts/$id" class="contact-entry-edit-link" ><img src="images/b_edit.gif" alt="$edit_hover" title="$edit_hover" /></a> <a class="icon pencil" href="contacts/$id" class="contact-entry-edit-link" title="$edit_hover"></a>
</div> </div>
<div class="contact-entry-edit-end"></div> <div class="contact-entry-edit-end"></div>
</div> </div>

View file

@ -1 +1,10 @@
<div class="group-delete-wrapper" id="group-delete-wrapper-$id" ><a href="group/drop/$id" onclick="return confirmDelete();" ><img src="images/b_drophide.gif" alt="$delete" title="$delete" id="group-delete-icon-$id" class="group-delete-icon" onmouseover="imgbright(this);" onmouseout="imgdull(this);" ></a></div><div class="group-delete-end"></div> <div class="group-delete-wrapper" id="group-delete-wrapper-$id" >
<a href="group/drop/$id"
onclick="return confirmDelete();"
title="$delete"
id="group-delete-icon-$id"
class="icon drophide group-delete-icon"
onmouseover="imgbright(this);"
onmouseout="imgdull(this);" ></a>
</div>
<div class="group-delete-end"></div>

View file

@ -74,11 +74,11 @@ tinyMCE.init({
var selstr; var selstr;
$('#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected').each( function() { $('#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected').each( function() {
selstr = $(this).text(); selstr = $(this).text();
$('#profile-jot-perms img').attr('src', 'images/lock_icon.gif'); $('#jot-perms-icon').removeClass('unlock').addClass('lock');
$('.profile-jot-net input').attr('disabled', 'disabled'); $('.profile-jot-net input').attr('disabled', 'disabled');
}); });
if(selstr == null) { if(selstr == null) {
$('#profile-jot-perms img').attr('src', 'images/unlock_icon.gif'); $('#jot-perms-icon').removeClass('lock').addClass('unlock');
$('.profile-jot-net input').attr('disabled', false); $('.profile-jot-net input').attr('disabled', false);
} }

View file

@ -21,28 +21,28 @@
<div id="profile-jot-submit-wrapper" > <div id="profile-jot-submit-wrapper" >
<input type="submit" id="profile-jot-submit" name="submit" value="$share" /> <input type="submit" id="profile-jot-submit" name="submit" value="$share" />
<div id="profile-upload-wrapper" style="display: $visitor;" > <div id="profile-upload-wrapper" style="display: $visitor;" >
<div id="wall-image-upload-div" ><img id="wall-image-upload" src="images/camera-icon.gif" alt="$upload" title="$upload" /></div> <div id="wall-image-upload-div" ><a href="#" onclick="return false;" id="wall-image-upload" class="icon camera" title="$upload"></a></div>
</div> </div>
<div id="profile-link-wrapper" style="display: $visitor;" ondragenter="linkdropper(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);" > <div id="profile-link-wrapper" style="display: $visitor;" ondragenter="linkdropper(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);" >
<img id="profile-link" src="images/link-icon.gif" alt="$weblink" title="$weblink" ondragenter="return linkdropper(event);" ondragover="return linkdropper(event);" ondrop="linkdrop(event);" onclick="jotGetLink();" /> <a id="profile-link" class="icon link" title="$weblink" ondragenter="return linkdropper(event);" ondragover="return linkdropper(event);" ondrop="linkdrop(event);" onclick="jotGetLink(); return false;"></a>
</div> </div>
<div id="profile-youtube-wrapper" style="display: $visitor;" > <div id="profile-youtube-wrapper" style="display: $visitor;" >
<img id="profile-youtube" src="images/youtube_icon.gif" alt="$youtube" title="$youtube" onclick="jotGetVideo();" /> <a id="profile-youtube" class="icon youtube" title="$youtube" onclick="jotGetVideo();return false;"></a>
</div> </div>
<div id="profile-video-wrapper" style="display: $visitor;" > <div id="profile-video-wrapper" style="display: $visitor;" >
<img id="profile-video" src="images/video.gif" alt="$video" title="$video" onclick="jotVideoURL();" /> <a id="profile-video" class="icon video" title="$video" onclick="jotVideoURL();return false;"></a>
</div> </div>
<div id="profile-audio-wrapper" style="display: $visitor;" > <div id="profile-audio-wrapper" style="display: $visitor;" >
<img id="profile-audio" src="images/audio.gif" alt="$audio" title="$audio" onclick="jotAudioURL();" /> <a id="profile-audio" class="icon audio" title="$audio" onclick="jotAudioURL();return false;"></a>
</div> </div>
<div id="profile-location-wrapper" style="display: $visitor;" > <div id="profile-location-wrapper" style="display: $visitor;" >
<img id="profile-location" src="images/globe.gif" alt="$setloc" title="$setloc" onclick="jotGetLocation();" /> <a id="profile-location" class="icon globe" title="$setloc" onclick="jotGetLocation();return false;"></a>
</div> </div>
<div id="profile-nolocation-wrapper" style="display: none;" > <div id="profile-nolocation-wrapper" style="display: none;" >
<img id="profile-nolocation" src="images/noglobe.gif" alt="$noloc" title="$noloc" onclick="jotClearLocation();" /> <a id="profile-nolocation" class="icon noglobe" title="$noloc" onclick="jotClearLocation();return false;"></a>
</div> </div>
<div id="profile-title-wrapper" style="display: $visitor;" > <div id="profile-title-wrapper" style="display: $visitor;" >
<img id="profile-title" src="images/article.gif" alt="$title" title="$title" onclick="jotTitle();" /> <a id="profile-title" class="icon article" title="$title" onclick="jotTitle();return false;"></a>
</div> </div>
<div id="profile-jot-plugin-wrapper"> <div id="profile-jot-plugin-wrapper">
@ -52,7 +52,9 @@
<div id="profile-rotator-wrapper" style="display: $visitor;" > <div id="profile-rotator-wrapper" style="display: $visitor;" >
<img id="profile-rotator" src="images/rotator.gif" alt="$wait" title="$wait" style="display: none;" /> <img id="profile-rotator" src="images/rotator.gif" alt="$wait" title="$wait" style="display: none;" />
</div> </div>
<div id="profile-jot-perms" class="profile-jot-perms" style="display: $visitor;" ><img id="jot-perms-icon" src="images/$lockstate_icon.gif" alt="$permset" title="$permset" onClick="openClose('profile-jot-acl-wrapper'); openClose('profile-jot-email-wrapper'); openClose('profile-jot-networks');" />$bang</div> <div id="profile-jot-perms" class="profile-jot-perms" style="display: $visitor;" >
<a id="jot-perms-icon" class="icon $lockstate" title="$permset" onClick="openClose('profile-jot-acl-wrapper'); openClose('profile-jot-email-wrapper'); openClose('profile-jot-networks');return false;"></a>$bang
</div>
<div id="profile-jot-perms-end"></div> <div id="profile-jot-perms-end"></div>
<div id="profile-jot-email-wrapper" style="display: none;" > <div id="profile-jot-email-wrapper" style="display: none;" >
<div id="profile-jot-email-label">$emailcc</div><input type="text" name="emailcc" id="profile-jot-email" title="$emtitle"> <div id="profile-jot-email-label">$emailcc</div><input type="text" name="emailcc" id="profile-jot-email" title="$emtitle">

View file

@ -1,6 +1,6 @@
<div class="wall-item-like-buttons" id="wall-item-like-buttons-$id"> <div class="wall-item-like-buttons" id="wall-item-like-buttons-$id">
<img src="images/like.gif" alt="$likethis" title="$likethis" onclick="dolike($id,'like');" /> <a href="#" class="icon like"title="$likethis" onclick="dolike($id,'like'); return false"></a>
<img src="images/dislike.gif" alt="$nolike" title="$nolike" onclick="dolike($id,'dislike');" /> <a href="#" class="icon dislike" title="$nolike" onclick="dolike($id,'dislike'); return false"></a>
<img src="images/recycle.gif" alt="$share" title="$share" class="wall-item-share-buttons" onclick="jotShare($id);" /> <a href="#" class="icon recycle wall-item-share-buttons" title="$share"onclick="jotShare($id); return false"></a>
<img id="like-rotator-$id" class="like-rotator" src="images/rotator.gif" alt="$wait" title="$wait" style="display: none;" /> <img id="like-rotator-$id" class="like-rotator" src="images/rotator.gif" alt="$wait" title="$wait" style="display: none;" />
</div> </div>

View file

@ -1,5 +1,5 @@
<div class="wall-item-like-buttons" id="wall-item-like-buttons-$id"> <div class="wall-item-like-buttons" id="wall-item-like-buttons-$id">
<img src="images/like.gif" alt="$likethis" title="$likethis" onclick="dolike($id,'like');" /> <a href="#" class="icon like"title="$likethis" onclick="dolike($id,'like'); return false"></a>
<img src="images/dislike.gif" alt="$nolike" title="$nolike" onclick="dolike($id,'dislike');" /> <a href="#" class="icon dislike" title="$nolike" onclick="dolike($id,'dislike'); return false"></a>
<img id="like-rotator-$id" class="like-rotator" src="images/rotator.gif" alt="$wait" title="$wait" style="display: none;" /> <img id="like-rotator-$id" class="like-rotator" src="images/rotator.gif" alt="$wait" title="$wait" style="display: none;" />
</div> </div>

View file

@ -8,6 +8,9 @@
<div class="mail-list-subject"><a href="message/$id" class="mail-list-link">$subject</a></div> <div class="mail-list-subject"><a href="message/$id" class="mail-list-link">$subject</a></div>
</div> </div>
</div> </div>
<div class="mail-list-delete-wrapper" id="mail-list-delete-wrapper-$id" ><a href="message/dropconv/$id" onclick="return confirmDelete();" ><img src="images/b_drophide.gif" alt="$delete" title="$delete" id="mail-list-delete-icon-$id" class="mail-list-delete-icon" onmouseover="imgbright(this);" onmouseout="imgdull(this);" ></a></div><div class="mail-list-delete-end"></div> <div class="mail-list-delete-wrapper" id="mail-list-delete-wrapper-$id" >
<a href="message/dropconv/$id" onclick="return confirmDelete();" title="$delete" class="icon drophide mail-list-delete-icon" onmouseover="imgbright(this);" onmouseout="imgdull(this);" ></a>
</div>
<div class="mail-list-delete-end"></div>
<div class="mail-list-outside-wrapper-end"></div> <div class="mail-list-outside-wrapper-end"></div>

View file

@ -17,12 +17,12 @@ $select
</div> </div>
<div id="prvmail-submit-wrapper" > <div id="prvmail-submit-wrapper" >
<input type="submit" id="prvmail-submit" name="submit" value="Submit" /> <input type="submit" id="prvmail-submit" name="submit" value="Submit" />
<div id="prvmail-upload-wrapper" > <div id="prvmail-upload-wrapper" >
<div id="prvmail-upload-div" ><img id="prvmail-upload" src="images/camera-icon.gif" alt="$upload" title="$upload" /></div> <div id="prvmail-upload"class="icon border camera" title="$upload" /></div>
</div> </div>
<div id="prvmail-link-wrapper" > <div id="prvmail-link-wrapper" >
<img id="prvmail-link" src="images/link-icon.gif" alt="$insert" title="$insert" onclick="jotGetLink();" /> <div id="prvmail-link" class="icon border link" title="$insert" onclick="jotGetLink();" ></div>
</div> </div>
<div id="prvmail-rotator-wrapper" > <div id="prvmail-rotator-wrapper" >
<img id="prvmail-rotator" src="images/rotator.gif" alt="$wait" title="$wait" style="display: none;" /> <img id="prvmail-rotator" src="images/rotator.gif" alt="$wait" title="$wait" style="display: none;" />

View file

@ -1,6 +1,6 @@
<h3>$regtitle</h3> <h3>$regtitle</h3>
<form action="register" method="post" > <form action="register" method="post" id="register-form">
<input type="hidden" name="photo" value="$photo" /> <input type="hidden" name="photo" value="$photo" />

View file

@ -224,6 +224,10 @@ div.wall-item-content-wrapper.shiny {
cursor: pointer; cursor: pointer;
} }
#jot-perms-icon {
float: left;
}
.fakelink, .fakelink:visited, .fakelink:link { .fakelink, .fakelink:visited, .fakelink:link {
color: #3465a4; color: #3465a4;
text-decoration: none; text-decoration: none;
@ -2335,3 +2339,38 @@ a.mail-list-link {
float: left; float: left;
width: 300px; width: 300px;
} }
/**
* ICONS
*/
.icon {
display: block; width: 16px; height: 16px;
background-image: url('../../../images/icons.png');
}
.article { background-position: 0px 0px;}
.audio { background-position: -16px 0px;}
.block { background-position: -32px 0px;}
.drop { background-position: -48px 0px;}
.drophide { background-position: -64px 0px;}
.edit { background-position: -80px 0px;}
.camera { background-position: -96px 0px;}
.dislike { background-position: -112px 0px;}
.like { background-position: -128px 0px;}
.link { background-position: -144px 0px;}
.globe { background-position: 0px -16px;}
.noglobe { background-position: -16px -16px;}
.no { background-position: -32px -16px;}
.pause { background-position: -48px -16px;}
.play { background-position: -64px -16px;}
.pencil { background-position: -80px -16px;}
.small-pencil { background-position: -96px -16px;}
.recycle { background-position: -112px -16px;}
.remote-link { background-position: -128px -16px;}
.share { background-position: -144px -16px;}
.tools { background-position: 0px -32px;}
.lock { background-position: -16px -32px;}
.unlock { background-position: -32px -32px;}
.video { background-position: -48px -32px;}
.youtube { background-position: -64px -32px;}

View file

@ -120,6 +120,10 @@ blockquote:before {
cursor: pointer; cursor: pointer;
} }
#jot-perms-icon {
float: left;
}
.fakelink, .fakelink:visited { .fakelink, .fakelink:visited {
color: #15607B; color: #15607B;
text-decoration: none; text-decoration: none;
@ -2359,3 +2363,38 @@ a.mail-list-link {
float: left; float: left;
width: 300px; width: 300px;
} }
/**
* ICONS
*/
.icon {
display: block; width: 16px; height: 16px;
background-image: url('../../../images/icons.png');
}
.article { background-position: 0px 0px;}
.audio { background-position: -16px 0px;}
.block { background-position: -32px 0px;}
.drop { background-position: -48px 0px;}
.drophide { background-position: -64px 0px;}
.edit { background-position: -80px 0px;}
.camera { background-position: -96px 0px;}
.dislike { background-position: -112px 0px;}
.like { background-position: -128px 0px;}
.link { background-position: -144px 0px;}
.globe { background-position: 0px -16px;}
.noglobe { background-position: -16px -16px;}
.no { background-position: -32px -16px;}
.pause { background-position: -48px -16px;}
.play { background-position: -64px -16px;}
.pencil { background-position: -80px -16px;}
.small-pencil { background-position: -96px -16px;}
.recycle { background-position: -112px -16px;}
.remote-link { background-position: -128px -16px;}
.share { background-position: -144px -16px;}
.tools { background-position: 0px -32px;}
.lock { background-position: -16px -32px;}
.unlock { background-position: -32px -32px;}
.video { background-position: -48px -32px;}
.youtube { background-position: -64px -32px;}

View file

@ -1,2 +1,4 @@
<div class="wall-item-delete-wrapper" id="wall-item-delete-wrapper-$id" ><a href="item/drop/$id" onclick="return confirmDelete();" ><img src="images/b_drophide.gif" alt="$delete" title="$delete" id="wall-item-delete-icon-$id" class="wall-item-delete-icon" onmouseover="imgbright(this);" onmouseout="imgdull(this);" ></a></div> <div class="wall-item-delete-wrapper" id="wall-item-delete-wrapper-$id" >
<div class="wall-item-delete-end"></div> <a href="item/drop/$id" onclick="return confirmDelete();" class="icon drophide" title="$delete" onmouseover="imgbright(this);" onmouseout="imgdull(this);" ></a>
</div>
<div class="wall-item-delete-end"></div>