New notification look. Mark as read feature (disabled for now due to issues)

app/Models/Notification.php

@@ -77,7 +77,8 @@ class Notification extends Model {
             'date'          => $this->activity->created_at->toAtomString(),
             'thumbnail_url' => $this->activity->thumbnail_url,
             'text'          => $this->activity->text,
-            'url'           => $this->activity->url
+            'url'           => $this->activity->url,
+            'is_read'       => $this->is_read
         ];
     }
 }

resources/assets/scripts/app/controllers/application.coffee

@@ -15,13 +15,15 @@
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 module.exports = angular.module('ponyfm').controller "application", [
-    '$scope', 'auth', '$location', 'upload', '$state', '$stateParams', '$injector', '$rootScope', 'playlists'
+    '$scope', 'auth', '$location', 'upload', '$state', '$stateParams', '$injector', '$rootScope', 'playlists', 'notifications'
-    ($scope, auth, $location, upload, $state, $stateParams, $injector, $rootScope, playlists) ->
+    ($scope, auth, $location, upload, $state, $stateParams, $injector, $rootScope, playlists, notifications) ->
         $scope.auth = auth.data
         $scope.$state = $state
         $scope.$stateParams = $stateParams
         $scope.isPinnedPlaylistSelected = false
         $scope.notifActive = false
+        $scope.nCount = 0
+        $scope.nCountFormatted = '0'
         $loadingElement = null
         loadingStateName = null
 
@@ -39,6 +41,17 @@ module.exports = angular.module('ponyfm').controller "application", [
         $scope.notifPulloutToggle = () ->
             $scope.notifActive = !$scope.notifActive
 
+            # Disabled for now
+            # if $scope.notifActive
+            #    notifications.markAllAsRead()
+
+        $rootScope.$on 'notificationsUpdated', () ->
+            $scope.nCount = notifications.getNotificationCount()
+            if $scope.nCount > 99
+                $scope.nCountFormatted = '99+'
+            else
+                $scope.nCountFormatted = $scope.nCount
+
         if window.pfm.error
             $state.transitionTo 'errors-' + window.pfm.error
 

resources/assets/scripts/app/controllers/notifications.coffee

@@ -1,24 +0,0 @@
-# Pony.fm - A community for pony fan music.
-# Copyright (C) 2016 Josef Citrine
-#
-# This program is free software: you can redistribute it and/or modify
-# it under the terms of the GNU Affero General Public License as published by
-# the Free Software Foundation, either version 3 of the License, or
-# (at your option) any later version.
-#
-# This program is distributed in the hope that it will be useful,
-# but WITHOUT ANY WARRANTY; without even the implied warranty of
-# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-# GNU Affero General Public License for more details.
-#
-# You should have received a copy of the GNU Affero General Public License
-# along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-module.exports = angular.module('ponyfm').controller "notifications", [
-    '$scope', 'notifications'
-    ($scope, notifications) ->
-
-        notifications.getNotifications().done (result) ->
-            $scope.notifications = result
-            console.log result
-]

resources/assets/scripts/app/directives/notification-list.coffee

@@ -21,9 +21,33 @@ module.exports = angular.module('ponyfm').directive 'pfmNotificationList', () ->
     scope: {}
 
     controller: [
-        '$scope', 'notifications'
+        '$scope', 'notifications', '$timeout'
-        ($scope, notifications) ->
+        ($scope, notifications, $timeout) ->
-            notifications.getNotifications().done (result) ->
+            $scope.notifications = []
-                $scope.notifications = result
+            isTimeoutScheduled = false
-                console.log result
+
+            # TODO: ADD REFRESH BUTTON
+
+            refreshNotifications = () ->
+                notifications.getNotifications().done (result) ->
+                    if $scope.notifications.length > 0
+                        if result[0].text != $scope.notifications[0].text
+                            $scope.notifications = result
+                    else if result.length > 0
+                        $scope.notifications = result
+                        
+                    $scope.nCount = $scope.notifications.length
+                    
+                    scheduleTimeout()
+
+            scheduleTimeout = () ->
+                isTimeoutScheduled = true
+                $timeout(() ->
+                    refreshNotifications()
+                    isTimeoutScheduled = false
+                , 60000)
+
+            
+
+            refreshNotifications()
     ]

resources/assets/scripts/app/services/notifications.coffee

@@ -18,13 +18,32 @@ module.exports = angular.module('ponyfm').factory('notifications', [
     '$rootScope', '$http'
     ($rootScope, $http) ->
         self =
+            notificationList: []
+
             getNotifications: () ->
                 def = new $.Deferred()
 
                 $http.get('/api/web/notifications').success (response) ->
+                    self.notificationList = response.notifications
+                    $rootScope.$broadcast 'notificationsUpdated'
                     def.resolve response.notifications
 
                 def.promise()
 
+            getNotificationCount: () ->
+                return self.notificationList.length
+
+            markAllAsRead: () ->
+                unread = []
+
+                for n, notifObject of self.notificationList
+                    if !notifObject.is_read
+                        unread.push notifObject.id.toString()
+
+                $http.put('/api/web/notifications/mark-as-read', {notification_ids: unread}).success (response) ->
+                    console.log response
+
+                console.log unread
+
         self
 ])

resources/assets/styles/content.less

@@ -553,18 +553,37 @@ html {
       color: #000;
     }
   }
+
+  .counter {
+    position: absolute;
+    bottom: 8px;
+    right: 90px;
+    font-size: 8pt;
+    color: #fff;
+    background: #b885bd;
+    width: auto;
+    height: 15px;
+    text-align: center;
+    border-radius: 20px;
+    padding: 0 3px;
+    display: none;
+  }
 }
 
 .notification {
   min-height: 50px;
   margin-bottom: 10px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0,0,0,.2);
 
   .img-link {
     float: left;
   }
   .message {
-    margin-left: 60px;
+    margin-left: 55px;
+    padding: 5px 5px 0 5px;
     display: block;
+    color: #666;
   }
 }
 
@@ -575,7 +594,7 @@ html {
   width: 400px;
   height: ~"calc(100% - 64px)";
   z-index: 1000;
-  background: #fff;
+  background: #eee;
   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   transform: translateX(0px) translateZ(0px);

resources/assets/styles/mobile.less

@@ -283,6 +283,11 @@
     a, a:active, a:hover, a:focus {
       color: #fff;
     }
+
+    .counter {
+      bottom: 0;
+      right: -1px;
+    }
   }
 }
 

resources/views/shared/_app_layout.blade.php

@@ -68,6 +68,7 @@
                 </div>
                 <div class="notification-menu">
                     <a href="#" ng-click="notifPulloutToggle()"><i class="fa fa-bell fa-fw" aria-hidden="true"></i></a>
+                    <div class="counter" ng-show="nCount > 0">@{{ nCountFormatted }}</div>
                 </div>
             @endif
             <pfm-player></pfm-player>