This repository has been archived by the owner on May 4, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 31
/
notification-bell.html
52 lines (48 loc) · 2.77 KB
/
notification-bell.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<div ng-controller="PortalNotificationController as notificationIconCtrl" class="notifications">
<!-- Mobile bell in hamburger -->
<div class="notification-badge notification-badge-mobile" aria-label="{{status}}"
ng-if="notificationsEnabled && directiveMode==='mobile-bell' && countWithDismissed() !== 0 && !isEmpty">
<i class='fa fa-bell'></i>
</div>
<!-- Mobile menu row -->
<md-menu-item ng-if="notificationsEnabled && directiveMode === 'mobile-menu'">
<md-button title="click to view notifications"
class="md-default"
ng-href="{{notificationUrl}}"
layout="row" layout-align="start center">
<span><i class='fa fa-bell fa-fw'></i></span>
<span>Notifications ({{countWithDismissed()}})</span>
</md-button>
</md-menu-item>
<!-- Notification bell on desktop -->
<a ng-if='notificationsEnabled && directiveMode === "bell"'
title="click to view notifications"
class="menu-notification-link notification-desktop"
ng-href="{{notificationUrl}}">
<div class="notification-badge" aria-label="{{status}}" ng-class="{ 'notification-badge-empty' : (countWithDismissed() === 0 || isEmpty)}">
<div class="arrow-down" ng-if="hasPriorityNotifications"></div>
<span class="number-of-nots" ng-if="countWithDismissed() > 0"
ng-class="{ 'more-than-10-nots' : (countWithDismissed() > 9)}">{{countWithDismissed()}}</span>
<i class="fa fa-bell fa-2x" ng-class="{'has-priority-nots': hasPriorityNotifications}"></i>
</div>
</a>
<!-- Priority notifications -->
<div class="priority-notifications" ng-if='notificationsEnabled && (directiveMode === "priority")' ng-repeat="priority in priorityNotifications | limitTo: 1">
<div ng-if='priorityNotifications.length == 1' layout="row" layout-align="center center" layout-fill>
<a ng-href="{{priority.actionURL}}" alt="{{priority.actionAlt}}" class="notification-message">{{priority.title}}</a>
<div layout="row" layout-align="center center" ng-if="priority.actionButtons && priority.actionButtons.length > 0" class="notification-buttons">
<md-button class="md-raised"
ng-href="button.url"
ng-repeat="button in priority.buttonText track by button.caption"
ng-class="{'md-primary' : $index === 0, 'md-accent' : $index > priority.buttonText.length / 2 - 1}"
ng-click="button.action"
aria-label="{{button.label}}">
{{button.label}}
</md-button>
</div>
</div>
<p ng-if='priorityNotifications.length > 1' class="notification-message">
You have {{priorityNotifications.length}} important notifications. <a href="notifications" alt="{{priority.actionAlt}}">View your notifications.</a>
</p>
</div>
</div>