tools icon in item footer
compact display in network page floating "remove selected" tool
This commit is contained in:
fabrixxm
parent
820267906a
commit
754f8957ed
16 changed files with 179 additions and 26 deletions
|
|
@ -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
1
view/theme/blog/end.tpl
Normal file
|
|
@ -0,0 +1 @@
|
|||
<script type="text/javascript" src="$baseurl/view/theme/blog/js/theme.js"></script>
|
||||
BIN
view/theme/blog/icons/folder-open.png
Normal file
BIN
view/theme/blog/icons/folder-open.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 211 B |
BIN
view/theme/blog/icons/remove.png
Normal file
BIN
view/theme/blog/icons/remove.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 207 B |
BIN
view/theme/blog/icons/share.png
Normal file
BIN
view/theme/blog/icons/share.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 250 B |
BIN
view/theme/blog/icons/star.png
Normal file
BIN
view/theme/blog/icons/star.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 314 B |
BIN
view/theme/blog/icons/star3.png
Normal file
BIN
view/theme/blog/icons/star3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 281 B |
BIN
view/theme/blog/icons/tag.png
Normal file
BIN
view/theme/blog/icons/tag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 B |
BIN
view/theme/blog/icons/thumbs-up.png
Normal file
BIN
view/theme/blog/icons/thumbs-up.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 239 B |
BIN
view/theme/blog/icons/thumbs-up2.png
Normal file
BIN
view/theme/blog/icons/thumbs-up2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 270 B |
1
view/theme/blog/js/jquery-color-min.js
vendored
Normal file
1
view/theme/blog/js/jquery-color-min.js
vendored
Normal 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);
|
||||
38
view/theme/blog/js/theme.js
Normal file
38
view/theme/blog/js/theme.js
Normal 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);
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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,6 +578,8 @@ 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; }
|
||||
|
|
@ -540,6 +592,17 @@ ul#profiles-menu li img { width: 16px; vertical-align: middle; margin-right: 10p
|
|||
.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.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;
|
||||
-moz-border-radius: 16px 16px 16px 16px;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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"> · </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"> · </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"> · </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">
|
||||
<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 “<span>$item.title</span>”{{endif}}
|
||||
</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 }}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue