Merge pull request #647 from Xian55/feature/frontend-blazor-bootstrap

Feature: Frontend: Use Blazor.Bootstrap
Xian55 · Dec 24, 2024 · df8e210 · df8e210
2 parents 459ea3f + e025a25
commit df8e210
Show file tree

Hide file tree

Showing 45 changed files with 921 additions and 1,776 deletions.
diff --git a/BlazorServer/App.razor b/BlazorServer/App.razor
@@ -1,5 +1,8 @@
 @using Frontend
 
+@using Microsoft.AspNetCore.Components.Web
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+
 @inject IHostEnvironment Env
 
 <!DOCTYPE html>
@@ -10,34 +13,27 @@
     <title>BlazorServer</title>
     <base href="/" />
 
-    <link rel="stylesheet" href="_content/Frontend/css/bootstrap/bootstrap.icons.min.css" />
-    <!--<link rel="stylesheet" href="_content/Frontend/css/bootstrap/bootstrap-theme.min.css" />-->
-    <link rel="stylesheet" href="_content/Frontend/css/bootstrap/bootstrap.min.css" />
-    <link rel="stylesheet" href="_content/Frontend/css/bootstrap/bootstrap-dark.min.css" />
-
-    <script src="_content/BlazorTable/BlazorTable.min.js"></script>
-
-    <script src="_content/MatBlazor/dist/matBlazor.js"></script>
-    <link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
+    <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
 
     <link href="_content/Frontend/css/site.css" rel="stylesheet" />
     <script src="_content/Frontend/script/d3.v7.min.js"></script>
 
     <link rel="stylesheet" href="_content/Frontend/css/animate-v4.0.0.min.css" />
-    <link rel="stylesheet" href="BlazorServer.styles.css" asp-append-version="true" />
 
     <script>const whTooltips = { colorLinks: true, iconizeLinks: true, renameLinks: true };</script>
     <script src="_content/Frontend/script/power.js"></script>
 
     <script src="_content/Frontend/script/panzoom.min.js"></script>
     <script src="_content/Frontend/script/gather.js"></script>
     <script src="_content/Frontend/script/route.js"></script>
+
+    <link href="@(nameof(BlazorServer)).styles.css" asp-append-version="true" rel="stylesheet" />
+
+    <HeadOutlet @rendermode="@InteractiveServer" />
 </head>
 <body>
-    <app>
-        <Routes @rendermode="InteractiveServer" />
-    </app>
-
     <div id="blazor-error-ui">
     @if (Env.IsDevelopment())
     {
@@ -53,6 +49,17 @@
     }
     </div>
 
+
+    <Routes @rendermode="@InteractiveServer" />
     <script src="_framework/blazor.web.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+    <!-- Add chart.js reference if chart components are used in your application. -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" integrity="sha512-ZwR1/gSZM3ai6vCdI+LVF1zSq/5HznD3ZSTk7kajkaj4D292NLuduDCO1c/NT8Id+jE58KYLKT7hXnbtryGmMg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <!-- Add sortable.js reference if SortableList component is used in your application. -->
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
+    <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
 </body>
 </html>
diff --git a/Directory.Packages.props b/Directory.Packages.props
@@ -7,6 +7,7 @@
   <ItemGroup>
     <!-- Define package versions -->
     <PackageVersion Include="BenchmarkDotNet" Version="0.14.0" />
+    <PackageVersion Include="Blazor.Bootstrap" Version="3.2.0" />
     <PackageVersion Include="MemoryPack" Version="1.21.3" />
     <PackageVersion Include="Microsoft.AspNetCore.Components" Version="9.0.0" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.QuickGrid" Version="9.0.0" />

diff --git a/Frontend/DependencyInjection.cs b/Frontend/DependencyInjection.cs
@@ -1,14 +1,12 @@
-using MatBlazor;
-
-using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.DependencyInjection;
 
 namespace Frontend;
 
 public static class DependencyInjection
 {
     public static IServiceCollection AddFrontend(this IServiceCollection services)
     {
-        services.AddMatBlazor();
+        services.AddBlazorBootstrap();
 
         services.AddRazorPages();
 

diff --git a/Frontend/Frontend.csproj b/Frontend/Frontend.csproj
@@ -10,7 +10,7 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="MatBlazor" />
+    <PackageReference Include="Blazor.Bootstrap" />
     <PackageReference Include="Microsoft.AspNetCore.Components.QuickGrid" />
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" />
     <PackageReference Include="Serilog.AspNetCore" />

diff --git a/Frontend/Pages/AddonConfiguration.razor b/Frontend/Pages/AddonConfiguration.razor
@@ -15,23 +15,25 @@
         </div>
         <div class="card-body" style="padding-bottom: 0">
             <table class="table table-bordered">
-                @foreach (var property in addonConfig.GetType().GetProperties())
-                {
-                    <tr>
-                        @switch (Type.GetTypeCode(property.PropertyType))
-                        {
-                            case TypeCode.String:
-                                <td>@(property.Name)</td>
-                                <td>
-                                    <input value="@property.GetValue(addonConfig)?.ToString()"
-                               class="form-control"
-                               disabled="@(property.Name.Contains(nameof(addonConfig.Command)) || addonConfigurator.Installed())"
-                               @onchange="c => { property.SetValue(addonConfig, c.Value); }" />
-                                </td>
-                                break;
-                        }
-                    </tr>
-                }
+                <tbody>
+                    @foreach (var property in addonConfig.GetType().GetProperties())
+                    {
+                        <tr>
+                            @switch (Type.GetTypeCode(property.PropertyType))
+                            {
+                                case TypeCode.String:
+                                    <td>@(property.Name)</td>
+                                    <td>
+                                        <input value="@property.GetValue(addonConfig)?.ToString()"
+                                               class="form-control"
+                                               disabled="@(property.Name.Contains(nameof(addonConfig.Command)) || addonConfigurator.Installed())"
+                                               @onchange="c => { property.SetValue(addonConfig, c.Value); }" />
+                                    </td>
+                                    break;
+                            }
+                        </tr>
+                    }
+                </tbody>
             </table>
         </div>
     </div>
@@ -44,39 +46,41 @@
         </div>
         <div class="card-body" style="padding-bottom: 0">
             <table class="table table-bordered">
-                <tr>
-                    <td style="width:25%">Status</td>
-                    <td>
-                        <label class="form-control" disabled>
-                            @AddonStatus()
-                        </label>
-                    </td>
-                </tr>
-                <tr>
-                    <td>Install path</td>
-                    <td>
-                        <input value="@addonConfigurator.FinalAddonPath" class="form-control" disabled="true" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>Install / Update addon and config</td>
-                    <td>
-                        <button class="btn btn-sm btn-success" @onclick="Install">
-                            <span>Save</span>
-                        </button>
-                    </td>
-                </tr>
-                @if (AddonConfig.Exists())
-                {
+                <tbody>
+                    <tr>
+                        <td style="width:25%">Status</td>
+                        <td>
+                            <label class="form-control" disabled>
+                                @AddonStatus()
+                            </label>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Install path</td>
+                        <td>
+                            <input value="@addonConfigurator.FinalAddonPath" class="form-control" disabled="true" />
+                        </td>
+                    </tr>
                     <tr>
-                        <td>Delete current addon and config</td>
+                        <td>Install / Update addon and config</td>
                         <td>
-                            <button class="btn btn-sm btn-danger" @onclick="Delete">
-                                <span>Delete</span>
+                            <button class="btn btn-sm btn-success" @onclick="Install">
+                                <span>Save</span>
                             </button>
                         </td>
                     </tr>
-                }
+                    @if (AddonConfig.Exists())
+                    {
+                        <tr>
+                            <td>Delete current addon and config</td>
+                            <td>
+                                <button class="btn btn-sm btn-danger" @onclick="Delete">
+                                    <span>Delete</span>
+                                </button>
+                            </td>
+                        </tr>
+                    }
+                </tbody>
             </table>
         </div>
     </div>

diff --git a/Frontend/Pages/BagChanges.razor b/Frontend/Pages/BagChanges.razor
@@ -6,14 +6,18 @@
 
 @if (NewItems.Count() > 0)
 {
-    <div class="card">
-        <div class="card-header">
-            Bag Changes
-            <div class="float-right">
-                <Money Value="TotalMoneyChange" />
+    <Card>
+        <CardHeader>
+            <div class="d-flex">
+                <div class="p-2 flex-grow-1 bd-highlight">
+                    Bag Changes
+                </div>
+                <div class="p-2 bd-highlight">
+                    <Money Value="TotalMoneyChange" />
+                </div>
             </div>
-        </div>
-        <div class="card-body">
+        </CardHeader>
+        <CardBody>
             @foreach (var bagItem in NewItems)
             {
                 <div class="animate__animated animate__slideInDown">
@@ -26,8 +30,8 @@
                     <hr style="margin:2px" />
                 </div>
             }
-        </div>
-    </div>
+        </CardBody>
+    </Card>
 }
 @code {