mirror of
https://github.com/hmaxnl/SharpRSS.git
synced 2025-01-18 21:04:21 +01:00
Configured MudBlazor & added layouts
This commit is contained in:
parent
73d5ba2dad
commit
2f6ed064f1
|
@ -16,7 +16,8 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<Routes/>
|
@*Rendermode to 'InteractiveServer' or else MudBlazor will not work with interactivity*@
|
||||||
|
<Routes @rendermode="InteractiveServer"/>
|
||||||
<script src="_framework/blazor.web.js"></script>
|
<script src="_framework/blazor.web.js"></script>
|
||||||
@*MudBlazor*@
|
@*MudBlazor*@
|
||||||
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
|
<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
|
@inherits LayoutComponentBase
|
||||||
|
@layout ApplicationLayout
|
||||||
|
|
||||||
<MudThemeProvider IsDarkMode="true"/>
|
<PageTitle>SharpRSS</PageTitle>
|
||||||
<MudDialogProvider/>
|
|
||||||
<MudSnackbarProvider/>
|
|
||||||
|
|
||||||
<div class="page">
|
<MudDrawer @bind-Open="@ApplicationLayout.DrawerOpen" ClipMode="DrawerClipMode.Always">
|
||||||
<div class="sidebar">
|
<MudNavMenu>
|
||||||
<NavMenu/>
|
<MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home" Href="/">Home</MudNavLink>
|
||||||
</div>
|
</MudNavMenu>
|
||||||
|
<MudSpacer/>
|
||||||
|
</MudDrawer>
|
||||||
|
@Body
|
||||||
|
|
||||||
<main>
|
@code
|
||||||
<div class="top-row px-4">
|
{
|
||||||
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
|
[CascadingParameter]
|
||||||
</div>
|
public ApplicationLayout ApplicationLayout { get; set; } = null!;
|
||||||
|
}
|
||||||
<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>
|
|
||||||
|
|
|
@ -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
|
@using SharpRSS.Blazor.Components
|
||||||
@*MudBlazor*@
|
@*MudBlazor*@
|
||||||
@using MudBlazor
|
@using MudBlazor
|
||||||
|
@using MudBlazor.Components
|
Loading…
Reference in New Issue
Block a user