Add active indicator for main navigation

This commit is contained in:
Dennis Reimann 2021-03-19 12:05:46 +01:00
parent 8827721605
commit 73730355b8
No known key found for this signature in database
GPG key ID: 5009E1797F03F8D0
18 changed files with 108 additions and 16 deletions

View file

@ -2,6 +2,7 @@
@inject UserManager<ApplicationUser> UserManager @inject UserManager<ApplicationUser> UserManager
@inject CssThemeManager CssThemeManager @inject CssThemeManager CssThemeManager
@using BTCPayServer.HostedServices @using BTCPayServer.HostedServices
@using BTCPayServer.Views.Notifications
@using Microsoft.AspNetCore.Http.Extensions @using Microsoft.AspNetCore.Http.Extensions
@model BTCPayServer.Components.NotificationsDropdown.NotificationSummaryViewModel @model BTCPayServer.Components.NotificationsDropdown.NotificationSummaryViewModel
@addTagHelper *, BundlerMinifier.TagHelpers @addTagHelper *, BundlerMinifier.TagHelpers
@ -9,7 +10,7 @@
@if (Model.UnseenCount > 0) @if (Model.UnseenCount > 0)
{ {
<li class="nav-item dropdown" id="notifications-nav-item"> <li class="nav-item dropdown" id="notifications-nav-item">
<a class="nav-link js-scroll-trigger border-bottom-0" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" id="Notifications"> <a class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(NotificationsNavPages))" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" id="Notifications">
<span class="d-lg-none d-sm-block">Notifications</span><i class="fa fa-bell d-lg-inline-block d-none"></i> <span class="d-lg-none d-sm-block">Notifications</span><i class="fa fa-bell d-lg-inline-block d-none"></i>
</a> </a>
<span class="alerts-badge badge badge-pill badge-danger">@Model.UnseenCount</span> <span class="alerts-badge badge badge-pill badge-danger">@Model.UnseenCount</span>
@ -46,7 +47,7 @@
else else
{ {
<li class="nav-item" id="notifications-nav-item"> <li class="nav-item" id="notifications-nav-item">
<a asp-controller="Notifications" asp-action="Index" title="Notifications" class="nav-link js-scroll-trigger" id="Notifications"> <a asp-controller="Notifications" asp-action="Index" title="Notifications" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(NotificationsNavPages))" id="Notifications">
<span class="d-lg-none d-sm-block">Notifications</span><i class="fa fa-bell d-lg-inline-block d-none"></i> <span class="d-lg-none d-sm-block">Notifications</span><i class="fa fa-bell d-lg-inline-block d-none"></i>
</a> </a>
</li> </li>

View file

@ -0,0 +1,7 @@
namespace BTCPayServer.Views.Apps
{
public enum AppsNavPages
{
Index, Create
}
}

View file

@ -1,3 +1,6 @@
@{ @using BTCPayServer.Views
@using BTCPayServer.Views.Apps
@{
ViewBag.MainTitle = "Manage app"; ViewBag.MainTitle = "Manage app";
ViewData.SetActiveCategory(typeof(AppsNavPages));
} }

View file

@ -0,0 +1,7 @@
namespace BTCPayServer.Views.Invoice
{
public enum InvoiceNavPages
{
Index, Create
}
}

View file

@ -0,0 +1,5 @@
@using BTCPayServer.Views
@using BTCPayServer.Views.Invoice
@{
ViewData.SetActiveCategory(typeof(InvoiceNavPages));
}

View file

@ -1,4 +1,7 @@
@{ @using BTCPayServer.Views
@using BTCPayServer.Views.Manage
@{
Layout = "../Shared/_NavLayout.cshtml"; Layout = "../Shared/_NavLayout.cshtml";
ViewBag.MainTitle = "Manage your account"; ViewBag.MainTitle = "Manage your account";
ViewData.SetActiveCategory(typeof(ManageNavPages));
} }

View file

@ -0,0 +1,7 @@
namespace BTCPayServer.Views.Notifications
{
public enum NotificationsNavPages
{
Index
}
}

View file

@ -0,0 +1,6 @@
@using BTCPayServer.Views
@using BTCPayServer.Views.Notifications
@{
ViewData.SetActiveCategory(typeof(NotificationsNavPages));
}

View file

@ -0,0 +1,7 @@
namespace BTCPayServer.Views.PaymentRequest
{
public enum PaymentRequestsNavPages
{
Index, Create
}
}

View file

@ -0,0 +1,5 @@
@using BTCPayServer.Views
@using BTCPayServer.Views.PaymentRequest
@{
ViewData.SetActiveCategory(typeof(PaymentRequestsNavPages));
}

View file

@ -1,4 +1,7 @@
@{ @using BTCPayServer.Views
@using BTCPayServer.Views.Server
@{
Layout = "../Shared/_NavLayout.cshtml"; Layout = "../Shared/_NavLayout.cshtml";
ViewBag.MainTitle = "Server settings"; ViewBag.MainTitle = "Server settings";
ViewData.SetActiveCategory(typeof(ServerNavPages));
} }

View file

@ -1,4 +1,10 @@
@using BTCPayServer.Views.Server @using BTCPayServer.Views.Server
@using BTCPayServer.Views.Stores
@using BTCPayServer.Views.Apps
@using BTCPayServer.Views.Invoice
@using BTCPayServer.Views.Manage
@using BTCPayServer.Views.PaymentRequest
@using BTCPayServer.Views.Wallets
@inject SignInManager<ApplicationUser> SignInManager @inject SignInManager<ApplicationUser> SignInManager
@inject UserManager<ApplicationUser> UserManager @inject UserManager<ApplicationUser> UserManager
@inject RoleManager<IdentityRole> RoleManager @inject RoleManager<IdentityRole> RoleManager
@ -53,18 +59,18 @@
<ul class="navbar-nav"> <ul class="navbar-nav">
@if (User.IsInRole(Roles.ServerAdmin)) @if (User.IsInRole(Roles.ServerAdmin))
{ {
<li class="nav-item"><a asp-area="" asp-controller="Server" asp-action="ListUsers" class="nav-link js-scroll-trigger" id="ServerSettings">Server settings</a></li> <li class="nav-item"><a asp-area="" asp-controller="Server" asp-action="ListUsers" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(ServerNavPages))" id="ServerSettings">Server settings</a></li>
} }
<li class="nav-item"><a asp-area="" asp-controller="UserStores" asp-action="ListStores" class="nav-link js-scroll-trigger" id="Stores">Stores</a></li> <li class="nav-item"><a asp-area="" asp-controller="UserStores" asp-action="ListStores" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(StoreNavPages))" id="Stores">Stores</a></li>
<li class="nav-item"><a asp-area="" asp-controller="Apps" asp-action="ListApps" class="nav-link js-scroll-trigger" id="Apps">Apps</a></li> <li class="nav-item"><a asp-area="" asp-controller="Apps" asp-action="ListApps" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(AppsNavPages))" id="Apps">Apps</a></li>
<li class="nav-item"><a asp-area="" asp-controller="Wallets" asp-action="ListWallets" class="nav-link js-scroll-trigger" id="Wallets">Wallets</a></li> <li class="nav-item"><a asp-area="" asp-controller="Wallets" asp-action="ListWallets" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(WalletsNavPages))" id="Wallets">Wallets</a></li>
<li class="nav-item"><a asp-area="" asp-controller="Invoice" asp-action="ListInvoices" class="nav-link js-scroll-trigger" id="Invoices">Invoices</a></li> <li class="nav-item"><a asp-area="" asp-controller="Invoice" asp-action="ListInvoices" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(InvoiceNavPages))" id="Invoices">Invoices</a></li>
<li class="nav-item"><a asp-area="" asp-controller="PaymentRequest" asp-action="GetPaymentRequests" class="nav-link js-scroll-trigger" id="PaymentRequests">Payment Requests</a></li> <li class="nav-item"><a asp-area="" asp-controller="PaymentRequest" asp-action="GetPaymentRequests" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(PaymentRequestsNavPages))" id="PaymentRequests">Payment Requests</a></li>
<vc:ui-extension-point location="header-nav"/> <vc:ui-extension-point location="header-nav"/>
</ul> </ul>
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a asp-area="" asp-controller="Manage" asp-action="Index" title="My settings" class="nav-link js-scroll-trigger" id="MySettings"><span class="d-lg-none d-sm-block">Account</span><i class="fa fa-user d-lg-inline-block d-none"></i></a> <a asp-area="" asp-controller="Manage" asp-action="Index" title="My settings" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(ManageNavPages))" id="MySettings"><span class="d-lg-none d-sm-block">Account</span><i class="fa fa-user d-lg-inline-block d-none"></i></a>
</li> </li>
<vc:notifications-dropdown/> <vc:notifications-dropdown/>
<li class="nav-item"> <li class="nav-item">

View file

@ -1,3 +1,7 @@
@{ @using BTCPayServer.Views
@using BTCPayServer.Views.Stores
@{
ViewBag.MainTitle = "Manage store"; ViewBag.MainTitle = "Manage store";
ViewData.SetActiveCategory(typeof(StoreNavPages));
} }

View file

@ -0,0 +1,6 @@
@using BTCPayServer.Views
@using BTCPayServer.Views.Stores
@{
ViewData.SetActiveCategory(typeof(StoreNavPages));
}

View file

@ -7,12 +7,30 @@ namespace BTCPayServer.Views
{ {
public static class ViewsRazor public static class ViewsRazor
{ {
public const string ACTIVE_PAGE_KEY = "ActivePage"; private const string ACTIVE_CATEGORY_KEY = "ActiveCategory";
private const string ACTIVE_PAGE_KEY = "ActivePage";
public static void SetActivePageAndTitle<T>(this ViewDataDictionary viewData, T activePage, string title = null) public static void SetActivePageAndTitle<T>(this ViewDataDictionary viewData, T activePage, string title = null)
where T : IConvertible where T : IConvertible
{ {
viewData["Title"] = title ?? activePage.ToString(); viewData["Title"] = title ?? activePage.ToString();
viewData[ACTIVE_PAGE_KEY] = activePage; viewData[ACTIVE_PAGE_KEY] = activePage;
SetActiveCategory(viewData, activePage.GetType());
}
public static void SetActiveCategory<T>(this ViewDataDictionary viewData, T activeCategory)
{
viewData[ACTIVE_CATEGORY_KEY] = activeCategory;
}
public static string IsActiveCategory<T>(this ViewDataDictionary viewData, T category)
{
if (!viewData.ContainsKey(ACTIVE_CATEGORY_KEY))
{
return null;
}
var activeCategory = (T)viewData[ACTIVE_CATEGORY_KEY];
return category.Equals(activeCategory) ? "active" : null;
} }
public static string IsActivePage<T>(this ViewDataDictionary viewData, T page) public static string IsActivePage<T>(this ViewDataDictionary viewData, T page)

View file

@ -1,3 +1,6 @@
@{ @using BTCPayServer.Views
@using BTCPayServer.Views.Wallets
@{
ViewBag.MainTitle = "Manage wallet"; ViewBag.MainTitle = "Manage wallet";
ViewData.SetActiveCategory(typeof(WalletsNavPages));
} }

View file

@ -69,7 +69,7 @@
--btcpay-wizard-color: var(--btcpay-body-color); --btcpay-wizard-color: var(--btcpay-body-color);
--btcpay-header-color-link-accent: var(--btcpay-color-neutral-300); --btcpay-header-color-link-accent: var(--btcpay-color-neutral-300);
--btcpay-header-color-link-active: var(--btcpay-color-neutral-300); --btcpay-header-color-link-active: var(--btcpay-brand-light);
--btcpay-nav-color-link-accent: var(--btcpay-color-neutral-100); --btcpay-nav-color-link-accent: var(--btcpay-color-neutral-100);
--btcpay-footer-bg: var(--btcpay-brand-darkest); --btcpay-footer-bg: var(--btcpay-brand-darkest);

View file

@ -7,6 +7,7 @@
--btcpay-bg-dark: var(--btcpay-color-neutral-950); --btcpay-bg-dark: var(--btcpay-color-neutral-950);
--btcpay-header-bg: var(--btcpay-bg-dark); --btcpay-header-bg: var(--btcpay-bg-dark);
--btcpay-header-color-link-active: var(--btcpay-color-primary);
--btcpay-body-bg: var(--btcpay-color-neutral-900); --btcpay-body-bg: var(--btcpay-color-neutral-900);
--btcpay-body-color: var(--btcpay-color-white); --btcpay-body-color: var(--btcpay-color-white);