Improved ui/ux of theme pages. Upgraded mooncore.blazor.flyonui

Author: ChiaraBm

Moonlight.Client/Moonlight.Client.csproj

@@ -24,7 +24,7 @@
     <PackageReference Include="Blazor-ApexCharts" Version="6.0.0" />
     <PackageReference Include="MoonCore" Version="1.9.2" />
     <PackageReference Include="MoonCore.Blazor" Version="1.3.1" />
-    <PackageReference Include="MoonCore.Blazor.FlyonUi" Version="1.0.8" />
+    <PackageReference Include="MoonCore.Blazor.FlyonUi" Version="1.0.9" />
   </ItemGroup>
   <ItemGroup>
     <Compile Remove="storage\**\*" />
@@ -49,9 +49,4 @@
     <None Include="Styles/mappings/*.map" Pack="true" PackagePath="Styles/" />
     <None Include="Moonlight.Client.targets" Pack="true" PackagePath="build/Moonlight.Client.targets" />
   </ItemGroup>
-
-  <ItemGroup>
-    <UpToDateCheckInput Remove="UI\Views\Internal\Mockup.razor" />
-    <UpToDateCheckInput Remove="UI\Partials\Design\ThemeSettings.razor" />
-  </ItemGroup>
 </Project>

…ight.Client/Styles/mappings/mooncore.map …ore.Blazor.FlyonUi/mappings/mooncore.mapMoonlight.Client/Styles/mappings/mooncore.map renamed to Moonlight.Client/Styles/MoonCore.Blazor.FlyonUi/mappings/mooncore.map Moonlight.Client/Styles/mappings/mooncore.map renamed to Moonlight.Client/Styles/MoonCore.Blazor.FlyonUi/mappings/mooncore.map

@@ -81,6 +81,7 @@ border-2
 border-b
 border-base-content
 border-base-content/20
+border-base-content/25
 border-base-content/40
 border-base-content/5
 border-dashed
@@ -295,6 +296,7 @@ md:text-3xl
 me-1
 me-1.5
 me-2
+me-2.5
 me-5
 menu
 menu-active

Moonlight.Client/UI/Views/Admin/Sys/Customisation/Index.razor

@@ -14,8 +14,11 @@
 
 <NavTabs Index="1" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks"/>
 
-<div class="mt-5 flex justify-between">
-    <span class="text-lg font-semibold">Themes</span>
+<PageSeparator Icon="icon-palette">
+    Themes
+</PageSeparator>
+
+<div class="mt-5 flex justify-end">
     <div>
         <label for="import-theme" class="btn btn-info me-1">
             <i class="icon-file-up"></i>
@@ -26,7 +29,7 @@
     </div>
 </div>
 
-<div class="mt-2.5">
+<div class="my-2.5">
     <DataTable TItem="ThemeResponse">
         <Configuration>
             <DataTableColumn TItem="ThemeResponse" Field="@(x => x.Id)" Name="Id"/>
@@ -78,6 +81,10 @@
     </DataTable>
 </div>
 
+<PageSeparator Icon="icon-images">
+    Images & Logos
+</PageSeparator>
+
 
 @code
 {

Moonlight.Client/UI/Views/Admin/Sys/Customisation/Themes/Create.razor

@@ -38,6 +38,7 @@
             <label class="block text-sm font-medium leading-6 text-base-content">Version</label>
             <div class="mt-2">
                 <input @bind="Request.Version" type="text" autocomplete="off" class="input w-full">
+                <span class="helper-text">This field will be used for update checks</span>
             </div>
         </div>
     </div>

Moonlight.Client/UI/Views/Admin/Sys/Customisation/Themes/Update.razor

@@ -28,6 +28,7 @@
                 <div class="mt-2">
                     <div class="flex items-center gap-1">
                         <input @bind="Request.IsEnabled" type="checkbox" class="switch" />
+                        <span class="helper-text">Toggle on in order to enable the theme globally (a reload is required to apply)</span>
                     </div>
                 </div>
             </div>
@@ -47,18 +48,21 @@
                 <label class="block text-sm font-medium leading-6 text-base-content">Version</label>
                 <div class="mt-2">
                     <input @bind="Request.Version" type="text" autocomplete="off" class="input w-full">
+                    <span class="helper-text">This field will be used for update checks</span>
                 </div>
             </div>
             <div class="sm:col-span-2">
                 <label class="block text-sm font-medium leading-6 text-base-content">Donate URL</label>
                 <div class="mt-2">
                     <input @bind="Request.DonateUrl" type="text" autocomplete="off" class="input w-full">
+                    <span class="helper-text">Optional: Specify a url here which people should get redirected for donating to the author</span>
                 </div>
             </div>
             <div class="sm:col-span-2">
                 <label class="block text-sm font-medium leading-6 text-base-content">Update URL</label>
                 <div class="mt-2">
                     <input @bind="Request.UpdateUrl" type="text" autocomplete="off" class="input w-full">
+                    <span class="helper-text">Optional: Specify a url here which returns the latest version of this theme as the raw exported file</span>
                 </div>
             </div>
         </div>

Moonlight.Client/UI/Views/Admin/Sys/Index.razor

@@ -19,7 +19,13 @@
         <StatCard Title="Memory Usage" Text="@(Formatter.FormatSize(OverviewData.MemoryUsage))" Icon="icon-memory-stick"/>
         <StatCard Title="Host OS" Text="@(OverviewData.OperatingSystem)" Icon="icon-server-cog"/>
         <StatCard Title="Uptime" Text="@(Formatter.FormatUptime(OverviewData.Uptime))" Icon="icon-clock"/>
-
+    </div>
+    
+    <PageSeparator Icon="icon-tool-case">
+        Actions
+    </PageSeparator>
+    
+    <div class="flex">
         <div class="card card-body">
             <div class="flex justify-center">
                 <WButton OnClick="Restart" CssClasses="btn btn-error w-full">

Moonlight.Client/UI/Views/Admin/Users/Update.razor

@@ -45,6 +45,7 @@
                     <label class="block text-sm font-medium leading-6 text-base-content">Password</label>
                     <div class="mt-2">
                         <input @bind="Request.Password" type="password" autocomplete="off" class="input w-full">
+                        <span class="helper-text">Leave empty if the password should not be changed</span>
                     </div>
                 </div>
             </div>