Configured MudBlazor & added layouts

This commit is contained in:
Max 2024-06-17 14:47:10 +02:00
parent 73d5ba2dad
commit 2f6ed064f1
11 changed files with 97 additions and 112 deletions

View File

@ -16,7 +16,8 @@
</head>
<body>
<Routes/>
@*Rendermode to 'InteractiveServer' or else MudBlazor will not work with interactivity*@
<Routes @rendermode="InteractiveServer"/>
<script src="_framework/blazor.web.js"></script>
@*MudBlazor*@
<script src="_content/MudBlazor/MudBlazor.min.js"></script>

View File

@ -0,0 +1,25 @@
@inherits LayoutComponentBase
@layout BaseLayout
<CascadingValue Value="this">
<MudAppBar Color="Color.Primary">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => ToggleDrawerOpen())" />
<MudText Typo="Typo.h6">@AppText</MudText>
<MudSpacer/>
<MudIconButton Icon="@Icons.Custom.Brands.GitHub" Href="https://github.com/hmaxnl/SharpRSS"/>
<MudToggleIconButton @bind-Toggled="@BaseLayout.DarkTheme" Color="Color.Dark" ToggledColor="Color.Warning" Icon="@Icons.Material.Filled.DarkMode" ToggledIcon="@Icons.Material.Filled.LightMode"/>
</MudAppBar>
@Body
</CascadingValue>
@code {
[CascadingParameter]
public BaseLayout BaseLayout { get; set; } = null!;
public bool DrawerOpen { get; set; } = true;
public string AppText { get; set; } = "SharpRSS";
private void ToggleDrawerOpen()
{
DrawerOpen = !DrawerOpen;
}
}

View File

@ -0,0 +1,46 @@
@inherits LayoutComponentBase
<MudThemeProvider @ref="@_themeProvider" Theme="@MudTheme" IsDarkMode="@DarkTheme"/>
<MudDialogProvider/>
<MudSnackbarProvider/>
<CascadingValue Value="this">
<MudLayout>
<MudMainContent>
@Body
</MudMainContent>
</MudLayout>
</CascadingValue>
@code {
public readonly MudTheme MudTheme = new MudTheme();
private MudThemeProvider? _themeProvider;
private bool _isDarkTheme = true;
public event EventHandler<bool>? OnDarkThemeChanged;
public bool DarkTheme
{
get => _isDarkTheme;
set
{
_isDarkTheme = value;
ThemeChanged();
}
}
private async void ThemeChanged()
{
//TODO: Update user settings
StateHasChanged();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && _themeProvider != null)
{
DarkTheme = await _themeProvider.GetSystemPreference();
_themeProvider.IsDarkModeChanged = EventCallback.Factory.Create<bool>(this, x => OnDarkThemeChanged?.Invoke(this, x));
}
}
}

View File

@ -0,0 +1,8 @@
@inherits LayoutComponentBase
@layout BaseLayout
@Body
@code {
}

View File

@ -1,27 +1,18 @@
@inherits LayoutComponentBase
@layout ApplicationLayout
<MudThemeProvider IsDarkMode="true"/>
<MudDialogProvider/>
<MudSnackbarProvider/>
<PageTitle>SharpRSS</PageTitle>
<div class="page">
<div class="sidebar">
<NavMenu/>
</div>
<MudDrawer @bind-Open="@ApplicationLayout.DrawerOpen" ClipMode="DrawerClipMode.Always">
<MudNavMenu>
<MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home" Href="/">Home</MudNavLink>
</MudNavMenu>
<MudSpacer/>
</MudDrawer>
@Body
<main>
<div class="top-row px-4">
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</main>
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
@code
{
[CascadingParameter]
public ApplicationLayout ApplicationLayout { get; set; } = null!;
}

View File

@ -1,20 +0,0 @@
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}

View File

@ -1,67 +0,0 @@
@page "/weather"
@attribute [StreamRendering]
<PageTitle>Weather</PageTitle>
<h1>Weather</h1>
<p>This component demonstrates showing data.</p>
@if (forecasts == null)
{
<p>
<em>Loading...</em>
</p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@code {
private WeatherForecast[]? forecasts;
protected override async Task OnInitializedAsync()
{
// Simulate asynchronous loading to demonstrate streaming rendering
await Task.Delay(500);
var startDate = DateOnly.FromDateTime(DateTime.Now);
var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = summaries[Random.Shared.Next(summaries.Length)]
}).ToArray();
}
private class WeatherForecast
{
public DateOnly Date { get; set; }
public int TemperatureC { get; set; }
public string? Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
}

View File

@ -10,4 +10,5 @@
@using SharpRSS.Blazor
@using SharpRSS.Blazor.Components
@*MudBlazor*@
@using MudBlazor
@using MudBlazor
@using MudBlazor.Components