Browse Source

Adding MudBlazor UI with new Nav

main
Jonathan McCaffrey 3 years ago
parent
commit
404db2b862
  1. 2
      Components/Components.csproj
  2. 12
      Components/Inputs/ButtonComponent.razor
  3. 2
      Components/Inputs/MyButtonType.cs
  4. 23
      IGP/Dialog/ConfirmationDialogComponent.razor
  5. 1
      IGP/IGP.csproj
  6. 111
      IGP/PageLayout.razor
  7. 13
      IGP/PageLayout.razor.css
  8. 2
      IGP/Pages/BuildCalculator/BuildCalculatorPage.razor
  9. 4
      IGP/Pages/MemoryTester/Parts/UnitMemoryManager.razor
  10. 8
      IGP/Pages/PermissionsPage.razor
  11. 6
      IGP/Portals/ConfirmationDialogPortal.razor
  12. 4
      IGP/Program.cs
  13. 1
      IGP/_Imports.razor
  14. 2
      IGP/global.json
  15. 3
      IGP/wwwroot/index.html
  16. 2
      Playground/Program.cs
  17. 2
      Services/IServices.cs
  18. 2
      Services/Website/MyDialogService.cs

2
Components/Components.csproj

@ -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>

12
Components/Inputs/ButtonComponent.razor

@ -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)
{

2
Components/Inputs/ButtonType.cs → Components/Inputs/MyButtonType.cs

@ -1,6 +1,6 @@
namespace Components.Inputs;
public enum ButtonType
public enum MyButtonType
{
Primary, // Positive Actions
Secondary // Destruction Action

23
IGP/Dialog/ConfirmationDialogComponent.razor

@ -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();
}

1
IGP/IGP.csproj

@ -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>

111
IGP/PageLayout.razor

@ -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>
<MudThemeProvider @ref="@_mudThemeProvider" @bind-IsDarkMode="@_isDarkMode"/>
<MudDialogProvider/>
<MudSnackbarProvider/>
</div>
@code {
private bool _isDarkMode;
private MudThemeProvider _mudThemeProvider;
@code {
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 } });
}

13
IGP/PageLayout.razor.css

@ -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;
}
}

2
IGP/Pages/BuildCalculator/BuildCalculatorPage.razor

@ -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>

4
IGP/Pages/MemoryTester/Parts/UnitMemoryManager.razor

@ -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>

8
IGP/Pages/PermissionsPage.razor

@ -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.",

6
IGP/Portals/ConfirmationDialogPortal.razor

@ -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()

4
IGP/Program.cs

@ -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

1
IGP/_Imports.razor

@ -55,3 +55,4 @@
@using Blazor.Analytics
@using Blazor.Analytics.Components
@using Blazor.Analytics.Abstractions
@using MudBlazor

2
IGP/global.json

@ -1,6 +1,6 @@
{
"sdk": {
"version": "6.0.0",
"version": "7.0.0",
"rollForward": "latestMajor",
"allowPrerelease": true
}

3
IGP/wwwroot/index.html

@ -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>

2
Playground/Program.cs

@ -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");

2
Services/IServices.cs

@ -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);

2
Services/Website/DialogService.cs → Services/Website/MyDialogService.cs

@ -11,7 +11,7 @@ public class DialogContents
public EventCallback<EventArgs> OnCancel { get; set; }
}
public class DialogService : IDialogService
public class MyDialogService : IMyDialogService
{
private DialogContents _dialogContents;
Loading…
Cancel
Save