friendica/friendica
6
0
Fork 1
mirror of https://github.com/friendica/friendica synced 2024-05-22 19:34:58 +02:00
Code Issues Packages Projects Releases 1 Wiki Activity

[frio] Thread display redesign

Browse source 
- Add fake form at end of comment list
- Shuffle comment box buttons around using flex display
- Convert divs into paragraphs
- Remove unused commentInsert() and qCommentInsert() function from textedit.js
This commit is contained in:
Hypolite Petovan 2019-02-14 22:28:38 -05:00
parent ae3bf47019
commit 2dd7a52b17
5 changed files with 178 additions and 197 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
view/theme/frio/css/style.css
View file

@ -1669,7 +1669,13 @@ aside .panel-body {
/* wall items */ /* wall items */
.wall-item-container { .wall-item-container {
position: relative; background-color: rgba(0, 0, 0, 0.03);
padding: 0.5em;
border-top: 1px solid rgba(255, 255, 255, 0.8);
}
.wall-item-container .media {
margin-top: 0;
} }
/* wall items contact photo */ /* wall items contact photo */
@ -1914,12 +1920,13 @@ code > .hl-main {
/* item social action buttons */ /* item social action buttons */
.wall-item-actions { .wall-item-actions {
margin-top: 15px; display: flex;
margin: .5em 0;
justify-content: space-between;
} }
.wall-item-actions, .wall-item-actions a, .wall-item-actions button { .wall-item-actions a, .wall-item-actions button {
font-size: 13px; font-size: 13px;
color: #555; color: #555;
margin-bottom: 0;
} }
.wall-item-actions .active { .wall-item-actions .active {
font-weight: bold; font-weight: bold;
@ -2013,9 +2020,10 @@ code > .hl-main {
position: relative!important; position: relative!important;
margin-top: 0; margin-top: 0;
} }
.hide-comments-outer-wrapper { .hide-comments-outer {
/* text-align: center; background-color: rgba(0, 0, 0, 0.03);
margin-top: -18px;*/ padding: 0.5em;
border-radius: 0.5em 0.5em 0 0;
} }
.hide-comments-total { .hide-comments-total {
cursor: pointer; cursor: pointer;
@ -2024,21 +2032,31 @@ code > .hl-main {
/* /*
* Comment Box * Comment Box
*/ */
.thread_level_2 .wall-item-comment-wrapper {
padding-right: 5px; .comment-fake-form,
.wall-item-comment-wrapper {
padding: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.8);
background-color: rgba(0, 0, 0, 0.03);
border-radius: 0 0 10px 10px;
} }
.comment-fake-form {
border-color: #d9d9d9;
}
.comment-container .wall-item-comment-wrapper {
margin-top: 0.5em;
}
.comment-edit-submit-wrapper { .comment-edit-submit-wrapper {
margin-bottom: 25px; display: flex;
justify-content: flex-end;
} }
.comment-edit-submit-wrapper a,
.comment-edit-submit-wrapper a:hover { .comment-icon-list {
padding-top: 5px !important; display: flex;
padding-bottom: 5px !important; justify-content: space-between;
}
.comment-icon-list > li > .icon,
.comment-icon-list > li > .icon:hover {
color: #555;
background-color: transparent;
} }
/* acpopup + textcompletion*/ /* acpopup + textcompletion*/

117
view/theme/frio/js/textedit.js
View file

@ -82,7 +82,8 @@ function insertFormatting(BBcode, id) {
if (tmpStr == '') { if (tmpStr == '') {
$("#comment-edit-text-" + id).addClass("comment-edit-text-full"); $("#comment-edit-text-" + id).addClass("comment-edit-text-full");
$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty"); $("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
openMenu("comment-edit-submit-wrapper-" + id); closeMenu("comment-fake-form-" + id);
openMenu("item-comments-" + id);
} }
textarea = document.getElementById("comment-edit-text-" + id); textarea = document.getElementById("comment-edit-text-" + id);
@ -134,115 +135,99 @@ function cmtBbClose(id) {
$("#comment-edit-bb-" + id).hide(); $("#comment-edit-bb-" + id).hide();
} }
function commentExpand(id) { function commentExpand(id)
$("#comment-edit-text-" + id).putCursorAtEnd(); {
$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
$("#comment-edit-text-" + id).focus();
$("#mod-cmnt-wrap-" + id).show(); $("#mod-cmnt-wrap-" + id).show();
openMenu("comment-edit-submit-wrapper-" + id); closeMenu("comment-fake-form-" + id);
openMenu("item-comments-" + id);
$("#comment-edit-text-" + id)
.putCursorAtEnd()
.addClass("comment-edit-text-full")
.removeClass("comment-edit-text-empty");
return true; return true;
} }
function commentClose(obj, id) { function commentClose(obj, id)
if (obj.value == '') { {
$("#comment-edit-text-" + id).removeClass("comment-edit-text-full"); if (obj.value === '' || obj.value === obj.dataset.default) {
$("#comment-edit-text-" + id).addClass("comment-edit-text-empty"); $("#comment-edit-text-" + id)
.removeClass("comment-edit-text-full")
.addClass("comment-edit-text-empty");
$("#mod-cmnt-wrap-" + id).hide(); $("#mod-cmnt-wrap-" + id).hide();
closeMenu("comment-edit-submit-wrapper-" + id); openMenu("comment-fake-form-" + id);
closeMenu("item-comments-" + id);
return true; return true;
} }
return false; return false;
} }
function showHideCommentBox(id) { function showHideCommentBox(id) {
if ($('#comment-edit-form-' + id).is(':visible')) { var $el = $('#comment-edit-form-' + id);
$('#comment-edit-form-' + id).hide(); if ($el.is(':visible')) {
$el.hide();
} else { } else {
$('#comment-edit-form-' + id).show(); $el.show();
} }
} }
function commentOpenUI(obj, id) { function commentOpenUI(obj, id) {
$("#comment-edit-text-" + id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty"); closeMenu("comment-fake-form-" + id);
// Choose an arbitrary tab index that's greater than what we're using in jot (3 of them) openMenu("item-comments-" + id);
// The submit button gets tabindex + 1 $("#comment-edit-text-" + id)
$("#comment-edit-text-" + id).attr('tabindex', '9'); .putCursorAtEnd()
$("#comment-edit-submit-" + id).attr('tabindex', '10'); .addClass("comment-edit-text-full").removeClass("comment-edit-text-empty")
$("#comment-edit-submit-wrapper-" + id).show(); .attr('tabindex', '9'); // Choose an arbitrary tab index that's greater than what we're using in jot (3 of them)
$("#comment-edit-submit-" + id).attr('tabindex', '10'); // The submit button gets tabindex + 1
// initialize autosize for this comment // initialize autosize for this comment
autosize($("#comment-edit-text-" + id + ".text-autosize")); autosize($("#comment-edit-text-" + id + ".text-autosize"));
} }
function commentCloseUI(obj, id) { function commentCloseUI(obj, id) {
if (obj.value === '') { if (obj.value === '' || obj.value === obj.dataset.default) {
$("#comment-edit-text-" + id).removeClass("comment-edit-text-full").addClass("comment-edit-text-empty"); $("#comment-edit-text-" + id)
$("#comment-edit-text-" + id).removeAttr('tabindex'); .removeClass("comment-edit-text-full").addClass("comment-edit-text-empty")
.removeAttr('tabindex');
$("#comment-edit-submit-" + id).removeAttr('tabindex'); $("#comment-edit-submit-" + id).removeAttr('tabindex');
$("#comment-edit-submit-wrapper-" + id).hide(); openMenu("comment-fake-form-" + id);
closeMenu("item-comments-" + id);
// destroy the automatic textarea resizing // destroy the automatic textarea resizing
autosize.destroy($("#comment-edit-text-" + id + ".text-autosize")); autosize.destroy($("#comment-edit-text-" + id + ".text-autosize"));
} }
} }
function jotTextOpenUI(obj) { function jotTextOpenUI(obj) {
if (obj.value == '') { if (obj.value === '' || obj.value === obj.dataset.default) {
$(".modal-body #profile-jot-text").addClass("profile-jot-text-full").removeClass("profile-jot-text-empty"); var $el = $(".modal-body #profile-jot-text");
$el.addClass("profile-jot-text-full").removeClass("profile-jot-text-empty");
// initiale autosize for the jot // initiale autosize for the jot
autosize($(".modal-body #profile-jot-text")); autosize($el);
} }
} }
function jotTextCloseUI(obj) { function jotTextCloseUI(obj) {
if (obj.value === '') { if (obj.value === '' || obj.value === obj.dataset.default) {
$(".modal-body #profile-jot-text").removeClass("profile-jot-text-full").addClass("profile-jot-text-empty"); var $el = $(".modal-body #profile-jot-text");
$el.removeClass("profile-jot-text-full").addClass("profile-jot-text-empty");
// destroy the automatic textarea resizing // destroy the automatic textarea resizing
autosize.destroy($(".modal-body #profile-jot-text")); autosize.destroy($el);
} }
} }
function commentOpen(obj, id) { function commentOpen(obj, id) {
if (obj.value == '') { if (obj.value === '' || obj.value === obj.dataset.default) {
$("#comment-edit-text-" + id).addClass("comment-edit-text-full"); $("#comment-edit-text-" + id)
$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty"); .putCursorAtEnd()
.addClass("comment-edit-text-full")
.removeClass("comment-edit-text-empty");
$("#mod-cmnt-wrap-" + id).show(); $("#mod-cmnt-wrap-" + id).show();
openMenu("comment-edit-submit-wrapper-" + id); closeMenu("comment-fake-form-" + id);
openMenu("item-comments-" + id);
return true; return true;
} }
return false; return false;
} }
function commentInsert(obj, id) {
var tmpStr = $("#comment-edit-text-" + id).val();
if (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);
}
var ins = $(obj).html();
ins = ins.replace('&lt;', '<');
ins = ins.replace('&gt;', '>');
ins = ins.replace('&amp;', '&');
ins = ins.replace('&quot;', '"');
$("#comment-edit-text-" + id).val(tmpStr + ins);
}
function qCommentInsert(obj, id) {
var tmpStr = $("#comment-edit-text-" + id).val();
if (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);
}
var ins = $(obj).val();
ins = ins.replace('&lt;', '<');
ins = ins.replace('&gt;', '>');
ins = ins.replace('&amp;', '&');
ins = ins.replace('&quot;', '"');
$("#comment-edit-text-" + id).val(tmpStr + ins);
$(obj).val('');
}
function confirmDelete() { function confirmDelete() {
return confirm(aStr.delitem); return confirm(aStr.delitem);
} }

100
view/theme/frio/templates/comment_item.tpl
View file

@ -1,10 +1,10 @@
{{if $threaded}} {{if $threaded}}
<div class="comment-wwedit-wrapper threaded" id="comment-edit-wrapper-{{$id}}" style="display: block;"> <div class="comment-wwedit-wrapper threaded" id="comment-edit-wrapper-{{$id}}">
{{else}} {{else}}
<div class="comment-wwedit-wrapper" id="comment-edit-wrapper-{{$id}}" style="display: block;"> <div class="comment-wwedit-wrapper" id="comment-edit-wrapper-{{$id}}">
{{/if}} {{/if}}
<form class="comment-edit-form" style="display: block;" data-item-id="{{$id}}" id="comment-edit-form-{{$id}}" action="item" method="post" onsubmit="post_comment({{$id}}); return false;"> <form class="comment-edit-form" data-item-id="{{$id}}" 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="type" value="{{$type}}" />
<input type="hidden" name="profile_uid" value="{{$profile_uid}}" /> <input type="hidden" name="profile_uid" value="{{$profile_uid}}" />
<input type="hidden" name="parent" value="{{$parent}}" /> <input type="hidden" name="parent" value="{{$parent}}" />
@ -13,64 +13,56 @@
<input type="hidden" name="preview" id="comment-preview-inp-{{$id}}" value="0" /> <input type="hidden" name="preview" id="comment-preview-inp-{{$id}}" value="0" />
<input type="hidden" name="post_id_random" value="{{$rand_num}}" /> <input type="hidden" name="post_id_random" value="{{$rand_num}}" />
<div class="bb form-group"> <p class="comment-edit-bb-{{$id}} comment-icon-list">
<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty form-control text-autosize" name="body" placeholder="{{$comment}}" onFocus="commentOpenUI(this,{{$id}});">{{$default}}</textarea> <span>
</div> <button type="button" class="btn btn-sm icon bb-img" style="cursor: pointer;" aria-label="{{$edimg}}" title="{{$edimg}}" data-role="insert-formatting" data-bbcode="img" data-id="{{$id}}">
{{if $qcomment}} <i class="fa fa-picture-o"></i>
</button>
<button type="button" class="btn btn-sm icon bb-attach" style="cursor: pointer;" aria-label="{{$edattach}}" title="{{$edattach}}" ondragenter="return commentLinkDrop(event, {{$id}});" ondragover="return commentLinkDrop(event, {{$id}});" ondrop="commentLinkDropper(event);" onclick="commentGetLink({{$id}}, '{{$prompttext}}');">
<i class="fa fa-paperclip"></i>
</button>
</span>
<span>
<button type="button" class="btn btn-sm icon bb-url" style="cursor: pointer;" aria-label="{{$edurl}}" title="{{$edurl}}" onclick="insertFormatting('url',{{$id}});">
<i class="fa fa-link"></i>
</button>
<button type="button" class="btn btn-sm icon underline" style="cursor: pointer;" aria-label="{{$eduline}}" title="{{$eduline}}" onclick="insertFormatting('u',{{$id}});">
<i class="fa fa-underline"></i>
</button>
<button type="button" class="btn btn-sm icon italic" style="cursor: pointer;" aria-label="{{$editalic}}" title="{{$editalic}}" onclick="insertFormatting('i',{{$id}});">
<i class="fa fa-italic"></i>
</button>
<button type="button" class="btn btn-sm icon bold" style="cursor: pointer;" aria-label="{{$edbold}}" title="{{$edbold}}" onclick="insertFormatting('b',{{$id}});">
<i class="fa fa-bold"></i>
</button>
<button type="button" class="btn btn-sm icon quote" style="cursor: pointer;" aria-label="{{$edquote}}" title="{{$edquote}}" onclick="insertFormatting('quote',{{$id}});">
<i class="fa fa-quote-left"></i>
</button>
</span>
</p>
<p>
<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty form-control text-autosize" name="body" placeholder="{{$comment}}" rows="3" data-default="{{$default}}">{{$default}}</textarea>
</p>
{{if $qcomment}}
<p>
<select id="qcomment-select-{{$id}}" name="qcomment-{{$id}}" class="qcomment" onchange="qCommentInsert(this,{{$id}});"> <select id="qcomment-select-{{$id}}" name="qcomment-{{$id}}" class="qcomment" onchange="qCommentInsert(this,{{$id}});">
<option value=""></option> <option value=""></option>
{{foreach $qcomment as $qc}} {{foreach $qcomment as $qc}}
<option value="{{$qc}}">{{$qc}}</option> <option value="{{$qc}}">{{$qc}}</option>
{{/foreach}} {{/foreach}}
</select> </select>
{{/if}} </p>
{{/if}}
<div class="comment-edit-text-end clear"></div> <div class="comment-edit-submit-wrapper">
<div class="comment-edit-submit-wrapper" id="comment-edit-submit-wrapper-{{$id}}" style="display: none;"> {{if $preview}}
<button type="button" class="btn btn-defaul btn-sm" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}"><i class="fa fa-eye"></i> {{$preview}}</button>
{{/if}}
<button type="submit" class="btn btn-primary btn-sm" id="comment-edit-submit-{{$id}}" name="submit"><i class="fa fa-envelope"></i> {{$submit}}</button> <button type="submit" class="btn btn-primary btn-sm" id="comment-edit-submit-{{$id}}" name="submit"><i class="fa fa-envelope"></i> {{$submit}}</button>
{{if $preview}}
<button type="button" class="btn btn-defaul btn-sm" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}"><i class="fa fa-eye"></i> {{$preview}}</button>
{{/if}}
<ul class="comment-edit-bb-{{$id}} comment-icon-list nav nav-pills pull-right">
<li>
<button type="button" class="btn-link icon bb-img" style="cursor: pointer;" aria-label="{{$edimg}}" title="{{$edimg}}" data-role="insert-formatting" data-bbcode="img" data-id="{{$id}}">
<i class="fa fa-picture-o"></i>
</button>
</li>
<li>
<button type="button" class="btn-link icon bb-url" style="cursor: pointer;" aria-label="{{$edurl}}" title="{{$edurl}}" onclick="insertFormatting('url',{{$id}});">
<i class="fa fa-link"></i>
</button>
</li>
<li>
<button type="button" class="btn-link icon" style="cursor: pointer;" aria-label="{{$edattach}}" title="{{$edattach}}" ondragenter="return commentLinkDrop(event, {{$id}});" ondragover="return commentLinkDrop(event, {{$id}});" ondrop="commentLinkDropper(event);" onclick="commentGetLink({{$id}}, '{{$prompttext}}');">
<i class="fa fa-paperclip"></i>
</button>
</li>
<li>
<button type="button" class="btn-link icon underline" style="cursor: pointer;" aria-label="{{$eduline}}" title="{{$eduline}}" onclick="insertFormatting('u',{{$id}});">
<i class="fa fa-underline"></i>
</button>
</li>
<li>
<button type="button" class="btn-link icon italic" style="cursor: pointer;" aria-label="{{$editalic}}" title="{{$editalic}}" onclick="insertFormatting('i',{{$id}});">
<i class="fa fa-italic"></i>
</button>
</li>
<li>
<button type="button" class="btn-link icon bold" style="cursor: pointer;" aria-label="{{$edbold}}" title="{{$edbold}}" onclick="insertFormatting('b',{{$id}});">
<i class="fa fa-bold"></i>
</button>
</li>
<li>
<button type="button" class="btn-link icon quote" style="cursor: pointer;" aria-label="{{$edquote}}" title="{{$edquote}}" onclick="insertFormatting('quote',{{$id}});">
<i class="fa fa-quote-left"></i>
</button>
</li>
</ul>
</div> </div>
<div class="comment-edit-end clear"></div> <div class="comment-edit-end clear"></div>
</form> </form>
<div id="comment-edit-preview-{{$id}}" class="comment-edit-preview" style="display:none;"></div> <div id="comment-edit-preview-{{$id}}" class="comment-edit-preview" style="display:none;"></div>
</div> </div>

29
view/theme/frio/templates/search_item.tpl
View file

@ -161,9 +161,9 @@
</div> </div>
<!-- ./TODO --> <!-- ./TODO -->
<div class="wall-item-actions"> <p class="wall-item-actions">
{{* Action buttons to interact with the item (like: like, dislike, share and so on *}} {{* Action buttons to interact with the item (like: like, dislike, share and so on *}}
<div class="wall-item-actions-left pull-left"> <span class="wall-item-actions-left">
<!--comment this out to try something different {{if $item.threaded}}{{if $item.comment}} <!--comment this out to try something different {{if $item.threaded}}{{if $item.comment}}
<div id="button-reply" class="pull-left"> <div id="button-reply" class="pull-left">
<button type="button" class="btn-link" id="comment-{{$item.id}}" onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});"><i class="fa fa-reply" title="{{$item.switchcomment}}"></i> </span> <button type="button" class="btn-link" id="comment-{{$item.id}}" onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});"><i class="fa fa-reply" title="{{$item.switchcomment}}"></i> </span>
@ -204,28 +204,27 @@
{{/if}} {{/if}}
{{/if}} {{/if}}
<img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" /> <img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" />
</div> </span>
<div class="wall-item-actions-right pull-right"> <span class="wall-item-actions-right">
{{* Event attendance buttons *}} {{* Event attendance buttons *}}
{{if $item.isevent}} {{if $item.isevent}}
<div class="vote-event"> <span class="vote-event">
<button type="button" class="btn btn-defaultbutton-event{{if $item.responses.attendyes.self}} active" aria-pressed="true{{/if}}" id="attendyes-{{$item.id}}" title="{{$item.attend.0}}" onclick="doLikeAction({{$item.id}}, 'attendyes');"><i class="fa fa-check" aria-hidden="true"><span class="sr-only">{{$item.attend.0}}</span></i></button> <button type="button" class="btn btn-defaultbutton-event{{if $item.responses.attendyes.self}} active" aria-pressed="true{{/if}}" id="attendyes-{{$item.id}}" title="{{$item.attend.0}}" onclick="doLikeAction({{$item.id}}, 'attendyes');"><i class="fa fa-check" aria-hidden="true"><span class="sr-only">{{$item.attend.0}}</span></i></button>
<button type="button" class="btn btn-defaultbutton-event{{if $item.responses.attendno.self}} active" aria-pressed="true{{/if}}" id="attendno-{{$item.id}}" title="{{$item.attend.1}}" onclick="doLikeAction({{$item.id}}, 'attendno');"><i class="fa fa-times" aria-hidden="true"><span class="sr-only">{{$item.attend.1}}</span></i></button> <button type="button" class="btn btn-defaultbutton-event{{if $item.responses.attendno.self}} active" aria-pressed="true{{/if}}" id="attendno-{{$item.id}}" title="{{$item.attend.1}}" onclick="doLikeAction({{$item.id}}, 'attendno');"><i class="fa fa-times" aria-hidden="true"><span class="sr-only">{{$item.attend.1}}</span></i></button>
<button type="button" class="btn btn-defaultbutton-event{{if $item.responses.attendmaybe.self}} active" aria-pressed="true{{/if}}" id="attendmaybe-{{$item.id}}" title="{{$item.attend.2}}" onclick="doLikeAction({{$item.id}}, 'attendmaybe');"><i class="fa fa-question" aria-hidden="true"><span class="sr-only">{{$item.attend.2}}</span></i></button> <button type="button" class="btn btn-defaultbutton-event{{if $item.responses.attendmaybe.self}} active" aria-pressed="true{{/if}}" id="attendmaybe-{{$item.id}}" title="{{$item.attend.2}}" onclick="doLikeAction({{$item.id}}, 'attendmaybe');"><i class="fa fa-question" aria-hidden="true"><span class="sr-only">{{$item.attend.2}}</span></i></button>
</div> </span>
{{/if}} {{/if}}
<div class="pull-right checkbox"> <span class="pull-right checkbox">
{{if $item.drop.pagedrop}} {{if $item.drop.pagedrop}}
<input type="checkbox" title="{{$item.drop.select}}" name="itemselected[]" id="checkbox-{{$item.id}}" class="item-select" value="{{$item.id}}" /> <input type="checkbox" title="{{$item.drop.select}}" name="itemselected[]" id="checkbox-{{$item.id}}" class="item-select" value="{{$item.id}}" />
<label for="checkbox-{{$item.id}}"></label> <label for="checkbox-{{$item.id}}"></label>
{{/if}} {{/if}}
</div> </span>
</div> </span>
<div class="clearfix"></div> </p><!--./wall-item-actions-->
</div><!--./wall-item-actions-->
{{* Display likes, dislike and attendance stats *}} {{* Display likes, dislike and attendance stats *}}
{{if $item.responses}} {{if $item.responses}}

73
view/theme/frio/templates/wall_thread.tpl
View file

@ -20,7 +20,7 @@ as the value of $top_child_total (this is done at the end of this file)
{{/if}} {{/if}}
{{if $item.thread_level==2 && $top_child_nr==1}} {{if $item.thread_level==2 && $top_child_nr==1}}
<div class="comment-container well well-sm"> <!--top-child-begin--> <div class="comment-container"> <!--top-child-begin-->
{{/if}} {{/if}}
{{* end of hacky part to count childrens *}} {{* end of hacky part to count childrens *}}
@ -308,9 +308,9 @@ as the value of $top_child_total (this is done at the end of this file)
<!-- ./TODO --> <!-- ./TODO -->
<!-- <hr /> --> <!-- <hr /> -->
<div class="wall-item-actions"> <p class="wall-item-actions">
{{* Action buttons to interact with the item (like: like, dislike, share and so on *}} {{* Action buttons to interact with the item (like: like, dislike, share and so on *}}
<div class="wall-item-actions-left pull-left"> <span class="wall-item-actions-left">
<!--comment this out to try something different {{if $item.threaded}}{{if $item.comment}} <!--comment this out to try something different {{if $item.threaded}}{{if $item.comment}}
<div id="button-reply" class="pull-left"> <div id="button-reply" class="pull-left">
<button type="button" class="btn-link" id="comment-{{$item.id}}" onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});"><i class="fa fa-reply" title="{{$item.switchcomment}}"></i> </span> <button type="button" class="btn-link" id="comment-{{$item.id}}" onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});"><i class="fa fa-reply" title="{{$item.switchcomment}}"></i> </span>
@ -338,7 +338,7 @@ as the value of $top_child_total (this is done at the end of this file)
{{* Button to open the comment text field *}} {{* Button to open the comment text field *}}
{{if $item.comment}} {{if $item.comment}}
<button type="button" class="btn-link button-comments" id="comment-{{$item.id}}" title="{{$item.switchcomment}}" {{if $item.thread_level != 1}}onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});" {{else}} onclick="showHide('item-comments-{{$item.id}}'); commentExpand({{$item.id}});"{{/if}}><i class="fa fa-commenting" aria-hidden="true"></i>&nbsp;{{$item.switchcomment}}</button> <button type="button" class="btn-link button-comments" id="comment-{{$item.id}}" title="{{$item.switchcomment}}" {{if $item.thread_level != 1}}onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});" {{else}} onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});"{{/if}}><i class="fa fa-commenting" aria-hidden="true"></i>&nbsp;{{$item.switchcomment}}</button>
{{/if}} {{/if}}
{{* Button for sharing the item *}} {{* Button for sharing the item *}}
@ -351,27 +351,26 @@ as the value of $top_child_total (this is done at the end of this file)
{{/if}} {{/if}}
{{/if}} {{/if}}
<img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" /> <img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" />
</div> </span>
<div class="wall-item-actions-right pull-right"> <span class="wall-item-actions-right">
{{* Event attendance buttons *}} {{* Event attendance buttons *}}
{{if $item.isevent}} {{if $item.isevent}}
<div class="vote-event"> <span class="vote-event">
<button type="button" class="btn btn-xs btn-default button-event{{if $item.responses.attendyes.self}} active" aria-pressed="true{{/if}}" id="attendyes-{{$item.id}}" title="{{$item.attend.0}}" onclick="doLikeAction({{$item.id}},'attendyes');"><i class="fa fa-check" aria-hidden="true"><span class="sr-only">{{$item.attend.0}}</span></i></button> <button type="button" class="btn btn-xs btn-default button-event{{if $item.responses.attendyes.self}} active" aria-pressed="true{{/if}}" id="attendyes-{{$item.id}}" title="{{$item.attend.0}}" onclick="doLikeAction({{$item.id}},'attendyes');"><i class="fa fa-check" aria-hidden="true"><span class="sr-only">{{$item.attend.0}}</span></i></button>
<button type="button" class="btn btn-xs btn-default button-event{{if $item.responses.attendno.self}} active" aria-pressed="true{{/if}}" id="attendno-{{$item.id}}" title="{{$item.attend.1}}" onclick="doLikeAction({{$item.id}},'attendno');"><i class="fa fa-times" aria-hidden="true"><span class="sr-only">{{$item.attend.1}}</span></i></button> <button type="button" class="btn btn-xs btn-default button-event{{if $item.responses.attendno.self}} active" aria-pressed="true{{/if}}" id="attendno-{{$item.id}}" title="{{$item.attend.1}}" onclick="doLikeAction({{$item.id}},'attendno');"><i class="fa fa-times" aria-hidden="true"><span class="sr-only">{{$item.attend.1}}</span></i></button>
<button type="button" class="btn btn-xs btn-default button-event{{if $item.responses.attendmaybe.self}} active" aria-pressed="true{{/if}}" id="attendmaybe-{{$item.id}}" title="{{$item.attend.2}}" onclick="doLikeAction({{$item.id}},'attendmaybe');"><i class="fa fa-question" aria-hidden="true"><span class="sr-only">{{$item.attend.2}}</span></i></button> <button type="button" class="btn btn-xs btn-default button-event{{if $item.responses.attendmaybe.self}} active" aria-pressed="true{{/if}}" id="attendmaybe-{{$item.id}}" title="{{$item.attend.2}}" onclick="doLikeAction({{$item.id}},'attendmaybe');"><i class="fa fa-question" aria-hidden="true"><span class="sr-only">{{$item.attend.2}}</span></i></button>
</div> </span>
{{/if}} {{/if}}
<div class="pull-right checkbox"> <span class="pull-right checkbox">
{{if $item.drop.pagedrop}} {{if $item.drop.pagedrop}}
<input type="checkbox" title="{{$item.drop.select}}" name="itemselected[]" id="checkbox-{{$item.id}}" class="item-select" value="{{$item.id}}" /> <input type="checkbox" title="{{$item.drop.select}}" name="itemselected[]" id="checkbox-{{$item.id}}" class="item-select" value="{{$item.id}}" />
<label for="checkbox-{{$item.id}}"></label> <label for="checkbox-{{$item.id}}"></label>
{{/if}} {{/if}}
</div> </span>
</div> </span>
<div class="clearfix"></div> </p><!--./wall-item-actions-->
</div><!--./wall-item-actions-->
<div class="wall-item-links"></div> <div class="wall-item-links"></div>
@ -384,19 +383,16 @@ as the value of $top_child_total (this is done at the end of this file)
</div> </div>
{{/if}} {{/if}}
{{if $item.thread_level!=1}} {{* Insert comment box of threaded children *}}
</div><!--./media-body from for comments--> {{if $item.threaded && $item.comment && $item.indent==comment}}
<hr /> <div class="wall-item-comment-wrapper" id="item-comments-{{$item.id}}" data-display="block" style="display: none;">
{{$item.comment nofilter}}
</div>
{{/if}} {{/if}}
{{if $item.thread_level!=1}}
{{* Insert comment box of threaded children *}} </div><!--./media-body from for comments-->
{{if $item.threaded}}{{if $item.comment}}{{if $item.indent==comment}} {{/if}}
<div class="wall-item-comment-wrapper" id="item-comments-{{$item.id}}" style="display: none;">
{{$item.comment nofilter}}
</div>
{{/if}}{{/if}}{{/if}}
{{foreach $item.children as $child}} {{foreach $item.children as $child}}
{{* {{*
@ -413,21 +409,12 @@ as the value of $top_child_total (this is done at the end of this file)
Display this comment box if there are any comments. If not hide it. In this Display this comment box if there are any comments. If not hide it. In this
case it could be opend with the "comment" button *}} case it could be opend with the "comment" button *}}
{{if $item.total_comments_num}} {{if $item.total_comments_num}}
{{if $item.threaded}}{{if $item.comment}}{{if $item.thread_level==1}} <div class="comment-fake-form" id="comment-fake-form-{{$item.id}}">
<div class="wall-item-comment-wrapper well well-small" id="item-comments-{{$item.id}}">{{$item.comment nofilter}}</div> <textarea id="comment-fake-text-{{$item.id}}" class="comment-fake-text-empty form-control" placeholder="{{$item.reply_label}}" onFocus="commentOpenUI(this, {{$item.id}});" rows="1"></textarea>
{{/if}}{{/if}}{{/if}} </div>
{{/if}}
{{if $item.flatten}} {{if $item.comment && $item.thread_level==1}}
<div class="wall-item-comment-wrapper well well-small" id="item-comments-{{$item.id}}">{{$item.comment nofilter}}</div> <div class="wall-item-comment-wrapper well well-small" id="item-comments-{{$item.id}}" data-display="block" style="display: none">{{$item.comment nofilter}}</div>
{{/if}}
{{else}}
{{if $item.threaded}}{{if $item.comment}}{{if $item.thread_level==1}}
<div class="wall-item-comment-wrapper well well-small" id="item-comments-{{$item.id}}" style="display: none;">{{$item.comment nofilter}}</div>
{{/if}}{{/if}}{{/if}}
{{if $item.flatten}}
<div class="wall-item-comment-wrapper well well-small" id="item-comments-{{$item.id}}" style="display: none;">{{$item.comment nofilter}}</div>
{{/if}}
{{/if}} {{/if}}
</div><!-- /media --> </div><!-- /media -->
</div><!-- ./panel-body or ./wall-item-container --> </div><!-- ./panel-body or ./wall-item-container -->