Part of the notification front end

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

@@ -22,18 +22,23 @@ module.exports = angular.module('ponyfm').controller "application", [
         $scope.$stateParams = $stateParams
         $scope.isPinnedPlaylistSelected = false
         $scope.menuActive = false
+        $scope.notifActive = false
         $loadingElement = null
         loadingStateName = null
 
         if 'serviceWorker' of navigator
-          console.log 'Service Worker is supported'
+            console.log 'Service Worker is supported'
-          navigator.serviceWorker.register('service-worker.js').then((reg) ->
+            navigator.serviceWorker.register('service-worker.js').then((reg) ->
-            console.log 'SW registered', reg
+                console.log 'SW registered', reg
-          ).catch (err) ->
+            ).catch (err) ->
-            console.log 'SW register failed', err
+                console.log 'SW register failed', err
 
         $scope.menuToggle = () ->
             $scope.menuActive = !$scope.menuActive
+            $scope.notifActive = false
+        
+        $scope.notifPulloutToggle = () ->
+            $scope.notifActive = !$scope.notifActive
 
         if window.pfm.error
             $state.transitionTo 'errors-' + window.pfm.error
@@ -72,6 +77,7 @@ module.exports = angular.module('ponyfm').controller "application", [
         statesPreloaded = {}
         $scope.$on '$stateChangeStart', (e, newState, newParams, oldState, oldParams) ->
             $scope.menuActive = false
+            $scope.notifActive = false
             $scope.isPinnedPlaylistSelected = false
 
             if newState.name == 'content.playlist'

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

@@ -0,0 +1,29 @@
+# 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').directive 'pfmNotificationList', () ->
+    restrict: 'E'
+    templateUrl: '/templates/directives/notification-list.html'
+    replace: true
+    scope: {}
+
+    controller: [
+        '$scope', 'notifications'
+        ($scope, notifications) ->
+            notifications.getNotifications().done (result) ->
+                $scope.notifications = result
+                console.log result
+    ]

resources/assets/styles/components/player.less

@@ -21,7 +21,7 @@
 
 body.is-logged {
   .track-player {
-    margin-right: 75px;
+    margin-right: 130px;
   }
 }
 

resources/assets/styles/content.less

@@ -540,6 +540,21 @@ html {
   }
 }
 
+.notification-menu {
+  float: right;
+  margin-top: 15px;
+  margin-right: 14px;
+  font-size: 20pt;
+
+  a {
+    color: #5A5A5A;
+
+    &:hover {
+      color: #000;
+    }
+  }
+}
+
 .notification {
   min-height: 50px;
   margin-bottom: 10px;
@@ -551,4 +566,27 @@ html {
     margin-left: 60px;
     display: block;
   }
+}
+
+.notification-pullout {
+  position: absolute;
+  top: 64px;
+  right: -410px;
+  width: 400px;
+  height: ~"calc(100% - 64px)";
+  z-index: 1000;
+  background: #fff;
+  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  transition: transform 0.5s ease;
+  transform: translateX(0px) translateZ(0px);
+
+  &.active {
+    transform: translateX(-410px) translateZ(0px);
+  }
+
+  .notif-container {
+    padding: 20px;
+    max-height: 100%;
+    overflow: auto;
+  }
 }

resources/assets/styles/layout.less

@@ -28,6 +28,7 @@ html body {
   background: #444;
   font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   padding: 0px !important;
+  overflow-x: hidden;
 }
 
 header {

resources/assets/styles/mobile.less

@@ -248,4 +248,8 @@
       margin: 0;
     }
   }
+
+  .notification-pullout {
+    display: none;
+  }
 }

resources/views/shared/_app_layout.blade.php

@@ -66,6 +66,9 @@
                         <li><a href="#" pfm-eat-click ng-click="logout()">Logout</a></li>
                     </ul>
                 </div>
+                <div class="notification-menu">
+                    <a href="#" ng-click="notifPulloutToggle()"><i class="fa fa-bell fa-fw" aria-hidden="true"></i></a>
+                </div>
             @endif
             <pfm-player></pfm-player>
         </div>
@@ -128,6 +131,14 @@
         <ui-view class="site-content">
             @yield('app_content')
         </ui-view>
+
+        @if (Auth::check())
+            <div class="notification-pullout" ng-class="{'active': notifActive}">
+                <div class="notif-container">
+                    <pfm-notification-list></pfm-notification-list>
+                </div>
+            </div>
+        @endif
     </div>
 
 @endsection