Updated mooncore styles. Adjusted theme editor and theme loading. Changed versions Upgraded mooncore.blazor.flyonui. Made moonlight flyonui/daisyui compatible

2025-10-27 08:23:02 +00:00
parent 2f21806bea
commit 0cc35300f1
19 changed files with 341 additions and 163 deletions
--- a/Moonlight.Client/Moonlight.Client.csproj
+++ b/Moonlight.Client/Moonlight.Client.csproj
@@ -12,7 +12,7 @@
  <PropertyGroup>
    <PackageTags>frontend</PackageTags>
    <PackageId>Moonlight.Client</PackageId>
-    <Version>2.1.14</Version>
+    <Version>2.1.15</Version>
    <Authors>Moonlight Panel</Authors>
    <Description>A build of the client for moonlight development</Description>
    <PackageProjectUrl>https://github.com/Moonlight-Panel/Moonlight</PackageProjectUrl>
@@ -26,7 +26,7 @@
    <PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="9.0.9" />
    <PackageReference Include="Microsoft.Extensions.Logging.Console" Version="9.0.8" />
    <PackageReference Include="MoonCore" Version="2.0.6" />
-    <PackageReference Include="MoonCore.Blazor.FlyonUi" Version="1.3.2" />
+    <PackageReference Include="MoonCore.Blazor.FlyonUi" Version="1.3.4" />
    <PackageReference Include="System.Security.Claims" Version="4.3.0" />
  </ItemGroup>
  <ItemGroup>
--- a/Moonlight.Client/Styles/MoonCore.Blazor.FlyonUi/mooncore.map
+++ b/Moonlight.Client/Styles/MoonCore.Blazor.FlyonUi/mooncore.map
@@ -29,7 +29,6 @@ accordion-content
 accordion-toggle
 active
 active-tab:bg-primary
-active-tab:hover:text-primary-content
 active-tab:text-primary-content
 advance-select-menu
 advance-select-option
@@ -50,14 +49,13 @@ basis-full
 bg-background
 bg-background/60
 bg-base-100
-bg-base-150
+bg-base-100/50
 bg-base-200
 bg-base-200!
 bg-base-200/50
 bg-base-200/60
-bg-base-250
 bg-base-300
-bg-base-300/50
+bg-base-300/15
 bg-base-300/60
 bg-error
 bg-info
@@ -147,7 +145,7 @@ cursor-pointer
 cursor-progress
 diff
 disabled
-divide-base-150/60
+divide-base-100/60
 divide-y
 divider
 drawer
@@ -231,8 +229,8 @@ h-full
 h-screen
 helper-text
 hidden
+hover:bg-primary/20
 hover:bg-primary/5
-hover:bg-transparent
 hover:cursor-pointer
 hover:text-base-content
 hover:text-base-content/60
@@ -309,6 +307,7 @@ max-sm:hidden
 max-w-64
 max-w-7xl
 max-w-80
+max-w-fit
 max-w-full
 max-w-lg
 max-w-sm
@@ -370,6 +369,7 @@ mt-10
 mt-12
 mt-2
 mt-2.5
+mt-20
 mt-3
 mt-3.5
 mt-4
@@ -426,6 +426,7 @@ pt-2
 pt-3
 px-1.5
 px-2
+px-2.5
 px-3
 px-4
 px-5
@@ -462,7 +463,6 @@ shadow-base-300/20
 shadow-lg
 shadow-md
 shadow-none
-shadow-sm
 shadow-xs
 shrink-0
 size-10
@@ -473,6 +473,7 @@ size-8
 size-8.5
 sm:auto-cols-max
 sm:flex
+sm:inline
 sm:items-center
 sm:items-end
 sm:justify-between
@@ -502,6 +503,7 @@ sticky
 success-message
 switch
 tab
+tab!
 tab-active
 table
 table-pin-cols
@@ -560,9 +562,7 @@ transform
 transition
 transition-all
 transition-opacity
-transition-transform
 translate-x-0
-translate-x-full
 truncate
 underline
 uppercase
@@ -570,17 +570,14 @@ validate
 w-0
 w-0.5
 w-13
-w-20
 w-4
 w-56
 w-6
 w-64
-w-fit
 w-full
 whitespace-nowrap
 xl:flex
 xl:grid-cols-2
-z-1
 z-40
 z-50
 z-69
--- a/Moonlight.Client/Styles/mappings/classes.map
+++ b/Moonlight.Client/Styles/mappings/classes.map
@@ -8,12 +8,14 @@
 !justify-between
 !me-1.5
 !ms-auto
+!p-2.5
 !px-2.5
 !py-0.5
 !rounded-full
 !rounded-xs
 !text-sm
 !w-2.5
+!w-8
 *:[grid-area:1/1]
 *:first:rounded-tl-lg
 *:last:rounded-tr-lg
@@ -65,16 +67,14 @@ badge-primary
 badge-soft
 badge-success
 basis-full
-bg-background
-bg-background/60
 bg-base-100
-bg-base-150
+bg-base-100/50
 bg-base-200
 bg-base-200!
 bg-base-200/50
 bg-base-200/60
-bg-base-250
 bg-base-300
+bg-base-300/15
 bg-base-300/45
 bg-base-300/50
 bg-base-300/60
@@ -190,7 +190,7 @@ cursor-progress
 custom-option
 diff
 disabled
-divide-base-150/60
+divide-base-100/60
 divide-y
 divider
 drawer
@@ -298,6 +298,7 @@ h-screen
 helper-text
 hidden
 hover:bg-indigo-500
+hover:bg-primary/20
 hover:bg-primary/5
 hover:bg-transparent
 hover:cursor-pointer
@@ -393,6 +394,7 @@ max-w-64
 max-w-7xl
 max-w-8
 max-w-80
+max-w-fit
 max-w-full
 max-w-lg
 max-w-md
@@ -467,6 +469,7 @@ mt-10
 mt-12
 mt-2
 mt-2.5
+mt-20
 mt-3
 mt-3.5
 mt-4
@@ -602,6 +605,7 @@ sm:flex-nowrap
 sm:gap-y-0
 sm:grid-cols-3
 sm:grid-cols-6
+sm:inline
 sm:items-center
 sm:items-end
 sm:justify-between
@@ -654,6 +658,7 @@ sticky
 success-message
 switch
 tab
+tab!
 tab-active
 tab-content
 table
--- a/Moonlight.Client/UI/App.razor
+++ b/Moonlight.Client/UI/App.razor
@@ -1,4 +1,4 @@
-@using Moonlight.Client.UI.Layouts
+@using Moonlight.Client.UI.Shell
@using Moonlight.Client.Services
@using Moonlight.Client.UI.Partials

--- a/Moonlight.Client/UI/Components/ThemeEditor.razor
+++ b/Moonlight.Client/UI/Components/ThemeEditor.razor
@@ -7,11 +7,6 @@
            <span>Base Colors</span>
        </div>

-        <div class="flex flex-row items-center">
-            <ColorSelector @bind-Value="Theme.ColorBackground"/>
-            <span class="ms-2.5">Background</span>
-        </div>
-
        <div class="flex flex-row items-center">
            <ColorSelector @bind-Value="Theme.ColorBaseContent"/>
            <span class="ms-2.5">Base Content</span>
@@ -22,21 +17,11 @@
            <span class="ms-2.5">Base 100</span>
        </div>

-        <div class="flex flex-row items-center">
-            <ColorSelector @bind-Value="Theme.ColorBase150"/>
-            <span class="ms-2.5">Base 150</span>
-        </div>
-
        <div class="flex flex-row items-center">
            <ColorSelector @bind-Value="Theme.ColorBase200"/>
            <span class="ms-2.5">Base 200</span>
        </div>

-        <div class="flex flex-row items-center">
-            <ColorSelector @bind-Value="Theme.ColorBase250"/>
-            <span class="ms-2.5">Base 250</span>
-        </div>
-
        <div class="flex flex-row items-center">
            <ColorSelector @bind-Value="Theme.ColorBase300"/>
            <span class="ms-2.5">Base 300</span>
@@ -78,6 +63,15 @@
                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorAccentContent"/>
                <span class="ms-2.5">Accent Content</span>
            </div>
+            
+            <div class="col-span-1 flex flex-row items-center">
+                <ColorSelector @bind-Value="Theme.ColorNeutral"/>
+                <span class="ms-2.5">Neutral</span>
+            </div>
+            <div class="col-span-1 flex flex-row items-center">
+                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorNeutralContent"/>
+                <span class="ms-2.5">Neutral Content</span>
+            </div>

            <div class="col-span-1 flex flex-row items-center">
                <ColorSelector @bind-Value="Theme.ColorInfo"/>
--- a/Moonlight.Client/UI/Shell/AppHeader.razor
+++ b/Moonlight.Client/UI/Shell/AppHeader.razor
@@ -0,0 +1,30 @@
+@using MoonCore.Blazor.FlyonUi.Drawers
+
+@inject DrawerService DrawerService
+
+<nav class="navbar grow-0 bg-base-100 p-2">
+    <div class="w-full md:flex md:items-center md:gap-2">
+        <div class="flex items-center justify-between">
+            <div class="navbar-start items-center justify-between max-md:w-full">
+                <button @onclick="LaunchSidebarAsync" class="btn btn-square btn-text text-base-content md:hidden!">
+                    <i class="icon-menu text-xl"></i>
+                </button>
+            </div>
+        </div>
+        <div id="default-navbar-collapse" class="md:navbar-end collapse hidden grow basis-full max-md:w-full" >
+            <div class="avatar p-1">
+                <div class="size-8.5 rounded-full">
+                    <img src="/_content/Moonlight.Client/img/pfp_placeholder.png" alt="Avatar" />
+                </div>
+            </div>
+        </div>
+    </div>
+</nav>
+
+@code
+{
+    private async Task LaunchSidebarAsync()
+    {
+        await DrawerService.LaunchAsync<SidebarDrawer>(unfocusHide: true);
+    }
+}
--- a/Moonlight.Client/UI/Shell/MainLayout.razor
+++ b/Moonlight.Client/UI/Shell/MainLayout.razor
@@ -0,0 +1,22 @@
+@using MoonCore.Blazor.FlyonUi.Drawers
+@using MoonCore.Blazor.FlyonUi.Modals
+@using MoonCore.Blazor.FlyonUi.Toasts
+
+@inherits LayoutComponentBase
+
+<div class="flex flex-row h-screen">
+    <aside class="drawer hidden md:flex shadow-none relative max-w-64 h-full"
+           role="dialog" tabindex="-1">
+        <SidebarComponent />
+    </aside>
+    <div class="w-full h-full flex flex-col">
+        <AppHeader />
+        <div class="flex-1 min-h-0 p-8 overflow-y-auto">
+            @Body
+            
+            <ToastLauncher />
+            <ModalLauncher />
+            <DrawerLauncher />
+        </div>
+    </div>
+</div>
--- a/Moonlight.Client/UI/Shell/SidebarComponent.razor
+++ b/Moonlight.Client/UI/Shell/SidebarComponent.razor
@@ -0,0 +1,151 @@
+@using System.Security.Claims
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.AspNetCore.Components.Authorization
+@using Moonlight.Client.Interfaces
+@using Moonlight.Client.Models
+
+@inherits MoonCore.Blazor.FlyonUi.Drawers.DrawerBase
+
+@inject NavigationManager Navigation
+@inject IEnumerable<ISidebarItemProvider> SidebarItemProviders
+@inject IAuthorizationService AuthorizationService
+
+@implements IDisposable
+
+@{
+    var url = new Uri(Navigation.Uri);
+}
+
+<div class="drawer-header">
+    <div class="flex items-center gap-3">
+        <div class="avatar">
+            <img src="/_content/Moonlight.Client/svg/logo.svg" alt="Logo" class="!w-8"/>
+        </div>
+        <h3 class="drawer-title text-xl font-semibold">Moonlight v2.1</h3>
+    </div>
+</div>
+<div class="drawer-body !px-2.5">
+    <ul class="menu menu-sm p-0 bg-transparent">
+        @foreach (var group in Items)
+        {
+            if (!string.IsNullOrEmpty(group.Key))
+            {
+                <li>
+                    <div class="divider">@group.Key</div>
+                </li>
+            }
+
+            foreach (var item in group.Value)
+            {
+                var isActive = item.RequiresExactMatch
+                    ? url.LocalPath == item.Path
+                    : url.LocalPath.StartsWith(item.Path);
+
+                <li>
+                    <a href="@item.Path" class="@(isActive ? "menu-active" : "")">
+                        <i class="@item.Icon text-lg"></i>
+                        @item.Name
+                    </a>
+                </li>
+            }
+        }
+    </ul>
+</div>
+<div class="drawer-footer !p-2.5">
+    <div
+        class="flex w-full justify-between items-center px-2 py-2.5 gap-6 rounded-lg text-left text-base/6 font-medium sm:py-2 sm:text-sm/5 text-base-content">
+        <div class="flex min-w-0 items-center gap-3">
+            <span class="inline-grid shrink-0 align-middle">
+                <img class="h-8 rounded-full"
+                     src="/_content/Moonlight.Client/img/pfp_placeholder.png"
+                     alt=""/>
+            </span>
+            <div class="min-w-0">
+                <div class="block truncate text-sm/5 font-medium text-base-content">
+                    @Username
+                </div>
+                <div class="block truncate text-xs/5 font-normal text-base-content/40">
+                    @Email
+                </div>
+            </div>
+        </div>
+        <a href="#" @onclick:preventDefault @onclick="LogoutAsync" class="flex items-center">
+            <i class="icon-log-out text-lg"></i>
+        </a>
+    </div>
+</div>
+
+@code
+{
+    [CascadingParameter] public Task<AuthenticationState> AuthState { get; set; }
+ 
+    private Dictionary<string, SidebarItem[]> Items = new();
+
+    private string Username;
+    private string Email;
+    private ClaimsPrincipal Identity;
+    
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthState;
+        
+        Identity = authState.User;
+        Username = Identity.FindFirst(ClaimTypes.Name)!.Value;
+        Email = Identity.FindFirst(ClaimTypes.Email)!.Value;
+        
+        var sidebarItems = new List<SidebarItem>();
+
+        foreach (var provider in SidebarItemProviders)
+            provider.ModifySidebar(sidebarItems);
+
+        var itemsToRemove = new List<SidebarItem>();
+        
+        foreach (var sidebarItem in sidebarItems)
+        {
+            if(string.IsNullOrEmpty(sidebarItem.Policy))
+                continue;
+
+            var authResult = await AuthorizationService.AuthorizeAsync(Identity, sidebarItem.Policy);
+            
+            if(authResult.Succeeded)
+                continue;
+            
+            itemsToRemove.Add(sidebarItem);
+        }
+
+        foreach (var sidebarItem in itemsToRemove)
+            sidebarItems.Remove(sidebarItem);
+
+        Items = sidebarItems
+            .GroupBy(x => x.Group ?? "")
+            .OrderByDescending(x => string.IsNullOrEmpty(x.Key))
+            .ToDictionary(x => x.Key, x => x.OrderBy(y => y.Priority).ToArray());
+        
+        Navigation.LocationChanged += OnNavigated;
+    }
+
+    private async void OnNavigated(object? sender, LocationChangedEventArgs e)
+    {
+        // No async void without try catch to prevent hard app crashes when async task fails
+        
+        try
+        {
+            await InvokeAsync(StateHasChanged);
+        }
+        catch (Exception)
+        {
+            // ignored
+        }
+    }
+
+    private Task LogoutAsync()
+    {
+        Navigation.NavigateTo("/api/auth/logout", true);
+        return Task.CompletedTask;
+    }
+
+    public void Dispose()
+    {
+        Navigation.LocationChanged -= OnNavigated;
+    }
+}
--- a/Moonlight.Client/UI/Shell/SidebarDrawer.razor
+++ b/Moonlight.Client/UI/Shell/SidebarDrawer.razor
@@ -0,0 +1,31 @@
+@inherits MoonCore.Blazor.FlyonUi.Drawers.DrawerBase
+
+@inject NavigationManager Navigation
+
+@implements IDisposable
+
+<SidebarComponent />
+
+@code
+{
+    protected override void OnInitialized()
+    {
+        Navigation.LocationChanged += OnLocationChanged;
+    }
+
+    private async void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        try
+        {
+            await CloseAsync();
+        }
+        catch (Exception)
+        {
+            // Ignored
+        }
+    }
+
+    public void Dispose()
+    {
+    }
+}
--- a/Moonlight.Client/UI/Views/Admin/Sys/Customisation/Themes/Create.razor
+++ b/Moonlight.Client/UI/Views/Admin/Sys/Customisation/Themes/Create.razor
@@ -68,12 +68,8 @@
    {
        return new ApplicationTheme()
        {
-            ColorBackground = "#0c0f18",
-
            ColorBase100 = "#1e2b47",
-            ColorBase150 = "#1a2640",
            ColorBase200 = "#101a2e",
-            ColorBase250 = "#0f1729",
            ColorBase300 = "#0c1221",

            ColorBaseContent = "#dde5f5",