add signaling and appending of new replies with mentions for expanded posts

css/style.css

@@ -1379,6 +1379,24 @@ ol.toptrends-list {
     height: 24px;
     border-radius: 100%;
 }
+
+.post .new-replies-available {
+    text-align: center;
+}
+
+.post .new-replies-available button {
+    font-size: 10px;
+    color: #E34F42;
+    background-color: unset;
+    width: 100%;
+    padding: 1px;
+}
+
+.post .new-replies-available button:hover {
+    cursor: pointer;
+    background-color: #FFF;
+}
+
 .user-name-tooltip
 {
     display: none;

home.html

@@ -392,6 +392,7 @@
                 </div>
                 <span class="show-more label">Show more in this conversation...</span>
             </div> <!-- expanded-content -->
+            <div class="new-replies-available"><button></button></div>
         </div> <!-- post-data -->
     </li> <!-- post-template -->
 

js/interface_common.js

@@ -2780,7 +2780,16 @@ function initInterfaceCommon() {
     $('#post-template.module.post').on('click', function(event) {
         if (event.button === 0 && window.getSelection() == 0)
             postExpandFunction(event, $(this));
-    });
+    })
+        .find('.new-replies-available button').hide()
+            .on('click', function (event) {
+                event.stopPropagation();
+                $(event.target).hide()
+                    .closest('li.post').next('.post-replies').find('.post.pending')
+                        .removeClass('pending').slideDown('fast')
+                ;
+            })
+    ;
     $('.post-area-new')
         .on('click', function(e) {composeNewPost(e, $(this));})
         .clickoutside(unfocusPostAreaNew)

js/twister_actions.js

@@ -640,6 +640,51 @@ function queryProcess(req, res) {
                             $.MAL.showMentions(defaultScreenName);
                     }).bind({req: req})
                 });
+            for (var i = 0; i < twister.res[req].twists.pending.length; i++) {
+                var twist = twister.res[req].twists.cached[twister.res[req].twists.pending[i]];
+                if (!twist.userpost.reply)  // not '|| twist.userpost.reply.n !== defaultScreenName' too because a reply twist can be a bit deeper than a twist of the current user
+                    continue;
+
+                var postDataElem = getElem('.expanded-post .post-data'  // FIXME need to rewrite the appending of .post-replies to do it for not expanded twists too
+                    + '[data-screen-name=\'' + twist.userpost.reply.n + '\']'
+                    + '[data-id=\'' + twist.userpost.reply.k + '\']');
+
+                if (!postDataElem.length)
+                    continue;
+
+                for (var k = 0, twistElem = undefined; k < postDataElem.length; k++) {
+                    var formerPostElem = postDataElem.eq(k).closest('li.post');
+                    if (!formerPostElem.next().hasClass('post-replies'))
+                        var containerElem = $('<li class="post-replies"><ol class="sub-replies"></ol></li>')  // FIXME replace with template as like as a reqRepAfterCB()'s similar thing
+                            .insertAfter(formerPostElem)
+                            .children('.sub-replies')
+                        ;
+                    else {
+                        var containerElem = formerPostElem.next().children('.sub-replies');
+
+                        if (containerElem.find('.post-data'
+                            + '[data-screen-name=\'' + twist.userpost.n + '\']'
+                            + '[data-id=\'' + twist.userpost.k + '\']').length)
+                            continue;
+                    }
+
+                    if (typeof twistElem !== 'undefined')
+                        twistElem.clone(true).appendTo(containerElem);
+                    else
+                        twistElem = postToElem(twist, 'related').hide()
+                            .addClass('new pending')
+                            .appendTo(containerElem);
+
+                    while (formerPostElem.hasClass('pending'))
+                        formerPostElem = formerPostElem.closest('.post-replies').prev('li.post');
+
+                    formerPostElem.find('.new-replies-available button')
+                        .text(polyglot.t('new_mentions',
+                            formerPostElem.next().find('.post.pending').length))
+                        .slideDown('fast')
+                    ;
+                }
+            }
         } else if (twister.res[req].resource === 'direct') {
             if (twister.res[req].query[0] !== '*')
                 $.MAL.updateNewDMsUI(getNewDMsCount());

theme_calm/css/style.css

@@ -1754,6 +1754,24 @@ textarea.splited-post {
     height: 24px;
     border-radius: 100%;
 }
+
+.post .new-replies-available {
+    text-align: center;
+}
+
+.post .new-replies-available button {
+    font-size: 11px;
+    color: #EF0807;
+    background-color: unset;
+    width: 100%;
+    padding: 1px;
+}
+
+.post .new-replies-available button:hover {
+    cursor: pointer;
+    background-color: #FFF;
+}
+
 .user-name-tooltip
 {
     display: none;

theme_nin/css/style.css

@@ -1097,6 +1097,20 @@ samp {
   height: 20px;
 }
 
+.post .new-replies-available {
+    text-align: center;
+    margin-top: 8px;
+}
+
+.post .new-replies-available button {
+    font-size: 10px;
+    background-color: #B4C669;
+}
+
+.post .new-replies-available button:hover {
+    background-color: #aaa;
+}
+
 /* line 283, ../sass/_postboard.sass */
 .user-name-tooltip {
   display: none;

theme_nin/sass/_postboard.sass

@@ -298,6 +298,15 @@
             width: 20px
             height: 20px
 
+.post .new-replies-available
+    text-align: center
+    margin-top: 8px
+    button
+        font-size: 10px
+        background-color: #B4C669
+        &:hover
+            background-color: #aaa
+
 
 .user-name-tooltip
     display: none