From 2fb77459bee7c7b3deee8236bbe8ed80de6610f4 Mon Sep 17 00:00:00 2001
From: psychobunny <rodrigues.andrew@gmail.com>
Date: Fri, 6 Nov 2015 15:42:52 -0500
Subject: [PATCH] added back follow button to profile page
---
less/account.less | 6 +++
less/modules/fab.less | 17 ++++++++
less/modules/usercard.less | 16 +------
lib/persona.js | 60 ++++++++++++++++-----------
templates/partials/account/header.tpl | 10 +++++
5 files changed, 70 insertions(+), 39 deletions(-)
diff --git a/less/account.less b/less/account.less
index 59cbdd1..8994dbe 100644
--- a/less/account.less
+++ b/less/account.less
@@ -45,6 +45,12 @@
border: 4px solid white;
border-radius: 50%;
+ .fab.btn-morph {
+ top: 93px;
+ right: 4px;
+ position: absolute;
+ }
+
.status {
position: absolute;
font-size: 23px;
diff --git a/less/modules/fab.less b/less/modules/fab.less
index d7f69ff..4afcdd1 100644
--- a/less/modules/fab.less
+++ b/less/modules/fab.less
@@ -13,4 +13,21 @@
.btn-group.open .dropdown-toggle.fab {
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.156863), 0px 2px 10px 0px rgba(0, 0, 0, 0.117647);
+}
+
+.fab.btn-morph {
+ padding: 0;
+
+ &.heart {
+ > span > span {
+ background-color: #E91E63;
+ }
+ }
+
+ &.plus {
+ background-color: @material-success;
+ > span > span {
+ background-color: white;
+ }
+ }
}
\ No newline at end of file
diff --git a/less/modules/usercard.less b/less/modules/usercard.less
index 9241cc0..da7b72b 100644
--- a/less/modules/usercard.less
+++ b/less/modules/usercard.less
@@ -59,21 +59,7 @@
.fab.btn-morph {
top: 75px;
- position: absolute;
right: 15px;
- padding: 0;
-
- &.heart {
- > span > span {
- background-color: #E91E63;
- }
- }
-
- &.plus {
- background-color: @brand-primary;
- > span > span {
- background-color: white;
- }
- }
+ position: absolute;
}
}
\ No newline at end of file
diff --git a/lib/persona.js b/lib/persona.js
index 8d518b1..aec7c3b 100644
--- a/lib/persona.js
+++ b/lib/persona.js
@@ -21,9 +21,13 @@ $(document).ready(function() {
NProgress.set(0.7);
});
- $(window).on('action:ajaxify.end', function() {
+ $(window).on('action:ajaxify.end', function(ev, data) {
NProgress.done();
setupHoverCards();
+
+ if (data.url.match('user/')) {
+ setupFavouriteButtonOnProfile();
+ }
});
}
@@ -198,29 +202,7 @@ $(document).ready(function() {
if (parseInt(app.user.uid, 10) === parseInt(data.uid, 10) || !app.user.uid) {
card.find('.btn-morph').hide();
} else {
- card.find('.btn-morph').click(function(ev) {
- var type = $(this).hasClass('plus') ? 'follow' : 'unfollow';
-
- socket.emit('user.' + type, {uid: data.uid}, function(err) {
- if (err) {
- return app.alertError(err.message);
- }
-
- app.alertSuccess('[[global:alert.' + type + ', ' + data.username + ']]');
- });
-
- $(this).toggleClass('plus').toggleClass('heart');
-
- if ($(this).find('b.drop').length === 0) {
- $(this).prepend('<b class="drop"></b>');
- }
-
- var drop = $(this).find('b.drop').removeClass('animate'),
- x = ev.pageX - drop.width() / 2 - $(this).offset().left,
- y = ev.pageY - drop.height() / 2 - $(this).offset().top;
-
- drop.css({top: y + 'px', left: x + 'px'}).addClass('animate');
- });
+ setupFavouriteMorph(card, data.uid, data.username);
if (isFollowing) {
$('.btn-morph').addClass('heart');
@@ -239,6 +221,10 @@ $(document).ready(function() {
return false;
}
+ function setupFavouriteButtonOnProfile() {
+ setupFavouriteMorph($('[component="account/cover"]'), ajaxify.data.uid, ajaxify.data.username);
+ }
+
function setupCardRemoval(card) {
function removeCard(ev) {
if ($(ev.target).closest('.persona-usercard').length === 0) {
@@ -252,4 +238,30 @@ $(document).ready(function() {
$(document).on('click', removeCard);
}
+
+ function setupFavouriteMorph(parent, uid, username) {
+ parent.find('.btn-morph').click(function(ev) {
+ var type = $(this).hasClass('plus') ? 'follow' : 'unfollow';
+
+ socket.emit('user.' + type, {uid: uid}, function(err) {
+ if (err) {
+ return app.alertError(err.message);
+ }
+
+ app.alertSuccess('[[global:alert.' + type + ', ' + username + ']]');
+ });
+
+ $(this).toggleClass('plus').toggleClass('heart');
+
+ if ($(this).find('b.drop').length === 0) {
+ $(this).prepend('<b class="drop"></b>');
+ }
+
+ var drop = $(this).find('b.drop').removeClass('animate'),
+ x = ev.pageX - drop.width() / 2 - $(this).offset().left,
+ y = ev.pageY - drop.height() / 2 - $(this).offset().top;
+
+ drop.css({top: y + 'px', left: x + 'px'}).addClass('animate');
+ });
+ }
});
\ No newline at end of file
diff --git a/templates/partials/account/header.tpl b/templates/partials/account/header.tpl
index b57f0f9..f0feee5 100644
--- a/templates/partials/account/header.tpl
+++ b/templates/partials/account/header.tpl
@@ -8,6 +8,16 @@
<div class="user-icon user-profile-picture" style="background-color: {icon:bgColor};" title="{username}">{icon:text}</div>
<!-- ENDIF picture -->
<i component="user/status" class="fa fa-circle status {status}" title="[[global:{status}]]"></i>
+
+ <!-- IF !isSelf -->
+ <button class="btn-morph fab <!-- IF isFollowing -->heart<!-- ELSE -->plus<!-- ENDIF isFollowing -->">
+ <span>
+ <span class="s1"></span>
+ <span class="s2"></span>
+ <span class="s3"></span>
+ </span>
+ </button>
+ <!-- ENDIF !isSelf -->
</div>
<div class="container">