Merge pull request #568 from vladjerca/feature/click_heart_to_like

Add required bindings to the like count container. closes #562
Soundnode · Feb 19, 2016 · 93c1b0a · 93c1b0a
2 parents cced398 + 1bed78d
commit 93c1b0a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/app/public/js/common/favoriteSongDirective.js b/app/public/js/common/favoriteSongDirective.js
@@ -8,7 +8,8 @@ app.directive('favoriteSong', function(
     return {
         restrict: 'A',
         scope: {
-            favorite: "="
+            favorite: "=",
+			count: "="
         },
         link: function($scope, elem, attrs) {
             var userId
@@ -25,6 +26,7 @@ app.directive('favoriteSong', function(
                             if ( typeof status == "object" ) {
                                 notificationFactory.success("Song removed from likes!");
                                 $scope.favorite = false;
+								$scope.count -= 1;
                             }
                         }, function() {
                             notificationFactory.error("Something went wrong!");
@@ -35,6 +37,7 @@ app.directive('favoriteSong', function(
                             if ( typeof status == "object" ) {
                                 notificationFactory.success("Song added to likes!");
                                 $scope.favorite = true;
+								$scope.count += 1;
                             }
                         }, function(status) {
                             notificationFactory.error("Something went wrong!");

diff --git a/app/public/stylesheets/sass/_components/_track.scss b/app/public/stylesheets/sass/_components/_track.scss
@@ -1,4 +1,11 @@
 .trackView {
+	& .likes_count {
+		&.liked {
+			& > i {
+				color: $scColor;
+			}
+		}
+	}
     & .trackDetails {
         display: flex;
 

diff --git a/app/views/common/tracks.html b/app/views/common/tracks.html
@@ -51,7 +51,7 @@ <h3 class="songList_item_song_info clearfix">
 
     <div class="songList_item_song_details">
         <div class="songList_item_actions">
-            <a favorite-song data-song-id="{{ data.id }}" favorite="data.user_favorite" ng-class="{liked: data.user_favorite}" title="{{data.user_favorite ? 'Unlike' : 'Like'}}">
+            <a favorite-song data-song-id="{{ data.id }}" favorite="data.user_favorite" count="data.favoritings_count" ng-class="{liked: data.user_favorite}" title="{{data.user_favorite ? 'Unlike' : 'Like'}}">
                 <i class="fa fa-heart"></i>
             </a>
             <a reposted-song data-song-id="{{ data.id }}" reposted="data.user_reposted" ng-class="{ reposted: data.user_reposted }" title="{{data.user_reposted ? 'Unpost' : 'Repost'}}" ng-if="data.user.id !== $root.userId">

diff --git a/app/views/track/track.html b/app/views/track/track.html
@@ -24,16 +24,18 @@
                     <span class="playback_count">
                         <i class="fa fa-play"></i> {{track.playback_count | number}}
                     </span>
-                    <span class="likes_count">
+                    <span class="likes_count"
+								ng-class="{liked: track.user_favorite}"
+								favorite-song data-song-id="{{ track.id }}" favorite="track.user_favorite" count="track.favoritings_count">
                         <i class="fa fa-heart"></i> {{track.favoritings_count | round}}
                     </span>
                 </div>
             </div>
         </div>
         <div class="content">
-            <div ng-click="changeLike()" ng-mouseenter="hover = true" ng-mouseleave="hover = false"
+            <div ng-mouseenter="hover = true" ng-mouseleave="hover = false"
                  ng-class="{liked: track.user_favorite}" class="button follow_button"
-                 favorite-song data-song-id="{{ track.id }}" favorite="track.user_favorite">
+                 favorite-song data-song-id="{{ track.id }}" favorite="track.user_favorite" count="track.favoritings_count">
                 <span ng-if="hover == false">{{track.user_favorite ? 'Liked' : 'Like'}}</span>
                 <span ng-if="hover == true">{{track.user_favorite ? 'Unlike' : 'Like'}}</span>
             </div>