Merge pull request #155 from erqan/conversations

changed conversation listing method...

css/profile.css

@@ -198,12 +198,13 @@
     display: none;
 }
 .bitmessage-ctc, .tox-ctc {
+    position: absolute;
     height: 30px;
     width: 30px;
     display: inline-block;
     margin-right: 5px;
     border: 1px solid #d6d8dc;
-    background: #e3e5ea url(img/clipboard.png) center no-repeat;
+    background: #e3e5ea;
     opacity: .8;
     -webkit-border-radius: 0 5px 5px 0;
     -moz-border-radius: 0 5px 5px 0;
@@ -213,15 +214,21 @@
     -ms-transition: all 20ms;
     -o-transition: all 20ms;
     transition: all 20ms;
+    font-size: 18px;
 }
 .bitmessage-ctc:hover, .tox-ctc:hover {
     background-color: #f0f2f8;
     opacity: 1;
     cursor: pointer;
+    text-decoration: none;
 }
 .bitmessage-ctc:active, .tox-ctc:active {
     background-color: #edfced;
 }
+.bitmessage-ctc:after,
+.tox-ctc:after {
+    content: '📋';
+}
 .profile-modal .profile-tox, .profile-modal .profile-bitmessage {
     display: inline-block;
     width: 70px;

css/style.css

@@ -9,6 +9,11 @@
     src: url("OpenSans-Bold.ttf");
     font-weight: bold;
 }
+@font-face
+{
+    font-family: "Symbola";
+    src: url("Symbola.ttf");
+}
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -30,7 +35,7 @@ time, mark, audio, video, textarea
     font: inherit;
     vertical-align: baseline;
     box-sizing: border-box;
-    font-family: 'Open Sans', sans-serif;
+    font-family: 'Open Sans', sans-serif, Symbola;
 }
 textarea, input
 {
@@ -559,6 +564,10 @@ button.disabled:hover
     width: 445px;
     display: block;
     transition: all .3s linear;
+    -webkit-transition: height 0.3s linear;
+    -moz-transition: height 0.3s linear;
+    -o-transition: height 0.3s linear;
+    -ms-transition: height 0.3s linear;
     height: 28px;
     border-radius: 3px;
     border: solid 1px rgba(0, 0, 0, .3 );
@@ -585,28 +594,6 @@ button.disabled:hover
 textarea.splited-post {
     box-shadow: none!important;
     height: 28px;
-    transition: height 1s linear;
-    -webkit-transition: height 0.3s linear;
-    -moz-transition: height 0.3s linear;
-    -o-transition: height 0.3s linear;
-    -ms-transition: height 0.3s linear;
-    animation-name: splited-part;
-    animation-duration: 0.5s;
-    animation-easing-function: linear;
-    -webkit-animation-name: sent-part;
-    -webkit-animation-duration: 0.5s;
-    -webkit-animation-easing-function: linear;
-    -moz-animation-name: sent-part;
-    -moz-animation-duration: 0.5s;
-    -moz-animation-easing-function: linear;
-}
-@keyframes splited-part {
-    from {
-        height: 0px;
-    }
-    to {
-        height: 80px;
-    }
 }
 .splited-post-counter {
     color: rgba(0, 0, 0, 0.3);
@@ -644,6 +631,15 @@ textarea.splited-post {
 {
     color: #ff0000;
 }
+.post .show-more {
+    font-size: 13px;
+    font-weight: bold;
+    margin-left: 60px;
+    color: rgba(0, 0, 0, 0.5);
+}
+.post .show-more:before {
+    content: '💭';
+}
 /***********************************
 ********************* WHO TO FOLLOW
 ***********************************/
@@ -1121,6 +1117,10 @@ ol.toptrends-list {
 {
     display: inline-block;
 }
+.post .sub-replies {
+    border-left: solid 3px #E34F42;
+    margin-left: 2px;
+}
 /***********************************
 ******** LOGIN AND NETWORK PAGES ***
 ***********************************/
@@ -1473,6 +1473,31 @@ ol.toptrends-list {
     margin-left: 0;
 }
 /*************************************
+****************** CONVERSATION MODAL
+**************************************/
+.conversation-modal .modal-wrapper
+{
+    position: absolute;
+    width: 560px;
+    height: 80%;
+    top: 10%;
+    margin: 0 0 0 -330px;
+    overflow: hidden;
+}
+.conversation-modal .modal-content
+{
+    overflow-y: auto;
+    height: 90%;
+}
+.conversation-modal .modal-buttons
+{
+    display: none;
+}
+.conversation-modal .postboard
+{
+    margin-left: 0;
+}
+/*************************************
 ****************** FOLLOWING MODAL
 **************************************/
 .following-modal .modal-wrapper

following.html

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

home.html

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

js/interface_common.js

@@ -320,6 +320,37 @@ function openWhoToFollowModal(e) {
     $( "." + whoToFollowModalClass + " h3" ).text( polyglot.t("Who to Follow") );
 }
 
+function newConversationModal(postLi) {
+    var hashtagModalContent = $( "#hashtag-modal-template" ).children().clone(true);
+    hashtagModalContent.find( ".postboard-news").click(function (){
+        $(this).hide();
+        displayHashtagPending($(".conversation-modal .postboard-posts"));
+    });
+
+    getTopPostOfConversation(postLi, null, hashtagModalContent.find(".postboard-posts"));
+
+    return hashtagModalContent;
+}
+
+function openConversationModal(e)
+{
+    e.stopPropagation();
+    e.preventDefault();
+
+    var $this = $( this );
+    var postLi = $this.parents(".module.post.original.open").find('.module.post.original');
+
+    var conversationModalClass = "conversation-modal";
+    openModal( conversationModalClass );
+    //$( "." + threadingModalClass ).attr("data-resource","hashtag");
+
+    var hashtagModalContent = newConversationModal( postLi );
+    hashtagModalContent.appendTo("." + conversationModalClass + " .modal-content");
+
+    //título do modal
+    $( "." + conversationModalClass + " h3" ).text( polyglot.t('conversation_title', {'username': postLi.find('.post-data').attr('data-screen-name')}) );
+}
+
 //
 // Post actions, submit, count characters
 // --------------------------------------
@@ -555,7 +586,7 @@ function replyTextKeypress(e) {
             var $tas = tweetForm.find("textarea");
             splitedPostsCount = $tas.length;
             if ($this.hasClass('splited-post'))
-                $this.css('height', '24px');
+                $this.css('height', '28px');
 
             var reply_to = $this.attr('data-reply-to');
             for (var i = 0; i < $tas.length; i++) {
@@ -1279,6 +1310,7 @@ function initInterfaceCommon() {
     $( ".post-area-new" ).clickoutside( unfocusThis );
     $( ".post-submit").click( postSubmit );
     $( ".modal-propagate").click( retweetSubmit );
+    $( ".expanded-content .show-more").bind('click', openConversationModal);
 
     if ($.Options.getUnicodeConversionOpt() === "disable")
         $( ".undo-unicode" ).click( undoLastUnicode ).css("display", "none");
@@ -1295,4 +1327,11 @@ function initInterfaceCommon() {
 
     $( ".who-to-follow .refresh-users" ).bind( "click", refreshWhoToFollow );
     $( ".who-to-follow .view-all-users" ).bind( "click", openWhoToFollowModal );
+
+    $('.tox-ctc').on('click', function(){
+        window.prompt(polyglot.t('copy_to_clipboard'), $(this).attr('data'))
+    });
+    $('.bitmessage-ctc').on('click', function(){
+        window.prompt(polyglot.t('copy_to_clipboard'), $(this).attr('data'))
+    });
 }

js/interface_localization.js

@@ -227,7 +227,10 @@ if(preferredLanguage == "en"){
       "Show conversation": "Show conversation",
       "Mark all as read": "Mark all as read",
       "show_more_count": "%{count} more...",
-      "hide": "hide"
+      "hide": "hide",
+      "Show more in this conversation...": "Show more in this conversation...",
+      "conversation_title": "Conversation of @%{username}",
+      "copy_to_clipboard": "Press Ctrl/Cmd+C to copy then Enter to close"
     };
 }
 if(preferredLanguage == "es"){
@@ -1873,7 +1876,10 @@ if(preferredLanguage == "tr"){
       "Show conversation": "Sohbeti göster",
       "Mark all as read": "hepsini okundu olarak işaretle",
       "show_more_count": "%{count} tane daha...",
-      "hide": "gizle"
+      "hide": "gizle",
+      "Show more in this conversation...": "Sohbetin tamamını göster...",
+      "conversation_title": "@%{username} kullanıcısının bir sohbeti",
+      "copy_to_clipboard": "Kopyalamak için Ctrl/Cmd+C tuşlarına, kapatmak için Enter tuşuna basınız"
     };
 }
 

js/mobile_abstract.js

@@ -365,6 +365,29 @@ var MAL = function()
          }
     }
 
+    this.reqRepAfterCB = function(postLi, postsFromJson) {
+        if ($.hasOwnProperty("mobile")) {
+            for( var i = 0; i < postsFromJson.length; i++) {
+                var newStreamPost = postToElem(postsFromJson[i], "related");
+                newStreamPost.hide();
+                postLi.after(newStreamPost);
+                newStreamPost.slideDown("fast");
+            }
+        } else {
+            var $replist = $('<ol class="sub-replies"></ol>');
+            var $newli = $('<li class="post open related"></li>');
+            postLi.after($newli);
+            $newli.append($replist);
+            for (var i = 0; i < postsFromJson.length; i++) {
+                var newStreamPost = postToElem(postsFromJson[i], "related");
+                newStreamPost.hide();
+                $replist.prepend(newStreamPost);
+                newStreamPost.slideDown("fast");
+                requestRepliesAfter(newStreamPost);
+            }
+        }
+        $.MAL.relatedPostLoaded();
+    };
 }
 
 jQuery.MAL = new MAL;

js/twister_actions.js

@@ -10,7 +10,8 @@
 // global variables
 
 var postsPerRefresh = 10;
-var maxExpandPost = 20;
+var maxExpandPost = 8;
+var maxExpandPostTop = 4;
 var _hashtagProcessedMap = {};
 var _hashtagPendingPosts = [];
 var autoUpdateHashtag = false;
@@ -19,7 +20,7 @@ var autoUpdateHashtag = false;
 
 function requestRepliedBefore(postLi)
 {
-    if(postLi.siblings().length >= maxExpandPost)
+    if(postLi.siblings().length >= maxExpandPostTop)
         return;
 
     var originalPost = postLi.find(".post-data");
@@ -41,7 +42,7 @@ function requestRepliedBefore(postLi)
 
 function requestRepliesAfter(postLi)
 {
-    if(postLi.siblings().length >= maxExpandPost)
+    if(postLi.parents('.module.post.original.open').find('.post.related').length >= maxExpandPost)
         return;
 
     var originalPost = postLi.find(".post-data");
@@ -49,16 +50,56 @@ function requestRepliesAfter(postLi)
     var original_k = originalPost.attr('data-id');
 
     if( original_n != undefined && original_k != undefined ) {
-        dhtget( original_n, "replies" + original_k, "m",
-               function(postLi, postsFromJson) {
-                   for( var i = 0; i < postsFromJson.length; i++) {
-                       var newStreamPost = postToElem(postsFromJson[i], "related");
-                       newStreamPost.hide();
-                       postLi.after(newStreamPost);
-                       newStreamPost.slideDown("fast");
-                   }
-                   $.MAL.relatedPostLoaded();
-               }, postLi);
+        dhtget( original_n, "replies" + original_k, "m", $.MAL.reqRepAfterCB, postLi);
+    }
+}
+
+function getTopPostOfConversation(postLi, post, postboard) {
+    var reply_n;
+    var reply_k;
+
+    if (post && typeof(post) !== 'undefined' && "reply" in post["userpost"]) {
+        reply_k = post["userpost"]["reply"]["k"];
+        reply_n = post["userpost"]["reply"]["n"];
+    } else if (postLi && typeof(postLi) !== 'undefined') {
+        var originalPost = postLi.find(".post-data");
+        reply_n = originalPost.attr('data-replied-to-screen-name');
+        reply_k = originalPost.attr('data-replied-to-id');
+    }
+
+    if( reply_n != undefined && reply_k != undefined ) {
+        dhtget( reply_n, "post" + reply_k, "s",
+            function(postLi, postFromJson) {
+                getTopPostOfConversation(null, postFromJson, postboard);
+            }, postLi);
+    } else {
+        var newStreamPost;
+        if (post)
+            newStreamPost = postToElem(post, "related");
+        else {
+            newStreamPost = postLi.clone(true);
+            newStreamPost.removeClass('original');
+            newStreamPost.addClass('related');
+            newStreamPost.find('.expanded-content').hide();
+            newStreamPost.find('.show-more').hide();
+        }
+        requestRepliesAfterAll(newStreamPost);
+        newStreamPost.find('.post-expand').remove();
+        newStreamPost.unbind('click');
+        newStreamPost.hide();
+        postboard.append(newStreamPost);
+        newStreamPost.slideDown("fast");
+    }
+}
+
+function requestRepliesAfterAll(postLi)
+{
+    var originalPost = postLi.find(".post-data");
+    var original_n = originalPost.attr('data-screen-name');
+    var original_k = originalPost.attr('data-id');
+
+    if( original_n != undefined && original_k != undefined ) {
+        dhtget( original_n, "replies" + original_k, "m", $.MAL.reqRepAfterCB, postLi);
     }
 }
 

theme_calm/css/profile.css

@@ -262,6 +262,7 @@
     display: none;
 }
 .bitmessage-ctc, .tox-ctc {
+    position: absolute;
     height: 30px;
     width: 30px;
     display: inline-block;
@@ -277,15 +278,21 @@
     -ms-transition: all 20ms;
     -o-transition: all 20ms;
     transition: all 20ms;
+    font-size: 18px;
 }
 .bitmessage-ctc:hover, .tox-ctc:hover {
     background-color: #f0f2f8;
     opacity: 1;
     cursor: pointer;
+    text-decoration: none;
 }
 .bitmessage-ctc:active, .tox-ctc:active {
     background-color: #edfced;
 }
+.bitmessage-ctc:after,
+.tox-ctc:after {
+    content: '📋';
+}
 .profile-modal .profile-tox, .profile-modal .profile-bitmessage {
     display: inline-block;
     width: 70px;
@@ -345,11 +352,17 @@ button.follow:hover {
 {
     margin-left: 0;
     padding: 5px 0 5px 0;
-    height: 100%;
+    height: 60%;
 }
 .profile-modal .postboard h2 {
     width: auto;
 }
+.profile-modal .postboard-posts
+{
+    display: block;
+    height: 90%;
+    overflow: auto;
+}
 .profile-modal .postboard h2 span {
     font: 18px/40px 'Open Sans Condensed', sans-serif;
     padding-left: 10px;

theme_calm/css/style.css

@@ -20,6 +20,11 @@
     font-family: "Open Sans Condensed";
     src: url("OpenSansCondensed300.ttf");
 }
+@font-face
+{
+    font-family: "Symbola";
+    src: url("/css/Symbola.ttf");
+}
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -41,7 +46,7 @@ time, mark, audio, video, textarea
     font: inherit;
     vertical-align: baseline;
     box-sizing: border-box;
-    font-family: 'Open Sans', sans-serif;
+    font-family: 'Open Sans', sans-serif, Symbola;
 }
 textarea, input
 {
@@ -92,6 +97,10 @@ h3
     font-size: 14px;
     color: rgba( 0, 0, 0, .5 );
 }
+.isFollowing:after {
+    color: #1a1;
+    content: '\2714';
+}
 /*************************************
 **************************** BUTTONS **
 **************************************/
@@ -639,6 +648,28 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
 {
     text-decoration: none;
 }
+.who-follow
+{
+    height: auto;
+    background-color: rgba(69, 71, 77, 0.1);
+    overflow: hidden;
+    font-size: 12px;
+}
+.show-more-followers {
+    color: #f11;
+    font-weight: bold;
+    cursor: pointer;
+    float: right;
+}
+.mini-follower-link
+{
+    display: inline-block;
+    margin-right: 10px;
+}
+.mini-follower-link:before
+{
+    content: " \2027";
+}
 /***********************************
 ********************* POST AREA ****
 ***********************************/
@@ -651,6 +682,10 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     width: 430px;
     display: block;
     transition: all .3s linear;
+    -webkit-transition: height 0.3s linear;
+    -moz-transition: height 0.3s linear;
+    -o-transition: height 0.3s linear;
+    -ms-transition: height 0.3s linear;
     height: 28px;
     border-radius: 3px;
     border: solid 1px rgba(0, 0, 0, .3 );
@@ -674,6 +709,17 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     border: solid 1px rgba( 118, 145, 206, .8 );
     box-shadow: 0 0 10px rgba(0, 0, 0, .3 );
 }
+textarea.splited-post {
+    box-shadow: none!important;
+    height: 28px;
+}
+.splited-post-counter {
+    color: rgba(0, 0, 0, 0.3);
+    font-weight: bold;
+}
+.splited-post-counter:before {
+    content: '\2026';
+}
 .post-area-extras
 {
     overflow: hidden;
@@ -747,6 +793,15 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
 {
     color: #ff0000;
 }
+.post .show-more {
+    font-size: 13px;
+    font-weight: bold;
+    margin-left: 60px;
+    color: rgba(0, 0, 0, 0.5);
+}
+.post .show-more:before {
+    content: '💭';
+}
 /***********************************
 ********************* WHO TO FOLLOW
 ***********************************/
@@ -1394,6 +1449,10 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
 {
     display: inline-block;
 }
+.post .sub-replies {
+    border-left: solid 3px #43464d;
+    margin-left: 2px;
+}
 /***********************************
 ******** LOGIN AND NETWORK PAGES ***
 ***********************************/
@@ -1606,7 +1665,8 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     color: #fff;
     background: rgba( 0, 0, 0, .1 );
 }
-.modal-back {
+.modal-back,
+.mark-all-as-read {
     position: absolute;
     right: 30px;
     top: 0;
@@ -1618,8 +1678,8 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     transition: all .1s linear;
     display: none;  
 }
-.modal-back:hover
-{
+.modal-back:hover,
+.mark-all-as-read:hover {
     color: #fff;
     background: rgba( 0, 0, 0, .1 );
 }
@@ -1760,6 +1820,12 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
 .direct-messages-thread li.message:hover {
     background: none;
 }
+.mark-all-as-read {
+    right: 60px;
+}
+.mark-all-as-read:before {
+    content: '\2714';
+}
 /*************************************
 ****************** NEW USER MODAL
 **************************************/
@@ -1822,6 +1888,31 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     padding-left: 10px;
 }
 /*************************************
+****************** CONVERSATION MODAL
+**************************************/
+.conversation-modal .modal-wrapper
+{
+    position: absolute;
+    width: 560px;
+    height: 80%;
+    top: 10%;
+    margin: 0 0 0 -330px;
+    overflow: hidden;
+}
+.conversation-modal .modal-content
+{
+    overflow-y: auto;
+    height: 90%;
+}
+.conversation-modal .modal-buttons
+{
+    display: none;
+}
+.conversation-modal .postboard
+{
+    margin-left: 0;
+}
+/*************************************
 ****************** FOLLOWING MODAL
 **************************************/
 .following-modal .modal-wrapper
@@ -1834,6 +1925,7 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
 .following-modal .modal-content
 {
     padding: 15px;
+    height: 400px;
     overflow-y: auto;
 }
 .following-modal .modal-buttons
@@ -1861,6 +1953,56 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     text-decoration: underline;
 }
 /*************************************
+******************* WHO TO FOLLOW MODAL
+**************************************/
+.who-to-follow-modal .modal-wrapper
+{
+    width: 560px;
+    height: 470px;
+    margin: -200px 0 0 -280px;
+    overflow-x: hidden;
+}
+.who-to-follow-modal .modal-content
+{
+    padding: 15px;
+    height: 400px;
+    overflow-y: auto;
+}
+.who-to-follow-modal .modal-buttons
+{
+    display: none;
+}
+.who-to-follow-modal ol
+{
+    margin: 5px;
+}
+.who-to-follow-modal .open-profile-modal:hover
+{
+    text-decoration: none;
+}
+.who-to-follow-modal .open-profile-modal span
+{
+    vertical-align: middle;
+}
+.who-to-follow-modal .open-profile-modal span:hover
+{
+    text-decoration: underline;
+}
+.who-to-follow-modal .follow
+{
+    float: right;
+    margin: -30px 10px 0 10px;
+}
+.who-to-follow-modal .twister-user-info span
+{
+    vertical-align: bottom;
+}
+.who-to-follow-modal .bio
+{
+    font-size: 12px;
+    color: rgba( 0, 0, 0, .6 );
+}
+/*************************************
 ****************** LOADER ************
 **************************************/
 .postboard-loading