diff --git a/css/style.css b/css/style.css index 75bcefd..7614f17 100644 --- a/css/style.css +++ b/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; diff --git a/home.html b/home.html index d11f9f5..6dc2e4d 100644 --- a/home.html +++ b/home.html @@ -392,6 +392,7 @@ Show more in this conversation... +
diff --git a/js/interface_common.js b/js/interface_common.js index 01b0049..755d989 100644 --- a/js/interface_common.js +++ b/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) diff --git a/js/twister_actions.js b/js/twister_actions.js index 5010f18..6388898 100644 --- a/js/twister_actions.js +++ b/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 = $('
    1. ') // 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()); diff --git a/theme_calm/css/style.css b/theme_calm/css/style.css index 4a428e3..88e1303 100644 --- a/theme_calm/css/style.css +++ b/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; diff --git a/theme_nin/css/style.css b/theme_nin/css/style.css index 908613a..0a5b8f0 100644 --- a/theme_nin/css/style.css +++ b/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; diff --git a/theme_nin/sass/_postboard.sass b/theme_nin/sass/_postboard.sass index 78d24ed..b06bd83 100755 --- a/theme_nin/sass/_postboard.sass +++ b/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