JonathanMcCaffrey/IGP-Fan-Reference
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adding MudBlazor UI with new Nav

Browse Source
This commit is contained in:
Jonathan McCaffrey
2022-08-27 21:46:52 -04:00
parent a00af60fa4
commit 404db2b862
18 changed files with 128 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Components/Components.csproj
+1 -1
View File
@@ -21,7 +21,7 @@
<ItemGroup>
<PackageReference Include="Markdig" Version="0.28.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.8" />
<PackageReference Include="Microsoft.Extensions.Localization" Version="6.0.8" />
<PackageReference Include="Microsoft.Extensions.Localization" Version="7.0.0-preview.7.22376.6" />
</ItemGroup>
<ItemGroup>
Components/Inputs/ButtonComponent.razor
+6 -6
View File
@@ -1,4 +1,4 @@
<button class="buttonContainer @ButtonType.ToString().ToLower()" @onclick="ButtonClicked">@ChildContent</button>
<button class="buttonContainer @MyButtonType.ToString().ToLower()" @onclick="ButtonClicked">@ChildContent</button>
<style>
.buttonContainer {
@@ -9,23 +9,23 @@
font-size: 1.2rem;
}
.@(ButtonType.Primary.ToString().ToLower()) {
.@(MyButtonType.Primary.ToString().ToLower()) {
border-color: var(--primary);
background-color: var(--primary);
}
.@ButtonType.Secondary.ToString().ToLower() {
.@MyButtonType.Secondary.ToString().ToLower() {
border-color: var(--secondary);
background-color: var(--secondary);
}
.@ButtonType.Primary.ToString().ToLower():hover {
.@MyButtonType.Primary.ToString().ToLower():hover {
background-color: var(--primary-hover);
border-color: var(--primary-border-hover);
color: white;
}
.@ButtonType.Secondary.ToString().ToLower():hover {
.@MyButtonType.Secondary.ToString().ToLower():hover {
background-color: var(--secondary-hover);
border-color: var(--secondary-border-hover);
color: white;
@@ -43,7 +43,7 @@
public EventCallback<EventArgs> OnClick { get; set; } = default!;
[Parameter]
public ButtonType ButtonType { get; set; } = default!;
public MyButtonType MyButtonType { get; set; } = default!;
private void ButtonClicked(EventArgs eventArgs)
{
Components/Inputs/ButtonType.cs → Components/Inputs/MyButtonType.cs
+1 -1
View File
@@ -1,6 +1,6 @@
namespace Components.Inputs;
public enum ButtonType
public enum MyButtonType
{
Primary, // Positive Actions
Secondary // Destruction Action
IGP/Dialog/ConfirmationDialogComponent.razor
+12 -11
View File
@@ -1,11 +1,12 @@
@implements IDisposable;
@inject IDialogService DialogService
@using Services.Website
@implements IDisposable;
@inject IMyDialogService MyDialogService
@inject IJSRuntime JsRuntime
@inject NavigationManager NavigationManager
@if (DialogService.IsVisible)
@if (MyDialogService.IsVisible)
{
<div class="confirmDialogBackground" onclick="@CloseDialog">
<div class="confirmDialogContainer"
@@ -13,18 +14,18 @@
@onclick:stopPropagation="true">
<div class="confirmDialogHeader">
@DialogService.GetDialogContents().Title
@MyDialogService.GetDialogContents().Title
</div>
<div class="confirmDialogBody">
@DialogService.GetDialogContents().Message
@MyDialogService.GetDialogContents().Message
</div>
<div class="confirmDialogFooter">
<ButtonComponent ButtonType="ButtonType.Secondary" OnClick="DialogService.GetDialogContents().OnCancel">
<ButtonComponent MyButtonType="MyButtonType.Secondary" OnClick="MyDialogService.GetDialogContents().OnCancel">
Cancel
</ButtonComponent>
<ButtonComponent ButtonType="ButtonType.Primary" OnClick="DialogService.GetDialogContents().OnConfirm">
@DialogService.GetDialogContents().ConfirmButtonLabel
<ButtonComponent MyButtonType="MyButtonType.Primary" OnClick="MyDialogService.GetDialogContents().OnConfirm">
@MyDialogService.GetDialogContents().ConfirmButtonLabel
</ButtonComponent>
</div>
</div>
@@ -96,18 +97,18 @@
{
base.OnInitialized();
DialogService.Subscribe(StateHasChanged);
MyDialogService.Subscribe(StateHasChanged);
}
void IDisposable.Dispose()
{
DialogService.Unsubscribe(StateHasChanged);
MyDialogService.Unsubscribe(StateHasChanged);
}
public void CloseDialog()
{
DialogService.Hide();
MyDialogService.Hide();
}
IGP/IGP.csproj
+1
View File
@@ -25,6 +25,7 @@
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.0-preview.7.22376.6" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.0-preview.7.22376.6" />
<PackageReference Include="Microsoft.Extensions.Localization" Version="7.0.0-preview.7.22376.6" />
<PackageReference Include="MudBlazor" Version="6.0.14" />
</ItemGroup>
<ItemGroup>
IGP/PageLayout.razor
+88 -25
View File
@@ -6,45 +6,108 @@
@using Services.Website
@implements IDisposable
<div class="pageContents">
<div class="layoutContainer">
@if (!WebService.IsLoaded())
{
<LoadingComponent/>
}
else
{
<MudThemeProvider/>
asd
<MudLayout>
<MudAppBar Elevation="1">
<MudHidden Breakpoint="Breakpoint.SmAndDown" Invert="true">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())"/>
</MudHidden>
<MudButton
Class="ml-3 mr-8"
Href="/"
Target="_self"
Variant="Variant.Text"
Color="Color.Default">
<MudText Typo="Typo.h5"> IGP Fan Reference</MudText>
</MudButton>
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
<MudButton Href="/build-calculator"
Variant="Variant.Text"
Color="Color.Default"
Class="mr-4">
<MudIcon Icon="fa-solid fa-helmet-battle" Class="mr-2"/>
Build Calculator
</MudButton>
<MudButton Href="/harass-calculator"
Variant="Variant.Text"
Color="Color.Default"
Class="mr-4">
<MudIcon Icon="fa-solid fa-bow-arrow" Class="mr-2"/>
Harass Calculator
</MudButton>
<MudButton Href="/database"
Variant="Variant.Text"
Color="Color.Default"
Class="mr-4">
<MudIcon Icon="fa-solid fa-clipboard-list" Class="mr-2"/>
Database
</MudButton>
</MudHidden>
<MudSpacer/>
<MudIconButton Icon="@Icons.Material.Filled.Settings" Color="Color.Inherit" Edge="Edge.End"/>
</MudAppBar>
<MudHidden Breakpoint="Breakpoint.SmAndDown" Invert="true">
<MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
<MudPaper Width="250px" Class="d-inline-flex py-3" Elevation="0">
<MudNavMenu Class="mud-width-full flex-grow-1">
<MudNavLink Href="/build-calculator" Icon="fa-solid fa-helmet-battle">Build Calculator</MudNavLink>
<MudNavLink Href="/harass-calculator" Icon="fa-solid fa-bow-arrow">Harass Calculator</MudNavLink>
<MudNavLink Href="/database" Icon="fa-solid fa-clipboard-list">Database</MudNavLink>
<MudSpacer/>
<MudDivider Class="my-2"/>
<MudNavLink Href="/settings" Icon="fa-solid fa-gear">Settings</MudNavLink>
<MudDivider Class="my-2"/>
</MudNavMenu>
</MudPaper>
</MudDrawer>
</MudHidden>
<MudMainContent>
<MudContainer Class="px-8" MaxWidth="MaxWidth.False">
<div id="content" class="content">
@Body
</div>
</MudContainer>
</MudMainContent>
</MudLayout>
<DesktopNavComponent WebSections=WebService.WebSectionModels
WebPages=WebService.WebPageModels/>
<TabletNavComponent WebSections=WebService.WebSectionModels
WebPages=WebService.WebPageModels/>
<MobileNavComponent WebSections=WebService.WebSectionModels
WebPages=WebService.WebPageModels/>
<FooterComponent/>
}
</div>
</div>
<MudThemeProvider @ref="@_mudThemeProvider" @bind-IsDarkMode="@_isDarkMode"/>
<MudDialogProvider/>
<MudSnackbarProvider/>
@code {
private bool _isDarkMode;
private MudThemeProvider _mudThemeProvider;
bool _drawerOpen = true;
void DrawerToggle()
{
_drawerOpen = !_drawerOpen;
}
protected override void OnInitialized()
{
base.OnInitialized();
WebService.Subscribe(HasChanged);
CollectFirstPageLoaded();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
_isDarkMode = await _mudThemeProvider.GetSystemPreference();
StateHasChanged();
}
}
private void CollectFirstPageLoaded()
{
var skipBaseUri = NavigationManager.Uri.Substring(NavigationManager.BaseUri.Length,
@@ -54,7 +117,7 @@
{
rootUrl = "home";
}
DataCollectionService.SendEvent(DataCollectionKeys.FirstPage,
new Dictionary<string, string> { { "page", rootUrl } });
}
IGP/PageLayout.razor.css
-13
View File
@@ -5,22 +5,9 @@
}
.content {
margin-top: 32px;
margin-bottom: 64px;
display: flex;
min-width: 100%;
min-height: 100%;
flex-direction: column;
}
@media only screen and (max-width: 1025px) {
.content {
margin-top: 120px;
}
}
@media only screen and (max-width: 480px) {
.content {
margin-top: 20px;
}
}
IGP/Pages/BuildCalculator/BuildCalculatorPage.razor
+1 -1
View File
@@ -32,7 +32,7 @@
<div class="calculatorGrid">
<div class="gridItem" style="grid-area: timing;">
<ButtonComponent ButtonType="ButtonType.Secondary" OnClick="OnResetClicked">Clear Build Order</ButtonComponent>
<ButtonComponent MyButtonType="MyButtonType.Secondary" OnClick="OnResetClicked">Clear Build Order</ButtonComponent>
<PanelComponent>
<InfoTooltipComponent InfoText="@Locale["Tooltip Timing Info"]">
<TimingComponent></TimingComponent>
IGP/Pages/MemoryTester/Parts/UnitMemoryManager.razor
+2 -2
View File
@@ -14,8 +14,8 @@
</div>
<div class="quizButtons">
<ButtonComponent ButtonType="ButtonType.Secondary" OnClick="OnRefreshQuiz">Refresh</ButtonComponent>
<ButtonComponent ButtonType="ButtonType.Primary" OnClick="OnSubmitQuiz">Submit</ButtonComponent>
<ButtonComponent MyButtonType="MyButtonType.Secondary" OnClick="OnRefreshQuiz">Refresh</ButtonComponent>
<ButtonComponent MyButtonType="MyButtonType.Primary" OnClick="OnSubmitQuiz">Submit</ButtonComponent>
</div>
</div>
IGP/Pages/PermissionsPage.razor
+4 -4
View File
@@ -3,7 +3,7 @@
@inject IPermissionService PermissionService
@layout PageLayout
@inject IDialogService DialogService
@inject IMyDialogService MyDialogService
@inherits BasePage
@using Services.Website
@@ -96,17 +96,17 @@
void OnDataCollectionConfirmClicked(MouseEventArgs mouseEventArgs)
{
PermissionService.SetIsDataCollectionEnabled(!PermissionService.GetIsDataCollectionEnabled());
DialogService.Hide();
MyDialogService.Hide();
}
void OnDataCollectionCancelClicked(MouseEventArgs mouseEventArgs)
{
DialogService.Hide();
MyDialogService.Hide();
}
if (_storageEnabled && !PermissionService.GetIsDataCollectionEnabled())
{
DialogService.Show(new DialogContents
MyDialogService.Show(new DialogContents
{
Title = "Permission Request",
Message = "Are you sure you want to enable data collection? This feature is implemented with Google Analytics, and your data will be used to gauge interests, find bugs, and optimize updates in IGP Fan Reference.",
IGP/Portals/ConfirmationDialogPortal.razor
+3 -3
View File
@@ -1,6 +1,6 @@
@implements IDisposable;
@inject IDialogService DialogService
@inject IMyDialogService MyDialogService
<ConfirmationDialogComponent></ConfirmationDialogComponent>
@@ -9,12 +9,12 @@
protected override void OnInitialized()
{
base.OnInitialized();
DialogService.Subscribe(OnUpdate);
MyDialogService.Subscribe(OnUpdate);
}
void IDisposable.Dispose()
{
DialogService.Unsubscribe(OnUpdate);
MyDialogService.Unsubscribe(OnUpdate);
}
void OnUpdate()
IGP/Program.cs
+3 -1
View File
@@ -10,6 +10,7 @@ using Services;
using Services.Development;
using Services.Immortal;
using Services.Website;
using MudBlazor.Services;
CultureInfo.DefaultThreadCurrentCulture = new CultureInfo("en-US");
@@ -69,7 +70,7 @@ builder.Services.AddScoped<IPermissionService, PermissionService>();
builder.Services.AddScoped<IEconomyComparisonService, EconomyComparisionService>();
builder.Services.AddScoped<IDataCollectionService, DataCollectionService>();
builder.Services.AddScoped<IDialogService, DialogService>();
builder.Services.AddScoped<IMyDialogService, MyDialogService>();
builder.Services.AddScoped(sp => new HttpClient
@@ -77,6 +78,7 @@ builder.Services.AddScoped(sp => new HttpClient
BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
});
builder.Services.AddMudServices();
#if NO_SQL
IGP/_Imports.razor
+1
View File
@@ -55,3 +55,4 @@
@using Blazor.Analytics
@using Blazor.Analytics.Components
@using Blazor.Analytics.Abstractions
@using MudBlazor
IGP/global.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"sdk": {
"version": "6.0.0",
"version": "7.0.0",
"rollForward": "latestMajor",
"allowPrerelease": true
}
IGP/wwwroot/index.html
+2 -1
View File
@@ -16,6 +16,7 @@
<link href="manifest.json" rel="manifest"/>
<link href="icon-512.png" rel="apple-touch-icon" sizes="512x512"/>
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link rel="stylesheet" href="fontawesome-pro-6.1.1-web/css/fontawesome.min.css" />
</head>
@@ -60,7 +61,7 @@
});
</script>
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
Playground/Program.cs
-2
View File
@@ -4,8 +4,6 @@ using Playground;
using MudBlazor.Services;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
Services/IServices.cs
+1 -1
View File
@@ -73,7 +73,7 @@ public interface ISearchService
void Hide();
}
public interface IDialogService
public interface IMyDialogService
{
public bool IsVisible { get; set; }
public void Subscribe(Action action);
Services/Website/DialogService.cs → Services/Website/MyDialogService.cs
+1 -1
View File
@@ -11,7 +11,7 @@ public class DialogContents
public EventCallback<EventArgs> OnCancel { get; set; }
}
public class DialogService : IDialogService
public class MyDialogService : IMyDialogService
{
private DialogContents _dialogContents;