bitPickups/friendica_2019-12_sharedHosting_hotFix
1
1
Fork 0
Code Pull requests Activity

quattro: added editor buttons to comments

Browse source
This commit is contained in:
Tobias Diekershoff 2012-06-04 11:49:16 +02:00
parent ca105f1c66
commit b13c6ea9ad
5 changed files with 380 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
view/theme/quattro/comment_item.tpl
View file

@ -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;" >

102
view/theme/quattro/dark/style.css
View file

@ -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;
}

102
view/theme/quattro/green/style.css
View file

@ -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;
}

58
view/theme/quattro/quattro.less
View file

@ -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; }

87
view/theme/quattro/theme.php
View file

@ -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;
}