From: tommy tomson <thomas.bierey@gmx.de>
Date: Mon, 9 Apr 2012 22:55:39 +0000 (+0200)
Subject: bbcode toolbar attached to the comment text field
X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=0d4fab4ee3cba6db669d6b7e608bfbbba8e8d3dc;p=friendica.git

bbcode toolbar attached to the comment text field
minor css-fixes
---

diff --git a/view/theme/diabook-aerith/comment_item.tpl b/view/theme/diabook-aerith/comment_item.tpl
new file mode 100644
index 0000000000..4668b9ce39
--- /dev/null
+++ b/view/theme/diabook-aerith/comment_item.tpl
@@ -0,0 +1,39 @@
+		<div class="comment-wwedit-wrapper" id="comment-edit-wrapper-$id" style="display: block;">
+			<form class="comment-edit-form" id="comment-edit-form-$id" action="item" method="post" onsubmit="post_comment($id); return false;">
+				<input type="hidden" name="type" value="$type" />
+				<input type="hidden" name="profile_uid" value="$profile_uid" />
+				<input type="hidden" name="parent" value="$parent" />
+				<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>
+				<textarea id="comment-edit-text-$id" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,$id);" onBlur="commentClose(this,$id);" >$comment</textarea>
+				<a class="icon bb-video" onclick="insertFormatting('video',$id);">video</a>													
+				<a class="icon bb-image" onclick="insertFormatting('img',$id);">img</a>										
+				<a class="icon italic" onclick="insertFormatting('i',$id);">i</a>
+				<a class="icon underline" onclick="insertFormatting('u',$id);">u</a>
+				<a class="icon bold" onclick="insertFormatting('b',$id);">b</a>
+				{{ if $qcomment }}
+					<select id="qcomment-select-$id" name="qcomment-$id" class="qcomment" onchange="qCommentInsert(this,$id);" >
+					<option value=""></option>
+				{{ for $qcomment as $qc }}
+					<option value="$qc">$qc</option>				
+				{{ endfor }}
+					</select>
+				{{ endif }}
+
+				<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" />
+					<span onclick="preview_comment($id);" id="comment-edit-preview-link-$id" class="fakelink">$preview</span>
+					<div id="comment-edit-preview-$id" class="comment-edit-preview" style="display:none;"></div>
+				</div>
+
+				<div class="comment-edit-end"></div>
+			</form>
+
+		</div>
diff --git a/view/theme/diabook-aerith/icons/bb-image.png b/view/theme/diabook-aerith/icons/bb-image.png
new file mode 100644
index 0000000000..9a1b32113e
Binary files /dev/null and b/view/theme/diabook-aerith/icons/bb-image.png differ
diff --git a/view/theme/diabook-aerith/icons/bb-video.png b/view/theme/diabook-aerith/icons/bb-video.png
new file mode 100644
index 0000000000..bd323531ec
Binary files /dev/null and b/view/theme/diabook-aerith/icons/bb-video.png differ
diff --git a/view/theme/diabook-aerith/icons/bold.png b/view/theme/diabook-aerith/icons/bold.png
new file mode 100644
index 0000000000..8fab2a10f8
Binary files /dev/null and b/view/theme/diabook-aerith/icons/bold.png differ
diff --git a/view/theme/diabook-aerith/icons/italic.png b/view/theme/diabook-aerith/icons/italic.png
new file mode 100644
index 0000000000..bf4b2b81d8
Binary files /dev/null and b/view/theme/diabook-aerith/icons/italic.png differ
diff --git a/view/theme/diabook-aerith/icons/underline.png b/view/theme/diabook-aerith/icons/underline.png
new file mode 100644
index 0000000000..b1b4d35741
Binary files /dev/null and b/view/theme/diabook-aerith/icons/underline.png differ
diff --git a/view/theme/diabook-aerith/style-network.css b/view/theme/diabook-aerith/style-network.css
index 07bda6a24a..385b58ac4a 100644
--- a/view/theme/diabook-aerith/style-network.css
+++ b/view/theme/diabook-aerith/style-network.css
@@ -1298,6 +1298,7 @@ transition: all 0.2s ease-in-out;
   padding: 5px;
   margin-bottom: 0px;
   width: 575px;
+  padding-top: 10px;
 }
 .tread-wrapper a{
   color: #3465A4;
@@ -1447,7 +1448,7 @@ transition: all 0.2s ease-in-out;
 }
 
 .wall-item-comment-wrapper {
-  margin: 1px 0px 0px 80px;
+  margin: 1px 5px 17px 80px;
   background-color: #fff;
   width: 500px;
 }
diff --git a/view/theme/diabook-aerith/style-profile.css b/view/theme/diabook-aerith/style-profile.css
index 8909f08701..078b6d01f6 100644
--- a/view/theme/diabook-aerith/style-profile.css
+++ b/view/theme/diabook-aerith/style-profile.css
@@ -1291,6 +1291,7 @@ transition: all 0.2s ease-in-out;
   padding: 5px;
   margin-bottom: 0px;
   width: 575px;
+  padding-top: 10px;
 }
 .tread-wrapper a{
   color: #3465A4;
@@ -1439,7 +1440,7 @@ transition: all 0.2s ease-in-out;
   padding-left: 12px;
 }
 .wall-item-comment-wrapper {
-  margin: 1px 5px 1px 80px;
+  margin: 1px 5px 17px 80px;
 }
 .wall-item-comment-wrapper .comment-edit-photo {
   display: none;
diff --git a/view/theme/diabook-aerith/style.css b/view/theme/diabook-aerith/style.css
index 23ae05940d..2089090f18 100644
--- a/view/theme/diabook-aerith/style.css
+++ b/view/theme/diabook-aerith/style.css
@@ -82,7 +82,27 @@
 #adminpage table tr:hover { background-color: #eeeeee; }
 #adminpage .selectall { text-align: right; }
 /* icons */
-
+.icon.bold{
+  background-image: url("../../../view/theme/diabook-aerith/icons/bold.png");
+  float: right;
+  margin-top: 2px;}
+.icon.underline{
+  background-image: url("../../../view/theme/diabook-aerith/icons/underline.png");
+  float: right;
+  margin-top: 2px;}
+.icon.italic{
+  background-image: url("../../../view/theme/diabook-aerith/icons/italic.png");
+  float: right;
+  margin-top: 2px;}
+.icon.bb-image{
+  background-image: url("../../../view/theme/diabook-aerith/icons/bb-image.png");
+  float: right;
+  margin-top: 2px;}
+.icon.bb-video{
+  background-image: url("../../../view/theme/diabook-aerith/icons/bb-video.png");
+  float: right;
+  margin-top: 2px;}
+  
 .icon.contacts {
   background-image: url("../../../view/theme/diabook-aerith/icons/contacts.png");}
 .icon.notifications {
@@ -1331,6 +1351,7 @@ body .pageheader{
   padding: 5px;
   margin-bottom: 0px;
   width: 775px;
+  padding-top: 10px;
 }
 .tread-wrapper a{
   color: #3465A4;
@@ -1592,7 +1613,7 @@ body .pageheader{
   padding-left: 12px;
 }
 .wall-item-comment-wrapper {
-  margin: 1px 5px 1px 80px;
+  margin: 1px 5px 17px 80px;
 }
 .wall-item-comment-wrapper .comment-edit-photo {
   display: none;
diff --git a/view/theme/diabook-aerith/theme.php b/view/theme/diabook-aerith/theme.php
index 40093e5458..1b26e47f83 100755
--- a/view/theme/diabook-aerith/theme.php
+++ b/view/theme/diabook-aerith/theme.php
@@ -3,13 +3,13 @@
 /*
  * Name: Diabook-aerith
  * Description: Diabook-aerith : report bugs and request here: http://pad.toktan.org/p/diabook or contact me : thomas_bierey@friendica.eu
- * Version: (Version: 1.015)
+ * Version: (Version: 1.016)
  * Author: 
  */
 
 
 //print diabook-version for debugging
-$diabook_version = "Diabook-aerith (Version: 1.015)";
+$diabook_version = "Diabook-aerith (Version: 1.016)";
 $a->page['htmlhead'] .= sprintf('<script "%s" ></script>', $diabook_version);
 
 
@@ -507,4 +507,31 @@ function restore_boxes(){
 	$.cookie("close_lastlikes","2", { expires: 365, path: "/" });
 	alert("Right-hand column was restored. Please refresh your browser");
   }
-</script>';}
\ No newline at end of file
+</script>';}
+
+$a->page['htmlhead'] .= ' 
+
+<script type="text/javascript">
+function insertFormatting(BBcode,id) {
+	
+		var tmpStr = $("#comment-edit-text-" + id).val();
+		if(tmpStr == "Kommentar") {
+			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);
+											}
+
+	textarea = document.getElementById("comment-edit-text-" +id);
+	if (document.selection) {
+		textarea.focus();
+		selected = document.selection.createRange();
+		selected.text = "["+BBcode+"]" + selected.text + "[/"+BBcode+"]";
+	} else if (textarea.selectionStart || textarea.selectionStart == "0") {
+		var start = textarea.selectionStart;
+		var end = textarea.selectionEnd;
+		textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
+	}
+	return true;
+}
+</script> ';
\ No newline at end of file
diff --git a/view/theme/diabook-blue/comment_item.tpl b/view/theme/diabook-blue/comment_item.tpl
new file mode 100644
index 0000000000..4668b9ce39
--- /dev/null
+++ b/view/theme/diabook-blue/comment_item.tpl
@@ -0,0 +1,39 @@
+		<div class="comment-wwedit-wrapper" id="comment-edit-wrapper-$id" style="display: block;">
+			<form class="comment-edit-form" id="comment-edit-form-$id" action="item" method="post" onsubmit="post_comment($id); return false;">
+				<input type="hidden" name="type" value="$type" />
+				<input type="hidden" name="profile_uid" value="$profile_uid" />
+				<input type="hidden" name="parent" value="$parent" />
+				<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>
+				<textarea id="comment-edit-text-$id" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,$id);" onBlur="commentClose(this,$id);" >$comment</textarea>
+				<a class="icon bb-video" onclick="insertFormatting('video',$id);">video</a>													
+				<a class="icon bb-image" onclick="insertFormatting('img',$id);">img</a>										
+				<a class="icon italic" onclick="insertFormatting('i',$id);">i</a>
+				<a class="icon underline" onclick="insertFormatting('u',$id);">u</a>
+				<a class="icon bold" onclick="insertFormatting('b',$id);">b</a>
+				{{ if $qcomment }}
+					<select id="qcomment-select-$id" name="qcomment-$id" class="qcomment" onchange="qCommentInsert(this,$id);" >
+					<option value=""></option>
+				{{ for $qcomment as $qc }}
+					<option value="$qc">$qc</option>				
+				{{ endfor }}
+					</select>
+				{{ endif }}
+
+				<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" />
+					<span onclick="preview_comment($id);" id="comment-edit-preview-link-$id" class="fakelink">$preview</span>
+					<div id="comment-edit-preview-$id" class="comment-edit-preview" style="display:none;"></div>
+				</div>
+
+				<div class="comment-edit-end"></div>
+			</form>
+
+		</div>
diff --git a/view/theme/diabook-blue/icons/bb-image.png b/view/theme/diabook-blue/icons/bb-image.png
new file mode 100644
index 0000000000..9a1b32113e
Binary files /dev/null and b/view/theme/diabook-blue/icons/bb-image.png differ
diff --git a/view/theme/diabook-blue/icons/bb-video.png b/view/theme/diabook-blue/icons/bb-video.png
new file mode 100644
index 0000000000..bd323531ec
Binary files /dev/null and b/view/theme/diabook-blue/icons/bb-video.png differ
diff --git a/view/theme/diabook-blue/icons/bold.png b/view/theme/diabook-blue/icons/bold.png
new file mode 100644
index 0000000000..8fab2a10f8
Binary files /dev/null and b/view/theme/diabook-blue/icons/bold.png differ
diff --git a/view/theme/diabook-blue/icons/italic.png b/view/theme/diabook-blue/icons/italic.png
new file mode 100644
index 0000000000..bf4b2b81d8
Binary files /dev/null and b/view/theme/diabook-blue/icons/italic.png differ
diff --git a/view/theme/diabook-blue/icons/underline.png b/view/theme/diabook-blue/icons/underline.png
new file mode 100644
index 0000000000..b1b4d35741
Binary files /dev/null and b/view/theme/diabook-blue/icons/underline.png differ
diff --git a/view/theme/diabook-blue/style-network.css b/view/theme/diabook-blue/style-network.css
index 9baa83e8ad..b37d829687 100644
--- a/view/theme/diabook-blue/style-network.css
+++ b/view/theme/diabook-blue/style-network.css
@@ -1260,6 +1260,7 @@ transition: all 0.2s ease-in-out;
   padding: 5px;
   margin-bottom: 0px;
   width: 575px;
+  padding-top: 10px;
 }
 .tread-wrapper a{
   color: #1872A2;
@@ -1409,7 +1410,7 @@ transition: all 0.2s ease-in-out;
 }
 
 .wall-item-comment-wrapper {
-  margin: 1px 0px 0px 80px;
+  margin: 1px 5px 17px 80px;
   background-color: #fff;
   width: 500px;
 }
diff --git a/view/theme/diabook-blue/style-profile.css b/view/theme/diabook-blue/style-profile.css
index 1a0674771b..ae7fa8d148 100644
--- a/view/theme/diabook-blue/style-profile.css
+++ b/view/theme/diabook-blue/style-profile.css
@@ -1258,6 +1258,7 @@ transition: all 0.2s ease-in-out;
   padding: 5px;
   margin-bottom: 0px;
   width: 575px;
+  padding-top: 10px;
 }
 .tread-wrapper a{
   color: #1872A2;
@@ -1406,7 +1407,7 @@ transition: all 0.2s ease-in-out;
   padding-left: 12px;
 }
 .wall-item-comment-wrapper {
-  margin: 1px 5px 1px 80px;
+  margin: 1px 5px 17px 80px;
 }
 .wall-item-comment-wrapper .comment-edit-photo {
   display: none;
diff --git a/view/theme/diabook-blue/style.css b/view/theme/diabook-blue/style.css
index a0202856c1..2f2369c46a 100644
--- a/view/theme/diabook-blue/style.css
+++ b/view/theme/diabook-blue/style.css
@@ -82,7 +82,27 @@
 #adminpage table tr:hover { background-color: #eeeeee; }
 #adminpage .selectall { text-align: right; }
 /* icons */
-
+.icon.bold{
+  background-image: url("../../../view/theme/diabook-blue/icons/bold.png");
+  float: right;
+  margin-top: 2px;}
+.icon.underline{
+  background-image: url("../../../view/theme/diabook-blue/icons/underline.png");
+  float: right;
+  margin-top: 2px;}
+.icon.italic{
+  background-image: url("../../../view/theme/diabook-blue/icons/italic.png");
+  float: right;
+  margin-top: 2px;}
+.icon.bb-image{
+  background-image: url("../../../view/theme/diabook-blue/icons/bb-image.png");
+  float: right;
+  margin-top: 2px;}
+.icon.bb-video{
+  background-image: url("../../../view/theme/diabook-blue/icons/bb-video.png");
+  float: right;
+  margin-top: 2px;}
+  
 .icon.contacts {
   background-image: url("../../../view/theme/diabook-blue/icons/contacts.png");}
 .icon.notifications {
@@ -1287,6 +1307,7 @@ body .pageheader{
   padding: 5px;
   margin-bottom: 0px;
   width: 775px;
+  padding-top: 10px;
 }
 .tread-wrapper a{
   color: #1872A2;
@@ -1550,7 +1571,7 @@ body .pageheader{
   padding-left: 12px;
 }
 .wall-item-comment-wrapper {
-  margin: 1px 5px 1px 80px;
+  margin: 1px 5px 17px 80px;
 }
 .wall-item-comment-wrapper .comment-edit-photo {
   display: none;
diff --git a/view/theme/diabook-blue/theme.php b/view/theme/diabook-blue/theme.php
index 190533d176..f63f15fd97 100755
--- a/view/theme/diabook-blue/theme.php
+++ b/view/theme/diabook-blue/theme.php
@@ -3,13 +3,13 @@
 /*
  * Name: Diabook-blue
  * Description: Diabook-blue: report bugs and request here: http://pad.toktan.org/p/diabook or contact me : thomas_bierey@friendica.eu
- * Version: (Version: 1.015)
+ * Version: (Version: 1.016)
  * Author: 
  */
 
 
 //print diabook-version for debugging
-$diabook_version = "Diabook-blue (Version: 1.015)";
+$diabook_version = "Diabook-blue (Version: 1.016)";
 $a->page['htmlhead'] .= sprintf('<script "%s" ></script>', $diabook_version);
 
 //change css on network and profilepages
@@ -509,3 +509,30 @@ function restore_boxes(){
 	alert("Right-hand column was restored. Please refresh your browser");
   }
 </script>';}
+
+$a->page['htmlhead'] .= ' 
+
+<script type="text/javascript">
+function insertFormatting(BBcode,id) {
+	
+		var tmpStr = $("#comment-edit-text-" + id).val();
+		if(tmpStr == "Kommentar") {
+			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);
+											}
+
+	textarea = document.getElementById("comment-edit-text-" +id);
+	if (document.selection) {
+		textarea.focus();
+		selected = document.selection.createRange();
+		selected.text = "["+BBcode+"]" + selected.text + "[/"+BBcode+"]";
+	} else if (textarea.selectionStart || textarea.selectionStart == "0") {
+		var start = textarea.selectionStart;
+		var end = textarea.selectionEnd;
+		textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
+	}
+	return true;
+}
+</script> ';
diff --git a/view/theme/diabook-red/comment_item.tpl b/view/theme/diabook-red/comment_item.tpl
new file mode 100644
index 0000000000..4668b9ce39
--- /dev/null
+++ b/view/theme/diabook-red/comment_item.tpl
@@ -0,0 +1,39 @@
+		<div class="comment-wwedit-wrapper" id="comment-edit-wrapper-$id" style="display: block;">
+			<form class="comment-edit-form" id="comment-edit-form-$id" action="item" method="post" onsubmit="post_comment($id); return false;">
+				<input type="hidden" name="type" value="$type" />
+				<input type="hidden" name="profile_uid" value="$profile_uid" />
+				<input type="hidden" name="parent" value="$parent" />
+				<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>
+				<textarea id="comment-edit-text-$id" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,$id);" onBlur="commentClose(this,$id);" >$comment</textarea>
+				<a class="icon bb-video" onclick="insertFormatting('video',$id);">video</a>													
+				<a class="icon bb-image" onclick="insertFormatting('img',$id);">img</a>										
+				<a class="icon italic" onclick="insertFormatting('i',$id);">i</a>
+				<a class="icon underline" onclick="insertFormatting('u',$id);">u</a>
+				<a class="icon bold" onclick="insertFormatting('b',$id);">b</a>
+				{{ if $qcomment }}
+					<select id="qcomment-select-$id" name="qcomment-$id" class="qcomment" onchange="qCommentInsert(this,$id);" >
+					<option value=""></option>
+				{{ for $qcomment as $qc }}
+					<option value="$qc">$qc</option>				
+				{{ endfor }}
+					</select>
+				{{ endif }}
+
+				<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" />
+					<span onclick="preview_comment($id);" id="comment-edit-preview-link-$id" class="fakelink">$preview</span>
+					<div id="comment-edit-preview-$id" class="comment-edit-preview" style="display:none;"></div>
+				</div>
+
+				<div class="comment-edit-end"></div>
+			</form>
+
+		</div>
diff --git a/view/theme/diabook-red/icons/bb-image.png b/view/theme/diabook-red/icons/bb-image.png
new file mode 100644
index 0000000000..9a1b32113e
Binary files /dev/null and b/view/theme/diabook-red/icons/bb-image.png differ
diff --git a/view/theme/diabook-red/icons/bb-video.png b/view/theme/diabook-red/icons/bb-video.png
new file mode 100644
index 0000000000..bd323531ec
Binary files /dev/null and b/view/theme/diabook-red/icons/bb-video.png differ
diff --git a/view/theme/diabook-red/icons/bold.png b/view/theme/diabook-red/icons/bold.png
new file mode 100644
index 0000000000..8fab2a10f8
Binary files /dev/null and b/view/theme/diabook-red/icons/bold.png differ
diff --git a/view/theme/diabook-red/icons/italic.png b/view/theme/diabook-red/icons/italic.png
new file mode 100644
index 0000000000..bf4b2b81d8
Binary files /dev/null and b/view/theme/diabook-red/icons/italic.png differ
diff --git a/view/theme/diabook-red/icons/underline.png b/view/theme/diabook-red/icons/underline.png
new file mode 100644
index 0000000000..b1b4d35741
Binary files /dev/null and b/view/theme/diabook-red/icons/underline.png differ
diff --git a/view/theme/diabook-red/style-network.css b/view/theme/diabook-red/style-network.css
index 8d5e3fec98..8be39e3740 100644
--- a/view/theme/diabook-red/style-network.css
+++ b/view/theme/diabook-red/style-network.css
@@ -1295,6 +1295,7 @@ transition: all 0.2s ease-in-out;
   padding: 5px;
   margin-bottom: 0px;
   width: 575px;
+  padding-top: 10px;
 }
 .tread-wrapper a{
   color: red;
@@ -1444,7 +1445,7 @@ transition: all 0.2s ease-in-out;
 }
 
 .wall-item-comment-wrapper {
-  margin: 1px 0px 0px 80px;
+  margin: 1px 5px 17px 80px;
   background-color: #fff;
   width: 500px;
 }
diff --git a/view/theme/diabook-red/style-profile.css b/view/theme/diabook-red/style-profile.css
index 570057b47a..242c08c680 100644
--- a/view/theme/diabook-red/style-profile.css
+++ b/view/theme/diabook-red/style-profile.css
@@ -1271,6 +1271,7 @@ transition: all 0.2s ease-in-out;
   padding: 5px;
   margin-bottom: 0px;
   width: 575px;
+  padding-top: 10px;
 }
 .tread-wrapper a{
   color: red;
@@ -1419,7 +1420,7 @@ transition: all 0.2s ease-in-out;
   padding-left: 12px;
 }
 .wall-item-comment-wrapper {
-  margin: 1px 5px 1px 80px;
+  margin: 1px 5px 17px 80px;
 }
 .wall-item-comment-wrapper .comment-edit-photo {
   display: none;
diff --git a/view/theme/diabook-red/style.css b/view/theme/diabook-red/style.css
index 883f113740..0cf034a562 100644
--- a/view/theme/diabook-red/style.css
+++ b/view/theme/diabook-red/style.css
@@ -82,7 +82,27 @@
 #adminpage table tr:hover { background-color: #eeeeee; }
 #adminpage .selectall { text-align: right; }
 /* icons */
-
+.icon.bold{
+  background-image: url("../../../view/theme/diabook-red/icons/bold.png");
+  float: right;
+  margin-top: 2px;}
+.icon.underline{
+  background-image: url("../../../view/theme/diabook-red/icons/underline.png");
+  float: right;
+  margin-top: 2px;}
+.icon.italic{
+  background-image: url("../../../view/theme/diabook-red/icons/italic.png");
+  float: right;
+  margin-top: 2px;}
+.icon.bb-image{
+  background-image: url("../../../view/theme/diabook-red/icons/bb-image.png");
+  float: right;
+  margin-top: 2px;}
+.icon.bb-video{
+  background-image: url("../../../view/theme/diabook-red/icons/bb-video.png");
+  float: right;
+  margin-top: 2px;}
+  
 .icon.contacts {
   background-image: url("../../../view/theme/diabook-red/icons/contacts.png");}
 .icon.notifications {
@@ -1317,6 +1337,7 @@ body .pageheader{
   padding: 5px;
   margin-bottom: 0px;
   width: 775px;
+  padding-top: 10px;
 }
 .tread-wrapper a{
   color: red;
@@ -1579,7 +1600,7 @@ body .pageheader{
   padding-left: 12px;
 }
 .wall-item-comment-wrapper {
-  margin: 1px 5px 1px 80px;
+  margin: 1px 5px 17px 80px;
 }
 .wall-item-comment-wrapper .comment-edit-photo {
   display: none;
diff --git a/view/theme/diabook-red/theme.php b/view/theme/diabook-red/theme.php
index 85206baec9..aec3ab95da 100755
--- a/view/theme/diabook-red/theme.php
+++ b/view/theme/diabook-red/theme.php
@@ -3,13 +3,13 @@
 /*
  * Name: Diabook-red
  * Description: Diabook-red: report bugs and request here: http://pad.toktan.org/p/diabook or contact me : thomas_bierey@friendica.eu
- * Version: (Version: 1.015)
+ * Version: (Version: 1.016)
  * Author: 
  */
 
 
 //print diabook-version for debugging
-$diabook_version = "Diabook-red (Version: 1.015)";
+$diabook_version = "Diabook-red (Version: 1.016)";
 $a->page['htmlhead'] .= sprintf('<script "%s" ></script>', $diabook_version);
 
 //change css on network and profilepages
@@ -509,4 +509,31 @@ function restore_boxes(){
 	$.cookie("close_lastlikes","2", { expires: 365, path: "/" });
 	alert("Right-hand column was restored. Please refresh your browser");
   }
-</script>';}
\ No newline at end of file
+</script>';}
+
+$a->page['htmlhead'] .= ' 
+
+<script type="text/javascript">
+function insertFormatting(BBcode,id) {
+	
+		var tmpStr = $("#comment-edit-text-" + id).val();
+		if(tmpStr == "Kommentar") {
+			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);
+											}
+				
+	textarea = document.getElementById("comment-edit-text-" +id);
+	if (document.selection) {
+		textarea.focus();
+		selected = document.selection.createRange();
+		selected.text = "["+BBcode+"]" + selected.text + "[/"+BBcode+"]";
+	} else if (textarea.selectionStart || textarea.selectionStart == "0") {
+		var start = textarea.selectionStart;
+		var end = textarea.selectionEnd;
+		textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
+	}
+	return true;
+}
+</script> ';
\ No newline at end of file
diff --git a/view/theme/diabook/comment_item.tpl b/view/theme/diabook/comment_item.tpl
new file mode 100644
index 0000000000..4668b9ce39
--- /dev/null
+++ b/view/theme/diabook/comment_item.tpl
@@ -0,0 +1,39 @@
+		<div class="comment-wwedit-wrapper" id="comment-edit-wrapper-$id" style="display: block;">
+			<form class="comment-edit-form" id="comment-edit-form-$id" action="item" method="post" onsubmit="post_comment($id); return false;">
+				<input type="hidden" name="type" value="$type" />
+				<input type="hidden" name="profile_uid" value="$profile_uid" />
+				<input type="hidden" name="parent" value="$parent" />
+				<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>
+				<textarea id="comment-edit-text-$id" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,$id);" onBlur="commentClose(this,$id);" >$comment</textarea>
+				<a class="icon bb-video" onclick="insertFormatting('video',$id);">video</a>													
+				<a class="icon bb-image" onclick="insertFormatting('img',$id);">img</a>										
+				<a class="icon italic" onclick="insertFormatting('i',$id);">i</a>
+				<a class="icon underline" onclick="insertFormatting('u',$id);">u</a>
+				<a class="icon bold" onclick="insertFormatting('b',$id);">b</a>
+				{{ if $qcomment }}
+					<select id="qcomment-select-$id" name="qcomment-$id" class="qcomment" onchange="qCommentInsert(this,$id);" >
+					<option value=""></option>
+				{{ for $qcomment as $qc }}
+					<option value="$qc">$qc</option>				
+				{{ endfor }}
+					</select>
+				{{ endif }}
+
+				<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" />
+					<span onclick="preview_comment($id);" id="comment-edit-preview-link-$id" class="fakelink">$preview</span>
+					<div id="comment-edit-preview-$id" class="comment-edit-preview" style="display:none;"></div>
+				</div>
+
+				<div class="comment-edit-end"></div>
+			</form>
+
+		</div>
diff --git a/view/theme/diabook/icons/bb-image.png b/view/theme/diabook/icons/bb-image.png
new file mode 100644
index 0000000000..9a1b32113e
Binary files /dev/null and b/view/theme/diabook/icons/bb-image.png differ
diff --git a/view/theme/diabook/icons/bb-video.png b/view/theme/diabook/icons/bb-video.png
new file mode 100644
index 0000000000..bd323531ec
Binary files /dev/null and b/view/theme/diabook/icons/bb-video.png differ
diff --git a/view/theme/diabook/icons/bold.png b/view/theme/diabook/icons/bold.png
new file mode 100644
index 0000000000..8fab2a10f8
Binary files /dev/null and b/view/theme/diabook/icons/bold.png differ
diff --git a/view/theme/diabook/icons/italic.png b/view/theme/diabook/icons/italic.png
new file mode 100644
index 0000000000..bf4b2b81d8
Binary files /dev/null and b/view/theme/diabook/icons/italic.png differ
diff --git a/view/theme/diabook/icons/underline.png b/view/theme/diabook/icons/underline.png
new file mode 100644
index 0000000000..b1b4d35741
Binary files /dev/null and b/view/theme/diabook/icons/underline.png differ
diff --git a/view/theme/diabook/style-network.css b/view/theme/diabook/style-network.css
index 9e57c17d2c..ed7c76cbe9 100644
--- a/view/theme/diabook/style-network.css
+++ b/view/theme/diabook/style-network.css
@@ -1241,6 +1241,7 @@ transition: all 0.2s ease-in-out;
   padding: 5px;
   margin-bottom: 0px;
   width: 575px;
+  padding-top: 10px;
 }
 .wall-item-decor {
   position: absolute;
@@ -1385,7 +1386,7 @@ transition: all 0.2s ease-in-out;
   padding-left: 12px;
 }
 .wall-item-comment-wrapper {
-  margin: 1px 5px 1px 80px;
+  margin: 1px 5px 17px 80px;
 }
 .wall-item-comment-wrapper .comment-edit-photo {
   display: none;
diff --git a/view/theme/diabook/style-profile.css b/view/theme/diabook/style-profile.css
index 95e9061bab..51eb612533 100644
--- a/view/theme/diabook/style-profile.css
+++ b/view/theme/diabook/style-profile.css
@@ -1235,6 +1235,7 @@ transition: all 0.2s ease-in-out;
   padding: 5px;
   margin-bottom: 0px;
   width: 575px;
+  padding-top: 10px;
 }
 .wall-item-decor {
   position: absolute;
@@ -1379,7 +1380,7 @@ transition: all 0.2s ease-in-out;
   padding-left: 12px;
 }
 .wall-item-comment-wrapper {
-  margin: 1px 5px 1px 80px;
+  margin: 1px 5px 17px 80px;
 }
 .wall-item-comment-wrapper .comment-edit-photo {
   display: none;
diff --git a/view/theme/diabook/style.css b/view/theme/diabook/style.css
index d11e3191ab..229076484f 100644
--- a/view/theme/diabook/style.css
+++ b/view/theme/diabook/style.css
@@ -83,6 +83,27 @@
 #adminpage .selectall { text-align: right; }
 /* icons */
 
+.icon.bold{
+  background-image: url("../../../view/theme/diabook/icons/bold.png");
+  float: right;
+  margin-top: 2px;}
+.icon.underline{
+  background-image: url("../../../view/theme/diabook/icons/underline.png");
+  float: right;
+  margin-top: 2px;}
+.icon.italic{
+  background-image: url("../../../view/theme/diabook/icons/italic.png");
+  float: right;
+  margin-top: 2px;}
+.icon.bb-image{
+  background-image: url("../../../view/theme/diabook/icons/bb-image.png");
+  float: right;
+  margin-top: 2px;}
+.icon.bb-video{
+  background-image: url("../../../view/theme/diabook/icons/bb-video.png");
+  float: right;
+  margin-top: 2px;}
+  
 .icon.contacts {
   background-image: url("../../../view/theme/diabook/icons/contacts.png");}
 .icon.notifications {
@@ -1269,6 +1290,7 @@ body .pageheader{
   padding: 5px;
   margin-bottom: 0px;
   width: 775px;
+  padding-top: 10px;
 }
 
 .wall-item-decor {
@@ -1516,7 +1538,7 @@ body .pageheader{
   padding-left: 12px;
 }
 .wall-item-comment-wrapper {
-  margin: 1px 5px 1px 80px;
+  margin: 1px 5px 17px 80px;
 }
 .wall-item-comment-wrapper .comment-edit-photo {
   display: none;
diff --git a/view/theme/diabook/theme.php b/view/theme/diabook/theme.php
index 924639625e..bf31c08ebb 100755
--- a/view/theme/diabook/theme.php
+++ b/view/theme/diabook/theme.php
@@ -3,13 +3,13 @@
 /*
  * Name: Diabook
  * Description: Diabook: report bugs and request here: http://pad.toktan.org/p/diabook or contact me : thomas_bierey@friendica.eu
- * Version: (Version: 1.015)
+ * Version: (Version: 1.016)
  * Author: 
  */
 
 
 //print diabook-version for debugging
-$diabook_version = "Diabook (Version: 1.015)";
+$diabook_version = "Diabook (Version: 1.016)";
 $a->page['htmlhead'] .= sprintf('<script "%s" ></script>', $diabook_version);
 
 //change css on network and profilepages
@@ -519,4 +519,31 @@ function restore_boxes(){
 	$.cookie("close_lastlikes","2", { expires: 365, path: "/" });
 	alert("Right-hand column was restored. Please refresh your browser");
   }
-</script>';}
\ No newline at end of file
+</script>';}
+
+$a->page['htmlhead'] .= ' 
+
+<script type="text/javascript">
+function insertFormatting(BBcode,id) {
+	
+		var tmpStr = $("#comment-edit-text-" + id).val();
+		if(tmpStr == "Kommentar") {
+			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);
+											}
+
+	textarea = document.getElementById("comment-edit-text-" +id);
+	if (document.selection) {
+		textarea.focus();
+		selected = document.selection.createRange();
+		selected.text = "["+BBcode+"]" + selected.text + "[/"+BBcode+"]";
+	} else if (textarea.selectionStart || textarea.selectionStart == "0") {
+		var start = textarea.selectionStart;
+		var end = textarea.selectionEnd;
+		textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
+	}
+	return true;
+}
+</script> ';
\ No newline at end of file