mirror of
https://github.com/hmaxnl/SharpRSS.git
synced 2025-01-18 12:54:20 +01:00
Configured MudBlazor & added layouts
This commit is contained in:
parent
73d5ba2dad
commit
2f6ed064f1
|
@ -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>
|
||||
|
|
25
SharpRSS.Blazor/Components/Layout/ApplicationLayout.razor
Normal file
25
SharpRSS.Blazor/Components/Layout/ApplicationLayout.razor
Normal 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;
|
||||
}
|
||||
}
|
46
SharpRSS.Blazor/Components/Layout/BaseLayout.razor
Normal file
46
SharpRSS.Blazor/Components/Layout/BaseLayout.razor
Normal 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));
|
||||
}
|
||||
}
|
||||
}
|
8
SharpRSS.Blazor/Components/Layout/EmptyLayout.razor
Normal file
8
SharpRSS.Blazor/Components/Layout/EmptyLayout.razor
Normal file
|
@ -0,0 +1,8 @@
|
|||
@inherits LayoutComponentBase
|
||||
@layout BaseLayout
|
||||
|
||||
@Body
|
||||
|
||||
@code {
|
||||
|
||||
}
|
|
@ -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!;
|
||||
}
|
||||
|
|
|
@ -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++;
|
||||
}
|
||||
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
|
@ -11,3 +11,4 @@
|
|||
@using SharpRSS.Blazor.Components
|
||||
@*MudBlazor*@
|
||||
@using MudBlazor
|
||||
@using MudBlazor.Components
|
Loading…
Reference in New Issue
Block a user