Fixed follow user functions, fixed follow button desing(almost),

modified javascript, css, and template code to make it work.

Also modified the setup_template to include followit urls.

5 files changed, 34 insertions, 20 deletions

diff --git a/askbot/setup_templates/urls.py b/askbot/setup_templates/urls.py
index 958b91d6..2ec69cf0 100644
--- a/askbot/setup_templates/urls.py
+++ b/askbot/setup_templates/urls.py
@@ -12,6 +12,7 @@ urlpatterns = patterns('',
     (r'^admin/', include(admin.site.urls)),
     #(r'^cache/', include('keyedcache.urls')), - broken views disable for now
     (r'^settings/', include('askbot.deps.livesettings.urls')),
+    (r'^followit/', include('followit.urls')),
     (r'^robots.txt$', include('robots.urls')),
 )
 
diff --git a/askbot/skins/default/media/js/user.js b/askbot/skins/default/media/js/user.js
index ec169f9d..438a3273 100644
--- a/askbot/skins/default/media/js/user.js
+++ b/askbot/skins/default/media/js/user.js
@@ -119,7 +119,7 @@ FollowUser.prototype.setUserName = function(user_name){
 FollowUser.prototype.decorate = function(element){
     this._element = element;
     this._user_id = parseInt(element.attr('id').split('-').pop());
-    this._available_action = element.hasClass('follow') ? 'follow':'unfollow';
+    this._available_action = element.children().hasClass('follow') ? 'follow':'unfollow';
     var me = this;
     setupButtonEventHandlers(this._element, function(){ me.go() });
 };
@@ -154,20 +154,28 @@ FollowUser.prototype.go = function(){
 FollowUser.prototype.toggleState = function(){
     if (this._available_action === 'follow'){
         this._available_action = 'unfollow';
-        this._element.removeClass('follow');
-        this._element.addClass('unfollow');
-        var fmts = gettext('unfollow %s');
+        var unfollow_div = document.createElement('div'); 
+        unfollow_div.setAttribute('class', 'unfollow');
+        var red_div = document.createElement('div');
+        red_div.setAttribute('class', 'unfollow-red');
+        red_div.innerHTML = interpolate(gettext('unfollow %s'), [this._user_name]);
+        var green_div = document.createElement('div');
+        green_div.setAttribute('class', 'unfollow-green');
+        green_div.innerHTML = interpolate(gettext('following %s'), [this._user_name]);
+        unfollow_div.appendChild(red_div);
+        unfollow_div.appendChild(green_div);
+        this._element.html(unfollow_div);
     } else {
+        var follow_div = document.createElement('div'); 
+        follow_div.innerHTML = interpolate(gettext('follow %s'), [this._user_name]);
+        follow_div.setAttribute('class', 'follow');
         this._available_action = 'follow';
-        this._element.removeClass('unfollow');
-        this._element.addClass('follow');
-        var fmts = gettext('follow %s');
+        this._element.html(follow_div);
     }
-    this._element.html(interpolate(fmts, [this._user_name]));
 };
 
 (function(){
-    var fbtn = $('.follow-user');
+    var fbtn = $('.follow-toggle');
     if (fbtn.length === 1){
         var follow_user = new FollowUser();
         follow_user.decorate(fbtn);
diff --git a/askbot/skins/default/media/style/style.css b/askbot/skins/default/media/style/style.css
index 07848f0d..c0fa13d1 100644
--- a/askbot/skins/default/media/style/style.css
+++ b/askbot/skins/default/media/style/style.css
@@ -2370,8 +2370,8 @@ pre.prettyprint { padding: 3px; border: 0px solid #888; }
 .follow-toggle {
     border-style: solid;
     border-width: 2px;
-    -moz-border-radius: 10px;
-    border-radius: 10px;
+    -moz-border-radius: 15px;
+    border-radius: 15px;
     height: 20px;
     width: 200px;
     float:left;
@@ -2388,9 +2388,14 @@ pre.prettyprint { padding: 3px; border: 0px solid #888; }
 }
 
 .follow-toggle .unfollow{
-    font-color: #000;
+    background: #4cd46f;
 }
 
+.follow-toggle .unfollow:hover{
+    background: #d94849;
+}
+
+
 
 .follow-toggle .unfollow div.unfollow-red{
     display:none;
@@ -2400,13 +2405,12 @@ pre.prettyprint { padding: 3px; border: 0px solid #888; }
     background: #4cd46f;
 }
 
-.follow-toggle .unfollow div.unfollow-green:hover{
-    display:none;
+.follow-toggle .unfollow:hover div.unfollow-red{
+    display:inline;
+    color:#fff;
+    font-weight:bold;
 }
 
-.follow-toggle .unfollow div.unfollow-red:hover{
-    color: #fff;
-    background: #d94849;
-    display:inline;
-    font-weight: bold;
+.follow-toggle .unfollow:hover div.unfollow-green{
+    display:none;
 }
diff --git a/askbot/skins/default/templates/macros.html b/askbot/skins/default/templates/macros.html
index 8d3dcf9b..b3fe86d2 100644
--- a/askbot/skins/default/templates/macros.html
+++ b/askbot/skins/default/templates/macros.html
@@ -32,7 +32,7 @@
         class="follow-toggle" 
         id="follow-{{ name }}-{{ id }}"
     >
-        {% if not follow %}
+        {% if follow %}
         <div class="follow">{% trans %}follow {{alias}}{% endtrans %}</div>
         {% else %}
         <div class="unfollow">
diff --git a/askbot/skins/default/templates/user_profile/user_stats.html b/askbot/skins/default/templates/user_profile/user_stats.html
index 3fc8019b..d9002d30 100644
--- a/askbot/skins/default/templates/user_profile/user_stats.html
+++ b/askbot/skins/default/templates/user_profile/user_stats.html
@@ -135,6 +135,7 @@
         </div>
 {% endblock %}
 {% block endjs %}
+    {{ super() }}
     <script type="text/javascript">
         $(document).ready(function(){
             $('.badge-context-toggle').each(function(idx, elem){