quattro: support threaded comments

diff --git a/view/theme/quattro/dark/style.css b/view/theme/quattro/dark/style.css
index 087d9c746f1d8f9e2ee32b3434c86b0a0d2f1228..6bd9ab06fbbedbfa05eaeaa78a1be2b0166b7225 100644 (file)
--- a/view/theme/quattro/dark/style.css
+++ b/view/theme/quattro/dark/style.css
@@ -1068,6 +1068,9 @@ section {
   color: #2d2d2d;
   border: 1px solid #2d2d2d;
 }
+.threaded .wall-item-comment-wrapper {
+  margin-left: 0px;
+}
 .comment-edit-preview {
   width: 710px;
   border: 1px solid #2d2d2d;
@@ -1139,6 +1142,34 @@ section {
   width: 25px;
   height: 25px;
 }
+/* threaded comments */
+.children > .children {
+  margin-left: 40px;
+}
+.children > .children .wall-item-container {
+  width: 710px;
+}
+.children > .children > .children {
+  margin-left: 40px;
+}
+.children > .children > .children .wall-item-container {
+  width: 670px;
+}
+.children > .children > .children > .children {
+  margin-left: 40px;
+}
+.children > .children > .children > .children .wall-item-container {
+  width: 630px;
+}
+.children > .children > .children > .children > .children {
+  margin-left: 40px;
+}
+.children > .children > .children > .children > .children .wall-item-container {
+  width: 590px;
+}
+.children > .children > .children > .children > .children .children {
+  margin-left: 0px;
+}
 span[id^="showmore-teaser"] {
   background: url("showmore-bg.jpg") no-repeat center bottom;
 }

diff --git a/view/theme/quattro/green/style.css b/view/theme/quattro/green/style.css
index 9c28473c616d22c27c7623c6b8eaeecd819ff254..2e97027b4bc4c282fd692b54ef1c82a3712de217 100644 (file)
--- a/view/theme/quattro/green/style.css
+++ b/view/theme/quattro/green/style.css
@@ -1068,6 +1068,9 @@ section {
   color: #2d2d2d;
   border: 1px solid #2d2d2d;
 }
+.threaded .wall-item-comment-wrapper {
+  margin-left: 0px;
+}
 .comment-edit-preview {
   width: 710px;
   border: 1px solid #2d2d2d;
@@ -1139,6 +1142,34 @@ section {
   width: 25px;
   height: 25px;
 }
+/* threaded comments */
+.children > .children {
+  margin-left: 40px;
+}
+.children > .children .wall-item-container {
+  width: 710px;
+}
+.children > .children > .children {
+  margin-left: 40px;
+}
+.children > .children > .children .wall-item-container {
+  width: 670px;
+}
+.children > .children > .children > .children {
+  margin-left: 40px;
+}
+.children > .children > .children > .children .wall-item-container {
+  width: 630px;
+}
+.children > .children > .children > .children > .children {
+  margin-left: 40px;
+}
+.children > .children > .children > .children > .children .wall-item-container {
+  width: 590px;
+}
+.children > .children > .children > .children > .children .children {
+  margin-left: 0px;
+}
 span[id^="showmore-teaser"] {
   background: url("showmore-bg.jpg") no-repeat center bottom;
 }

diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
index b5f0af669685ebe661fc19bb02def9f7c0a0e368..55b2d73ac5dc019bd617d2bbf5f910adffc0d1fb 100644 (file)
--- a/view/theme/quattro/quattro.less
+++ b/view/theme/quattro/quattro.less
@@ -538,6 +538,8 @@ section {
        }
 }
 
+.threaded .wall-item-comment-wrapper { margin-left: 0px; }
+
 .comment-edit-preview {
        width: 710px;
        border: 1px solid @Grey5;
@@ -594,6 +596,34 @@ section {
 }
 .wwto .contact-photo { width: 25px; height: 25px; }
 
+/* threaded comments */
+.children {
+
+       &> .children {
+               margin-left: 40px;
+               .wall-item-container { width: 710px; }
+       
+               &> .children {
+                       margin-left: 40px;
+                       .wall-item-container { width: 670px; }
+               
+                       &> .children {
+                               margin-left: 40px;
+                               .wall-item-container { width: 630px; }
+
+                               &> .children {
+                                       margin-left: 40px;
+                                       .wall-item-container { width: 590px; }
+                                       
+                                       .children {
+                                               margin-left: 0px;
+                                       }               
+                               }
+                       }               
+               }
+       }
+}
+
 span[id^="showmore-teaser"]{
     background: url("showmore-bg.jpg") no-repeat center bottom;
 }

diff --git a/view/theme/quattro/threaded_conversation.tpl b/view/theme/quattro/threaded_conversation.tpl
new file mode 100644 (file)
index 0000000..305ace9
--- /dev/null
+++ b/view/theme/quattro/threaded_conversation.tpl
@@ -0,0 +1,45 @@
+{{ for $threads as $item }}
+<div id="tread-wrapper-$item.id" class="tread-wrapper {{ if $item.threaded }}threaded{{ endif }}">
+        {{if $mode == display}}
+        {{ else }}
+               {{if $item.comment_firstcollapsed}}
+                       <div class="hide-comments-outer">
+                       <span id="hide-comments-total-$item.id" class="hide-comments-total">$item.num_comments</span> <span id="hide-comments-$item.id" class="hide-comments fakelink" onclick="showHideComments($item.id);">$item.hide_text</span>
+                       </div>
+                       <div id="collapsed-comments-$item.id" class="collapsed-comments" style="display: none;">
+               {{endif}}
+               {{if $item.comment_lastcollapsed}}</div>{{endif}}
+        {{ endif }}
+        
+               {{ if $item.type == tag }}
+                       {{ inc wall_item_tag.tpl }}{{ endinc }}
+               {{ else }}
+                       {{ inc $item.template }}{{ endinc }}
+               {{ endif }}
+               
+</div>
+{{ endfor }}
+
+<div id="conversation-end"></div>
+
+{{ if $dropping }}
+<a href="#" onclick="deleteCheckedItems();return false;">
+       <span class="icon s22 delete text">$dropping</span>
+</a>
+{{ endif }}
+
+<script>
+// jquery color plugin from https://raw.github.com/gist/1891361/17747b50ad87f7a59a14b4e0f38d8f3fb6a18b27/gistfile1.js
+    (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);
+    var colWhite = {backgroundColor:'#EFF0F1'};
+    var colShiny = {backgroundColor:'#FCE94F'};
+</script>
+
+{{ if $mode == display }}
+<script>
+    var id = window.location.pathname.split("/").pop();
+    $(window).scrollTop($('#item-'+id).position().top);
+    $('#item-'+id).animate(colWhite, 1000).animate(colShiny).animate(colWhite, 2000);   
+</script>
+{{ endif }}
+

diff --git a/view/theme/quattro/wall_item_tag.tpl b/view/theme/quattro/wall_item_tag.tpl
index 926fc929d26df61cf641ad3de20719f6e85cb2e5..205fcfebc06e350905e46dac314bd8e4c809aac8 100644 (file)
--- a/view/theme/quattro/wall_item_tag.tpl
+++ b/view/theme/quattro/wall_item_tag.tpl
@@ -13,11 +13,13 @@
                        <div class="wall-item-location">$item.location</div>    
                </div>
                <div class="wall-item-content">
-                       $item.body
+                       $item.ago $item.body 
                </div>
        </div>
 </div>
 
+{{ if $item.flatten }}
 <div class="wall-item-comment-wrapper" >
        $item.comment
 </div>
+{{ endif }}

diff --git a/view/theme/quattro/wall_thread.tpl b/view/theme/quattro/wall_thread.tpl
new file mode 100644 (file)
index 0000000..b51dc3d
--- /dev/null
+++ b/view/theme/quattro/wall_thread.tpl
@@ -0,0 +1,112 @@
+
+<div class="wall-item-decor">
+       <span class="icon s22 star $item.isstarred" id="starred-$item.id" title="$item.star.starred">$item.star.starred</span>
+       {{ if $item.lock }}<span class="icon s22 lock fakelink" onclick="lockview(event,$item.id);" title="$item.lock">$item.lock</span>{{ endif }}     
+       <img id="like-rotator-$item.id" class="like-rotator" src="images/rotator.gif" alt="$item.wait" title="$item.wait" style="display: none;" />
+</div>
+
+<div class="wall-item-container $item.indent" id="item-$item.id">
+       <div class="wall-item-item">
+               <div class="wall-item-info">
+                       <div class="contact-photo-wrapper"
+                               onmouseover="if (typeof t$item.id != 'undefined') clearTimeout(t$item.id); openMenu('wall-item-photo-menu-button-$item.id')" 
+                               onmouseout="t$item.id=setTimeout('closeMenu(\'wall-item-photo-menu-button-$item.id\'); closeMenu(\'wall-item-photo-menu-$item.id\');',200)">
+                               <a href="$item.profile_url" target="redir" title="$item.linktitle" class="contact-photo-link" id="wall-item-photo-link-$item.id">
+                                       <img src="$item.thumb" class="contact-photo$item.sparkle" id="wall-item-photo-$item.id" alt="$item.name" />
+                               </a>
+                               <a href="#" rel="#wall-item-photo-menu-$item.id" class="contact-photo-menu-button icon s16 menu" id="wall-item-photo-menu-button-$item.id">menu</a>
+                               <ul class="contact-menu menu-popup" id="wall-item-photo-menu-$item.id">
+                               $item.item_photo_menu
+                               </ul>
+                               
+                       </div>
+                       <div class="wall-item-location">$item.location</div>    
+               </div>
+               <div class="wall-item-content">
+                       {{ if $item.title }}<h2><a href="$item.plink.href" class="$item.sparkle">$item.title</a></h2>{{ endif }}
+                       $item.body
+               </div>
+       </div>
+       <div class="wall-item-bottom">
+               <div class="wall-item-links">
+               </div>
+               <div class="wall-item-tags">
+                       {{ for $item.tags as $tag }}
+                               <span class='tag'>$tag</span>
+                       {{ endfor }}
+               </div>
+       </div>
+       <div class="wall-item-bottom">
+               <div class="">
+                       {{ if $item.plink }}<a class="icon s16 link$item.sparkle" title="$item.plink.title" href="$item.plink.href">$item.plink.title</a>{{ endif }}
+               </div>
+               <div class="wall-item-actions">
+                       <div class="wall-item-actions-author">
+                               <a href="$item.profile_url" target="redir" title="$item.linktitle" class="wall-item-name-link"><span class="wall-item-name$item.sparkle">$item.name</span></a> <span class="wall-item-ago">$item.ago</span>
+                       </div>
+                       
+                       <div class="wall-item-actions-social">
+                       {{ if $item.star }}
+                               <a href="#" id="star-$item.id" onclick="dostar($item.id); return false;"  class="$item.star.classdo"  title="$item.star.do">$item.star.do</a>
+                               <a href="#" id="unstar-$item.id" onclick="dostar($item.id); return false;"  class="$item.star.classundo"  title="$item.star.undo">$item.star.undo</a>
+                               <a href="#" id="tagger-$item.id" onclick="itemTag($item.id); return false;" class="$item.star.classtagger" title="$item.star.tagger">$item.star.tagger</a>
+                       {{ endif }}
+                       {{ if $item.filer }}
+                                <a href="#" id="filer-$item.id" onclick="itemFiler($item.id); return false;" class="filer-item filer-icon" title="$item.filer">$item.filer</a>
+                       {{ endif }}                     
+                       
+                       {{ if $item.vote }}
+                               <a href="#" id="like-$item.id" title="$item.vote.like.0" onclick="dolike($item.id,'like'); return false">$item.vote.like.1</a>
+                               <a href="#" id="dislike-$item.id" title="$item.vote.dislike.0" onclick="dolike($item.id,'dislike'); return false">$item.vote.dislike.1</a>
+                       {{ endif }}
+                                               
+                       {{ if $item.vote.share }}
+                               <a href="#" id="share-$item.id" title="$item.vote.share.0" onclick="jotShare($item.id); return false">$item.vote.share.1</a>
+                       {{ endif }}                     
+                       </div>
+                       
+                       <div class="wall-item-actions-tools">
+
+                               {{ if $item.drop.dropping }}
+                                       <input type="checkbox" title="$item.drop.select" name="itemselected[]" class="item-select" value="$item.id" />
+                                       <a href="item/drop/$item.id" onclick="return confirmDelete();" class="icon delete s16" title="$item.drop.delete">$item.drop.delete</a>
+                               {{ endif }}
+                               {{ if $item.edpost }}
+                                       <a class="icon edit s16" href="$item.edpost.0" title="$item.edpost.1"></a>
+                               {{ endif }}
+                       </div>
+                       
+               </div>
+       </div>
+       <div class="wall-item-bottom">
+               <div class="wall-item-links"></div>
+               <div class="wall-item-like" id="wall-item-like-$item.id">$item.like</div>
+               <div class="wall-item-dislike" id="wall-item-dislike-$item.id">$item.dislike</div>      
+       </div>
+       {{ if $item.threaded }}{{ if $item.comment }}
+       <div class="wall-item-bottom">
+               <div class="wall-item-links"></div>
+               <div class="wall-item-comment-wrapper">
+                                       $item.comment
+               </div>
+       </div>
+       {{ endif }}{{ endif }}
+
+</div>
+
+
+{{ for $item.children as $item }}
+       <div class="children">
+               {{ if $item.type == tag }}
+                       {{ inc wall_item_tag.tpl }}{{ endinc }}
+               {{ else }}
+                       {{ inc $item.template }}{{ endinc }}
+               {{ endif }}
+       </div>
+{{ endfor }}
+
+{{ if $item.flatten }}
+<div class="wall-item-comment-wrapper" >
+       $item.comment
+</div>
+{{ endif }}

diff --git a/view/theme/quattro/wallwall_thread.tpl b/view/theme/quattro/wallwall_thread.tpl
new file mode 100644 (file)
index 0000000..038b156
--- /dev/null
+++ b/view/theme/quattro/wallwall_thread.tpl
@@ -0,0 +1,119 @@
+<div class="wall-item-decor">
+       <span class="icon s22 star $item.isstarred" id="starred-$item.id" title="$item.star.starred">$item.star.starred</span>
+       {{ if $item.lock }}<span class="icon s22 lock fakelink" onclick="lockview(event,$item.id);" title="$item.lock">$item.lock</span>{{ endif }}     
+       <img id="like-rotator-$item.id" class="like-rotator" src="images/rotator.gif" alt="$item.wait" title="$item.wait" style="display: none;" />
+</div>
+
+<div class="wall-item-container $item.indent" id="item-$item.id">
+       <div class="wall-item-item">
+               <div class="wall-item-info">
+                       <div class="contact-photo-wrapper mframe wwfrom"
+                               onmouseover="if (typeof t$item.id != 'undefined') clearTimeout(t$item.id); openMenu('wall-item-photo-menu-button-$item.id')" 
+                               onmouseout="t$item.id=setTimeout('closeMenu(\'wall-item-photo-menu-button-$item.id\'); closeMenu(\'wall-item-photo-menu-$item.id\');',200)">
+                               <a href="$item.profile_url" target="redir" title="$item.linktitle" class="contact-photo-link" id="wall-item-photo-link-$item.id">
+                                       <img src="$item.thumb" class="contact-photo $item.sparkle" id="wall-item-photo-$item.id" alt="$item.name" />
+                               </a>
+                               <a href="#" rel="#wall-item-photo-menu-$item.id" class="contact-photo-menu-button icon s16 menu" id="wall-item-photo-menu-button-$item.id">menu</a>
+                               <ul class="contact-menu menu-popup" id="wall-item-photo-menu-$item.id">
+                               $item.item_photo_menu
+                               </ul>
+                               
+                       </div>  
+                       <div class="contact-photo-wrapper mframe wwto" id="wall-item-ownerphoto-wrapper-$item.id" >
+                               <a href="$item.owner_url" target="redir" title="$item.olinktitle" class="contact-photo-link" id="wall-item-ownerphoto-link-$item.id">
+                                       <img src="$item.owner_photo" class="contact-photo $item.osparkle" id="wall-item-ownerphoto-$item.id" alt="$item.owner_name" />
+                               </a>
+                       </div>                  
+                       <div class="wall-item-location">$item.location</div>    
+               </div>
+               <div class="wall-item-content">
+                       {{ if $item.title }}<h2><a href="$item.plink.href" class="$item.sparkle">$item.title</a></h2>{{ endif }}
+                       $item.body
+               </div>
+       </div>
+       <div class="wall-item-bottom">
+               <div class="wall-item-links">
+               </div>
+               <div class="wall-item-tags">
+                       {{ for $item.tags as $tag }}
+                               <span class='tag'>$tag</span>
+                       {{ endfor }}
+               </div>
+       </div>  
+       <div class="wall-item-bottom">
+               <div class="wall-item-links">
+                       {{ if $item.plink }}<a class="icon s16 link$item.sparkle" title="$item.plink.title" href="$item.plink.href">$item.plink.title</a>{{ endif }}
+               </div>
+               <div class="wall-item-actions">
+                       <div class="wall-item-actions-author">
+                               <a href="$item.profile_url" target="redir" title="$item.linktitle" class="wall-item-name-link"><span class="wall-item-name$item.sparkle">$item.name</span></a> <span class="wall-item-ago">$item.ago</span>
+                                <br/>$item.to <a href="$item.owner_url" target="redir" title="$item.olinktitle" class="wall-item-name-link"><span class="wall-item-name$item.osparkle" id="wall-item-ownername-$item.id">$item.owner_name</span></a> $item.vwall
+                                
+                       </div>
+                       
+                       <div class="wall-item-actions-social">
+                       {{ if $item.star }}
+                               <a href="#" id="star-$item.id" onclick="dostar($item.id); return false;"  class="$item.star.classdo"  title="$item.star.do">$item.star.do</a>
+                               <a href="#" id="unstar-$item.id" onclick="dostar($item.id); return false;"  class="$item.star.classundo"  title="$item.star.undo">$item.star.undo</a>
+                               <a href="#" id="tagger-$item.id" onclick="itemTag($item.id); return false;" class="$item.star.classtagger" title="$item.star.tagger">$item.star.tagger</a>
+
+                       {{ endif }}
+                       {{ if $item.filer }}
+                                <a href="#" id="filer-$item.id" onclick="itemFiler($item.id); return false;" class="filer-item filer-icon" title="$item.filer">$item.filer</a>
+                       {{ endif }}                     
+                       
+                       {{ if $item.vote }}
+                               <a href="#" id="like-$item.id" title="$item.vote.like.0" onclick="dolike($item.id,'like'); return false">$item.vote.like.1</a>
+                               <a href="#" id="dislike-$item.id" title="$item.vote.dislike.0" onclick="dolike($item.id,'dislike'); return false">$item.vote.dislike.1</a>
+                       {{ endif }}
+                                               
+                       {{ if $item.vote.share }}
+                               <a href="#" id="share-$item.id" title="$item.vote.share.0" onclick="jotShare($item.id); return false">$item.vote.share.1</a>
+                       {{ endif }}                     
+                       </div>
+                       
+                       <div class="wall-item-actions-tools">
+
+                               {{ if $item.drop.dropping }}
+                                       <input type="checkbox" title="$item.drop.select" name="itemselected[]" class="item-select" value="$item.id" />
+                                       <a href="item/drop/$item.id" onclick="return confirmDelete();" class="icon delete s16" title="$item.drop.delete">$item.drop.delete</a>
+                               {{ endif }}
+                               {{ if $item.edpost }}
+                                       <a class="icon edit s16" href="$item.edpost.0" title="$item.edpost.1"></a>
+                               {{ endif }}
+                       </div>
+                       
+               </div>
+       </div>
+       <div class="wall-item-bottom">
+               <div class="wall-item-links"></div>
+               <div class="wall-item-like" id="wall-item-like-$item.id">$item.like</div>
+               <div class="wall-item-dislike" id="wall-item-dislike-$item.id">$item.dislike</div>      
+       </div>
+       
+       {{ if $item.threaded }}{{ if $item.comment }}
+       <div class="wall-item-bottom">
+               <div class="wall-item-links"></div>
+               <div class="wall-item-comment-wrapper">
+                                       $item.comment
+               </div>
+       </div>
+       {{ endif }}{{ endif }}
+</div>
+
+
+{{ for $item.children as $item }}
+       <div class="children">
+               {{ if $item.type == tag }}
+                       {{ inc wall_item_tag.tpl }}{{ endinc }}
+               {{ else }}
+                       {{ inc $item.template }}{{ endinc }}
+               {{ endif }}
+       </div>
+{{ endfor }}
+
+{{ if $item.flatten }}
+<div class="wall-item-comment-wrapper" >
+       $item.comment
+</div>
+{{ endif }}