Improved comment hiding interaction

- Remove global window.showMore and window.showFewer
- Improve global showHideComments function
- Remove frio-specific showHideComments function

diff --git a/src/App.php b/src/App.php
index 8068a1530bad71a2e3c462e48c710f2751d99b68..b9e22dd1b53034d036adee442967045eb1591e98 100644 (file)
--- a/src/App.php
+++ b/src/App.php
@@ -663,8 +663,6 @@ class App
                        '$local_user'      => local_user(),
                        '$generator'       => 'Friendica' . ' ' . FRIENDICA_VERSION,
                        '$delitem'         => Core\L10n::t('Delete this item?'),
-                       '$showmore'        => Core\L10n::t('show more'),
-                       '$showfewer'       => Core\L10n::t('show fewer'),
                        '$update_interval' => $interval,
                        '$shortcut_icon'   => $shortcut_icon,
                        '$touch_icon'      => $touch_icon,

diff --git a/src/Object/Post.php b/src/Object/Post.php
index 9fa9fcb50749ce30a0c13fcdd184eea96463af7a..05ffeb52b213a75df1d44e576195a9b8b0759576 100644 (file)
--- a/src/Object/Post.php
+++ b/src/Object/Post.php
@@ -415,6 +415,7 @@ class Post extends BaseObject
                        'dislike'         => $responses['dislike']['output'],
                        'responses'       => $responses,
                        'switchcomment'   => L10n::t('Comment'),
+                       'reply_label'     => L10n::t('Reply to %s', $name_e),
                        'comment'         => $comment,
                        'previewing'      => $conv->isPreview() ? ' preview ' : '',
                        'wait'            => L10n::t('Please wait'),
@@ -449,13 +450,13 @@ class Post extends BaseObject
                        foreach ($children as $child) {
                                $result['children'][] = $child->getTemplateData($conv_responses, $thread_level + 1);
                        }
+
                        // Collapse
                        if (($nb_children > 2) || ($thread_level > 1)) {
                                $result['children'][0]['comment_firstcollapsed'] = true;
                                $result['children'][0]['num_comments'] = L10n::tt('%d comment', '%d comments', $total_children);
-                               $result['children'][0]['hidden_comments_num'] = $total_children;
-                               $result['children'][0]['hidden_comments_text'] = L10n::tt('comment', 'comments', $total_children);
-                               $result['children'][0]['hide_text'] = L10n::t('show more');
+                               $result['children'][0]['show_text'] = L10n::t('Show more');
+                               $result['children'][0]['hide_text'] = L10n::t('Show fewer');
                                if ($thread_level > 1) {
                                        $result['children'][$nb_children - 1]['comment_lastcollapsed'] = true;
                                } else {

diff --git a/view/js/main.js b/view/js/main.js
index f81d7a42352125231972f63e08518ab12525e513..c3d9cbed5cf2ce1ec617628de3f34ccb3a83c646 100644 (file)
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -656,12 +656,14 @@ function preview_comment(id) {
 }
 
 function showHideComments(id) {
-       if ($("#collapsed-comments-" + id).is(":visible")) {
-               $("#collapsed-comments-" + id).hide();
-               $("#hide-comments-" + id).html(window.showMore);
+       if ($('#collapsed-comments-' + id).is(':visible')) {
+               $('#collapsed-comments-' + id).slideUp();
+               $('#hide-comments-' + id).hide();
+               $('#hide-comments-total-' + id).show();
        } else {
-               $("#collapsed-comments-" + id).show();
-               $("#hide-comments-" + id).html(window.showFewer);
+               $('#collapsed-comments-' + id).slideDown();
+               $('#hide-comments-' + id).show();
+               $('#hide-comments-total-' + id).hide();
        }
 }
 

diff --git a/view/templates/head.tpl b/view/templates/head.tpl
index fa0088b8b667dcd60c096a8717d941d50ae5ba05..6f7ddffb27c4f5fe7815abe9b24f1a3623ef0d00 100644 (file)
--- a/view/templates/head.tpl
+++ b/view/templates/head.tpl
@@ -146,9 +146,6 @@
                $(obj).val("");
        }
 
-       window.showMore = "{{$showmore}}";
-       window.showFewer = "{{$showfewer}}";
-
        function showHideCommentBox(id) {
                if ($("#comment-edit-form-" + id).is(":visible")) {
                        $("#comment-edit-form-" + id).hide();

diff --git a/view/templates/wall_thread.tpl b/view/templates/wall_thread.tpl
index b3ed2af02686edd1472c40cf716d4102dbed0daf..01cd7559f188fe57f6982c0a4104084f89827b21 100644 (file)
--- a/view/templates/wall_thread.tpl
+++ b/view/templates/wall_thread.tpl
@@ -1,7 +1,12 @@
 
 {{if $item.comment_firstcollapsed}}
-       <div class="hide-comments-outer">
-       <span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">{{$item.num_comments}}</span> <span id="hide-comments-{{$item.id}}" class="hide-comments fakelink" onclick="showHideComments({{$item.id}});">{{$item.hide_text}}</span>
+       <div class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
+               <span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">
+                       {{$item.num_comments}} - {{$item.show_text}}
+               </span>
+               <span id="hide-comments-{{$item.id}}" class="hide-comments" style="display: none">
+                       {{$item.num_comments}} - {{$item.hide_text}}
+               </span>
        </div>
        <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
 {{/if}}

diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js
index 0965f3a3e88caa71841300a96fe0fcef8c0a6c80..83623bf34214a93fbd9ce3ee3a8a3b8a69fbf0da 100644 (file)
--- a/view/theme/frio/js/theme.js
+++ b/view/theme/frio/js/theme.js
@@ -388,19 +388,6 @@ function showHide(theID) {
        }
 }
 
-function showHideComments(id) {
-       if( $('#collapsed-comments-' + id).is(':visible')) {
-               $('#collapsed-comments-' + id).slideUp();
-               $('#hide-comments-' + id).html(window.showMore);
-               $('#hide-comments-total-' + id).show();
-       }
-       else {
-               $('#collapsed-comments-' + id).slideDown();
-               $('#hide-comments-' + id).html(window.showFewer);
-               $('#hide-comments-total-' + id).hide();
-       }
-}
-
 // Show & hide event map in the network stream by button click.
 function showHideEventMap(elm) {
        // Get the id of the map element - it should be provided through

diff --git a/view/theme/frio/templates/head.tpl b/view/theme/frio/templates/head.tpl
index e1805f744fae554db27fcba2ad162c1bbf54ed7f..b3c632b3d15ae6a3e02629dbc42842257a59bc13 100644 (file)
--- a/view/theme/frio/templates/head.tpl
+++ b/view/theme/frio/templates/head.tpl
@@ -87,11 +87,6 @@
 {{/if}}
 <script type="text/javascript" src="view/theme/frio/js/textedit.js"></script>
 
-<script type="text/javascript">
-       window.showMore = "{{$showmore}}";
-       window.showFewer = "{{$showfewer}}";
-</script>
-
 {{* Include the strings which are needed for some js functions (e.g. translation)
 They are loaded into the html <head> so that js functions can use them *}}
 {{include file="js_strings.tpl"}}

diff --git a/view/theme/frio/templates/wall_thread.tpl b/view/theme/frio/templates/wall_thread.tpl
index c149b58a515edabedab9fc051469d09eb653614d..068f98136afb3be2c1a707f09c50211a6319c425 100644 (file)
--- a/view/theme/frio/templates/wall_thread.tpl
+++ b/view/theme/frio/templates/wall_thread.tpl
@@ -41,12 +41,15 @@ as the value of $top_child_total (this is done at the end of this file)
        {{if $item.thread_level<3}}
                <div class="hide-comments-outer-wrapper">
                        <div class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
-                               <span id="hide-comments-total-{{$item.id}}"
-                                       class="hide-comments-total">{{$item.num_comments}}</span>
-                               <span id="hide-comments-{{$item.id}}"
-                                       class="hide-comments">{{$item.hide_text}}</span>
+                               <span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">
+                                       <i class="fa fa-plus-square" aria-hidden="true"></i>
+                                       {{$item.num_comments}} - {{$item.show_text}}
+                               </span>
+                               <span id="hide-comments-{{$item.id}}" class="hide-comments" style="display: none">
+                                       <i class="fa fa-minus-square" aria-hidden="true"></i>
+                                       {{$item.num_comments}} - {{$item.hide_text}}
+                               </span>
                        </div>
-                       <hr />
                </div>
                <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
        {{else}}

diff --git a/view/theme/quattro/templates/wall_thread.tpl b/view/theme/quattro/templates/wall_thread.tpl
index 1d2295278b91f2dad1a8c8c82c4e69d53f063e70..a80aabf4b47202b8c2d1e1d76138f11f829d317d 100644 (file)
--- a/view/theme/quattro/templates/wall_thread.tpl
+++ b/view/theme/quattro/templates/wall_thread.tpl
@@ -1,19 +1,13 @@
 {{if $mode == display}}
 {{else}}
 {{if $item.comment_firstcollapsed}}
-       <div class="hide-comments-outer">
-               <span id="hide-comments-total-{{$item.id}}"
-                       class="hide-comments-total">{{$item.num_comments}}</span>
-                       <span id="hide-comments-{{$item.id}}"
-                               class="hide-comments fakelink"
-                               onclick="showHideComments({{$item.id}});">{{$item.hide_text}}</span>
-                       {{if $item.thread_level==3}} -
-                       <span id="hide-thread-{{$item}}-id"
-                               class="fakelink"
-                               onclick="showThread({{$item.id}});">expand</span> /
-                       <span id="hide-thread-{{$item}}-id"
-                               class="fakelink"
-                               onclick="hideThread({{$item.id}});">collapse</span> thread{{/if}}
+       <div class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
+               <span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">
+                       {{$item.num_comments}} - {{$item.show_text}}
+               </span>
+               <span id="hide-comments-{{$item.id}}" class="hide-comments" style="display: none">
+                       {{$item.num_comments}} - {{$item.hide_text}}
+               </span>
        </div>
        <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
 {{/if}}

diff --git a/view/theme/smoothly/templates/wall_thread.tpl b/view/theme/smoothly/templates/wall_thread.tpl
index a7e0f201090ac62858420ffe51029320a6654021..08ff557670e9a12edbba650b6f6e3f7751d468e3 100644 (file)
--- a/view/theme/smoothly/templates/wall_thread.tpl
+++ b/view/theme/smoothly/templates/wall_thread.tpl
@@ -1,8 +1,12 @@
 
 {{if $item.comment_firstcollapsed}}
-       <div class="hide-comments-outer">
-               <span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">{{$item.num_comments}}</span>
-               <span id="hide-comments-{{$item.id}}" class="hide-comments fakelink" onclick="showHideComments({{$item.id}});">{{$item.hide_text}}</span>
+       <div class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
+               <span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">
+                       {{$item.num_comments}} - {{$item.show_text}}
+               </span>
+               <span id="hide-comments-{{$item.id}}" class="hide-comments" style="display: none">
+                       {{$item.num_comments}} - {{$item.hide_text}}
+               </span>
        </div>
        <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
 {{/if}}

diff --git a/view/theme/vier/templates/wall_thread.tpl b/view/theme/vier/templates/wall_thread.tpl
index 21ebcea38f56769944ac1e4f2e7d1fd13a1c339f..37e01f75a40898465eb28d25410c15b7cc0755f1 100644 (file)
--- a/view/theme/vier/templates/wall_thread.tpl
+++ b/view/theme/vier/templates/wall_thread.tpl
@@ -2,12 +2,13 @@
 {{else}}
 {{if $item.comment_firstcollapsed}}
        {{if $item.thread_level<3}}
-               <div class="hide-comments-outer">
-                       <span id="hide-comments-total-{{$item.id}}"
-                               class="hide-comments-total">{{$item.num_comments}}</span>
-                       <span id="hide-comments-{{$item.id}}"
-                               class="hide-comments fakelink"
-                               onclick="showHideComments({{$item.id}});">{{$item.hide_text}}</span>
+               <div class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
+                       <span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">
+                               {{$item.num_comments}} - {{$item.show_text}}
+                       </span>
+                       <span id="hide-comments-{{$item.id}}" class="hide-comments" style="display: none">
+                               {{$item.num_comments}} - {{$item.hide_text}}
+                       </span>
                </div>
                <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
        {{else}}