quattro: added editor buttons to comments

diff --git a/view/theme/quattro/comment_item.tpl b/view/theme/quattro/comment_item.tpl
index cde4ca3ca8d497217bd6557f7676de4071894df9..ea24d95cc33e80e9060525582ca6e00989145747 100644 (file)
--- 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 14b7c75b3a7e8ce6474571a867bf1eca5d36f234..803a2c2f7bec03d34c86311c6bed0aa1d46fe8c8 100644 (file)
--- 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 f33c45eaec298c0c7237f7e6842a22a151b3f2d9..ecf4ff9860ea2130a08d38a601180553a470e13f 100644 (file)
--- 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 4d57719d9addf0988b9693a06606f2042b6199ed..9099f0be163f4553179e80b36e73e7136bf406cc 100644 (file)
--- 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 0a13c20351b6d40f6b0ed4b7bd33648278578063..5cb373eefe85f8609f305fc716c4b0d88a7a9198 100644 (file)
--- 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;
+}