feat(alerts): add dropup functionality to AlertsBell component and improve dropdown styling for better user experience
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m12s

This commit is contained in:
2026-02-24 01:32:22 +07:00
parent 513a22008b
commit 574c0d25c2
3 changed files with 31 additions and 15 deletions
+14
View File
@@ -92,6 +92,20 @@
.navbar-vertical .navbar-sidebar-footer .dropdown-toggle::after { .navbar-vertical .navbar-sidebar-footer .dropdown-toggle::after {
display: none; display: none;
} }
/* Панель оповещений в футере: без горизонтального скролла, футер карточки в одну линию */
.navbar-vertical .navbar-sidebar-footer .dropdown-menu-card {
overflow-x: hidden;
box-sizing: border-box;
}
.navbar-vertical .navbar-sidebar-footer .dropdown-menu-card .card-footer {
flex-wrap: nowrap;
min-width: 0;
}
.navbar-vertical .navbar-sidebar-footer .dropdown-menu-card .card-footer .btn {
flex: 1 1 auto;
min-width: 0;
justify-content: center;
}
/* Стрелка только у пунктов с подменю (dropdown-toggle), не у обычных ссылок и не у бренда */ /* Стрелка только у пунктов с подменю (dropdown-toggle), не у обычных ссылок и не у бренда */
.navbar-vertical .nav-link:not(.dropdown-toggle)::after { .navbar-vertical .nav-link:not(.dropdown-toggle)::after {
display: none !important; display: none !important;
+1 -1
View File
@@ -588,7 +588,7 @@ function MainLayout() {
</div> </div>
</div> </div>
<div className="nav-item"> <div className="nav-item">
<AlertsBell /> <AlertsBell dropup />
</div> </div>
<div className="nav-item"> <div className="nav-item">
<KeyboardShortcutsButton className="nav-link btn-icon rounded" title="Горячие клавиши" /> <KeyboardShortcutsButton className="nav-link btn-icon rounded" title="Горячие клавиши" />
+16 -14
View File
@@ -21,28 +21,30 @@ function AlertIcon({ type, severity }) {
return <Icon size={18} className={colorClass} />; return <Icon size={18} className={colorClass} />;
} }
export default function AlertsBell() { export default function AlertsBell({ dropup = false }) {
const { alerts, total, loading, refresh } = useAlerts(); const { alerts, total, loading, refresh } = useAlerts();
return ( return (
<div className="nav-item dropdown"> <div className={`nav-item dropdown${dropup ? ' dropup' : ''}`}>
<a <a
href="#" href="#"
className="nav-link px-2 dropdown-toggle position-relative" className="nav-link px-2 dropdown-toggle position-relative d-inline-flex align-items-center justify-content-center"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
onClick={(e) => e.preventDefault()} onClick={(e) => e.preventDefault()}
aria-label={`Оповещения: ${total} активных`} aria-label={`Оповещения: ${total} активных`}
title="Оповещения о проблемах" title="Оповещения о проблемах"
> >
<IconBell size={20} /> <span className="position-relative d-inline-flex">
{total > 0 && ( <IconBell size={20} />
<span className="badge badge-sm bg-danger position-absolute top-0 end-0 translate-middle rounded-pill"> {total > 0 && (
{total > 99 ? '99+' : total} <span className="badge badge-sm bg-danger position-absolute top-0 end-0 translate-middle rounded-pill" style={{ top: '-2px', right: '-2px' }}>
</span> {total > 99 ? '99+' : total}
)} </span>
)}
</span>
</a> </a>
<div className="dropdown-menu dropdown-menu-end dropdown-menu-card" style={{ width: '320px', maxWidth: '95vw' }}> <div className="dropdown-menu dropdown-menu-end dropdown-menu-card overflow-hidden" style={{ width: '320px', maxWidth: '95vw' }}>
<div className="card-header d-flex align-items-center justify-content-between py-2"> <div className="card-header d-flex align-items-center justify-content-between py-2 px-3">
<span className="fw-semibold">Оповещения</span> <span className="fw-semibold">Оповещения</span>
<button <button
type="button" type="button"
@@ -85,11 +87,11 @@ export default function AlertsBell() {
</div> </div>
)} )}
</div> </div>
<div className="card-footer py-2 d-flex gap-2"> <div className="card-footer py-2 px-3 d-flex align-items-center gap-2 flex-nowrap">
<Link to="/settings#alerts" className="btn btn-sm btn-ghost-secondary flex-grow-1"> <Link to="/settings#alerts" className="btn btn-sm btn-ghost-secondary text-nowrap">
Настройки Настройки
</Link> </Link>
<Link to="/dashboard" className="btn btn-sm btn-outline-primary flex-grow-1"> <Link to="/dashboard" className="btn btn-sm btn-outline-primary text-nowrap">
Панель Панель
</Link> </Link>
</div> </div>