harukin/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement notifications name filter and slightly change the way we load notification to the ui

Browse Source
This commit is contained in:
Mario Vavti 2018-01-18 11:22:30 +01:00
parent 647a9b2740
commit 21d081e175
3 changed files with 56 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
view/css/widgets.css
View File

@ -178,6 +178,14 @@ a.wikilist {
max-height: 70vh; max-height: 70vh;
overflow: auto; overflow: auto;
} }
.notifications-textinput input {
font-family: FontAwesome, sans-serif;
}
.notifications-textinput {
padding: .75rem 0.85rem;
}
.notification-content.collapsing { .notification-content.collapsing {
overflow: hidden; overflow: hidden;

29
view/js/main.js
View File

@ -881,10 +881,11 @@ function notify_popup_loader(notifyType) {
/* notifications template - different for navbar and notifications widget */ /* notifications template - different for navbar and notifications widget */
var navbar_notifications_tpl= unescape($("#navbar-notifications-template[rel=template]").html()); var navbar_notifications_tpl= unescape($("#navbar-notifications-template[rel=template]").html());
var notifications_tpl= unescape($("#nav-notifications-template[rel=template]").html()); var notifications_tpl= unescape($("#nav-notifications-template[rel=template]").html());
var notifications_all = unescape($('<div>').append( $("#nav-" + notifyType + "-see-all").clone() ).html()); //outerHtml hack //var notifications_all = unescape($('<div>').append( $("#nav-" + notifyType + "-see-all").clone() ).html()); //outerHtml hack
var notifications_mark = unescape($('<div>').append( $("#nav-" + notifyType + "-mark-all").clone() ).html()); //outerHtml hack //var notifications_mark = unescape($('<div>').append( $("#nav-" + notifyType + "-mark-all").clone() ).html()); //outerHtml hack
var notifications_tt_only = unescape($('<div>').append( $("#tt-" + notifyType + "-only").clone() ).html()); //outerHtml hack //var notifications_tt_only = unescape($('<div>').append( $("#tt-" + notifyType + "-only").clone() ).html()); //outerHtml hack
var notifications_empty = unescape($("#nav-" + notifyType + "-menu").html()); //var notifications_cn_only = unescape($('<div>').append( $("#cn-" + notifyType + "-only").clone() ).html()); //outerHtml hack
//var notifications_empty = unescape($("#nav-" + notifyType + "-menu").html());
var notify_menu = $("#nav-" + notifyType + "-menu"); var notify_menu = $("#nav-" + notifyType + "-menu");
@ -895,11 +896,13 @@ function notify_popup_loader(notifyType) {
window.location.href=window.location.href; window.location.href=window.location.href;
} }
$("#navbar-" + notifyType + "-menu").html(notifications_all + notifications_mark + notifications_tt_only); //$("#navbar-" + notifyType + "-menu").html(notifications_all + notifications_mark + notifications_tt_only + notifications_cn_only);
$("#nav-" + notifyType + "-menu").html(notifications_all + notifications_mark + notifications_tt_only); //$("#nav-" + notifyType + "-menu").html(notifications_all + notifications_mark + notifications_tt_only + notifications_cn_only);
$("." + notifyType + "-update").html(data.notify.length); $("." + notifyType + "-update").html(data.notify.length);
notify_menu.html('');
$(data.notify).each(function() { $(data.notify).each(function() {
html = navbar_notifications_tpl.format(this.notify_link,this.photo,this.name,this.message,this.when,this.hclass,this.b64mid,this.notify_id,this.thread_top); html = navbar_notifications_tpl.format(this.notify_link,this.photo,this.name,this.message,this.when,this.hclass,this.b64mid,this.notify_id,this.thread_top);
$("#navbar-" + notifyType + "-menu").append(html); $("#navbar-" + notifyType + "-menu").append(html);
@ -915,11 +918,23 @@ function notify_popup_loader(notifyType) {
if($('#tt-' + notifyType + '-only').hasClass('active')) if($('#tt-' + notifyType + '-only').hasClass('active'))
$('#nav-' + notifyType + '-menu [data-thread_top=false]').hide(); $('#nav-' + notifyType + '-menu [data-thread_top=false]').hide();
var filter = $('#cn-' + notifyType + '-input').val();
if(filter) {
$('#nav-' + notifyType + '-menu .notification').each(function(i, el){
var cn = $(el).data('contact_name').toLowerCase();
if(cn.indexOf(filter) === -1)
$(this).addClass('d-none');
else
$(this).removeClass('d-none');
});
}
}); });
setTimeout(function() { setTimeout(function() {
if(notify_menu.hasClass('show')) { if($('#nav-' + notifyType + '-sub').hasClass('show')) {
console.log('updating ' + notifyType + ' notifications...'); console.log('updating ' + notifyType + ' notifications...');
setTimeout(notify_popup_loader, updateInterval, notifyType); setTimeout(notify_popup_loader, updateInterval, notifyType);
} }

30
view/tpl/notifications_widget.tpl
View File

@ -65,6 +65,23 @@
$('#nav-{{$notification.type}}-menu [data-thread_top=false]').toggle(); $('#nav-{{$notification.type}}-menu [data-thread_top=false]').toggle();
$(this).toggleClass('active sticky-top'); $(this).toggleClass('active sticky-top');
}); });
$(document).on('keyup', '#cn-{{$notification.type}}-input', function(e) {
var val = $('#cn-{{$notification.type}}-input').val().toLowerCase();
if(val)
$('#cn-{{$notification.type}}-only').addClass('active sticky-top');
else
$('#cn-{{$notification.type}}-only').removeClass('active sticky-top');
$("#nav-{{$notification.type}}-menu .notification").each(function(i, el){
var cn = $(el).data('contact_name').toLowerCase();
if(cn.indexOf(val) === -1)
$(this).addClass('d-none');
else
$(this).removeClass('d-none');
});
});
{{/if}} {{/if}}
{{/foreach}} {{/foreach}}
@ -90,7 +107,7 @@
</div> </div>
<div id="notifications" class="navbar-nav" data-children=".nav-item"> <div id="notifications" class="navbar-nav" data-children=".nav-item">
<div id="nav-notifications-template" rel="template"> <div id="nav-notifications-template" rel="template">
<a class="list-group-item clearfix notification {5}" href="{0}" title="{2} {3}" data-b64mid="{6}" data-notify_id="{7}" data-thread_top="{8}"> <a class="list-group-item clearfix notification {5}" href="{0}" title="{2} {3}" data-b64mid="{6}" data-notify_id="{7}" data-thread_top="{8}" data-contact_name="{2}">
<img class="menu-img-3" data-src="{1}"> <img class="menu-img-3" data-src="{1}">
<span class="contactname">{2}</span> <span class="contactname">{2}</span>
<span class="dropdown-sub-text">{3}<br>{4}</span> <span class="dropdown-sub-text">{3}<br>{4}</span>
@ -98,11 +115,11 @@
</div> </div>
{{foreach $notifications as $notification}} {{foreach $notifications as $notification}}
<div class="collapse {{$notification.type}}-button"> <div class="collapse {{$notification.type}}-button">
<a class="list-group-item" href="#nav-{{$notification.type}}-menu" title="{{$notification.title}}" data-toggle="collapse" data-parent="#notifications" rel="#nav-{{$notification.type}}-menu"> <a class="list-group-item" href="#nav-{{$notification.type}}-sub" 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}} <i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
<span class="float-right badge badge-{{$notification.severity}} {{$notification.type}}-update"></span> <span class="float-right badge badge-{{$notification.severity}} {{$notification.type}}-update"></span>
</a> </a>
<div id="nav-{{$notification.type}}-menu" class="collapse notification-content" rel="{{$notification.type}}"> <div id="nav-{{$notification.type}}-sub" class="collapse notification-content">
{{if $notification.viewall}} {{if $notification.viewall}}
<a class="list-group-item text-dark" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}"> <a class="list-group-item text-dark" id="nav-{{$notification.type}}-see-all" href="{{$notification.viewall.url}}">
<i class="fa fa-fw fa-external-link"></i> {{$notification.viewall.label}} <i class="fa fa-fw fa-external-link"></i> {{$notification.viewall.label}}
@ -117,8 +134,13 @@
<div class="list-group-item cursor-pointer" id="tt-{{$notification.type}}-only"> <div class="list-group-item cursor-pointer" id="tt-{{$notification.type}}-only">
<i class="fa fa-fw fa-filter"></i> {{$notification.filter.label}} <i class="fa fa-fw fa-filter"></i> {{$notification.filter.label}}
</div> </div>
<div class="list-group-item notifications-textinput" id="cn-{{$notification.type}}-only">
<input id="cn-{{$notification.type}}-input" type="text" class="form-control form-control-sm" placeholder="&#xf0b0; Filter by name">
</div>
{{/if}} {{/if}}
{{$loading}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span> <div id="nav-{{$notification.type}}-menu" class="" rel="{{$notification.type}}">
{{$loading}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
</div>
</div> </div>
</div> </div>
{{/foreach}} {{/foreach}}