feat(following): Added back ability to follow users

fixes #19

Author: LordZardeck

less/profile-view.less

@@ -128,16 +128,22 @@
 		  -ms-flex-pack: center;
 		      justify-content: center;
 
+		@option-offset: 30px;
+
 		&.profile {
-          left: ~"calc((100% / 3) - 3px)";
+          	left: @option-offset;
         }
 
+		&.follow {
+			left: ~"calc(((100% - 50px) / 4) + @{option-offset})";
+		}
+
         &.edit {
-          left: ~"calc(50% - 3px)";
+			left: ~"calc((((100% - 50px) / 4) * 2) + @{option-offset})";
         }
 
         &.settings {
-          left: ~"calc(((100% / 3) * 2) - 3px)";
+			left: ~"calc((((100% - 50px) / 4) * 3) + @{option-offset})";
         }
 
         a {
@@ -157,21 +163,33 @@
 			z-index: 99;
 
 			&.profile {
-				-webkit-transform: translate(-55px, 15px);
-				  -ms-transform: translate(-55px, 15px);
-				      transform: translate(-55px, 15px);
+				-webkit-transform: translate(-50px, 11px);
+				  -ms-transform: translate(-50px, 11px);
+				      transform: translate(-50px, 11px);
 			}
 
 			&.edit {
-				-webkit-transform: translate(-10px, 35px);
-				  -ms-transform: translate(-10px, 35px);
-				      transform: translate(-10px, 35px);
+				-webkit-transform: translate(5px, 35px);
+				  -ms-transform: translate(5px, 35px);
+				      transform: translate(5px, 35px);
+
+				/* The edit icon is slightly offset from the rest */
+				i {
+					margin-left: 3px;
+					margin-top: 8px;
+				}
         	}
 
+			&.follow {
+				-webkit-transform: translate(-27px, 35px);
+					-ms-transform: translate(-27px, 35px);
+						transform: translate(-27px, 35px);
+			}
+
         	&.settings {
-				-webkit-transform: translate(35px, 15px);
-				  -ms-transform: translate(35px, 15px);
-				      transform: translate(35px, 15px);
+				-webkit-transform: translate(31px, 11px);
+				  -ms-transform: translate(31px, 11px);
+				      transform: translate(31px, 11px);
         	}
 
         	a {

lib/material.js

@@ -17,7 +17,7 @@ $(document).ready(function() {
 
         $(window).on('action:ajaxify.end', function(ev, data) {
             setTimeout(function(){ $('.material-load-bar').css('height', '0px'); }, 1000);
-            
+
         });
     }
 
@@ -42,24 +42,24 @@ $(document).ready(function() {
     }
 
     function setupSideBar() {
-      
-        $('body').on('click', '#menu-trigger', function(e){            
+
+        $('body').on('click', '#menu-trigger', function(e){
             e.preventDefault();
             var x = $(this).data('trigger');
-        
+
             $(x).toggleClass('toggled');
             $(this).toggleClass('open');
 
-            
+
             if (x == '#sidebar') {
                 $elem = '#sidebar';
                 $elem2 = '#menu-trigger';
-                
+
                 if (!$('#chat').hasClass('toggled')) {
                     $('#header').toggleClass('sidebar-toggled');
                 }
             }
-            
+
             //When clicking outside
             if ($('#header').hasClass('sidebar-toggled')) {
                 $(document).on('click', function (e) {
@@ -74,7 +74,7 @@ $(document).ready(function() {
             }
         });
 
-  
+
         //Get saved layout type from LocalStorage
         var layoutStatus = localStorage.getItem('ma-layout-status');
         if (layoutStatus == 1 && !config.menuInHeader) {
@@ -136,7 +136,7 @@ $(document).ready(function() {
                 $('body').on('blur', '.form-control', function(){
                     var p = $(this).closest('.form-group, .input-group');
                     var i = p.find('.form-control').val();
-                    
+
                     if (p.hasClass('fg-float')) {
                         if (i.length == 0) {
                             $(this).closest('.fg-line').removeClass('fg-toggled');
@@ -152,11 +152,11 @@ $(document).ready(function() {
             if($('.fg-float')[0]) {
                 $('.fg-float .form-control').each(function(){
                     var i = $(this).val();
-                    
+
                     if (!i.length == 0) {
                         $(this).closest('.fg-line').addClass('fg-toggled');
                     }
-                    
+
                 });
             }
         });
@@ -193,11 +193,25 @@ $(document).ready(function() {
             $('.profile-pic .close').toggleClass('open');
         });
 
+		$('body').on('click', '.profile-header-img .follow', function(e) {
+			var type = $(this).find('i').hasClass('fa-plus') ? 'follow' : 'unfollow';
+
+			socket.emit('user.' + type, {uid: ajaxify.data.uid}, function(err) {
+				if (err) {
+					return app.alertError(err.message);
+				}
+
+				app.alertSuccess('[[global:alert.' + type + ', ' + ajaxify.data.username + ']]');
+			});
 
-        $('body').on('click', '#ms-menu-trigger', function(e){            
+			$(this).find('i').toggleClass('fa-plus').toggleClass('fa-heart');
+		});
+
+
+        $('body').on('click', '#ms-menu-trigger', function(e){
             e.preventDefault();
             $(this).toggleClass('open');
             $('.ms-menu').toggleClass('toggled');
-        });   
+        });
     }
 });

templates/partials/account/header.tpl

@@ -16,6 +16,7 @@
         <div class="user-icon profile-header-img" style="<!-- IF picture -->background-image: url({picture});  background-size: cover; background-repeat: no-repeat; background-position: center center;<!-- ELSE -->background-color: {icon:bgColor};<!-- ENDIF picture -->"><!-- IF !picture -->{icon:text}<!-- ENDIF !picture -->
 
         	<div class="option profile"><a href="{config.relative_path}/user/{userslug}"><i class="fa fa-user"></i></a></div>
+        	<div class="option follow"><a><i class="fa fa-<!-- IF isFollowing -->heart<!-- ELSE -->plus<!-- ENDIF isFollowing -->"></i></a></div>
         	<!-- IF showHidden -->
 	        <div class="option edit"><a href="{config.relative_path}/user/{userslug}/edit"><i class="fa fa-edit"></i></a></div>
 	        <div class="option settings"><a href="{config.relative_path}/user/{userslug}/settings"><i class="fa fa-gear"></i></a></div>