some work on comment_item.tpl

6 files changed, 77 insertions, 176 deletions

diff --git a/view/css/conversation.css b/view/css/conversation.css
index 4e7b59f80..3fc82154b 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -199,60 +199,21 @@
 
 /* comment_item */
 
-.comment-wwedit-wrapper.threaded > .comment-edit-form > .comment-edit-photo {
-	width: 40px;
-}
-
-.comment-wwedit-wrapper.threaded > .comment-edit-form > .comment-edit-text-empty {
-	height: 1.5em;
-}
-
-.comment-wwedit-wrapper.threaded > .comment-edit-form > .comment-edit-submit-wrapper > .comment-edit-submit {
-	margin-left: 50px;
-}
-
-.comment-edit-photo {
-	margin: 10px 10px 10px 7px;
-	float: left;
-}
-
-[class^="comment-edit-bb"] {
-	display: none;
-	margin: 0px 0 -5px 0px;
-	padding: 0px;
-	width: 75%;
-	min-width: 170px
-}
-
-[class^="comment-edit-bb"] > li {
-	display: inline-block;
-	margin: 10px 10px 0 0;
-	visibility: none;
-}
-
-[class^="comment-edit-bb-end"] {
-	clear: both;
-}
-
 .comment-edit-text-empty, .comment-edit-text-full {
 	float: left;
-	margin-top: 10px;
-	padding: 3px 1px 1px 3px;
+	width: 100%;
 	padding: 8px;
 }
 
 .comment-edit-text-empty {
 	height: 2.8em;
-	width: 30%;
-	min-width: 170px;
 	overflow: auto;
-	margin-bottom: 10px;
+	resize: none;
+
 }
 
 .comment-edit-text-full {
 	height: 150px;
-	width: 50%;
-	min-width: 170px;
 	overflow: auto;
 }
 
@@ -280,14 +241,12 @@
 	filter:alpha(opacity=100);
 }
 
-.comment-edit-text-end {
-	clear: both;
-}
-
-.comment-edit-submit {
-	margin: 10px 0px 10px 52px;
+.comment-tools {
+	display: none;
+	margin-top: 7px;
 }
 
-.comment-preview-icon {
-	margin-left: 15px;
+.comment-edit-preview {
+	display: none;
+	margin-top: 7px;
 }
diff --git a/view/js/main.js b/view/js/main.js
index fa32df424..a4cbed064 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -6,21 +6,25 @@
 			$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
 			$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
 			$("#mod-cmnt-wrap-" + id).show();
-			openMenu("comment-edit-submit-wrapper-" + id);
+			openMenu("comment-tools-" + id);
 			return true;
 		}
 		return false;
 	}
+
 	function commentClose(obj,id) {
-		if(obj.value == '') {
-			obj.value = aStr['comment'];
-			$("#comment-edit-text-" + id).removeClass("comment-edit-text-full");
-			$("#comment-edit-text-" + id).addClass("comment-edit-text-empty");
-			$("#mod-cmnt-wrap-" + id).hide();
-			closeMenu("comment-edit-submit-wrapper-" + id);
-			return true;
-		}
-		return false;
+		$(document).on('click', function() {
+			if(obj.value == '') {
+				obj.value = aStr['comment'];
+				$("#comment-edit-text-" + id).removeClass("comment-edit-text-full");
+				$("#comment-edit-text-" + id).addClass("comment-edit-text-empty");
+				$("#mod-cmnt-wrap-" + id).hide();
+				closeMenu("comment-tools-" + id);
+				return true;
+			}
+			return false;
+		});
+
 	}
 
 	function showHideCommentBox(id) {
@@ -32,14 +36,13 @@
 		}
 	}
 
-
 	function commentInsert(obj,id) {
 		var tmpStr = $("#comment-edit-text-" + id).val();
 		if(tmpStr == '$comment') {
 			tmpStr = '';
 			$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
 			$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
-			openMenu("comment-edit-submit-wrapper-" + id);
+			openMenu("comment-tools-" + id);
 		}
 		var ins = $(obj).html();
 		ins = ins.replace('&lt;','<');
@@ -62,7 +65,7 @@
 			tmpStr = "";
 			$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
 			$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
-			openMenu("comment-edit-submit-wrapper-" + id);
+			openMenu("comment-tools-" + id);
 			$("#comment-edit-text-" + id).val(tmpStr);
 		}
 
@@ -748,6 +751,7 @@ function updateConvItems(mode,data) {
              $("#comment-edit-form-" + id).serialize(),
 			function(data) {
 				if(data.success) {
+					$("#comment-edit-preview-" + id).hide();
 					$("#comment-edit-wrapper-" + id).hide();
 					$("#comment-edit-text-" + id).val('');
     	  			var tarea = document.getElementById("comment-edit-text-" + id);
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index f7df3bf52..f773264cc 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1884,7 +1884,6 @@ img.mail-list-sender-photo {
 
 .wall-item-content-wrapper {
 	background-color: $item_colour;
-	opacity: $item_opacity;
 	padding: 10px;
 }
 
@@ -1893,9 +1892,6 @@ img.mail-list-sender-photo {
 	border-top-left-radius: $radiuspx;
 }
 
-.wall-item-content-wrapper:hover {
-	z-index:99;
-}
 .comment .wall-item-body {
 	padding-left: $comment_padding;
 }
@@ -1905,35 +1901,23 @@ img.mail-list-sender-photo {
 	background-color: $comment_item_colour;
 	border-left: $comment_border_left $comment_border_colour;
 	border-right: $comment_border_right $comment_border_colour;
-
 	border-bottom: $comment_border_bottom $comment_border_colour;
 	border-radius: 0px;
 	padding: 7px 10px 7px 7px;
 }
-/* 
-.thread-wrapper.toplevel_item{
-	border-bottom: $comment_border_bottom $comment_border_colour;
 
-	border-right: $comment_border_right $item_colour;
-	border-left: $comment_border_left $item_colour;
- 
-    border-top-right-radius: $radiuspx;
-	border-top-left-radius: $radiuspx;
-	border-bottom-right-radius: $radiuspx;
-	border-bottom-left-radius: $radiuspx;
-}
- */
 .wall-item-comment-wrapper {
-	background-color: $comment_item_colour;
-   /*  border-top: $comment_border_top $item_colour; */
-	border-right: $comment_border_right $item_colour;
-	border-left: $comment_border_left $item_colour;
-	border-bottom: $comment_border_bottom $item_colour;
+	padding: 7px 10px;
+	background-color: $item_colour;
 	border-radius: 0px;
 	border-bottom-right-radius: $radiuspx;
 	border-bottom-left-radius: $radiuspx;
+	margin-top: 3px;
 }
 
+.wall-item-comment-wrapper-wc {
+	margin-top: 0px;
+}
 
 .wall-item-like,
 .wall-item-dislike {
@@ -1981,37 +1965,15 @@ img.mail-list-sender-photo {
 	color: $toolicon_colour;
 }
 
-.item-tool:hover {
-	/*color: $toolicon_activecolour;*/
-}
-
 .like-rotator {
 	color: $toolicon_colour;
 }
 
-.my-comment-photo {
-    border-radius: $radiuspx;
-    -moz-border-radius: $radiuspx;
-    box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
-}
-
-.comment-edit-photo img {
-	width: $reply_photo;
-}
-
-[class^="comment-edit-bb"] {
-	list-style: none;
-}
-
 .comment-icon {
-	font-size: 1.2em;
+	font-size: 0.8em;
 	color: $toolicon_colour;
 }
 
-.comment-icon:hover {
-	color: $toolicon_activecolour;
-}
-
 .comment-edit-text-empty,
 .comment-edit-text-full {
 	border: 1px solid #ccc;
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 20902fe1a..d981b0c11 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -1,23 +1,3 @@
-function cmtBbOpen(comment, id) {
-	if($(comment).hasClass('comment-edit-text-full')) {
-		$(".comment-edit-bb-" + id).show();
-		return true;
-	}
-	return false;
-}
-
-function cmtBbClose(comment, id) {
-//	if($(comment).hasClass('comment-edit-text-empty')) {
-//		$(".comment-edit-bb-" + id).hide();
-//		return true;
-//	}
-	return false;
-}
-
-//document.jotpermslock = 'icon-lock';
-//document.jotpermsunlock = 'icon-unlock';
-
-
 $(document).ready(function() {
 
 $('#expand-aside').click(function() {
diff --git a/view/tpl/comment_item.tpl b/view/tpl/comment_item.tpl
index 1ea619774..598c0d58e 100755
--- a/view/tpl/comment_item.tpl
+++ b/view/tpl/comment_item.tpl
@@ -10,44 +10,7 @@
 				<input type="hidden" name="return" value="{{$return_path}}" />
 				<input type="hidden" name="jsreload" value="{{$jsreload}}" />
 				<input type="hidden" name="preview" id="comment-preview-inp-{{$id}}" value="0" />
-
-				<div class="comment-edit-photo" id="comment-edit-photo-{{$id}}" >
-					<a class="comment-edit-photo-link" href="{{$mylink}}" title="{{$mytitle}}"><img class="my-comment-photo" src="{{$myphoto}}" alt="{{$mytitle}}" title="{{$mytitle}}" /></a>
-				</div>
-				<div class="comment-edit-photo-end"></div>
-				<ul class="comment-edit-bb-{{$id}}">
-					<li><i class="icon-bold shadow comment-icon"
-						style="cursor: pointer;" title="{{$edbold}}"
-						onclick="insertbbcomment('{{$comment}}','b', {{$id}});"></i></li>
-					<li><i class="icon-italic shadow comment-icon"
-						style="cursor: pointer;" title="{{$editalic}}"
-						onclick="insertbbcomment('{{$comment}}','i', {{$id}});"></i></li>
-					<li><i class="icon-underline shadow comment-icon"
-						style="cursor: pointer;" title="{{$eduline}}"
-						onclick="insertbbcomment('{{$comment}}','u', {{$id}});"></i></li>
-					<li><i class="icon-quote-left shadow comment-icon"
-						style="cursor: pointer;" title="{{$edquote}}"
-						onclick="insertbbcomment('{{$comment}}','quote', {{$id}});"></i></li>
-					<li><i class="icon-terminal shadow comment-icon"
-						style="cursor: pointer;" title="{{$edcode}}"
-						onclick="insertbbcomment('{{$comment}}','code', {{$id}});"></i></li>
-					<li><i class="icon-camera shadow comment-icon"
-						style="cursor: pointer;" title="{{$edimg}}"
-						onclick="insertbbcomment('{{$comment}}','img', {{$id}});"></i></li>
-					<li><i class="icon-link shadow comment-icon"
-						style="cursor: pointer;" title="{{$edurl}}"
-						onclick="insertbbcomment('{{$comment}}','url', {{$id}});"></i></li>
-					<li><i class="icon-facetime-video shadow comment-icon"
-						style="cursor: pointer;" title="{{$edvideo}}"
-						onclick="insertbbcomment('{{$comment}}','video', {{$id}});"></i></li>
-					{{if $feature_encrypt}}
-						<li><i class="icon-key shadow comment-icon"
-							style="cursor: pointer;" title="{{$encrypt}}"
-							onclick="red_encrypt('{{$cipher}}','#comment-edit-text-' + '{{$id}}',''); return false;"></i></li>
-					{{/if}}
-				</ul>	
-				<div class="comment-edit-bb-end"></div>
-				<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,{{$id}});cmtBbOpen(this, {{$id}});" onBlur="commentClose(this,{{$id}});cmtBbClose(this,{{$id}});" >{{$comment}}</textarea>			
+				<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,{{$id}});" onBlur="commentClose(this,{{$id}});" >{{$comment}}</textarea>
 				{{if $qcomment}}
 					<select id="qcomment-select-{{$id}}" name="qcomment-{{$id}}" class="qcomment" onchange="qCommentInsert(this,{{$id}});" >
 					<option value=""></option>
@@ -56,17 +19,48 @@
 				{{/foreach}}
 					</select>
 				{{/if}}
-
-				<div class="comment-edit-text-end"></div>
-				<div class="comment-edit-submit-wrapper" id="comment-edit-submit-wrapper-{{$id}}" style="display: none;" >
-					<input type="submit" onclick="post_comment({{$id}}); return false;" id="comment-edit-submit-{{$id}}" class="comment-edit-submit" name="submit" value="{{$submit}}" />
+				<div class="clear"></div>
+				<div id="comment-tools-{{$id}}" class="comment-tools">
+					<div id="comment-edit-bb-{{$id}}" class="btn-group pull-left">
+						<button class="btn btn-default btn-xs" title="{{$edbold}}" onclick="insertbbcomment('{{$comment}}','b', {{$id}}); return false;">
+							<i class="icon-bold comment-icon"></i>
+						</button>
+						<button class="btn btn-default btn-xs" title="{{$editalic}}" onclick="insertbbcomment('{{$comment}}','i', {{$id}}); return false;">
+							<i class="icon-italic comment-icon"></i>
+						</button>
+						<button class="btn btn-default btn-xs" title="{{$eduline}}" onclick="insertbbcomment('{{$comment}}','u', {{$id}}); return false;">
+							<i class="icon-underline comment-icon"></i>
+						</button>
+						<button class="btn btn-default btn-xs" title="{{$edquote}}" onclick="insertbbcomment('{{$comment}}','quote', {{$id}}); return false;">
+							<i class="icon-quote-left comment-icon"></i>
+						</button>
+						<button class="btn btn-default btn-xs" title="{{$edcode}}" onclick="insertbbcomment('{{$comment}}','code', {{$id}}); return false;">
+							<i class="icon-terminal comment-icon"></i>
+						</button>
+						<button class="btn btn-default btn-xs" title="{{$comment}}" onclick="insertbbcomment('{{$comment}}','img', {{$id}}); return false;">
+							<i class="icon-camera comment-icon"></i>
+						</button>
+						<button class="btn btn-default btn-xs" title="{{$edurl}}" onclick="insertbbcomment('{{$comment}}','url', {{$id}}); return false;">
+							<i class="icon-link comment-icon"></i>
+						</button>
+						<button class="btn btn-default btn-xs" title="{{$edvideo}}" onclick="insertbbcomment('{{$comment}}','video', {{$id}}); return false;">
+							<i class="icon-facetime-video comment-icon"></i>
+						</button>
+						{{if $feature_encrypt}}
+						<button class="btn btn-default btn-xs" title="{{$encrypt}}" onclick="red_encrypt('{{$cipher}}','#comment-edit-text-' + '{{$id}}',''); return false;">
+							<i class="icon-key comment-icon"></i>
+						</button>
+						{{/if}}
+					</div>
+					<div class="btn-group pull-right" id="comment-edit-submit-wrapper-{{$id}}">
 					{{if $preview}}
-					<span onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}" class="fakelink"><i class="icon-eye-open comment-icon comment-preview-icon" title="{{$preview}}"></i></span>
-					<div id="comment-edit-preview-{{$id}}" class="comment-edit-preview" style="display:none;"></div>
+					<button id="comment-edit-submit-{{$id}}" class="btn btn-default btn-xs btn-preview" onclick="preview_comment({{$id}}); return false;" title="{{$preview}}">
+						<i class="icon-eye-open comment-icon" ></i>
+					</button>
 					{{/if}}
+					<button id="comment-edit-submit-{{$id}}" class="btn btn-primary btn-xs" type="submit" name="submit" onclick="post_comment({{$id}}); return false;">{{$submit}}</button>
+					</div>
 				</div>
-
-				<div class="comment-edit-end"></div>
+				<div class="clear"></div>
 			</form>
-
 		</div>
diff --git a/view/tpl/conv_item.tpl b/view/tpl/conv_item.tpl
index ee10b6633..fe54ac377 100755
--- a/view/tpl/conv_item.tpl
+++ b/view/tpl/conv_item.tpl
@@ -174,9 +174,11 @@
 		{{/foreach}}
 		{{/if}}
 		{{if $item.comment}}
-		<div class="wall-item-comment-wrapper" >
+		<div class="wall-item-comment-wrapper{{if $item.children}} wall-item-comment-wrapper-wc{{/if}}" >
 			{{$item.comment}}
 		</div>
+		<div id="comment-edit-preview-{{$item.id}}" class="comment-edit-preview"></div>
+		<div class="clear"></div>
 		{{/if}}
 	</div>
 {{if $item.comment_lastcollapsed}}