From: Hypolite Petovan Date: Fri, 15 Feb 2019 03:28:38 +0000 (-0500) Subject: [frio] Thread display redesign X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=2dd7a52b17d3aef36aec06669dfe42c1014adaf1;p=friendica.git [frio] Thread display redesign - 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 --- diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index f213123fb6..1caaba9b9d 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -1669,7 +1669,13 @@ aside .panel-body { /* wall items */ .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 */ @@ -1914,12 +1920,13 @@ code > .hl-main { /* item social action buttons */ .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; color: #555; - margin-bottom: 0; } .wall-item-actions .active { font-weight: bold; @@ -2013,9 +2020,10 @@ code > .hl-main { position: relative!important; margin-top: 0; } -.hide-comments-outer-wrapper { -/* text-align: center; - margin-top: -18px;*/ +.hide-comments-outer { + background-color: rgba(0, 0, 0, 0.03); + padding: 0.5em; + border-radius: 0.5em 0.5em 0 0; } .hide-comments-total { cursor: pointer; @@ -2024,21 +2032,31 @@ code > .hl-main { /* * 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-edit-submit-wrapper { - margin-bottom: 25px; + +.comment-fake-form { + border-color: #d9d9d9; } -.comment-edit-submit-wrapper a, -.comment-edit-submit-wrapper a:hover { - padding-top: 5px !important; - padding-bottom: 5px !important; + +.comment-container .wall-item-comment-wrapper { + margin-top: 0.5em; } -.comment-icon-list > li > .icon, -.comment-icon-list > li > .icon:hover { - color: #555; - background-color: transparent; + +.comment-edit-submit-wrapper { + display: flex; + justify-content: flex-end; +} + +.comment-icon-list { + display: flex; + justify-content: space-between; } /* acpopup + textcompletion*/ diff --git a/view/theme/frio/js/textedit.js b/view/theme/frio/js/textedit.js index e0c06af581..93d7fe8cee 100644 --- a/view/theme/frio/js/textedit.js +++ b/view/theme/frio/js/textedit.js @@ -82,7 +82,8 @@ function insertFormatting(BBcode, id) { 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); + closeMenu("comment-fake-form-" + id); + openMenu("item-comments-" + id); } textarea = document.getElementById("comment-edit-text-" + id); @@ -134,115 +135,99 @@ function cmtBbClose(id) { $("#comment-edit-bb-" + id).hide(); } -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(); +function commentExpand(id) +{ $("#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; } -function commentClose(obj, id) { - if (obj.value == '') { - $("#comment-edit-text-" + id).removeClass("comment-edit-text-full"); - $("#comment-edit-text-" + id).addClass("comment-edit-text-empty"); +function commentClose(obj, id) +{ + if (obj.value === '' || obj.value === obj.dataset.default) { + $("#comment-edit-text-" + id) + .removeClass("comment-edit-text-full") + .addClass("comment-edit-text-empty"); $("#mod-cmnt-wrap-" + id).hide(); - closeMenu("comment-edit-submit-wrapper-" + id); + openMenu("comment-fake-form-" + id); + closeMenu("item-comments-" + id); return true; } return false; } function showHideCommentBox(id) { - if ($('#comment-edit-form-' + id).is(':visible')) { - $('#comment-edit-form-' + id).hide(); + var $el = $('#comment-edit-form-' + id); + if ($el.is(':visible')) { + $el.hide(); } else { - $('#comment-edit-form-' + id).show(); + $el.show(); } } function commentOpenUI(obj, id) { - $("#comment-edit-text-" + id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty"); - // Choose an arbitrary tab index that's greater than what we're using in jot (3 of them) - // The submit button gets tabindex + 1 - $("#comment-edit-text-" + id).attr('tabindex', '9'); - $("#comment-edit-submit-" + id).attr('tabindex', '10'); - $("#comment-edit-submit-wrapper-" + id).show(); + closeMenu("comment-fake-form-" + id); + openMenu("item-comments-" + id); + $("#comment-edit-text-" + id) + .putCursorAtEnd() + .addClass("comment-edit-text-full").removeClass("comment-edit-text-empty") + .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 autosize($("#comment-edit-text-" + id + ".text-autosize")); } function commentCloseUI(obj, id) { - if (obj.value === '') { - $("#comment-edit-text-" + id).removeClass("comment-edit-text-full").addClass("comment-edit-text-empty"); - $("#comment-edit-text-" + id).removeAttr('tabindex'); + if (obj.value === '' || obj.value === obj.dataset.default) { + $("#comment-edit-text-" + id) + .removeClass("comment-edit-text-full").addClass("comment-edit-text-empty") + .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 autosize.destroy($("#comment-edit-text-" + id + ".text-autosize")); } } function jotTextOpenUI(obj) { - if (obj.value == '') { - $(".modal-body #profile-jot-text").addClass("profile-jot-text-full").removeClass("profile-jot-text-empty"); + if (obj.value === '' || obj.value === obj.dataset.default) { + var $el = $(".modal-body #profile-jot-text"); + $el.addClass("profile-jot-text-full").removeClass("profile-jot-text-empty"); // initiale autosize for the jot - autosize($(".modal-body #profile-jot-text")); + autosize($el); } } function jotTextCloseUI(obj) { - if (obj.value === '') { - $(".modal-body #profile-jot-text").removeClass("profile-jot-text-full").addClass("profile-jot-text-empty"); + if (obj.value === '' || obj.value === obj.dataset.default) { + var $el = $(".modal-body #profile-jot-text"); + $el.removeClass("profile-jot-text-full").addClass("profile-jot-text-empty"); // destroy the automatic textarea resizing - autosize.destroy($(".modal-body #profile-jot-text")); + autosize.destroy($el); } } function commentOpen(obj, id) { - if (obj.value == '') { - $("#comment-edit-text-" + id).addClass("comment-edit-text-full"); - $("#comment-edit-text-" + id).removeClass("comment-edit-text-empty"); + if (obj.value === '' || obj.value === obj.dataset.default) { + $("#comment-edit-text-" + id) + .putCursorAtEnd() + .addClass("comment-edit-text-full") + .removeClass("comment-edit-text-empty"); $("#mod-cmnt-wrap-" + id).show(); - openMenu("comment-edit-submit-wrapper-" + id); + closeMenu("comment-fake-form-" + id); + openMenu("item-comments-" + id); return true; } 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('<', '<'); - ins = ins.replace('>', '>'); - ins = ins.replace('&', '&'); - ins = ins.replace('"', '"'); - $("#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('<', '<'); - ins = ins.replace('>', '>'); - ins = ins.replace('&', '&'); - ins = ins.replace('"', '"'); - $("#comment-edit-text-" + id).val(tmpStr + ins); - $(obj).val(''); -} - function confirmDelete() { return confirm(aStr.delitem); } diff --git a/view/theme/frio/templates/comment_item.tpl b/view/theme/frio/templates/comment_item.tpl index 4edc8f473e..903eb13468 100644 --- a/view/theme/frio/templates/comment_item.tpl +++ b/view/theme/frio/templates/comment_item.tpl @@ -1,10 +1,10 @@ {{if $threaded}} -
+
{{else}} -
+
{{/if}} -
+ @@ -13,64 +13,56 @@ -
- -
- {{if $qcomment}} +

+ + + + + + + + + + + +

+

+ +

+{{if $qcomment}} +

- {{/if}} +

+{{/if}} -
-
+ diff --git a/view/theme/frio/templates/search_item.tpl b/view/theme/frio/templates/search_item.tpl index c6f90ac05d..3b3f64a0d4 100644 --- a/view/theme/frio/templates/search_item.tpl +++ b/view/theme/frio/templates/search_item.tpl @@ -161,9 +161,9 @@
-
+

{{* Action buttons to interact with the item (like: like, dislike, share and so on *}} -

+ + {{/if}} + + +

{{* Display likes, dislike and attendance stats *}} {{if $item.responses}} diff --git a/view/theme/frio/templates/wall_thread.tpl b/view/theme/frio/templates/wall_thread.tpl index 068f98136a..0fcb84bad0 100644 --- a/view/theme/frio/templates/wall_thread.tpl +++ b/view/theme/frio/templates/wall_thread.tpl @@ -20,7 +20,7 @@ as the value of $top_child_total (this is done at the end of this file) {{/if}} {{if $item.thread_level==2 && $top_child_nr==1}} -
+
{{/if}} {{* 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) -
+

{{* Action buttons to interact with the item (like: like, dislike, share and so on *}} -

+ + {{/if}} + + +

@@ -384,20 +383,17 @@ as the value of $top_child_total (this is done at the end of this file)
{{/if}} + {{* Insert comment box of threaded children *}} + {{if $item.threaded && $item.comment && $item.indent==comment}} + + {{/if}} + {{if $item.thread_level!=1}}
-
{{/if}} - - {{* Insert comment box of threaded children *}} - {{if $item.threaded}}{{if $item.comment}}{{if $item.indent==comment}} - - {{/if}}{{/if}}{{/if}} - - {{foreach $item.children as $child}} {{* {{if $child.type == tag}} @@ -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 case it could be opend with the "comment" button *}} {{if $item.total_comments_num}} - {{if $item.threaded}}{{if $item.comment}}{{if $item.thread_level==1}} -
{{$item.comment nofilter}}
- {{/if}}{{/if}}{{/if}} - - {{if $item.flatten}} -
{{$item.comment nofilter}}
- {{/if}} - {{else}} - {{if $item.threaded}}{{if $item.comment}}{{if $item.thread_level==1}} - - {{/if}}{{/if}}{{/if}} - - {{if $item.flatten}} - - {{/if}} +
+ +
+ {{/if}} + {{if $item.comment && $item.thread_level==1}} + {{/if}}