Skip to content
This repository was archived by the owner on Feb 5, 2025. It is now read-only.

Commit 55734d0

Browse files
jeff-phillips-18jeff-phillips-18
committed
Implement Notification Drawer Updates
Implementation of patternfly/patternfly-design#297
1 parent 6694457 commit 55734d0

File tree

4 files changed

+187
-14
lines changed

4 files changed

+187
-14
lines changed

‎src/less/notifications-drawer.less‎

Lines changed: 92 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,33 +48,81 @@
4848
content: "\f101";
4949
}
5050
}
51+
.blank-slate-pf {
52+
border: 0;
53+
margin-bottom: 0;
54+
padding: 30px;
55+
56+
.blank-slate-pf-icon {
57+
font-size: 3em;
58+
line-height: 1em;
59+
}
60+
61+
h1 {
62+
font-size: 1em;
63+
margin-bottom: 0;
64+
margin-top: 15px;
65+
}
66+
}
5167
}
52-
.drawer-pf-toggle-expand {
68+
.drawer-pf-close, .drawer-pf-toggle-expand {
5369
color: inherit;
5470
cursor: pointer;
55-
left: 0;
5671
padding: 2px 5px;
5772
position: absolute;
58-
&:before {
59-
content: "\f100";
60-
font-family: "FontAwesome";
61-
}
6273
&:hover,
6374
&:focus {
6475
color: inherit;
6576
text-decoration: none;
6677
}
6778
}
79+
.drawer-pf-toggle-expand {
80+
left: 0;
81+
&:before {
82+
content: "\f100";
83+
font-family: "FontAwesome";
84+
}
85+
&:hover {
86+
color: @link-color;
87+
}
88+
}
89+
.drawer-pf-close {
90+
right: 0;
91+
&:before {
92+
content: "\e60b";
93+
font-family: "PatternFlyIcons-webfont";
94+
}
95+
}
96+
6897

6998
.drawer-pf-action {
99+
display: flex;
70100
.btn-link {
71101
color: @link-color;
72102
padding: 10px 0;
103+
.pficon, .fa {
104+
margin-right: 3px;
105+
}
73106

74107
&:hover { color: @link-hover-color; }
75108
}
76109
}
77110

111+
.drawer-pf-action-link {
112+
border-left: solid 1px @color-pf-black-300;
113+
flex: 1 1 0%;
114+
margin: 10px 0;
115+
text-align: center;
116+
117+
&:first-of-type {
118+
border-left-width: 0;
119+
}
120+
121+
.btn-link {
122+
padding: 0;
123+
}
124+
}
125+
78126
.drawer-pf-loading {
79127
color: @gray-pf;
80128
font-size: (@font-size-base + 2);
@@ -112,6 +160,10 @@
112160
}
113161
}
114162

163+
.drawer-pf-notification-content {
164+
cursor: default;
165+
}
166+
115167
.drawer-pf-notification-info,
116168
.drawer-pf-notification-message {
117169
display: block;
@@ -130,7 +182,7 @@
130182
background-color: @color-pf-black-100;
131183
border-bottom: 1px solid @card-pf-border-color;
132184
position: absolute;
133-
width: 318px;
185+
width: 100%;
134186
h3 {
135187
font-size: @font-size-base;
136188
margin: 0;
@@ -147,6 +199,24 @@
147199
}
148200
}
149201

202+
.drawer-pf-trigger {
203+
.unread-badge {
204+
border: 6px solid @color-pf-blue-400;
205+
border-radius: 12px;
206+
display: none;
207+
position: relative;
208+
top: -22px;
209+
right: -8px;
210+
height: 12px;
211+
width: 12px;
212+
}
213+
&.unread {
214+
.unread-badge {
215+
display: block;
216+
}
217+
}
218+
}
219+
150220
/* Exclusive styles to work with Vertical Navigation */
151221
.navbar-pf-vertical {
152222
.drawer-pf {
@@ -173,4 +243,19 @@
173243
top: 26px;
174244
}
175245
.drawer-pf-trigger-icon { cursor: pointer; }
246+
.drawer-pf-trigger {
247+
&.unread {
248+
.drawer-pf-trigger-icon {
249+
height: 26px;
250+
}
251+
}
252+
.unread-badge {
253+
border-width: 3px;
254+
border-radius: 6px;
255+
top: -14px;
256+
right: -6px;
257+
height: 6px;
258+
width: 6px;
259+
}
260+
}
176261
}

‎tests/pages/_includes/widgets/layouts/nav-horizontal-notification-drawer.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
<li class="drawer-pf-trigger dropdown">
1616
<a class="nav-item-iconic drawer-pf-trigger-icon">
1717
<span class="fa fa-bell" title="Notifications"></span><!-- In case of all notifications read, the icon should be fa-bell-o -->
18+
<span class="unread-badge"></span>
1819
</a>
1920
</li>
2021
<li>
@@ -88,4 +89,4 @@
8889
</li>
8990
</ul>
9091
</div>
91-
</nav>
92+
</nav>

‎tests/pages/_includes/widgets/layouts/nav-vertical-notification-drawer.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<li class="drawer-pf-trigger dropdown">
1919
<a class="nav-item-iconic drawer-pf-trigger-icon">
2020
<span class="fa fa-bell" title="Notifications"></span><!-- In case of all notifications read, the icon should be fa-bell-o -->
21+
<span class="unread-badge"></span>
2122
</a>
2223
</li>
2324
<li class="dropdown">
@@ -43,4 +44,4 @@
4344
</ul>
4445
{% include widgets/notification-drawer.html %}
4546
</nav>
46-
</nav> <!--/.navbar-->
47+
</nav> <!--/.navbar-->

‎tests/pages/_includes/widgets/notification-drawer.html‎

Lines changed: 91 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<div class="drawer-pf hide drawer-pf-notifications-non-clickable">
22
<div class="drawer-pf-title">
33
<a class="drawer-pf-toggle-expand"></a>
4+
<a class="drawer-pf-close"></a>
45
<h3 class="text-center">Notifications Drawer</h3>
56
</div>
67
<div class="panel-group" id="notification-drawer-accordion">
@@ -17,8 +18,22 @@ <h4 class="panel-title">
1718
<div class="panel-body">
1819
{% include widgets/notification-drawer-notifications.html id="1" %}
1920
</div>
21+
<div class="blank-slate-pf hidden">
22+
<div class="blank-slate-pf-icon">
23+
<span class="pficon-info"></span>
24+
</div>
25+
<h1>There are no notifications to display.</h1>
26+
</div>
2027
<div class="drawer-pf-action">
21-
<button class="btn btn-link btn-block">Mark All Read</button>
28+
<div class="drawer-pf-action-link" data-toggle="mark-all-read">
29+
<button class="btn btn-link">Mark All Read</button>
30+
</div>
31+
<div class="drawer-pf-action-link" data-toggle="clear-all">
32+
<button class="btn btn-link">
33+
<span class="pficon pficon-close"></span>
34+
Clear All
35+
</button>
36+
</div>
2237
</div>
2338
</div>
2439
</div>
@@ -40,8 +55,22 @@ <h4 class="panel-title">
4055
<span class="spinner spinner-xs spinner-inline"></span> Loading More
4156
</div>
4257
</div>
58+
<div class="blank-slate-pf hidden">
59+
<div class="blank-slate-pf-icon">
60+
<span class="pficon-info"></span>
61+
</div>
62+
<h1>There are no notifications to display.</h1>
63+
</div>
4364
<div class="drawer-pf-action">
44-
<button class="btn btn-link btn-block">Mark All Read</button>
65+
<div class="drawer-pf-action-link" data-toggle="mark-all-read">
66+
<button class="btn btn-link">Mark All Read</button>
67+
</div>
68+
<div class="drawer-pf-action-link" data-toggle="clear-all">
69+
<button class="btn btn-link">
70+
<span class="pficon pficon-close"></span>
71+
Clear All
72+
</button>
73+
</div>
4574
</div>
4675
</div>
4776
</div>
@@ -60,15 +89,31 @@ <h4 class="panel-title">
6089
{% include widgets/notification-drawer-notifications.html id="6" %}
6190
{% include widgets/notification-drawer-notifications.html id="7" %}
6291
</div>
92+
<div class="blank-slate-pf hidden">
93+
<div class="blank-slate-pf-icon">
94+
<span class="pficon-info"></span>
95+
</div>
96+
<h1>There are no notifications to display.</h1>
97+
</div>
6398
<div class="drawer-pf-action">
64-
<button class="btn btn-link btn-block">Mark All Read</button>
99+
<div class="drawer-pf-action-link" data-toggle="mark-all-read">
100+
<button class="btn btn-link">Mark All Read</button>
101+
</div>
102+
<div class="drawer-pf-action-link" data-toggle="clear-all">
103+
<button class="btn btn-link">
104+
<span class="pficon pficon-close"></span>
105+
Clear All
106+
</button>
107+
</div>
65108
</div>
66109
</div>
67110
</div>
68111
</div>
69112
</div>
70113
<script>
71114
$(document).ready(function() {
115+
// Initialize to unread notifications
116+
$('.drawer-pf-trigger').addClass('unread');
72117
// Show/Hide Notifications Drawer
73118
$('.drawer-pf-trigger').click(function() {
74119
var $drawer = $('.drawer-pf');
@@ -89,6 +134,12 @@ <h4 class="panel-title">
89134
$drawer.addClass('hide');
90135
}
91136
});
137+
$('.drawer-pf-close').click(function() {
138+
var $drawer = $('.drawer-pf');
139+
140+
$('.drawer-pf-trigger').removeClass('open');
141+
$drawer.addClass('hide');
142+
});
92143
$('.drawer-pf-toggle-expand').click(function() {
93144
var $drawer = $('.drawer-pf');
94145
var $drawerNotifications = $drawer.find('.drawer-pf-notification');
@@ -102,12 +153,47 @@ <h4 class="panel-title">
102153
}
103154
});
104155

105-
// Mark All Read
156+
// Mark All Read / Clear All
106157
$('.panel-collapse').each(function (index, panel) {
107158
var $panel = $(panel);
108-
$panel.on('click', '.drawer-pf-action .btn', function() {
159+
var unreadCount = $panel.find('.drawer-pf-notification.unread').length;
160+
$(panel.parentElement).find('.panel-counter').text(unreadCount + ' New Event' + (unreadCount !== 1 ? 's' : ''));
161+
if ($('.drawer-pf .panel-collapse .unread').length === 0) {
162+
$('.drawer-pf-trigger').removeClass('unread');
163+
}
164+
165+
$panel.on('click', '.drawer-pf-action [data-toggle="mark-all-read"] .btn', function() {
109166
$panel.find('.unread').removeClass('unread');
167+
$panel.find('.drawer-pf-action [data-toggle="mark-all-read"]').remove();
110168
$(panel.parentElement).find('.panel-counter').text('0 New Events');
169+
if ($('.drawer-pf .panel-collapse .unread').length === 0) {
170+
$('.drawer-pf-trigger').removeClass('unread');
171+
}
172+
});
173+
$panel.on('click', '.drawer-pf-action [data-toggle="clear-all"] .btn', function() {
174+
$panel.find('.panel-body .drawer-pf-notification').remove();
175+
$panel.find('.drawer-pf-action').remove();
176+
$panel.find('.blank-slate-pf').removeClass('hidden');
177+
$panel.find('.drawer-pf-loading').addClass('hidden');
178+
$(panel.parentElement).find('.panel-counter').text('0 New Events');
179+
if ($('.drawer-pf .panel-collapse .unread').length === 0) {
180+
$('.drawer-pf-trigger').removeClass('unread');
181+
}
182+
});
183+
184+
$panel.find('.drawer-pf-notification').each(function (index, notification) {
185+
var $notification = $(notification);
186+
$notification.on('click', '.drawer-pf-notification-content', function() {
187+
$notification.removeClass('unread');
188+
var unreadCount = $panel.find('.drawer-pf-notification.unread').length;
189+
$(panel.parentElement).find('.panel-counter').text(unreadCount + ' New Event' + (unreadCount !== 1 ? 's' : ''));
190+
if (unreadCount === 0) {
191+
$panel.find('.drawer-pf-action [data-toggle="mark-all-read"]').remove();
192+
if ($('.drawer-pf .panel-collapse .unread').length === 0) {
193+
$('.drawer-pf-trigger').removeClass('unread');
194+
}
195+
}
196+
});
111197
});
112198
});
113199

0 commit comments

Comments
 (0)