quattro: added editor buttons to comments

5 files changed, 380 insertions, 6 deletions

diff --git a/view/theme/quattro/comment_item.tpl b/view/theme/quattro/comment_item.tpl
index cde4ca3ca..ea24d95cc 100644
--- a/view/theme/quattro/comment_item.tpl
+++ b/view/theme/quattro/comment_item.tpl
@@ -11,13 +11,42 @@
 					<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><a class="editicon boldbb shadow"
+						style="cursor: pointer;" title="$edbold"
+						onclick="insertFormatting('$comment','b', $id);"></a></li>
+					<li><a class="editicon italicbb shadow"
+						style="cursor: pointer;" title="$editalic"
+						onclick="insertFormatting('$comment','i', $id);"></a></li>
+					<li><a class="editicon underlinebb shadow"
+						style="cursor: pointer;" title="$eduline"
+						onclick="insertFormatting('$comment','u', $id);"></a></li>
+					<li><a class="editicon quotebb shadow"
+						style="cursor: pointer;" title="$edquote"
+						onclick="insertFormatting('$comment','quote', $id);"></a></li>
+					<li><a class="editicon codebb shadow"
+						style="cursor: pointer;" title="$edcode"
+						onclick="insertFormatting('$comment','code', $id);"></a></li>
+					<li><a class="editicon imagebb shadow"
+						style="cursor: pointer;" title="$edimg"
+						onclick="insertFormatting('$comment','img', $id);"></a></li>
+					<li><a class="editicon urlbb shadow"
+						style="cursor: pointer;" title="$edurl"
+						onclick="insertFormatting('$comment','url', $id);"></a></li>
+					<li><a class="editicon videobb shadow"
+						style="cursor: pointer;" title="$edvideo"
+						onclick="insertFormatting('$comment','video', $id);"></a></li>
+				</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($id);" onBlur="commentClose(this,$id);" >$comment</textarea>			
 				{{ if $qcomment }}
-				{{ for $qcomment as $qc }}				
-					<span class="fakelink qcomment" onclick="commentInsert(this,$id); return false;" >$qc</span>
-					&nbsp;
+					<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 }}
-				<textarea id="comment-edit-text-$id" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,$id);" onBlur="commentClose(this,$id);" >$comment</textarea>
 
 				<div class="comment-edit-text-end"></div>
 				<div class="comment-edit-submit-wrapper" id="comment-edit-submit-wrapper-$id" style="display: none;" >
diff --git a/view/theme/quattro/dark/style.css b/view/theme/quattro/dark/style.css
index 14b7c75b3..803a2c2f7 100644
--- a/view/theme/quattro/dark/style.css
+++ b/view/theme/quattro/dark/style.css
@@ -1734,3 +1734,105 @@ footer {
 #adminpage .selectall {
   text-align: right;
 }
+/* edit buttons for comments */
+.icon.dim {
+  opacity: 0.3;
+  filter: alpha(opacity=30);
+}
+[class^="comment-edit-bb"] {
+  list-style: none;
+  display: none;
+  margin: 0px 0 0px 60px;
+  width: 75%;
+}
+[class^="comment-edit-bb"] > li {
+  display: inline-block;
+  margin: 10px 10px 0 0;
+  visibility: none;
+}
+[class^="comment-edit-bb-end"] {
+  clear: both;
+}
+.editicon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-image: url(bbedit.png);
+  text-decoration: none;
+}
+.editicon :hover {
+  background-color: #ccc;
+}
+.boldbb {
+  background-position: 0px 0px;
+}
+.boldbb:hover {
+  background-position: 0px -16px;
+}
+.italicbb {
+  background-position: -16px 0px;
+}
+.italicbb:hover {
+  background-position: -16px -16px;
+}
+.underlinebb {
+  background-position: -32px 0px;
+}
+.underlinebb:hover {
+  background-position: -32px -16px;
+}
+.quotebb {
+  background-position: -48px 0px;
+}
+.quotebb:hover {
+  background-position: -48px -16px;
+}
+.codebb {
+  background-position: -64px 0px;
+}
+.codebb:hover {
+  background-position: -64px -16px;
+}
+.imagebb {
+  background-position: -80px 0px;
+}
+.imagebb:hover {
+  background-position: -80px -16px;
+}
+.urlbb {
+  background-position: -96px 0px;
+}
+.urlbb:hover {
+  background-position: -96px -16px;
+}
+.videobb {
+  background-position: -112px 0px;
+}
+.videobb:hover {
+  background-position: -112px -16px;
+}
+.attachtype {
+  display: block;
+  width: 20px;
+  height: 23px;
+  float: left;
+  background-image: url('../../../images/content-types.png');
+}
+.body-attach {
+  margin-top: 10px;
+}
+.type-video {
+  background-position: 0px 0px;
+}
+.type-image {
+  background-position: -20px 0px;
+}
+.type-audio {
+  background-position: -40px 0px;
+}
+.type-text {
+  background-position: -60px 0px;
+}
+.type-unkn {
+  background-position: -80px 0px;
+}
diff --git a/view/theme/quattro/green/style.css b/view/theme/quattro/green/style.css
index f33c45eae..ecf4ff986 100644
--- a/view/theme/quattro/green/style.css
+++ b/view/theme/quattro/green/style.css
@@ -1734,3 +1734,105 @@ footer {
 #adminpage .selectall {
   text-align: right;
 }
+/* edit buttons for comments */
+.icon.dim {
+  opacity: 0.3;
+  filter: alpha(opacity=30);
+}
+[class^="comment-edit-bb"] {
+  list-style: none;
+  display: none;
+  margin: 0px 0 0px 60px;
+  width: 75%;
+}
+[class^="comment-edit-bb"] > li {
+  display: inline-block;
+  margin: 10px 10px 0 0;
+  visibility: none;
+}
+[class^="comment-edit-bb-end"] {
+  clear: both;
+}
+.editicon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-image: url(bbedit.png);
+  text-decoration: none;
+}
+.editicon :hover {
+  background-color: #ccc;
+}
+.boldbb {
+  background-position: 0px 0px;
+}
+.boldbb:hover {
+  background-position: 0px -16px;
+}
+.italicbb {
+  background-position: -16px 0px;
+}
+.italicbb:hover {
+  background-position: -16px -16px;
+}
+.underlinebb {
+  background-position: -32px 0px;
+}
+.underlinebb:hover {
+  background-position: -32px -16px;
+}
+.quotebb {
+  background-position: -48px 0px;
+}
+.quotebb:hover {
+  background-position: -48px -16px;
+}
+.codebb {
+  background-position: -64px 0px;
+}
+.codebb:hover {
+  background-position: -64px -16px;
+}
+.imagebb {
+  background-position: -80px 0px;
+}
+.imagebb:hover {
+  background-position: -80px -16px;
+}
+.urlbb {
+  background-position: -96px 0px;
+}
+.urlbb:hover {
+  background-position: -96px -16px;
+}
+.videobb {
+  background-position: -112px 0px;
+}
+.videobb:hover {
+  background-position: -112px -16px;
+}
+.attachtype {
+  display: block;
+  width: 20px;
+  height: 23px;
+  float: left;
+  background-image: url('../../../images/content-types.png');
+}
+.body-attach {
+  margin-top: 10px;
+}
+.type-video {
+  background-position: 0px 0px;
+}
+.type-image {
+  background-position: -20px 0px;
+}
+.type-audio {
+  background-position: -40px 0px;
+}
+.type-text {
+  background-position: -60px 0px;
+}
+.type-unkn {
+  background-position: -80px 0px;
+}
diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
index 4d57719d9..9099f0be1 100644
--- a/view/theme/quattro/quattro.less
+++ b/view/theme/quattro/quattro.less
@@ -1225,3 +1225,61 @@ footer { height: 100px; display: table-row; }
     }
     .selectall { text-align: right; }
 }
+
+/* edit buttons for comments */
+
+.icon.dim { opacity: 0.3;filter:alpha(opacity=30); }
+[class^="comment-edit-bb"] {
+	list-style: none;
+	display: none;
+	margin: 0px 0 0px 60px;
+	width: 75%;
+}
+[class^="comment-edit-bb"] > li {
+	display: inline-block;
+	margin: 10px 10px 0 0;
+	visibility: none;
+}
+[class^="comment-edit-bb-end"] {
+	clear: both;
+}
+.editicon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url(bbedit.png);
+    text-decoration: none;
+    :hover {background-color: #ccc;}
+}
+.boldbb { background-position: 0px 0px; }
+.boldbb:hover { background-position: 0px -16px; }
+.italicbb { background-position: -16px 0px; }
+.italicbb:hover { background-position: -16px -16px; }
+.underlinebb { background-position: -32px 0px; }
+.underlinebb:hover { background-position: -32px -16px; }
+.quotebb { background-position: -48px 0px; }
+.quotebb:hover { background-position: -48px -16px; }
+.codebb { background-position: -64px 0px; }
+.codebb:hover { background-position: -64px -16px; }
+.imagebb { background-position: -80px 0px; }
+.imagebb:hover { background-position: -80px -16px; }
+.urlbb { background-position: -96px 0px; }
+.urlbb:hover { background-position: -96px -16px; }
+.videobb { background-position: -112px 0px; }
+.videobb:hover { background-position: -112px -16px; }
+
+.attachtype {
+	display: block; width: 20px; height: 23px;
+	float: left;
+	background-image: url('../../../images/content-types.png');
+}
+
+.body-attach {
+	margin-top: 10px;
+}
+
+.type-video { background-position: 0px 0px; }
+.type-image { background-position: -20px 0px; }
+.type-audio { background-position: -40px 0px; }
+.type-text  { background-position: -60px 0px; }
+.type-unkn  { background-position: -80px 0px; }
diff --git a/view/theme/quattro/theme.php b/view/theme/quattro/theme.php
index 0a13c2035..5cb373eef 100644
--- a/view/theme/quattro/theme.php
+++ b/view/theme/quattro/theme.php
@@ -7,6 +7,89 @@
  * Maintainer: Tobias <https://diekershoff.homeunix.net/friendika/profile/tobias>
  */
  
-	$a->theme_info = array();
- 
+$a->theme_info = array();
+
+function quattro_init(&$a) {
+$a->page['htmlhead'] .= <<< EOT
+<script>
+function insertFormatting(comment,BBcode,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);
+			$("#comment-edit-text-" + id).val(tmpStr);
+		}
+
+	textarea = document.getElementById("comment-edit-text-" +id);
+	if (document.selection) {
+		textarea.focus();
+		selected = document.selection.createRange();
+		if (BBcode == "url"){
+			selected.text = "["+BBcode+"]" + "http://" +  selected.text + "[/"+BBcode+"]";
+			} else			
+		selected.text = "["+BBcode+"]" + selected.text + "[/"+BBcode+"]";
+	} else if (textarea.selectionStart || textarea.selectionStart == "0") {
+		var start = textarea.selectionStart;
+		var end = textarea.selectionEnd;
+		if (BBcode == "url"){
+			textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + "http://" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
+			} else
+		textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
+	}
+	return true;
+}
+
+function cmtBbOpen(id) {
+	$(".comment-edit-bb-" + id).show();
+}
+function cmtBbClose(comment, id) {
+	$(".comment-edit-bb-" + id).hide();
+}
+$(document).ready(function() {
+
+$('html').click(function() { $("#nav-notifications-menu" ).hide(); });
+
+$('.group-edit-icon').hover(
+	function() {
+		$(this).addClass('icon'); $(this).removeClass('iconspacer');},
+	function() {
+		$(this).removeClass('icon'); $(this).addClass('iconspacer');}
+	);
+
+$('.sidebar-group-element').hover(
+	function() {
+		id = $(this).attr('id');
+		$('#edit-' + id).addClass('icon'); $('#edit-' + id).removeClass('iconspacer');},
+
+	function() {
+		id = $(this).attr('id');
+		$('#edit-' + id).removeClass('icon');$('#edit-' + id).addClass('iconspacer');}
+	);
+
+
+$('.savedsearchdrop').hover(
+	function() {
+		$(this).addClass('drop'); $(this).addClass('icon'); $(this).removeClass('iconspacer');},
+	function() {
+		$(this).removeClass('drop'); $(this).removeClass('icon'); $(this).addClass('iconspacer');}
+	);
+
+$('.savedsearchterm').hover(
+	function() {
+		id = $(this).attr('id');
+		$('#drop-' + id).addClass('icon'); 	$('#drop-' + id).addClass('drophide'); $('#drop-' + id).removeClass('iconspacer');},
+
+	function() {
+		id = $(this).attr('id');
+		$('#drop-' + id).removeClass('icon');$('#drop-' + id).removeClass('drophide'); $('#drop-' + id).addClass('iconspacer');}
+	);
+
+});
+
 
+</script>
+EOT;
+}