Huge updates
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
@inject IJSRuntime JSRuntime
|
||||
<div class="nav-container onboarding-nav-menu">
|
||||
@* --- Brand / Logo Section --- *@
|
||||
<div class="nav-header">
|
||||
@@ -50,18 +51,20 @@
|
||||
<div class="nav-footer">
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
<div class="user-profile-card">
|
||||
<div class="avatar-container">
|
||||
<MudAvatar Class="user-avatar">
|
||||
@GetInitials(context.User.Identity?.Name)
|
||||
</MudAvatar>
|
||||
<span class="status-dot"></span>
|
||||
<NavLink href="/profile" class="user-profile-link">
|
||||
<div class="user-profile-card">
|
||||
<div class="avatar-container">
|
||||
<MudAvatar Class="user-avatar">
|
||||
@GetInitials(context.User.Identity?.Name)
|
||||
</MudAvatar>
|
||||
<span class="status-dot"></span>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<span class="user-name">@context.User.Identity?.Name</span>
|
||||
<span class="user-status">Online</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<span class="user-name">@context.User.Identity?.Name</span>
|
||||
<span class="user-status">Online</span>
|
||||
</div>
|
||||
</div>
|
||||
</NavLink>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
|
||||
@@ -74,8 +77,12 @@
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
<MudTooltip Text="Changelog anzeigen" Placement="Placement.Right">
|
||||
<MudNavLink Href="/changelog" Icon="@Icons.Material.Filled.NewReleases" Class="custom-nav-link version-link">
|
||||
<span class="version-text">Version 1.4</span>
|
||||
<MudNavLink Href="/changelog" Icon="@Icons.Material.Filled.NewReleases" Class="custom-nav-link version-link" OnClick="ClearBadge">
|
||||
<span class="version-text">Version @timetracker.Client.Components.Pages.Changelog.LatestVersion</span>
|
||||
@if (_showVersionBadge)
|
||||
{
|
||||
<span class="version-badge">1</span>
|
||||
}
|
||||
</MudNavLink>
|
||||
</MudTooltip>
|
||||
</MudNavMenu>
|
||||
@@ -85,6 +92,33 @@
|
||||
@code {
|
||||
[Parameter] public EventCallback OnToggleDrawer { get; set; }
|
||||
|
||||
private bool _showVersionBadge;
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
try
|
||||
{
|
||||
var lastSeen = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "lastSeenVersion");
|
||||
var latest = timetracker.Client.Components.Pages.Changelog.LatestVersion;
|
||||
var isHighlighted = timetracker.Client.Components.Pages.Changelog.IsLatestHighlighted;
|
||||
|
||||
_showVersionBadge = isHighlighted && lastSeen != latest;
|
||||
StateHasChanged();
|
||||
}
|
||||
catch
|
||||
{
|
||||
// Ignored in SSR
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private void ClearBadge()
|
||||
{
|
||||
_showVersionBadge = false;
|
||||
}
|
||||
|
||||
private string GetInitials(string? name)
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(name))
|
||||
|
||||
@@ -177,7 +177,19 @@
|
||||
background: rgba(15, 23, 42, 0.2);
|
||||
}
|
||||
|
||||
/* User profile card */
|
||||
/* User profile link */
|
||||
.user-profile-link {
|
||||
text-decoration: none !important;
|
||||
color: inherit !important;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-profile-link:hover .user-profile-card {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.user-profile-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -248,6 +260,37 @@
|
||||
}
|
||||
::deep .version-link .mud-nav-link-text {
|
||||
font-size: 0.75rem !important;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
::deep .version-badge {
|
||||
background-color: #EF4444;
|
||||
color: white;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
|
||||
animation: pulse-badge 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-badge {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- COLLAPSED DRAWER (MINI STATE) STYLES --- */
|
||||
|
||||
Reference in New Issue
Block a user