From 44462098eff157789f6e350b433df8cd24ca8d10 Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Wed, 4 Mar 2015 04:26:20 +0500 Subject: [PATCH] various fixes around follow button --- css/style.css | 9 ++++--- js/interface_common.js | 54 ++++++++++++++++++++++++++++++++-------- js/twister_following.js | 25 +++++++++++++------ theme_calm/css/style.css | 9 ++++--- theme_nin/css/style.css | 13 ++++++---- 5 files changed, 79 insertions(+), 31 deletions(-) diff --git a/css/style.css b/css/style.css index ee88096..2721e0c 100644 --- a/css/style.css +++ b/css/style.css @@ -748,17 +748,18 @@ textarea.splited-post { .twister-user-remove:hover{ opacity: 1; } -.follow -{ + +.follow, .unfollow { background: none; border: solid 1px rgba( 0, 0, 0 ,.2 ); padding: 3px 15px; color: rgba( 0, 0, 0 ,.4 ); } -.follow:hover -{ + +.follow:hover, .unfollow:hover { color: rgba( 0, 0, 0 ,.7 ); } + .refresh-users, .view-all-users { diff --git a/js/interface_common.js b/js/interface_common.js index 395adba..9a8b379 100644 --- a/js/interface_common.js +++ b/js/interface_common.js @@ -549,18 +549,49 @@ var replyInitPopup = function(e, post) } //abre o menu dropdown de configurações -var dropDownMenu = function( e ) -{ - var $configMenu = $( ".config-menu" ); - $configMenu.slideToggle( "fast" ); - e.stopPropagation(); +function dropDownMenu() { + $( ".config-menu" ).slideToggle( "fast" ); } //fecha o config menu ao clicar em qualquer lugar da tela -var closeThis = function() -{ +function closeThis() { $( this ).slideUp( "fast" ); -}; +} + +function toggleFollowButton(button, followingUser) { + if (!button || !followingUser) + return; + + button + .removeClass("follow") + .addClass("unfollow") + .unbind("click") + .bind("click", + (function(e) { + unfollow(this.toString(), + (function() { + this + .removeClass("unfollow") + .addClass("follow") + .unbind("click") + .bind("click", userClickFollow); + + if ($.Options.getTheme() === 'nin') { + this.attr('title', polyglot.t('Follow')); + } else { + this.text(polyglot.t('Follow')); + } + }).bind($(e.target)) + ); + }).bind(followingUser) + ); + + if ($.Options.getTheme() === 'nin') { + button.attr('title', polyglot.t('Unfollow')); + } else { + button.text(polyglot.t('Unfollow')); + } +} var postExpandFunction = function( e, postLi ) { @@ -1435,7 +1466,8 @@ function initInterfaceCommon() { $('.mark-all-as-read').css('display', 'none'); }); - $(".prompt-close").on('click', function(event){ + $(".prompt-close").on('click', function(e){ + e.stopPropagation(); closePrompt(); }); @@ -1456,8 +1488,8 @@ function initInterfaceCommon() { }); $( ".post-reply" ).bind( "click", postReplyClick ); $( ".post-propagate" ).bind( "click", reTwistPopup ); - $( ".userMenu-config-dropdown" ).bind( "click", dropDownMenu ); - $( ".config-menu" ).clickoutside( closeThis ); + $( ".userMenu-config" ).clickoutside( closeThis.bind($( ".config-menu" )) ); + $( ".userMenu-config-dropdown" ).click( dropDownMenu ); $( ".module.post" ).bind( "click", function(e) { if(e.button === 0 && window.getSelection() == 0) postExpandFunction(e,$(this)); }); diff --git a/js/twister_following.js b/js/twister_following.js index 5d42604..e355b25 100644 --- a/js/twister_following.js +++ b/js/twister_following.js @@ -353,6 +353,9 @@ function updateFollowing(cbFunc, cbArg) { function follow(user, publicFollow, cbFunc, cbArg) { if( followingUsers.indexOf(user) < 0 ) { followingUsers.push(user); + twisterFollowingO.update(user); + $(".following-count").text(followingUsers.length-1); + setTimeout('requestTimelineUpdate("latest",postsPerRefresh,["'+user+'"],promotedPostsOnly)', 1000); } if( publicFollow == undefined || publicFollow ) _isFollowPublic[user] = true; @@ -367,6 +370,7 @@ function unfollow(user, cbFunc, cbArg) { if( i >= 0 ) { followingUsers.splice(i,1); twisterFollowingO.update(user); + $(".following-count").text(followingUsers.length-1); } delete _isFollowPublic[user]; saveFollowing(); @@ -570,8 +574,7 @@ function processSuggestion(arg, suggestion, followedBy) { function closeSearchDialog() { - var $this = $(".userMenu-search-field");//$( this ); - $( this ).siblings().slideUp( "fast" ); + $(".userMenu-search-field").siblings().slideUp( "fast" ); removeUsersFromDhtgetQueue( _lastSearchUsersResults ); _lastSearchUsersResults = []; } @@ -654,6 +657,8 @@ function processDropdownUserResults(partialName, results){ resItem.find("a.open-profile-modal").attr("href",$.MAL.userUrl(results[i])); getAvatar(results[i],resItem.find(".mini-profile-photo")); getFullname(results[i],resItem.find(".mini-profile-name")); + if (followingUsers.indexOf(results[i]) >= 0) + toggleFollowButton(resItem.find(".follow"), results[i]); resItem.appendTo(typeaheadAccounts); } @@ -677,11 +682,12 @@ function newFollowingConfigModal(username) { function userClickFollow(e) { e.stopPropagation(); e.preventDefault(); + $(e.target).addClass("followingInitiator"); var $this = $(this); var $userInfo = $this.closest("[data-screen-name]"); var username = $userInfo.attr("data-screen-name"); - + if(!defaultScreenName) { alert(polyglot.t("You have to log in to follow users.")); @@ -702,7 +708,7 @@ function initUserSearch() { var $userSearchField = $( ".userMenu-search-field" ); $userSearchField.keyup( userSearchKeypress ); $userSearchField.bind( "click", userSearchKeypress ); - $userSearchField.clickoutside( closeSearchDialog ); + $(".userMenu-search").clickoutside( closeSearchDialog ); $("button.follow").bind( "click", userClickFollow ); @@ -710,7 +716,7 @@ function initUserSearch() { $(".following-config-method-buttons .public-following").click( function() { closePrompt(); // delay reload so dhtput may do it's job - window.setTimeout("loadModalFromHash();",500); + window.setTimeout("loadModalFromHash();",500); }); } @@ -754,9 +760,14 @@ function setFollowingMethod(e) { if( !$this.hasClass("private") ) { publicFollow = true; } - //console.log("start following @" +username +" by method "+publicFollow); - follow(username, publicFollow); + follow(username, publicFollow, + (function() { + var followingInitiator = $(".followingInitiator"); + if (followingInitiator) + toggleFollowButton(followingInitiator, this); + }).bind(username) + ); } diff --git a/theme_calm/css/style.css b/theme_calm/css/style.css index 4546742..2aa9d5e 100644 --- a/theme_calm/css/style.css +++ b/theme_calm/css/style.css @@ -920,17 +920,18 @@ textarea.splited-post { opacity: 1; text-decoration: none; } -.follow -{ + +.follow, .unfollow { background: none; border: solid 1px rgba( 0, 0, 0 ,.2 ); padding: 3px 15px; color: rgba( 0, 0, 0 ,.4 ); } -.follow:hover -{ + +.follow:hover, .unfollow:hover { color: rgba( 0, 0, 0 ,.7 ); } + .refresh-users, .view-all-users { diff --git a/theme_nin/css/style.css b/theme_nin/css/style.css index bca39aa..3984080 100644 --- a/theme_nin/css/style.css +++ b/theme_nin/css/style.css @@ -121,13 +121,13 @@ /* '' */ /* line 120, ../sass/_fonts.sass */ -.icon-plus:before, .mini-profile-actions span:before, ul.userMenu-search-profiles button:before { +.icon-plus:before, .mini-profile-actions span:before, ul.userMenu-search-profiles button.follow:before { content: ""; } /* '' */ /* line 125, ../sass/_fonts.sass */ -.icon-minus:before { +.icon-minus:before, ul.userMenu-search-profiles button.unfollow:before { content: ""; } @@ -1855,10 +1855,13 @@ ul.userMenu-search-profiles .mini-profile-info { float: none; } /* line 119, ../sass/style.sass */ -ul.userMenu-search-profiles button, ul.userMenu-search-profiles .mini-profile-actions span, .mini-profile-actions ul.userMenu-search-profiles span { +ul.userMenu-search-profiles button.unfollow, ul.userMenu-search-profiles .mini-profile-actions span, .mini-profile-actions ul.userMenu-search-profiles span { background-color: #66686B; padding: 3px; } +ul.userMenu-search-profiles button { + padding: 3px; +} /* line 124, ../sass/style.sass */ ul.userMenu-search-profiles button:after, ul.userMenu-search-profiles .mini-profile-actions span:after, .mini-profile-actions ul.userMenu-search-profiles span:after { content: ""; @@ -2316,14 +2319,14 @@ textarea.splited-post { } /* line 491, ../sass/style.sass */ -button.follow, .mini-profile-actions span.follow { +button.follow, .mini-profile-actions span.follow, button.unfollow, .mini-profile-actions span.unfollow { position: absolute; bottom: 10px; right: 10px; background: #B4C669; } /* line 496, ../sass/style.sass */ -button.follow:hover, .mini-profile-actions span.follow:hover { +button.follow:hover, .mini-profile-actions span.follow:hover, button.unfollow, .mini-profile-actions span.unfollow { background: #aaa; }