From 9281f8f6a78055cc7c407219c2edf9773b1d9c6e Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Sat, 7 Mar 2015 07:16:45 +0500 Subject: [PATCH] fix of follow-unfollow button behaviour, multiple fixes and improvements of UI glitches, adding of missing players --- css/profile.css | 78 ++++++++++------------- css/style.css | 116 ++++++++++++++++++++++++++++------- following.html | 15 +++-- home.html | 11 ++-- js/interface_common.js | 78 +++++++++++++---------- js/twister_following.js | 27 ++------ network.html | 2 + options.html | 4 +- theme_calm/css/profile.css | 88 ++++++++------------------ theme_calm/css/style.css | 71 +++++++++++++++------ theme_nin/css/style.css | 34 +++++++++- theme_nin/js/theme_option.js | 4 +- theme_nin/sass/_profile.sass | 4 +- theme_nin/sass/style.sass | 12 +++- 14 files changed, 322 insertions(+), 222 deletions(-) diff --git a/css/profile.css b/css/profile.css index 4ddca92..2b030de 100644 --- a/css/profile.css +++ b/css/profile.css @@ -57,49 +57,37 @@ { color: #fff; } -.profile-card .direct-messages, -.profile-card .direct-messages-with-user, -.profile-card .mentions-from-user, -.profile-card .follow, -.profile-card .profileUnfollow + +.profile-card-buttons { - display: block; position: absolute; - bottom: 20px; - right: 125px; - padding: 10px; + bottom: 30px; + right: 0; +} + +.profile-card-buttons .direct-messages-with-user, +.profile-card-buttons .mentions-from-user, +.profile-card-buttons .follow, +.profile-card-buttons .unfollow +{ + display: inline; + padding: 4px 12px; font-size: 12px; - width: 110px; + width: auto; text-align: center; color: rgba( 0, 0, 0, .7 ); background: rgba( 0, 0, 0, .1 ); border: none; transition: all .2s linear; } -.profile-card .follow, -.profile-card .profileUnfollow -{ - right: 240px; -} -.profile-card .mentions-from-user -{ - right: 10px; -} -.profile-card .profileUnfollow -{ - background-color: rgba( 0, 0, 0, .3 ); -} -.profile-card .direct-messages:hover, -.profile-card .direct-messages-with-user:hover, -.profile-card .mentions-from-user:hover, -.profile-card .follow:hover -{ - background: rgba( 0, 0, 0, .3 ); -} -.profile-card .profileUnfollow:hover + +.profile-card-buttons .direct-messages-with-user:hover, +.profile-card-buttons .mentions-from-user:hover { - background: rgba( 0, 0, 0, .1 ); + color: #fff; + background: #45474d; } + .profile-card.forEdition { margin: 0 auto; @@ -175,24 +163,27 @@ padding: 10px; text-align: right; } + /************************************* -****************** PROFILE MODAL -************************************* +************ PROFILE MODAL *********** +**************************************/ + .profile-modal .modal-wrapper { width: 580px; border-radius: 5px; overflow: hidden; position: absolute; - top:10%; - height: 80%; + top:5%; + height: 90%; margin-left: -290px; -}*/ +} .profile-modal .modal-content { padding: 3px; height: 100%; + overflow-y: hidden; } #msngrswr { display: none; @@ -274,7 +265,7 @@ { margin-left: 0; padding: 5px 0 5px 0; - height: 75%; + height: 73%; } .profile-modal .postboard h2 { @@ -314,20 +305,13 @@ height: 200px; } */ -.profile-modal .direct-messages, -.profile-modal .direct-messages-with-user, -.profile-modal .mentions-from-user, -.profile-modal .follow, -.profile-modal .profileUnfollow -{ - bottom: 10px; -} h1.profile-name { display: inline; } + h2.profile-screen-name { - display: inline; + display: block; } .profile-modal .modal-buttons { diff --git a/css/style.css b/css/style.css index c493d5c..6b5453f 100644 --- a/css/style.css +++ b/css/style.css @@ -90,9 +90,11 @@ h3 color: #1a1; content: '\2714'; } + /************************************* -**************************** BUTTONS ** +************** BUTTONS *************** **************************************/ + button { background: #45474d; @@ -101,18 +103,51 @@ button padding: 5px 10px; cursor: pointer; } + button:hover { color: #fff; } + button.disabled { opacity: .4; } + button.disabled:hover { color: rgba( 255, 255, 255, .8 ); } + +button.follow, button.unfollow, .following-list button.private { + color: rgba( 0, 0, 0, .4 ); + background: none; + border: solid 1px rgba( 0, 0, 0, .2 ); + padding: 3px 15px; +} + +.following-list .public-following { + padding: 4px 16px; +} + +.following-list .public-following:hover { + color: rgba( 0, 0, 0, .4 ); + background: none; + border: solid 1px rgba( 0, 0, 0, .2 ); + padding: 3px 15px; +} + +button.follow:hover, button.unfollow:hover, .following-list button.private:hover { + color: #fff; + background: #45474d; +} + +.follow-suggestions .follow, .follow-suggestions .unfollow { + display: block; + position: relative; + left: 50%; +} + /************************************* **************************** MENU ***** **************************************/ @@ -356,12 +391,7 @@ button.disabled:hover .userMenu-search-sugestions a:hover, .userMenu-search-profiles li:hover a { - background: #45474d; - color: #fff; -} -.userMenu-search-profiles li:hover span -{ - color: #fff; + background: #fefef1; } .userMenu-search-profiles button { @@ -749,17 +779,6 @@ textarea.splited-post { opacity: 1; } -.follow, .unfollow { - background: none; - border: solid 1px rgba( 0, 0, 0 ,.2 ); - padding: 3px 15px; - color: rgba( 0, 0, 0 ,.4 ); -} - -.follow:hover, .unfollow:hover { - color: rgba( 0, 0, 0 ,.7 ); -} - .refresh-users, .view-all-users { @@ -885,7 +904,7 @@ ol.toptrends-list { .post:hover, .post .post { - background: #ececed; + background: #fefef1; } .post:hover { @@ -1564,9 +1583,13 @@ ol.toptrends-list { } /************************************* -*************** FOLLOWING-CONFIG PROMPT +****** FOLLOWING-CONFIG PROMPT ******* **************************************/ +.following-config-modal +{ + margin-top: -80px; +} .following-config-modal .modal-content { padding: 10px; @@ -1581,10 +1604,8 @@ ol.toptrends-list { padding: 10px; } - - /************************************* -****************** RETWIST POSTS PROMPT +******** RETWIST POSTS PROMPT ******** **************************************/ .reTwist @@ -1798,6 +1819,55 @@ ol.toptrends-list { -ms-transition: height 1s linear; } +/* Following page */ + +.following-list +{ + overflow-y: auto; +} + +.following ol.following-list > li{ + width: 425px; + height: 150px; + margin: 5px; + padding: 8px; + float: left; + border: 0; + background: #fff; +} + +.w1200 .following ol.following-list > li{ + width: 385px; +} + +.following ol.following-list > li:hover{ + background: #fefef1; +} + +.following-list .following-config +{ + position: absolute; + left: 30%; + top: 69px; +} + +.following-list .mini-profile-actions +{ + position: absolute; + top: 0; + right: 0; + z-index: 10; +} + +.following-list .swarm-status +{ + font: 12px "Open Sans", sans-serif; + display: block; + position: absolute; + top: 110px; + right: 10px; +} + /* Autocomplite*/ .textcomplete-wrapper textarea { display: inline; diff --git a/following.html b/following.html index 6b9a212..1395473 100644 --- a/following.html +++ b/following.html @@ -176,8 +176,10 @@
  • Display retransmissions
    • - - +
    + + +
    @@ -427,8 +429,11 @@
  •  Followers
    • - +
    + + +
    @@ -514,6 +519,8 @@ - + + + diff --git a/home.html b/home.html index 00ff2f1..0ce3d57 100644 --- a/home.html +++ b/home.html @@ -457,9 +457,11 @@
  •  Followers
    • - - - + + +
    @@ -546,8 +548,9 @@ + - + diff --git a/js/interface_common.js b/js/interface_common.js index 7b108ee..37519bd 100644 --- a/js/interface_common.js +++ b/js/interface_common.js @@ -158,14 +158,14 @@ function openProfileModalWithUsernameHandler(username) //título do modal $( "."+profileModalClass + " h3" ).text( polyglot.t("users_profile", { username: username }) ); - //hed//add dinamic follow button in profile modal window - if(followingUsers.indexOf(username) != -1){ - $('.profile-card button.dinamicFollowButton').first().addClass('profileUnfollow').text(polyglot.t('Unfollow')).on('click', function(){ - unfollow(username); - window.setTimeout("loadModalFromHash();",500); - }); - } else { - $('.profile-card button.dinamicFollowButton').first().addClass('follow').text(polyglot.t('Follow')).on('click', userClickFollow ); + //setup follow button in profile modal window + var button = $('.profile-card-buttons .follow'); + if (button) { + if(followingUsers.indexOf(username) !== -1){ + toggleFollowButton(username, true, function(){ window.setTimeout("loadModalFromHash();", 500);}); + } else { + button.on('click', userClickFollow); + }; }; $(".tox-ctc").attr("title", polyglot.t("Copy to clipboard")); @@ -558,31 +558,47 @@ function closeThis() { $( this ).slideUp( "fast" ); } -function toggleFollowButton(button, followingUser) { - if (!button || !followingUser) +function toggleFollowButton(username, toggleUnfollow, bindFunc) { + if (!username) 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) - .text(polyglot.t('Follow')) - .trigger("toggleFollow"); - }).bind($(e.target)) - ); - }).bind(followingUser) - ) - .text(polyglot.t('Unfollow')) - .trigger("toggleUnfollow"); + if (toggleUnfollow) { + $("[data-screen-name='"+username+"']").find(".follow") + .removeClass("follow") + .addClass("unfollow") + .unbind("click") + .bind("click", + (function(e) { + e.stopPropagation(); + + unfollow(this.username.toString(), + (function() { + toggleFollowButton(this.username); + + if (this.bindFunc) + this.bindFunc; + }).bind({username: this.username, bindFunc: this.bindFunc}) + ); + }).bind({username: username, bindFunc: bindFunc}) + ) + .text(polyglot.t('Unfollow')) + .trigger("eventToggleUnfollow"); + } else { + $("[data-screen-name='"+username+"']").find(".unfollow") + .removeClass("unfollow") + .addClass("follow") + .unbind("click") + .bind("click", + (function(e) { + userClickFollow; + + if (this.bindFunc) + this.bindFunc; + }).bind({bindFunc: bindFunc}) + ) + .text(polyglot.t('Follow')) + .trigger("eventToggleFollow"); + } } var postExpandFunction = function( e, postLi ) diff --git a/js/twister_following.js b/js/twister_following.js index 8c3580e..453fa61 100644 --- a/js/twister_following.js +++ b/js/twister_following.js @@ -524,7 +524,6 @@ function showFollowingUsers(){ resItem.find(".mini-profile-info").attr("data-screen-name", followingUsers[i]); resItem.find(".following-screen-name").text(followingUsers[i]); resItem.find("a.open-profile-modal").attr("href",$.MAL.userUrl(followingUsers[i])); - resItem.find("a.unfollow").attr("href",$.MAL.unfollowUrl(followingUsers[i])); resItem.find("a.direct-messages-with-user").attr("href", $.MAL.dmchatUrl(followingUsers[i])); if (isPublicFollowing(followingUsers[i])) { resItem.find(".public-following").text(polyglot.t("Public")); @@ -538,11 +537,11 @@ function showFollowingUsers(){ } resItem.prependTo($followingList); + toggleFollowButton(followingUsers[i], true) } $.MAL.followingListLoaded(); } - function processSuggestion(arg, suggestion, followedBy) { var dashboard = $(".follow-suggestions"); if( suggestion ) { @@ -656,9 +655,9 @@ 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); + if (followingUsers.indexOf(results[i]) >= 0) + toggleFollowButton(results[i], true); } $.MAL.searchUserListLoaded(); @@ -682,11 +681,6 @@ function userClickFollow(e) { e.stopPropagation(); e.preventDefault(); - var followingInitiator = $(".followingInitiator"); - if (followingInitiator) - followingInitiator.removeClass("followingInitiator"); - $(e.target).addClass("followingInitiator"); - var $this = $(this); var $userInfo = $this.closest("[data-screen-name]"); var username = $userInfo.attr("data-screen-name"); @@ -723,16 +717,6 @@ function initUserSearch() { }); } -function followingListUnfollow(e) { - e.stopPropagation(); - e.preventDefault(); - - var $this = $(this); - var username = $this.closest(".mini-profile-info").attr("data-screen-name"); - - unfollow(username); -} - function followingListPublicCheckbox(e) { e.stopPropagation(); @@ -764,9 +748,7 @@ function setFollowingMethod(e) { //console.log("start following @" +username +" by method "+publicFollow); follow(username, publicFollow, (function() { - var followingInitiator = $(".followingInitiator"); - if (followingInitiator) - toggleFollowButton(followingInitiator, this); + toggleFollowButton(this, true); }).bind(username) ); } @@ -818,7 +800,6 @@ function initInterfaceFollowing() { initUserSearch(); initInterfaceDirectMsg(); - $("button.unfollow").bind( "click", followingListUnfollow ); $(".mini-profile-info .public-following").bind( "click", followingListPublicCheckbox ); $(".mentions-from-user").bind( "click", openMentionsModal ); diff --git a/network.html b/network.html index 99574e9..5bf87fe 100644 --- a/network.html +++ b/network.html @@ -225,5 +225,7 @@ + + diff --git a/options.html b/options.html index 00ade8a..468f29b 100644 --- a/options.html +++ b/options.html @@ -141,7 +141,6 @@ 0 -
    @@ -347,5 +346,8 @@
    + + + diff --git a/theme_calm/css/profile.css b/theme_calm/css/profile.css index 519a406..a23c606 100644 --- a/theme_calm/css/profile.css +++ b/theme_calm/css/profile.css @@ -61,36 +61,37 @@ top: 19%; color: #f8f8f8; } -.profile-card .direct-messages, -.profile-card .direct-messages-with-user, -.profile-card .follow, -.profile-card .profileUnfollow + +.profile-card-buttons { - display: block; position: absolute; - bottom: 20px; - right: 3px; - padding: 10px 3px; + bottom: 30px; + right: 0; +} + +.profile-card-buttons .direct-messages-with-user, +.profile-card-buttons .mentions-from-user, +.profile-card-buttons .follow, +.profile-card-buttons .unfollow +{ + display: inline; + padding: 4px 12px; font-size: 12px; - width: 120px; + width: auto; text-align: center; color: rgba( 0, 0, 0, .7 ); background: rgba( 0, 0, 0, .1 ); border: none; transition: all .2s linear; } -.profile-card .follow, -.profile-card .profileUnfollow -{ - right: 128px; -} -.profile-card .direct-messages:hover, -.profile-card .direct-messages-with-user:hover, -.profile-card .follow:hover, -.profile-card .profileUnfollow:hover + +.profile-card-buttons .direct-messages-with-user:hover, +.profile-card-buttons .mentions-from-user:hover { - background: rgba( 0, 0, 0, .3 ); + color: #fff; + background: #b2d67b; } + .profile-card.forEdition { margin: 0 auto; @@ -217,9 +218,11 @@ .secret-key-container .secret-key { color: #d2dbf1; } + /************************************* -****************** PROFILE MODAL +************ PROFILE MODAL *********** **************************************/ + .profile-modal .modal-wrapper { width: 580px; @@ -228,7 +231,7 @@ position: absolute; top:5%; height: 90%; - margin-left: -300px; + margin-left: -290px; } .profile-modal .modal-header, .profile-modal .profile-card { @@ -328,32 +331,11 @@ margin-left: -4px; border-bottom: 0; } -button.follow:hover { - background: #b2d67b; - color: #fff; -} -.profile-modal button.follow:hover { - background: #b2d67b; - color: #fff; -} -.profile-card .profileUnfollow:hover { - background: #e18882; - color: #fff; -} -.profile-modal button.direct-messages-with-user:hover { - background: #b2d67b; - color: #fff; -} -.profile-modal .separator { - height: 10px; - width: 100%; - background-color: #000; -} .profile-modal .postboard { margin-left: 0; padding: 5px 0 5px 0; - height: 60%; + height: 73%; } .profile-modal .postboard h2 { width: auto; @@ -368,17 +350,6 @@ button.follow:hover { font: 18px/40px 'Open Sans Condensed', sans-serif; padding-left: 10px; } -.profile-modal .postboard-posts-wrapper -{ - position: absolute; - top: 0; - height: 100%; - width: 99%; - box-sizing: border-box; - border-top: 292px solid transparent; - overflow: auto; - z-index: 0; -} .profile-modal .profile-card-main { background: #f3f5fb; @@ -408,13 +379,6 @@ button.follow:hover { height: 200px; } */ -.profile-modal .direct-messages, -.profile-modal .direct-messages-with-user, -.profile-modal .follow, -.profile-card .profileUnfollow -{ - bottom: 10px; -} h1.profile-name { display: inline; @@ -440,4 +404,4 @@ h2.profile-screen-name { .profile-modal a.profile-url:empty, .profile-modal a.profile-bio:empty { display: none; -} \ No newline at end of file +} diff --git a/theme_calm/css/style.css b/theme_calm/css/style.css index f633c7c..a45c5b2 100644 --- a/theme_calm/css/style.css +++ b/theme_calm/css/style.css @@ -101,9 +101,11 @@ h3 color: #1a1; content: '\2714'; } + /************************************* -**************************** BUTTONS ** +************** BUTTONS *************** **************************************/ + button { background: #45474d; @@ -112,18 +114,61 @@ button padding: 5px 10px; cursor: pointer; } + button:hover { color: #fff; } + button.disabled { opacity: .4; } + button.disabled:hover { color: rgba( 255, 255, 255, .8 ); } + +button.follow, button.unfollow, .following-list button.private { + color: rgba( 0, 0, 0, .4 ); + background: none; + border: solid 1px rgba( 0, 0, 0, .2 ); + padding: 3px 15px; +} + +.following-list .public-following { + padding: 4px 16px; +} + +.following-list .public-following:hover { + color: rgba( 0, 0, 0, .4 ); + background: none; + border: solid 1px rgba( 0, 0, 0, .2 ); + padding: 3px 15px; +} + +.following-list button.private:hover { + color: #fff; + background: #45474d; +} + +button.follow:hover { + color: #fff; + background: #b2d67b; +} + +button.unfollow:hover { + color: #fff; + background: #e18882; +} + +.follow-suggestions .follow, .follow-suggestions .unfollow { + display: block; + position: relative; + left: 50%; +} + /************************************* **************************** MENU ***** **************************************/ @@ -921,17 +966,6 @@ textarea.splited-post { text-decoration: none; } -.follow, .unfollow { - background: none; - border: solid 1px rgba( 0, 0, 0 ,.2 ); - padding: 3px 15px; - color: rgba( 0, 0, 0 ,.4 ); -} - -.follow:hover, .unfollow:hover { - color: rgba( 0, 0, 0 ,.7 ); -} - .refresh-users, .view-all-users { @@ -1747,14 +1781,14 @@ textarea.splited-post { { padding: 5px 20px; } + /************************************* -*************** FOLLOWING-CONFIG MODAL +****** FOLLOWING-CONFIG PROMPT ******* **************************************/ -.following-config-modal .modal-wrapper + +.following-config-modal { - top: 43%; - left: 25%; - width: 50%; + margin-top: -80px; } .following-config-modal .modal-content { @@ -1769,8 +1803,9 @@ textarea.splited-post { { padding: 10px; } + /************************************* -****************** RETWIST POSTS PROMPT +******** RETWIST POSTS PROMPT ******** **************************************/ .reTwist diff --git a/theme_nin/css/style.css b/theme_nin/css/style.css index faa067d..9fbc994 100644 --- a/theme_nin/css/style.css +++ b/theme_nin/css/style.css @@ -556,7 +556,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, padding: 15px; } /* line 146, ../sass/_profile.sass */ -.profile-card .direct-messages-with-user, .profile-card .follow, .profile-card .profileUnfollow, .profile-card .follow { +.profile-card .direct-messages-with-user, .profile-card .follow, .profile-card .unfollow { display: inline-block; position: static; } @@ -566,7 +566,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, position: absolute; } /* line 154, ../sass/_profile.sass */ -.profile-card .profileUnfollow { +.profile-card .unfollow { background: #aaa; } /* line 157, ../sass/_profile.sass */ @@ -2579,18 +2579,46 @@ ol.toptrends-list a:hover { .following-config-method-buttons { padding: 10px; } + +/****** FOLLOWING-CONFIG PROMPT ***** */ /* line 699, ../sass/style.sass */ +.following-config-modal +{ + margin-top: -100px; +} +.following-config-modal .modal-content +{ + padding: 10px; + text-align: center; +} +.following-config-modal .modal-buttons +{ + display: none; +} .following-config-method-buttons .public-following { background-color: #B4C669; + margin: 0px 2px; + padding: 6px 16px; } -/************ RETWIST POSTS MODAL ********* */ +/********** RETWIST POSTS PROMPT ********* */ /* line 705, ../sass/style.sass */ +.reTwist { + margin-top: -110px; +} .reTwist .modal-wrapper { width: 520px; top: 20%; margin: 0 0 0 -260px; } +.reTwist .modal-content +{ + padding: 20px 15px; +} +.reTwist button.modal-propagate +{ + background-color: #B4C669; +} /* line 709, ../sass/style.sass */ .reTwist .post-expand, .reTwist .post-interactions { display: none; diff --git a/theme_nin/js/theme_option.js b/theme_nin/js/theme_option.js index 2f4d1dc..844fd5b 100644 --- a/theme_nin/js/theme_option.js +++ b/theme_nin/js/theme_option.js @@ -39,10 +39,10 @@ $(function(){ }); $(".userMenu-search-profiles .follow") - .on("toggleFollow", function() { + .on("eventToggleFollow", function() { $(this).text('').attr('title', polyglot.t('Follow')); }) - .on("toggleUnfollow", function() { + .on("eventToggleUnfollow", function() { $(this).text('').attr('title', polyglot.t('Unfollow')); }); diff --git a/theme_nin/sass/_profile.sass b/theme_nin/sass/_profile.sass index 006f882..70f62b0 100755 --- a/theme_nin/sass/_profile.sass +++ b/theme_nin/sass/_profile.sass @@ -143,7 +143,7 @@ $modal-postboard-post-height: $modal-height - 45px position: relative padding: $modal-gut - .direct-messages-with-user, .follow, .profileUnfollow, .follow + .direct-messages-with-user, .follow, .unfollow display: inline-block position: static @@ -151,7 +151,7 @@ $modal-postboard-post-height: $modal-height - 45px font-size: 15px position: absolute - .profileUnfollow + .unfollow background: $main-color-light .twister-user-info diff --git a/theme_nin/sass/style.sass b/theme_nin/sass/style.sass index cd796fa..3be1e29 100755 --- a/theme_nin/sass/style.sass +++ b/theme_nin/sass/style.sass @@ -697,6 +697,7 @@ ol.toptrends-list /************ FOLLOWING-CONFIG MODAL **********/ .following-config-modal + margin-top: -100px h2 text-transform: none .modal-wrapper @@ -710,17 +711,24 @@ ol.toptrends-list .modal-buttons display: none .following-config-method-buttons - padding: 10px .public-following - background-color: #B4C669 + background-color: $color-green + margin: 0px 2px + padding: 6px 16px /************ RETWIST POSTS MODAL **********/ .reTwist + margin-top: -110px .modal-wrapper width: $postboard-modal-width top: 20% margin: 0 0 0 0-($postboard-modal-width/2) + .modal-content + padding: 20px 15px + .modal-buttons + .modal-propagate + background-color: $color-green .post-expand, .post-interactions display: none