From ec3d8a80cda6124bd8c68e6721f3fb5d280d4e0c Mon Sep 17 00:00:00 2001
From: Fabrixxm <fabrix.xm@gmail.com>
Date: Fri, 10 Aug 2012 06:27:01 -0400
Subject: [PATCH] quattro: fix collapsed thread, fix comment box, style previev
 comment, add 'expand / collapse" thread

---
 view/theme/quattro/dark/style.css      | 54 +++++++++++++++++++++-----
 view/theme/quattro/green/style.css     | 54 +++++++++++++++++++++-----
 view/theme/quattro/quattro.less        | 39 +++++++++++++++----
 view/theme/quattro/theme.php           | 10 +++++
 view/theme/quattro/wall_item_tag.tpl   |  4 ++
 view/theme/quattro/wall_thread.tpl     | 33 ++++++++++------
 view/theme/quattro/wallwall_thread.tpl | 37 ++++++++++++------
 7 files changed, 181 insertions(+), 50 deletions(-)

diff --git a/view/theme/quattro/dark/style.css b/view/theme/quattro/dark/style.css
index 17e51cf170..9561fe728a 100644
--- a/view/theme/quattro/dark/style.css
+++ b/view/theme/quattro/dark/style.css
@@ -1075,6 +1075,7 @@ section {
   width: 710px;
   border: 1px solid #2d2d2d;
   margin-top: 10px;
+  background-color: #fce94f;
 }
 .comment-edit-preview .contact-photo {
   width: 32px;
@@ -1091,12 +1092,17 @@ section {
   padding-left: 12px;
 }
 .comment-edit-preview .wall-item-container {
-  width: 700px;
+  width: 90%;
 }
 .comment-edit-preview .tread-wrapper {
-  width: 700px;
+  width: 90%;
   padding: 0;
   margin: 10px 0;
+  background-color: #fce94f;
+  border-bottom: 0px;
+}
+.comment-edit-preview .wall-item-conv {
+  display: none;
 }
 .shiny {
   border-right: 10px solid #fce94f;
@@ -1143,36 +1149,64 @@ section {
   height: 25px;
 }
 /* threaded comments */
+.children {
+  margin-top: 1em;
+}
+.children .hide-comments-outer {
+  margin-left: 60px;
+}
+.children .comment-edit-preview {
+  width: 660px;
+}
+.children .comment-edit-preview .wall-item-container {
+  width: 610px;
+}
 .children .children {
   margin-left: 40px;
 }
 .children .children .wall-item-container {
   width: 710px;
 }
-.children .children .children {
-  margin-left: 40px;
+.children .children .comment-edit-preview {
+  width: 620px;
+}
+.children .children .comment-edit-preview .wall-item-container {
+  width: 620px;
 }
 .children .children .children .wall-item-container {
   width: 670px;
 }
-.children .children .children .children {
-  margin-left: 40px;
+.children .children .children .comment-edit-preview {
+  width: 580px;
+}
+.children .children .children .comment-edit-preview .wall-item-container {
+  width: 580px;
 }
 .children .children .children .children .wall-item-container {
   width: 630px;
 }
-.children .children .children .children .children {
-  margin-left: 40px;
+.children .children .children .children .comment-edit-preview {
+  width: 540px;
+}
+.children .children .children .children .comment-edit-preview .wall-item-container {
+  width: 540px;
 }
 .children .children .children .children .children .wall-item-container {
   width: 590px;
 }
+.children .children .children .children .children .comment-edit-preview {
+  width: 500px;
+}
+.children .children .children .children .children .comment-edit-preview .wall-item-container {
+  width: 500px;
+}
 .children .children .children .children .children .children {
   margin-left: 0px;
 }
-.threaded .hide-comments-outer {
-  margin-left: 20px;
+.children .children .children .children .children .children .hide-comments-outer {
+  margin-left: 0px;
 }
+/*.threaded .hide-comments-outer { margin-left: 20px; }*/
 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 da9cdd7942..29d5512712 100644
--- a/view/theme/quattro/green/style.css
+++ b/view/theme/quattro/green/style.css
@@ -1075,6 +1075,7 @@ section {
   width: 710px;
   border: 1px solid #2d2d2d;
   margin-top: 10px;
+  background-color: #ddffdd;
 }
 .comment-edit-preview .contact-photo {
   width: 32px;
@@ -1091,12 +1092,17 @@ section {
   padding-left: 12px;
 }
 .comment-edit-preview .wall-item-container {
-  width: 700px;
+  width: 90%;
 }
 .comment-edit-preview .tread-wrapper {
-  width: 700px;
+  width: 90%;
   padding: 0;
   margin: 10px 0;
+  background-color: #ddffdd;
+  border-bottom: 0px;
+}
+.comment-edit-preview .wall-item-conv {
+  display: none;
 }
 .shiny {
   border-right: 10px solid #ddffdd;
@@ -1143,36 +1149,64 @@ section {
   height: 25px;
 }
 /* threaded comments */
+.children {
+  margin-top: 1em;
+}
+.children .hide-comments-outer {
+  margin-left: 60px;
+}
+.children .comment-edit-preview {
+  width: 660px;
+}
+.children .comment-edit-preview .wall-item-container {
+  width: 610px;
+}
 .children .children {
   margin-left: 40px;
 }
 .children .children .wall-item-container {
   width: 710px;
 }
-.children .children .children {
-  margin-left: 40px;
+.children .children .comment-edit-preview {
+  width: 620px;
+}
+.children .children .comment-edit-preview .wall-item-container {
+  width: 620px;
 }
 .children .children .children .wall-item-container {
   width: 670px;
 }
-.children .children .children .children {
-  margin-left: 40px;
+.children .children .children .comment-edit-preview {
+  width: 580px;
+}
+.children .children .children .comment-edit-preview .wall-item-container {
+  width: 580px;
 }
 .children .children .children .children .wall-item-container {
   width: 630px;
 }
-.children .children .children .children .children {
-  margin-left: 40px;
+.children .children .children .children .comment-edit-preview {
+  width: 540px;
+}
+.children .children .children .children .comment-edit-preview .wall-item-container {
+  width: 540px;
 }
 .children .children .children .children .children .wall-item-container {
   width: 590px;
 }
+.children .children .children .children .children .comment-edit-preview {
+  width: 500px;
+}
+.children .children .children .children .children .comment-edit-preview .wall-item-container {
+  width: 500px;
+}
 .children .children .children .children .children .children {
   margin-left: 0px;
 }
-.threaded .hide-comments-outer {
-  margin-left: 20px;
+.children .children .children .children .children .children .hide-comments-outer {
+  margin-left: 0px;
 }
+/*.threaded .hide-comments-outer { margin-left: 20px; }*/
 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 2a4b1b0d06..d7b82c8bc1 100644
--- a/view/theme/quattro/quattro.less
+++ b/view/theme/quattro/quattro.less
@@ -545,6 +545,7 @@ section {
 	width: 710px;
 	border: 1px solid @Grey5;
 	margin-top: 10px;
+	background-color: @JotPreviewBackgroundColor;
 	
 	.contact-photo { width: 32px; height: 32px; margin-left: 16px;
 		/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
@@ -555,8 +556,13 @@ section {
 	}
 	.wall-item-links { padding-left: 12px; }
 
-	.wall-item-container { width: 700px; }
-	.tread-wrapper { width: 700px; padding: 0; margin: 10px 0;}
+	.wall-item-container { width: 90%; }
+	.tread-wrapper { 
+		width: 90%; padding: 0; margin: 10px 0; 
+		background-color: @JotPreviewBackgroundColor;
+		border-bottom: 0px;
+	}
+	.wall-item-conv { display: none; }
 }
 
 .shiny { border-right:10px solid @ShinyBorderColor; }
@@ -599,32 +605,49 @@ section {
 
 /* threaded comments */
 .children {
-
+	margin-top: 1em;
+	.hide-comments-outer { margin-left:60px; }
+	
+	.comment-edit-preview { width: 660px;
+		.wall-item-container { width: 610px; }
+	 }
+	
 	& .children {
+		
 		margin-left: 40px;
 		.wall-item-container { width: 710px; }
+		.comment-edit-preview { width: 620px;
+			.wall-item-container { width: 620px; }
+		 }
 	
 		& .children {
-			margin-left: 40px;
 			.wall-item-container { width: 670px; }
+			.comment-edit-preview { width: 580px; 
+				.wall-item-container { width: 580px; }
+			}
 		
 			& .children {
-				margin-left: 40px;
 				.wall-item-container { width: 630px; }
+				.comment-edit-preview { width: 540px; 
+					.wall-item-container { width: 540px; }
+				}
 
 				& .children {
-					margin-left: 40px;
 					.wall-item-container { width: 590px; }
+					.comment-edit-preview { width: 500px; 
+						.wall-item-container { width: 500px; }
+					}
 					
 					.children {
 						margin-left: 0px;
-					}		
+						.hide-comments-outer { margin-left: 0px; }
+					}
 				}
 			}		
 		}
 	}
 }
-.threaded .hide-comments-outer { margin-left: 20px; }
+/*.threaded .hide-comments-outer { margin-left: 20px; }*/
 
 span[id^="showmore-teaser"]{
     background: url("showmore-bg.jpg") no-repeat center bottom;
diff --git a/view/theme/quattro/theme.php b/view/theme/quattro/theme.php
index 51d9d05d5e..1c986e4c8f 100644
--- a/view/theme/quattro/theme.php
+++ b/view/theme/quattro/theme.php
@@ -42,6 +42,16 @@ function insertFormatting(comment,BBcode,id) {
 	return true;
 }
 
+function showThread(id) {
+	$("#collapsed-comments-" + id).show()
+	$("#collapsed-comments-" + id + " .collapsed-comments").show()
+}
+function hideThread(id) {
+	$("#collapsed-comments-" + id).hide()
+	$("#collapsed-comments-" + id + " .collapsed-comments").hide()
+}
+
+
 function cmtBbOpen(id) {
 	$("#comment-edit-bb-" + id).show();
 }
diff --git a/view/theme/quattro/wall_item_tag.tpl b/view/theme/quattro/wall_item_tag.tpl
index d655306e59..e1ef932135 100644
--- a/view/theme/quattro/wall_item_tag.tpl
+++ b/view/theme/quattro/wall_item_tag.tpl
@@ -1,3 +1,5 @@
+{{ if $item.thread_level!=1 }}<div class="children">{{ endif }}
+
 <div class="wall-item-container item-tag $item.indent">
 	<div class="wall-item-item">
 		<div class="wall-item-info">
@@ -18,6 +20,8 @@
 	</div>
 </div>
 
+{{ if $item.thread_level!=1 }}</div>{{ endif }}
+
 {{ 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
index bd165eed78..01738b666b 100644
--- a/view/theme/quattro/wall_thread.tpl
+++ b/view/theme/quattro/wall_thread.tpl
@@ -7,11 +7,19 @@
 			<span id="hide-comments-$item.id" 
 				class="hide-comments fakelink" 
 				onclick="showHideComments($item.id);">$item.hide_text</span>
+			{{ if $item.thread_level==3 }} - 
+			<span id="hide-thread-$item-id"
+				class="fakelink"
+				onclick="showThread($item.id);">expand</span> /
+			<span id="hide-thread-$item-id"
+				class="fakelink"
+				onclick="hideThread($item.id);">collapse</span> thread{{ endif }}
 	</div>
 	<div id="collapsed-comments-$item.id" class="collapsed-comments" style="display: none;">
 {{endif}}
 {{ endif }}
 
+{{ if $item.thread_level!=1 }}<div class="children">{{ endif }}
 
 <div class="wall-item-decor">
 	<span class="icon s22 star $item.isstarred" id="starred-$item.id" title="$item.star.starred">$item.star.starred</span>
@@ -97,7 +105,7 @@
 		<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 }}{{ if $item.indent==comment }}
+	{{ if $item.threaded }}{{ if $item.comment }}{{ if $item.thread_level!=1 }}
 	<div class="wall-item-bottom">
 		<div class="wall-item-links"></div>
 		<div class="wall-item-comment-wrapper">
@@ -109,24 +117,27 @@
 </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>
+
+{{ for $item.children as $child }}
+	{{ if $item.type == tag }}
+		{{ inc wall_item_tag.tpl with $item=$child }}{{ endinc }}
+	{{ else }}
+		{{ inc $item.template with $item=$child }}{{ endinc }}
+	{{ endif }}
 {{ endfor }}
 
+{{ if $item.thread_level!=1 }}</div>{{ endif }}
+
+
 {{if $mode == display}}
 {{ else }}
 {{if $item.comment_lastcollapsed}}</div>{{endif}}
 {{ endif }}
 
-{{ if $item.indent!=comment}}
+{{if $item.threaded}}{{if $item.comment}}{{if $item.thread_level==1}}
 <div class="wall-item-comment-wrapper" >$item.comment</div>
-{{ endif }}
+{{ endif }}{{ endif }}{{ endif }}
+
 
 {{ if $item.flatten }}
 <div class="wall-item-comment-wrapper" >$item.comment</div>
diff --git a/view/theme/quattro/wallwall_thread.tpl b/view/theme/quattro/wallwall_thread.tpl
index ceb74517e3..93a8838ebd 100644
--- a/view/theme/quattro/wallwall_thread.tpl
+++ b/view/theme/quattro/wallwall_thread.tpl
@@ -2,12 +2,25 @@
 {{ 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>
+		<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>
+			{{ if $item.thread_level==3 }} - 
+			<span id="hide-thread-$item-id"
+				class="fakelink"
+				onclick="showThread($item.id);">expand</span> /
+			<span id="hide-thread-$item-id"
+				class="fakelink"
+				onclick="hideThread($item.id);">collapse</span> thread{{ endif }}
 	</div>
 	<div id="collapsed-comments-$item.id" class="collapsed-comments" style="display: none;">
 {{endif}}
 {{ endif }}
 
+{{ if $item.thread_level!=1 }}<div class="children">{{ endif }}
+
 <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 }}	
@@ -112,24 +125,26 @@
 </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>
+{{ for $item.children as $child }}
+	{{ if $item.type == tag }}
+		{{ inc wall_item_tag.tpl with $item=$child }}{{ endinc }}
+	{{ else }}
+		{{ inc $item.template with $item=$child }}{{ endinc }}
+	{{ endif }}
 {{ endfor }}
 
+{{ if $item.thread_level!=1 }}</div>{{ endif }}
+
+
 {{if $mode == display}}
 {{ else }}
 {{if $item.comment_lastcollapsed}}</div>{{endif}}
 {{ endif }}
 
-{{ if $item.indent!=comment}}
+{{if $item.threaded}}{{if $item.comment}}{{if $item.thread_level==1}}
 <div class="wall-item-comment-wrapper" >$item.comment</div>
-{{ endif }}
+{{ endif }}{{ endif }}{{ endif }}
+
 
 {{ if $item.flatten }}
 <div class="wall-item-comment-wrapper" >$item.comment</div>