daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

Front End

Browse Source 
- MudBlazor Theme Manager tryout
 - Navigation bar rework
 - Icons and styles rework
 - Track Gallery & Card layout redesign for SPA
 - Track Player bottom bar
This commit is contained in:
daniel-c-harvey
2025-09-05 22:27:12 -04:00
parent 7f78545a02
commit 3766d4e010
20 changed files with 522 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftWeb.Client/Layout/MainLayout.razor
+35 -17
View File
@@ -1,21 +1,22 @@
@inherits LayoutComponentBase
<MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" />
<MudThemeProvider Theme="@_themeManager.Theme" IsDarkMode="_isDarkMode" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<MudLayout>
<MudAppBar Elevation="1">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
<MudText Typo="Typo.h5" Class="ml-3">Application</MudText>
<MudSpacer />
<MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle" />
<MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
</MudAppBar>
<MudDrawer id="nav-drawer" @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
<MudThemeManagerButton OnClick="@((e) => OpenThemeManager(true))" />
<MudThemeManager Open="_themeManagerOpen" OpenChanged="OpenThemeManager" Theme="_themeManager" ThemeChanged="UpdateTheme" />
<MudAppBar Elevation="_themeManager.AppBarElevation">
<MudAvatar Class="mr-2">
<MudImage Src="img/deepdrft-logo.jpg"></MudImage>
</MudAvatar>
<NavMenu />
</MudDrawer>
<MudMainContent Class="pt-16 pa-4">
<MudSpacer/>
<MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle"/>
<MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End"/>
</MudAppBar>
<MudMainContent Class="pt-16 pa-4" Style="min-height: 100vh">
@Body
</MudMainContent>
</MudLayout>
@@ -30,18 +31,21 @@
@code {
private bool _drawerOpen = true;
private bool _isDarkMode = true;
private MudTheme? _theme = null;
// private MudTheme? _theme = null;
protected override void OnInitialized()
{
base.OnInitialized();
_theme = new()
_themeManager = new ThemeManagerTheme
{
PaletteLight = _lightPalette,
PaletteDark = _darkPalette,
LayoutProperties = new LayoutProperties()
Theme =
{
PaletteDark = _darkPalette,
PaletteLight = _lightPalette
}
};
StateHasChanged();
}
private void DrawerToggle()
@@ -53,6 +57,20 @@
{
_isDarkMode = !_isDarkMode;
}
private ThemeManagerTheme _themeManager;
public bool _themeManagerOpen = false;
void OpenThemeManager(bool value)
{
_themeManagerOpen = value;
}
void UpdateTheme(ThemeManagerTheme value)
{
_themeManager = value;
StateHasChanged();
}
private readonly PaletteLight _lightPalette = new()
{