tools icon in item footer

compact display in network page
floating "remove selected" tool
This commit is contained in:
fabrixxm 2013-02-15 06:39:37 -05:00
parent 820267906a
commit 754f8957ed
16 changed files with 179 additions and 26 deletions

View File

@ -62,6 +62,7 @@
</div>
</footer>
</div>
<?php if(x($page,'end')) echo $page['end']; ?>
</body>
</html>

1
view/theme/blog/end.tpl Normal file
View File

@ -0,0 +1 @@
<script type="text/javascript" src="$baseurl/view/theme/blog/js/theme.js"></script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 211 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 207 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 250 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 314 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 281 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 228 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 239 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 270 B

View File

@ -0,0 +1 @@
(function(d){d.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","color","outlineColor"],function(f,e){d.fx.step[e]=function(g){if(!g.colorInit){g.start=c(g.elem,e);g.end=b(g.end);g.colorInit=true}g.elem.style[e]="rgb("+[Math.max(Math.min(parseInt((g.pos*(g.end[0]-g.start[0]))+g.start[0]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[1]-g.start[1]))+g.start[1]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[2]-g.start[2]))+g.start[2]),255),0)].join(",")+")"}});function b(f){var e;if(f&&f.constructor==Array&&f.length==3){return f}if(e=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)){return[parseInt(e[1]),parseInt(e[2]),parseInt(e[3])]}if(e=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)){return[parseFloat(e[1])*2.55,parseFloat(e[2])*2.55,parseFloat(e[3])*2.55]}if(e=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)){return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]}if(e=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)){return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)]}if(e=/rgba\(0, 0, 0, 0\)/.exec(f)){return a.transparent}return a[d.trim(f).toLowerCase()]}function c(g,e){var f;do{f=d.curCSS(g,e);if(f!=""&&f!="transparent"||d.nodeName(g,"body")){break}e="backgroundColor"}while(g=g.parentNode);return b(f)}var a={transparent:[255,255,255]}})(jQuery);

View File

@ -0,0 +1,38 @@
// confirm delete, call delete via ajax, remove item from dom
$(".item.drophide").bind("click", function(e){
var sender = (e && e.target) || (window.event && window.event.srcElement);
var dropurl = baseurl + "/" +$(sender).attr('href');
var ret = confirmDelete(); // use friendica confirmDelete function. Translated message for free.
if (ret==false) return false;
$.ajax(dropurl,{
dataType: "json",
url: dropurl,
success: function(data){
console.log(data);
/* if(data[1]!=0){
$("#item-"+data[0]).hide(400, function(){
$(this).remove();
});
}*/
}
});
return false;
});
// move selection tools on clicks
$("input.item-select").bind("click", function(e){
var sender = (e && e.target) || (window.event && window.event.srcElement);
var position = $(sender).offset();
position.left = position.left + 30;
var n = $( "input.item-select:checked" ).length;
if (n>0){
$("#selection-tools").show(400).offset(position);
} else {
position.top = 0;
$("#selection-tools").offset(position).hide(400);
}
console.log(position);
});

View File

@ -23,5 +23,12 @@
<div class="search-content">
<p>$item.body</p>
</div>
<footer class="entry-meta">
{{ if $item.conv }}
<a href='$item.conv.href'title='$item.conv.title'>$item.conv.title</a>
{{ endif }}
</footer><!-- #entry-meta -->
</article>

View File

@ -357,7 +357,7 @@ h2.fn { font-weight: bold; font-size: 1.2em;}
/* tabs */
ul.tabs { display: block; list-style: none; margin: 0px; height: auto; overflow: auto;}
ul.tabs { display: block; list-style: none; margin: 0px 100px 0px 0px; height: auto; overflow: auto;}
ul.tabs li { display: block; float: left; padding-right: 0.2em; }
ul.tabs li a { display: block; text-align: center; text-decoration: none; padding: 0px 0.5em; }
ul.tabs li a:hover { background-color: #EEEEEE; }
@ -451,7 +451,6 @@ ul.tabs li a.active { background-color: #1982D1; color: #ffffff; }
.reply li.comment { position: relative; margin-left: 40px; background-color:rgba(0, 0, 0, 0.03); padding-left: 20px;}
.reply .avatar { left: -40px; width: 32px; height: 32px; background-color: #fff;}
/* comment form */
.respond { height: auto; overflow: auto; }
.respond .form-submit { margin-top: 20px; }
@ -467,6 +466,19 @@ ul.tabs li a.active { background-color: #1982D1; color: #ffffff; }
clear: both;
margin-top: 40px;
}
/* compact in network view */
.hentry.compact { margin-bottom: 0px;}
#comments.compact { border-bottom: 1px solid #aaaaaa; padding: 0px; background-color: #DDDDDD;}
#comments.compact > .reply-link { padding: 10px; }
.compact .respond { display: none; }
.compact .commentlist { width: 100%; }
.compact .commentlist > li.comment { border: none; border-radius: 0px; margin: 0px; padding: 10px; border-top: 1px solid #aaaaaa; }
.compact .commentlist .avatar { left: -44px; width: 34px; height: 34px; }
.compact .commentlist > li::before { display: none; }
/* item author icon */
.hentry .avatar { position: absolute; left: -73px; top: 20px; border-radius: 3px; box-shadow: 0px 1px 2px #CCCCCC; }
/* search item */
article.search {
background: #F6F6F6;
@ -504,6 +516,44 @@ article.search .avatar {
#search-box input[type="submit"]{ margin: 1em 2em 2em 0px; }
#content > h2 { margin-bottom: 2em; } /* evabbe', poi tolgo l'html da 'sto schifo di php */
/* lock panel */
#panel {
position: absolute;
background: #F9F9F9;
border: 1px solid #DDDDDD;
color: #444444;
display: block;
font-weight: 400;
height: auto;
line-height: 1em;
padding: 10px;
text-decoration: none;
z-index: 99999;
}
/* selected tools panel */
#selection-tools {
position: absolute;
background: #F9F9F9;
border: 1px solid #DDDDDD;
color: #444444;
display: block;
font-weight: 400;
height: auto;
line-height: 1em;
padding: 10px;
text-decoration: none;
z-index: 99999;
transition: top 1s;
-moz-transition: top 1s; /* Firefox 4 */
-webkit-transition: top 1s; /* Safari and Chrome */
-o-transition: top 1s; /* Opera */
top: 0px;
}
/* item tools */
.right-tools {float: right;}
/* profile menu */
ul#profiles-menu { top: 2em; left: 9px; width: 176px; }
ul#profiles-menu li img { width: 16px; vertical-align: middle; margin-right: 10px;}
@ -528,17 +578,30 @@ ul#profiles-menu li img { width: 16px; vertical-align: middle; margin-right: 10p
.contact.dropmenu .menu-popup { left: 120px; top: 0px;}
/* icons */
.like-rotator { position: absolute; left: -20px;}
.icon { display: inline-block; margin: 0px; padding: 0px; width: 16px; height: 16px; }
.icon.camera { background: url(icons/image.png) transparent center center no-repeat; }
.icon.attach { background: url(icons/attachment.png) transparent center center no-repeat; }
.icon.link { background: url(icons/link.png) transparent center center no-repeat; }
.icon.video { background: url(icons/youtube2.png) transparent center center no-repeat; }
.icon.audio { background: url(icons/headphones.png) transparent center center no-repeat; }
.icon.globe { background: url(icons/location.png) transparent center center no-repeat; }
.icon.attach { background: url(icons/attachment.png) transparent center center no-repeat; }
.icon.link { background: url(icons/link.png) transparent center center no-repeat; }
.icon.video { background: url(icons/youtube2.png) transparent center center no-repeat; }
.icon.audio { background: url(icons/headphones.png) transparent center center no-repeat; }
.icon.globe { background: url(icons/location.png) transparent center center no-repeat; }
.icon.noglobe { background: url(icons/globe.png) transparent center center no-repeat; }
.icon.lock { background: url(icons/lock2.png) transparent center center no-repeat; }
.icon.lock { background: url(icons/lock2.png) transparent center center no-repeat; }
.icon.unlock { background: url(icons/unlocked.png) transparent center center no-repeat; }
.icon.edit { background: url(icons/pencil.png) transparent center center no-repeat; }
.icon.edit { background: url(icons/pencil.png) transparent center center no-repeat; }
.icon.like { background: url(icons/thumbs-up.png) transparent center center no-repeat; }
.icon.dislike { background: url(icons/thumbs-up2.png) transparent center center no-repeat; }
.icon.recycle { background: url(icons/share.png) transparent center center no-repeat; }
.icon.starred { background: url(icons/star3.png) transparent center center no-repeat; }
.icon.unstarred { background: url(icons/star.png) transparent center center no-repeat; }
.icon.file { background: url(icons/folder-open.png) transparent center center no-repeat; }
.icon.tag { background: url(icons/tag.png) transparent center center no-repeat; }
.icon.drophide { background: url(icons/remove.png) transparent center center no-repeat; }
.icon.sep { display:inline-block; text-align: center; font-size: 26px; line-height: 16px;}
.icon.on { border: 1px solid #cccccc; background-color: #56ef46;
-webkit-border-radius: 16px 16px 16px 16px;

View File

@ -4,15 +4,16 @@ $live_update
{{ inc $thread.template with $item=$thread }}{{ endinc }}
{{ endfor }}
<div id="conversation-end"></div>
{{ if $dropping }}
<div id="item-delete-selected" class="fakelink" onclick="deleteCheckedItems();">
<div id="item-delete-selected-icon" class="icon drophide" title="$dropping" onmouseover="imgbright(this);" onmouseout="imgdull(this);" ></div>
<div id="item-delete-selected-desc" >$dropping</div>
<div id="selection-tools" style="display:none;" >
<a href="#" onclick="return deleteCheckedItems();"><span class="icon drophide" title="$dropping"></span></a>
<div class="selection-tools-footer">
<img id="item-delete-selected-rotator" src="images/rotator.gif" style="display: none;" />
</div>
</div>
<img id="item-delete-selected-rotator" class="like-rotator" src="images/rotator.gif" style="display: none;" />
<div id="item-delete-selected-end"></div>
{{ endif }}
<script>
@ -24,11 +25,11 @@ $live_update
$(document).ready(function(){
// setup reply popup forms
$(".reply-link").colorbox({
href: function() {
return $(this).attr('href');
},
inline: true
});
href: function() {
return $(this).attr('href');
},
inline: true
});
});
</script>

View File

@ -1,8 +1,10 @@
<article class="post-8 post type-post status-publish format-standard hentry category-uncategorized tag-html tag-wordpress" id="item-$item.id">
<article class="post-8 post type-post status-publish format-standard hentry category-uncategorized tag-html tag-wordpress {{if $mode == network}}compact{{endif}}" id="item-$item.id">
<header class="entry-header">
<h1 class="entry-title"><a rel="bookmark" title="Permalink" href="$item.plink.href">$item.title</a></h1>
<div class="entry-meta">
{{if $mode != profile}}<img class="avatar avatar-68 photo avatar-default " alt="" title="$item.name" src="$item.thumb" height="68" width="68">{{endif}}
{{ if $item.lock }}<a href="#" class="icon lock" alt="$item.lock" onclick="lockview(event,$item.id); return false;"></a>{{ endif }}
<span class="sep">Posted </span>
<a rel="bookmark" title="12:04 am" href="$item.plink.href">
<time pubdate="" datetime="$item.localtime" class="entry-date">$item.ago</time>
@ -10,6 +12,7 @@
<span class="by-author">
<span class="sep"> by </span>
<span class="author vcard dropmenu">
<a rel="author" title="$item.linktitle" href="$item.profile_url" class="url fn n">$item.name</a>
<ul class="menu-popup" id="author-menu-$item.id">
$item.item_photo_menu
@ -26,7 +29,7 @@
<div class="entry-content">
$item.body
</div><!-- .entry-content -->
<footer class="entry-meta">
{{ if $item.categories }}
<span class="cat-links">
@ -59,14 +62,51 @@
<span class="comments-link"><a title="Comment" href="$item.plink.href">$item.total_comments_num $item.total_comments_text</a>
</span>
</footer><!-- #entry-meta -->
<footer class="entry-meta">
<img id="like-rotator-$item.id" class="like-rotator" src="images/rotator.gif" alt="$item.wait" title="$item.wait" style="display: none;" />
{{ if $item.vote }}
<a href="#" class="icon like" title="$item.vote.like.0" onclick="dolike($item.id,'like'); return false"></a>
{{ if $item.vote.dislike }}<a href="#" class="icon dislike" title="$item.vote.dislike.0" onclick="dolike($item.id,'dislike'); return false"></a>{{ endif }}
<span class="icon sep"> &#183; </span>
{{ endif }}
{{ if $item.vote.share }}
<a href="#" class="icon recycle" title="$item.vote.share.0" onclick="jotShare($item.id); return false"></a>
<span class="icon sep"> &#183; </span>
{{ endif }}
{{ if $item.star }}
<a href="#" id="starred-$item.id" onclick="dostar($item.id); return false;" class="icon $item.isstarred" title="$item.star.toggle"></a>
{{ endif }}
{{ if $item.tagger }}
<a href="#" onclick="itemTag($item.id); return false;" class="icon tag" title="$item.tagger.add"></a>
{{ endif }}
{{ if $item.filer }}
<a href="#" onclick="itemFiler($item.id); return false;" class="icon file" title="$item.filer"></a>
{{ endif }}
<span class="right-tools">
{{ if $item.edpost }}
<a class="editpost icon edit" href="$item.edpost.0" title="$item.edpost.1"></a>
<span class="icon sep"> &#183; </span>
{{ endif }}
{{ if $item.drop.dropping }}<a href="item/drop/$item.id" class="item icon drophide" title="$item.drop.delete"></a>{{ endif }}
{{ if $item.drop.pagedrop }}<input type="checkbox" title="$item.drop.select" class="item-select" name="itemselected[]" value="$item.id" />{{ endif }}
</span>
</footer>
</article>
{{ if $mode != profile }}
<div id="comments">
<h2 id="comments-title">
<div id="comments"class="{{if $mode == network}}compact{{endif}}">
{{if $mode != network}}
<h2 id="comments-title">
$item.total_comments_num $item.total_comments_text {{if $item.title}}on &ldquo;<span>$item.title</span>&rdquo;{{endif}}
</h2>
</h2>
{{endif}}
<ol class="commentlist">
{{ for $item.children as $child }}
@ -75,7 +115,8 @@
</ol>
$item.comment
{{if $mode == network}}<a href="#respond-$item.id" class="reply-link">Add a comment</a>{{endif}}
</div>
{{ endif }}