experimental new notifications - needs pconfig experimental_notif set to 1 for your channel to work.

2 files changed, 71 insertions, 1 deletions

diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl
index 234b3682c..92ab88574 100755
--- a/view/tpl/nav.tpl
+++ b/view/tpl/nav.tpl
@@ -63,16 +63,25 @@
 	<button id="expand-aside" type="button" class="navbar-toggler border-0" data-toggle="offcanvas" data-target="#region_1">
 		<i class="fa fa-arrow-circle-right" id="expand-aside-icon"></i>
 	</button>
+	{{if ! $experimental_notif}}
 	{{if $localuser || $nav.pubs}}
 	<button id="notifications-btn" type="button" class="navbar-toggler border-0 text-white" data-toggle="collapse" data-target="#navbar-collapse-1">
 		<i class="fa fa-exclamation-circle"></i>
 	</button>
 	{{/if}}
+	{{else}}
+	{{if $localuser || $nav.pubs}}
+	<button id="notifications-btn-1" type="button" class="navbar-toggler border-0 text-white">
+		<i class="fa fa-exclamation-circle"></i>
+	</button>
+	{{/if}}
+	{{/if}}
 	<button id="menu-btn" class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navbar-collapse-2">
 		<i class="fa fa-bars"></i>
 	</button>
 </div>
 <div class="collapse navbar-collapse" id="navbar-collapse-1">
+	{{if ! $experimental_notif}}
 	<ul class="navbar-nav mr-auto">
 		{{if $nav.network}}
 		<li class="nav-item dropdown network-button" style="display: none;">
@@ -202,7 +211,11 @@
 		</li>
 		{{/if}}
 	</ul>
-
+	{{else}}
+	<div class="navbar-nav mr-auto">
+		<div class="text-white">{{$sel.active}}</div>
+	</div>
+	{{/if}}
 	<div id="banner" class="navbar-text d-none d-md-flex">{{$banner}}</div>
 
 	<ul id="nav-right" class="navbar-nav ml-auto d-none d-md-flex">
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
new file mode 100644
index 000000000..07423563a
--- /dev/null
+++ b/view/tpl/notifications_widget.tpl
@@ -0,0 +1,57 @@
+<style>
+	#notifications {
+		width: 100%;
+	}
+
+	.notification-content {
+		max-height: 50vh;
+		overflow: auto;
+		border-left: 0.2rem solid #eee;
+	}
+
+	.fs {
+		position: fixed;
+		top: 0px;
+		left: 0px;
+		display: block !important;
+		background-color: white;
+		width: 100%;
+		max-width: 100%;
+		height: 100vh;
+		z-index: 1020;
+	}
+
+	.fs #notifications {
+		position: relative !important;
+		width: 100% !important;
+		top: 0px !important;
+	}
+</style>
+
+<div id="nav-notifications-template" rel="template">
+	<a class="dropdown-item clearfix dropdown-notification {5}" href="{0}" title="{2} {3}">
+		<img class="menu-img-3" data-src="{1}">
+		<span class="contactname">{2}</span>
+		<span class="dropdown-sub-text">{3}<br>{4}</span>
+	</a>
+</div>
+
+<ul id="notifications" class="navbar-nav" style="position: fixed; width: 280px; top: 64px;" data-children=".nav-item">
+	{{foreach $notifications as $notification}}
+	<li class="nav-item {{$notification.type}}-button" style="display: none;">
+		<a class="nav-link" href="#nav-{{$notification.type}}-menu" title="{{$notification.title}}" data-toggle="collapse" data-parent="#notifications" rel="#nav-{{$notification.type}}-menu">
+			<i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
+			<span class="float-right badge badge-{{$notification.severity}} {{$notification.type}}-update"></span>
+		</a>
+		<div id="nav-{{$notification.type}}-menu" class="collapse notification-content" rel="{{$notification.type}}">
+			{{if $notification.viewall}}
+			<a class="dropdown-item" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}">{{$notification.viewall.label}}</a>
+			{{/if}}
+			{{if $notification.markall}}
+			<a class="dropdown-item" id="nav-{{$notification.type}}-mark-all" href="{{$notification.markall.url}}" onclick="markRead('{{$notification.type}}'); return false;">{{$notification.markall.label}}</a>
+			{{/if}}
+			{{$loading}}
+		</div>
+	</li>
+	{{/foreach}}
+</ul>