diff options
| -rw-r--r-- | view/theme/quattro/comment_item.tpl | 37 | ||||
| -rw-r--r-- | view/theme/quattro/dark/style.css | 102 | ||||
| -rw-r--r-- | view/theme/quattro/green/style.css | 102 | ||||
| -rw-r--r-- | view/theme/quattro/quattro.less | 58 | ||||
| -rw-r--r-- | view/theme/quattro/theme.php | 87 |
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> - + <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; +} |