Adds option for dot notification in menus and cleans up empty lines

main
Yasen Pramatarov 2026-03-23 10:47:26 +02:00
parent 2aaf051677
commit 5771fb0fe1
9 changed files with 146 additions and 24 deletions

View File

@ -709,6 +709,18 @@ if (is_array($overviewStatusesPayload)) {
$adminOverviewStatuses = $overviewStatusesPayload['statuses'] ?? (is_array($overviewStatusesPayload) ? $overviewStatusesPayload : []);
}
$adminTabDotsPayload = \App\Core\HookDispatcher::applyFilters('admin.tabs.dot_indicators', [
'dots' => [],
'sections' => $sectionRegistry,
'section_state' => $sectionState,
'app_root' => $app_root,
'user_id' => $userId,
]);
$adminTabDots = [];
if (is_array($adminTabDotsPayload)) {
$adminTabDots = $adminTabDotsPayload['dots'] ?? (is_array($adminTabDotsPayload) ? $adminTabDotsPayload : []);
}
// Get any new feedback messages
include_once '../app/helpers/feedback.php';

View File

@ -31,6 +31,17 @@ if (!empty($modal_to_open)) {
font-size: 0.75rem;
max-width: 300px;
}
.tm-admin-tab-label,
.tm-admin-subnav-link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.tm-admin-tab-label {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
</style>
<?php
@ -145,7 +156,12 @@ if (!empty($adminOverviewStatuses) && is_array($adminOverviewStatuses)) {
role="tab"
aria-selected="<?= $isActive ? 'true' : 'false' ?>"
aria-controls="tm-admin-tab-<?= htmlspecialchars($sectionKey) ?>">
<?= htmlspecialchars($tabMeta['label'] ?? ucfirst($sectionKey)) ?>
<span class="tm-admin-tab-label">
<?= htmlspecialchars($tabMeta['label'] ?? ucfirst($sectionKey)) ?>
<?php if (!empty($adminTabDots[$sectionKey])): ?>
<span class="tm-admin-tab-dot" aria-hidden="true"></span>
<?php endif; ?>
</span>
</a>
<?php endforeach; ?>
</div>

View File

@ -1,4 +1,33 @@
<?php
$navMainDotsPayload = \App\Core\HookDispatcher::applyFilters('nav.main.dot_indicators', [
'dots' => [],
'app_root' => $app_root,
'user_id' => $userId ?? 0,
'db' => $db ?? null,
]);
$navMainDots = [];
if (is_array($navMainDotsPayload)) {
$navMainDots = $navMainDotsPayload['dots'] ?? (is_array($navMainDotsPayload) ? $navMainDotsPayload : []);
}
$navMainHasDot = false;
if (!empty($navMainDots) && is_array($navMainDots)) {
$navMainHasDot = (bool)array_filter($navMainDots, static function($value) {
return (bool)$value;
});
}
$navSettingsDotsPayload = \App\Core\HookDispatcher::applyFilters('nav.settings.dot_indicators', [
'dots' => [],
'app_root' => $app_root,
'user_id' => $userId ?? 0,
'db' => $db ?? null,
]);
$navSettingsDots = [];
if (is_array($navSettingsDotsPayload)) {
$navSettingsDots = $navSettingsDotsPayload['dots'] ?? (is_array($navSettingsDotsPayload) ? $navSettingsDotsPayload : []);
}
?>
<div class="container-fluid p-0">
<!-- Modern Menu -->
@ -65,14 +94,22 @@
</div>
</div>
<div class="dropdown">
<button class="btn modern-header-btn dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
<button class="btn modern-header-btn dropdown-toggle position-relative" type="button" data-toggle="dropdown" aria-expanded="false">
<i class="fas fa-cog"></i>
<?php if ($navMainHasDot): ?>
<span class="modern-notification-dot" aria-hidden="true"></span>
<?php endif; ?>
</button>
<div class="dropdown-menu dropdown-menu-right modern-dropdown">
<h6 class="dropdown-header modern-dropdown-header">settings</h6>
<?php if ($userObject->hasRight($userId, 'superuser')) {?>
<a class="dropdown-item modern-dropdown-item" href="<?= htmlspecialchars($app_root) ?>?page=admin">
<i class="fas fa-toolbox"></i>Admin
<span class="tm-nav-link-label">
<i class="fas fa-toolbox"></i>Admin
<?php if (!empty($navSettingsDots['admin'])): ?>
<span class="tm-nav-dot" aria-hidden="true"></span>
<?php endif; ?>
</span>
</a>
<?php } ?>
<?php if ($userObject->hasRight($userId, 'superuser') ||

View File

@ -8,6 +8,29 @@
font-size: 0.75rem;
}
/* dot notifications in menus */
.tm-nav-icon,
.tm-nav-link-label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
position: relative;
}
.tm-nav-icon .tm-nav-dot {
position: absolute;
top: -0.15rem;
right: -0.35rem;
}
.tm-nav-dot {
width: 0.75rem;
height: 0.75rem;
background: #e53935;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 0 2px #fff;
}
/* dot notifications in menus */
.tm-profile-view {
display: flex;
flex-direction: column;
@ -3601,6 +3624,40 @@ body {
color: #4361ee;
}
/* admin dot notifications */
.tm-admin-tab-dot {
width: 0.45rem;
height: 0.45rem;
background: #e53935;
border-radius: 999px;
display: inline-block;
box-shadow: 0 0 0 2px #fff;
}
.tm-admin-subnav-dot {
width: 0.4rem;
height: 0.4rem;
background: #e53935;
border-radius: 999px;
display: inline-block;
}
/* admin dot notifications */
.modern-notification-dot {
position: absolute;
top: -4px;
right: -4px;
background: #ef476f;
color: white;
border-radius: 50%;
width: 15px;
height: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
}
.modern-notification-badge {
position: absolute;
top: -4px;