mirrors/MeshCentral
2
0
Fork 0
mirror of https://github.com/Ylianst/MeshCentral.git synced 2025-10-26 11:27:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve notification icon UI and add badge

Browse Source 
Replaces the plain notification count with a bell icon and a badge for better visibility. (FA)
This commit is contained in:
TheDevRyan 2025-10-23 22:05:39 +01:00
parent a4982ae032
commit b7bc0d71c2
2 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/styles/style-bootstrap.css
View File

@ -2342,7 +2342,7 @@ nav .lbbuttonsel2 {
position: absolute;
z-index: 1000;
top: 80px;
right: 187px;
right: 10rem;
width: 300px;
text-align: left;
background-color: #F0ECCD;
@ -2395,13 +2395,12 @@ nav .lbbuttonsel2 {
min-width: 28px;
font-size: 20px;
border-radius: 5px;
background-color: lightblue;
text-align: center;
margin: 8px;
cursor: pointer;
padding: 4px;
position: absolute;
right: 10rem;
right: 9rem;
top: 0.2em;
}
@ -3394,10 +3393,10 @@ nav .lbbuttonsel2 {
}
#notificationCount {
right: 7rem;
right: 4rem;
}
.notifiyBox {
right: 97px;
right: 3.5rem;
}
.notifiyBox:after {

34
views/default3.handlebars
View File

@ -145,8 +145,18 @@
<div class="title" onclick="go(1,event)">{{{title1}}}</div>
<div class="title2">{{{title2}}}</div>
<div style="float:right">
<div id=notificationCount onclick="clickNotificationIcon()" class="unselectable" style="display: none;"
title="Click to view current notifications">0</div>
<div id="notificationCount"
class="position-relative"
title="Click to view current notifications"
onclick="clickNotificationIcon()"
style="display: none;">
<i class="fa-solid fa-bell fa-lg text-white"></i>
<span id="notificationBadge"
class="position-absolute top-1 start-100 translate-middle badge rounded-pill bg-danger"
style="font-size: 0.65rem;">
0
</span>
</div>
</div>
<p id="logoutControl"><span id=logoutControlSpan class="logoncontrolspan"></span><span id=idleTimeoutNotify
style="color:yellow"></span></p>
@ -19473,12 +19483,26 @@
// Set the notification count on the upper right of the screen
function setNotificationCount(c) {
if (parseInt(Q('notificationCount').innerHTML) == c) return; // If the count did not change, exit now.
QH('notificationCount', c);
QS('notificationCount')['background-color'] = (c == 0) ? 'lightblue' : 'orange';
var badge = Q('notificationBadge');
if (parseInt(badge.innerHTML) === c) return;
badge.innerHTML = c;
QV('notificationCount', c > 0);
}
// Close notification box when clicking outside
function setupNotificationClickOutside() {
document.addEventListener('click', function(event) {
var notificationBox = Q('notifiyBox');
var notificationIcon = Q('notificationCount');
if (notificationBox && QS('notifiyBox')['display'] !== 'none') {
if (!notificationBox.contains(event.target) && !notificationIcon.contains(event.target)) {
QV('notifiyBox', false);
}
}
});
}
setupNotificationClickOutside();
// Refresh the notification box
function drawNotifications() {
var notifySettings = getstore('notifications', 0);