diff --git a/css/Symbola.ttf b/css/Symbola.ttf new file mode 100644 index 0000000..e180c0f Binary files /dev/null and b/css/Symbola.ttf differ diff --git a/css/profile.css b/css/profile.css index 8433936..0d8f27e 100644 --- a/css/profile.css +++ b/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; diff --git a/css/style.css b/css/style.css index 03a83a4..53781d6 100644 --- a/css/style.css +++ b/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 diff --git a/following.html b/following.html index ecf4c60..1c8d6f9 100644 --- a/following.html +++ b/following.html @@ -234,6 +234,7 @@ + Show more in this conversation... diff --git a/home.html b/home.html index 46ff3e9..9b14a7b 100644 --- a/home.html +++ b/home.html @@ -261,6 +261,7 @@ + Show more in this conversation... diff --git a/js/interface_common.js b/js/interface_common.js index b58914a..56ad0d9 100644 --- a/js/interface_common.js +++ b/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')) + }); } diff --git a/js/interface_localization.js b/js/interface_localization.js index c9bc68d..294ffcc 100644 --- a/js/interface_localization.js +++ b/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" }; } diff --git a/js/mobile_abstract.js b/js/mobile_abstract.js index 2575e41..87ddffe 100644 --- a/js/mobile_abstract.js +++ b/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 = $('
    '); + var $newli = $('
  1. '); + 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; diff --git a/js/twister_actions.js b/js/twister_actions.js index 6947e85..2e59005 100644 --- a/js/twister_actions.js +++ b/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); } } diff --git a/theme_calm/css/profile.css b/theme_calm/css/profile.css index 8416c81..e4db016 100644 --- a/theme_calm/css/profile.css +++ b/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; diff --git a/theme_calm/css/style.css b/theme_calm/css/style.css index 8b9f17a..d952d2d 100644 --- a/theme_calm/css/style.css +++ b/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