diff --git a/website/client/css/menu.styl b/website/client/css/menu.styl index add73e6416..92242cc094 100644 --- a/website/client/css/menu.styl +++ b/website/client/css/menu.styl @@ -139,6 +139,15 @@ hrpg-button-color-mixin($color-toolbar) > a span.inactive opacity: 0.236 !important + > a span.notification-counter + background: #428bca + color: #fff + position: absolute + top: -5px + right: -7px + font: bold 12px/12px "Lato", sans-serif + border-radius: 50px + padding: 3px 6px div padding-bottom: 1em width: 300px diff --git a/website/client/js/controllers/menuCtrl.js b/website/client/js/controllers/menuCtrl.js index 761c118986..87520febf4 100644 --- a/website/client/js/controllers/menuCtrl.js +++ b/website/client/js/controllers/menuCtrl.js @@ -29,6 +29,32 @@ angular.module('habitrpg') $scope.clearMessages = Chat.markChatSeen; $scope.clearCards = Chat.clearCards; + $scope.getNotificationsCount = function() { + var count = 0; + + if($scope.user.invitations.party && $scope.user.invitations.party.id){ + count++; + } + + if($scope.user.purchased.plan && $scope.user.purchased.plan.mysteryItems.length){ + count++; + } + + if($scope.user.invitations.guilds){ + count += $scope.user.invitations.guilds.length; + } + + if($scope.user.flags.classSelected && !$scope.user.preferences.disableClasses && $scope.user.stats.points){ + count += $scope.user.stats.points > 0 ? 1 : 0; + } + + if($scope.user.newMessages) { + count += Object.keys($scope.user.newMessages).length; + } + + return count; + }; + $scope.iconClasses = function() { return selectNotificationValue( 'glyphicon-gift', diff --git a/website/views/shared/header/menu.jade b/website/views/shared/header/menu.jade index 178d653d19..7c6c7b03fa 100644 --- a/website/views/shared/header/menu.jade +++ b/website/views/shared/header/menu.jade @@ -177,6 +177,7 @@ nav.toolbar(ng-controller='MenuCtrl') li.toolbar-notifs a(data-expand-menu, menu='notifs') span.glyphicon(ng-class='iconClasses()') + span.notification-counter(ng-if='getNotificationsCount()') {{getNotificationsCount()}} div(ng-show='_expandedMenu.menu === "notifs"') h4=env.t('notifications') div