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
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m12s
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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="Горячие клавиши" />
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user