Moonlight-Panel/Moonlight
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ChiaraBm
2025-10-27 08:23:02 +00:00
parent 2f21806bea
commit 0cc35300f1
19 changed files with 341 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
Moonlight.ApiServer/Http/Controllers/Frontend/FrontendPage.razor
View File

@@ -1,7 +1,7 @@
@using Moonlight.ApiServer.Database.Entities @using Moonlight.ApiServer.Database.Entities
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="bg-background text-base-content font-inter"> <html lang="en" class="bg-base-200 text-base-content font-inter">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
@@ -22,48 +22,45 @@
{ {
<style> <style>
:root { :root {
--mooncore-color-background: @(Theme.Content.ColorBackground); --color-base-100: @(Theme.Content.ColorBase100);
--mooncore-color-base-100: @(Theme.Content.ColorBase100); --color-base-200: @(Theme.Content.ColorBase200);
--mooncore-color-base-150: @(Theme.Content.ColorBase150); --color-base-300: @(Theme.Content.ColorBase300);
--mooncore-color-base-200: @(Theme.Content.ColorBase200); --color-base-content: @(Theme.Content.ColorBaseContent);
--mooncore-color-base-250: @(Theme.Content.ColorBase250);
--mooncore-color-base-300: @(Theme.Content.ColorBase300);
--mooncore-color-base-content: @(Theme.Content.ColorBaseContent);
--mooncore-color-primary: @(Theme.Content.ColorPrimary); --color-primary: @(Theme.Content.ColorPrimary);
--mooncore-color-primary-content: @(Theme.Content.ColorPrimaryContent); --color-primary-content: @(Theme.Content.ColorPrimaryContent);
--mooncore-color-secondary: @(Theme.Content.ColorSecondary); --color-secondary: @(Theme.Content.ColorSecondary);
--mooncore-color-secondary-content: @(Theme.Content.ColorSecondaryContent); --color-secondary-content: @(Theme.Content.ColorSecondaryContent);
--mooncore-color-accent: @(Theme.Content.ColorAccent); --color-accent: @(Theme.Content.ColorAccent);
--mooncore-color-accent-content: @(Theme.Content.ColorAccentContent); --color-accent-content: @(Theme.Content.ColorAccentContent);
--mooncore-color-neutral: @(Theme.Content.ColorNeutral); --color-neutral: @(Theme.Content.ColorNeutral);
--mooncore-color-neutral-content: @(Theme.Content.ColorNeutralContent); --color-neutral-content: @(Theme.Content.ColorNeutralContent);
--mooncore-color-info: @(Theme.Content.ColorInfo); --color-info: @(Theme.Content.ColorInfo);
--mooncore-color-info-content: @(Theme.Content.ColorInfoContent); --color-info-content: @(Theme.Content.ColorInfoContent);
--mooncore-color-success: @(Theme.Content.ColorSuccess); --color-success: @(Theme.Content.ColorSuccess);
--mooncore-color-success-content: @(Theme.Content.ColorSuccessContent); --color-success-content: @(Theme.Content.ColorSuccessContent);
--mooncore-color-warning: @(Theme.Content.ColorWarning); --color-warning: @(Theme.Content.ColorWarning);
--mooncore-color-warning-content: @(Theme.Content.ColorWarningContent); --color-warning-content: @(Theme.Content.ColorWarningContent);
--mooncore-color-error: @(Theme.Content.ColorError); --color-error: @(Theme.Content.ColorError);
--mooncore-color-error-content: @(Theme.Content.ColorErrorContent); --color-error-content: @(Theme.Content.ColorErrorContent);
--mooncore-radius-selector: @(Theme.Content.RadiusSelector)rem; --radius-selector: @(Theme.Content.RadiusSelector)rem;
--mooncore-radius-field: @(Theme.Content.RadiusField)rem; --radius-field: @(Theme.Content.RadiusField)rem;
--mooncore-radius-box: @(Theme.Content.RadiusBox)rem; --radius-box: @(Theme.Content.RadiusBox)rem;
--mooncore-size-selector: @(Theme.Content.SizeSelector)rem; --size-selector: @(Theme.Content.SizeSelector)rem;
--mooncore-size-field: @(Theme.Content.SizeField)rem; --size-field: @(Theme.Content.SizeField)rem;
--mooncore-border: @(Theme.Content.Border)px; --border: @(Theme.Content.Border)px;
--mooncore-depth: @(Theme.Content.Depth); --depth: @(Theme.Content.Depth);
--mooncore-noise: @(Theme.Content.Noise); --noise: @(Theme.Content.Noise);
} }
</style> </style>
} }

2
Moonlight.ApiServer/Http/Controllers/LocalAuth/Login.razor
View File

@@ -1,4 +1,4 @@
<html lang="en" class="h-full bg-background"> <html lang="en" class="h-full bg-base-200">
<head> <head>
<title>Login into your account</title> <title>Login into your account</title>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>

2
Moonlight.ApiServer/Http/Controllers/LocalAuth/Register.razor
View File

@@ -1,4 +1,4 @@
<html lang="en" class="h-full bg-background"> <html lang="en" class="h-full bg-base-200">
<head> <head>
<title>Register a new account</title> <title>Register a new account</title>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>

2
Moonlight.ApiServer/Moonlight.ApiServer.csproj
View File

@@ -13,7 +13,7 @@
</ItemGroup> </ItemGroup>
<PropertyGroup> <PropertyGroup>
<PackageId>Moonlight.ApiServer</PackageId> <PackageId>Moonlight.ApiServer</PackageId>
<Version>2.1.14</Version> <Version>2.1.15</Version>
<Authors>Moonlight Panel</Authors> <Authors>Moonlight Panel</Authors>
<Description>A build of the api server for moonlight development</Description> <Description>A build of the api server for moonlight development</Description>
<PackageProjectUrl>https://github.com/Moonlight-Panel/Moonlight</PackageProjectUrl> <PackageProjectUrl>https://github.com/Moonlight-Panel/Moonlight</PackageProjectUrl>

4
Moonlight.Client.Runtime/Moonlight.Client.Runtime.csproj
View File

@@ -19,6 +19,10 @@
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.9" PrivateAssets="all" /> <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.9" PrivateAssets="all" />
</ItemGroup> </ItemGroup>
<ItemGroup>
<Folder Include="wwwroot\css\" />
</ItemGroup>
<Import Project="Plugins.props" /> <Import Project="Plugins.props" />
</Project> </Project>

53
Moonlight.Client.Runtime/Styles/styles.css
View File

@@ -9,14 +9,10 @@
@theme { @theme {
--font-inter: "Inter", var(--font-sans); --font-inter: "Inter", var(--font-sans);
--font-scp: "Source Code Pro", var(--font-mono); --font-scp: "Source Code Pro", var(--font-mono);
--color-background: var(--mooncore-color-background);
--color-base-150: var(--mooncore-color-base-150);
--color-base-250: var(--mooncore-color-base-250);
} }
@plugin "flyonui" { @plugin "flyonui" {
themes: mooncore --default; themes: moonlight --default;
} }
@source "./node_modules/flyonui/dist/index.js"; @source "./node_modules/flyonui/dist/index.js";
@@ -45,41 +41,6 @@
width: var(--blazor-load-percentage, 0%); width: var(--blazor-load-percentage, 0%);
} }
@plugin "flyonui/theme" {
name: "mooncore";
default: true;
prefersdark: true;
color-scheme: "dark";
--color-base-100: var(--mooncore-color-base-100);
--color-base-200: var(--mooncore-color-base-200);
--color-base-300: var(--mooncore-color-base-300);
--color-base-content: var(--mooncore-color-base-content);
--color-primary: var(--mooncore-color-primary);
--color-primary-content: var(--mooncore-color-primary-content);
--color-secondary: var(--mooncore-color-secondary);
--color-secondary-content: var(--mooncore-color-secondary-content);
--color-accent: var(--mooncore-color-accent);
--color-accent-content: var(--mooncore-color-accent-content);
--color-neutral: var(--mooncore-color-neutral);
--color-neutral-content: var(--mooncore-color-neutral-content);
--color-info: var(--mooncore-color-info);
--color-info-content: var(--mooncore-color-info-content);
--color-success: var(--mooncore-color-success);
--color-success-content: var(--mooncore-color-success-content);
--color-warning: var(--mooncore-color-warning);
--color-warning-content: var(--mooncore-color-warning-content);
--color-error: var(--mooncore-color-error);
--color-error-content: var(--mooncore-color-error-content);
--radius-selector: var(--mooncore-radius-selector);
--radius-field: var(--mooncore-radius-field);
--radius-box: var(--mooncore-radius-box);
--size-selector: var(--mooncore-size-selector);
--size-field: var(--mooncore-size-field);
--border: var(--mooncore-border);
--depth: var(--mooncore-depth);
--noise: var(--mooncore-noise);
}
@layer utilities { @layer utilities {
.btn { .btn {
@apply text-sm font-medium inline-flex items-center justify-center; @apply text-sm font-medium inline-flex items-center justify-center;
@@ -90,15 +51,11 @@
} }
.input { .input {
@apply !border-base-content/20 border-2 ring-0! outline-0! focus:border-primary! focus-within:border-primary! bg-base-200/50; @apply !border-base-content/20 border-2 ring-0! outline-0! focus:border-primary! focus-within:border-primary! bg-base-100/50;
}
.advance-select-toggle {
@apply !border-base-content/20 border-2 ring-0! outline-0! focus:border-primary! focus-within:border-primary! bg-base-200/50;
} }
.select { .select {
@apply !border-base-content/20 border-2 ring-0! outline-0! focus:border-primary! focus-within:border-primary! bg-base-200/50; @apply !border-base-content/20 border-2 ring-0! outline-0! focus:border-primary! focus-within:border-primary! bg-base-100/50;
} }
.table { .table {
@@ -111,10 +68,6 @@
@apply px-2.5 py-1.5 text-sm; @apply px-2.5 py-1.5 text-sm;
} }
.dropdown-menu {
@apply bg-base-150;
}
.advance-select-menu { .advance-select-menu {
@apply !border-base-content/20 border-2 ring-0! outline-0! bg-base-200/50 !pt-0 !px-0 !py-0; @apply !border-base-content/20 border-2 ring-0! outline-0! bg-base-200/50 !pt-0 !px-0 !py-0;
} }

66
Moonlight.Client.Runtime/Styles/theme.css
View File

@@ -1,33 +1,35 @@
@theme { @plugin "flyonui/theme" {
--mooncore-color-background: #0c0f18; name: "moonlight";
--mooncore-color-base-100: #1e2b47; prefersdark: true;
--mooncore-color-base-150: #1a2640; color-scheme: "dark";
--mooncore-color-base-200: #101a2e;
--mooncore-color-base-250: #0f1729; --color-base-100: #192032;
--mooncore-color-base-300: #0c1221; --color-base-200: #101522;
--mooncore-color-base-content: #dde5f5; --color-base-300: #070a14;
--mooncore-color-primary: oklch(.511 .262 276.966);
--mooncore-color-primary-content: #dde5f5; --color-base-content: #dde5f5;
--mooncore-color-secondary: oklch(37% 0.034 259.733); --color-primary: oklch(.511 .262 276.966);
--mooncore-color-secondary-content: #dde5f5; --color-primary-content: #dde5f5;
--mooncore-color-accent: oklch(49.1% 0.27 292.581); --color-secondary: oklch(37% 0.034 259.733);
--mooncore-color-accent-content: #dde5f5; --color-secondary-content: #dde5f5;
--mooncore-color-neutral: oklch(27% 0.041 260.031); --color-accent: oklch(49.1% 0.27 292.581);
--mooncore-color-neutral-content: oklch(92% 0.004 286.32); --color-accent-content: #dde5f5;
--mooncore-color-info: oklch(.546 .245 262.881); --color-neutral: oklch(27% 0.041 260.031);
--mooncore-color-info-content: #dde5f5; --color-neutral-content: oklch(92% 0.004 286.32);
--mooncore-color-success: oklch(.627 .194 149.214); --color-info: oklch(.546 .245 262.881);
--mooncore-color-success-content: #dde5f5; --color-info-content: #dde5f5;
--mooncore-color-warning: oklch(.828 .189 84.429); --color-success: oklch(.627 .194 149.214);
--mooncore-color-warning-content: #dde5f5; --color-success-content: #dde5f5;
--mooncore-color-error: oklch(.586 .253 17.585); --color-warning: oklch(.828 .189 84.429);
--mooncore-color-error-content: #dde5f5; --color-warning-content: #dde5f5;
--mooncore-radius-selector: 0.25rem; --color-error: oklch(.586 .253 17.585);
--mooncore-radius-field: 0.5rem; --color-error-content: #dde5f5;
--mooncore-radius-box: 0.5rem; --radius-selector: 0.25rem;
--mooncore-size-selector: 0.25rem; --radius-field: 0.5rem;
--mooncore-size-field: 0.25rem; --radius-box: 0.5rem;
--mooncore-border: 1px; --size-selector: 0.25rem;
--mooncore-depth: 0; --size-field: 0.25rem;
--mooncore-noise: 0; --border: 1px;
--depth: 0;
--noise: 0;
} }

4
Moonlight.Client/Moonlight.Client.csproj
View File

@@ -12,7 +12,7 @@
<PropertyGroup> <PropertyGroup>
<PackageTags>frontend</PackageTags> <PackageTags>frontend</PackageTags>
<PackageId>Moonlight.Client</PackageId> <PackageId>Moonlight.Client</PackageId>
<Version>2.1.14</Version> <Version>2.1.15</Version>
<Authors>Moonlight Panel</Authors> <Authors>Moonlight Panel</Authors>
<Description>A build of the client for moonlight development</Description> <Description>A build of the client for moonlight development</Description>
<PackageProjectUrl>https://github.com/Moonlight-Panel/Moonlight</PackageProjectUrl> <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.AspNetCore.SignalR.Client" Version="9.0.9" />
<PackageReference Include="Microsoft.Extensions.Logging.Console" Version="9.0.8" /> <PackageReference Include="Microsoft.Extensions.Logging.Console" Version="9.0.8" />
<PackageReference Include="MoonCore" Version="2.0.6" /> <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" /> <PackageReference Include="System.Security.Claims" Version="4.3.0" />
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>

21
Moonlight.Client/Styles/MoonCore.Blazor.FlyonUi/mooncore.map
View File

@@ -29,7 +29,6 @@ accordion-content
accordion-toggle accordion-toggle
active active
active-tab:bg-primary active-tab:bg-primary
active-tab:hover:text-primary-content
active-tab:text-primary-content active-tab:text-primary-content
advance-select-menu advance-select-menu
advance-select-option advance-select-option
@@ -50,14 +49,13 @@ basis-full
bg-background bg-background
bg-background/60 bg-background/60
bg-base-100 bg-base-100
bg-base-150 bg-base-100/50
bg-base-200 bg-base-200
bg-base-200! bg-base-200!
bg-base-200/50 bg-base-200/50
bg-base-200/60 bg-base-200/60
bg-base-250
bg-base-300 bg-base-300
bg-base-300/50 bg-base-300/15
bg-base-300/60 bg-base-300/60
bg-error bg-error
bg-info bg-info
@@ -147,7 +145,7 @@ cursor-pointer
cursor-progress cursor-progress
diff diff
disabled disabled
divide-base-150/60 divide-base-100/60
divide-y divide-y
divider divider
drawer drawer
@@ -231,8 +229,8 @@ h-full
h-screen h-screen
helper-text helper-text
hidden hidden
hover:bg-primary/20
hover:bg-primary/5 hover:bg-primary/5
hover:bg-transparent
hover:cursor-pointer hover:cursor-pointer
hover:text-base-content hover:text-base-content
hover:text-base-content/60 hover:text-base-content/60
@@ -309,6 +307,7 @@ max-sm:hidden
max-w-64 max-w-64
max-w-7xl max-w-7xl
max-w-80 max-w-80
max-w-fit
max-w-full max-w-full
max-w-lg max-w-lg
max-w-sm max-w-sm
@@ -370,6 +369,7 @@ mt-10
mt-12 mt-12
mt-2 mt-2
mt-2.5 mt-2.5
mt-20
mt-3 mt-3
mt-3.5 mt-3.5
mt-4 mt-4
@@ -426,6 +426,7 @@ pt-2
pt-3 pt-3
px-1.5 px-1.5
px-2 px-2
px-2.5
px-3 px-3
px-4 px-4
px-5 px-5
@@ -462,7 +463,6 @@ shadow-base-300/20
shadow-lg shadow-lg
shadow-md shadow-md
shadow-none shadow-none
shadow-sm
shadow-xs shadow-xs
shrink-0 shrink-0
size-10 size-10
@@ -473,6 +473,7 @@ size-8
size-8.5 size-8.5
sm:auto-cols-max sm:auto-cols-max
sm:flex sm:flex
sm:inline
sm:items-center sm:items-center
sm:items-end sm:items-end
sm:justify-between sm:justify-between
@@ -502,6 +503,7 @@ sticky
success-message success-message
switch switch
tab tab
tab!
tab-active tab-active
table table
table-pin-cols table-pin-cols
@@ -560,9 +562,7 @@ transform
transition transition
transition-all transition-all
transition-opacity transition-opacity
transition-transform
translate-x-0 translate-x-0
translate-x-full
truncate truncate
underline underline
uppercase uppercase
@@ -570,17 +570,14 @@ validate
w-0 w-0
w-0.5 w-0.5
w-13 w-13
w-20
w-4 w-4
w-56 w-56
w-6 w-6
w-64 w-64
w-fit
w-full w-full
whitespace-nowrap whitespace-nowrap
xl:flex xl:flex
xl:grid-cols-2 xl:grid-cols-2
z-1
z-40 z-40
z-50 z-50
z-69 z-69

15
Moonlight.Client/Styles/mappings/classes.map
View File

@@ -8,12 +8,14 @@
!justify-between !justify-between
!me-1.5 !me-1.5
!ms-auto !ms-auto
!p-2.5
!px-2.5 !px-2.5
!py-0.5 !py-0.5
!rounded-full !rounded-full
!rounded-xs !rounded-xs
!text-sm !text-sm
!w-2.5 !w-2.5
!w-8
*:[grid-area:1/1] *:[grid-area:1/1]
*:first:rounded-tl-lg *:first:rounded-tl-lg
*:last:rounded-tr-lg *:last:rounded-tr-lg
@@ -65,16 +67,14 @@ badge-primary
badge-soft badge-soft
badge-success badge-success
basis-full basis-full
bg-background
bg-background/60
bg-base-100 bg-base-100
bg-base-150 bg-base-100/50
bg-base-200 bg-base-200
bg-base-200! bg-base-200!
bg-base-200/50 bg-base-200/50
bg-base-200/60 bg-base-200/60
bg-base-250
bg-base-300 bg-base-300
bg-base-300/15
bg-base-300/45 bg-base-300/45
bg-base-300/50 bg-base-300/50
bg-base-300/60 bg-base-300/60
@@ -190,7 +190,7 @@ cursor-progress
custom-option custom-option
diff diff
disabled disabled
divide-base-150/60 divide-base-100/60
divide-y divide-y
divider divider
drawer drawer
@@ -298,6 +298,7 @@ h-screen
helper-text helper-text
hidden hidden
hover:bg-indigo-500 hover:bg-indigo-500
hover:bg-primary/20
hover:bg-primary/5 hover:bg-primary/5
hover:bg-transparent hover:bg-transparent
hover:cursor-pointer hover:cursor-pointer
@@ -393,6 +394,7 @@ max-w-64
max-w-7xl max-w-7xl
max-w-8 max-w-8
max-w-80 max-w-80
max-w-fit
max-w-full max-w-full
max-w-lg max-w-lg
max-w-md max-w-md
@@ -467,6 +469,7 @@ mt-10
mt-12 mt-12
mt-2 mt-2
mt-2.5 mt-2.5
mt-20
mt-3 mt-3
mt-3.5 mt-3.5
mt-4 mt-4
@@ -602,6 +605,7 @@ sm:flex-nowrap
sm:gap-y-0 sm:gap-y-0
sm:grid-cols-3 sm:grid-cols-3
sm:grid-cols-6 sm:grid-cols-6
sm:inline
sm:items-center sm:items-center
sm:items-end sm:items-end
sm:justify-between sm:justify-between
@@ -654,6 +658,7 @@ sticky
success-message success-message
switch switch
tab tab
tab!
tab-active tab-active
tab-content tab-content
table table

2
Moonlight.Client/UI/App.razor
View File

@@ -1,4 +1,4 @@
@using Moonlight.Client.UI.Layouts @using Moonlight.Client.UI.Shell
@using Moonlight.Client.Services @using Moonlight.Client.Services
@using Moonlight.Client.UI.Partials @using Moonlight.Client.UI.Partials

24
Moonlight.Client/UI/Components/ThemeEditor.razor
View File

@@ -7,11 +7,6 @@
<span>Base Colors</span> <span>Base Colors</span>
</div> </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"> <div class="flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorBaseContent"/> <ColorSelector @bind-Value="Theme.ColorBaseContent"/>
<span class="ms-2.5">Base Content</span> <span class="ms-2.5">Base Content</span>
@@ -22,21 +17,11 @@
<span class="ms-2.5">Base 100</span> <span class="ms-2.5">Base 100</span>
</div> </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"> <div class="flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorBase200"/> <ColorSelector @bind-Value="Theme.ColorBase200"/>
<span class="ms-2.5">Base 200</span> <span class="ms-2.5">Base 200</span>
</div> </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"> <div class="flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorBase300"/> <ColorSelector @bind-Value="Theme.ColorBase300"/>
<span class="ms-2.5">Base 300</span> <span class="ms-2.5">Base 300</span>
@@ -79,6 +64,15 @@
<span class="ms-2.5">Accent Content</span> <span class="ms-2.5">Accent Content</span>
</div> </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"> <div class="col-span-1 flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorInfo"/> <ColorSelector @bind-Value="Theme.ColorInfo"/>
<span class="ms-2.5">Info</span> <span class="ms-2.5">Info</span>

30
Moonlight.Client/UI/Shell/AppHeader.razor Normal file
View File

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

22
Moonlight.Client/UI/Shell/MainLayout.razor Normal file
View File

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

151
Moonlight.Client/UI/Shell/SidebarComponent.razor Normal file
View File

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

31
Moonlight.Client/UI/Shell/SidebarDrawer.razor Normal file
View File

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

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

@@ -68,12 +68,8 @@
{ {
return new ApplicationTheme() return new ApplicationTheme()
{ {
ColorBackground = "#0c0f18",
ColorBase100 = "#1e2b47", ColorBase100 = "#1e2b47",
ColorBase150 = "#1a2640",
ColorBase200 = "#101a2e", ColorBase200 = "#101a2e",
ColorBase250 = "#0f1729",
ColorBase300 = "#0c1221", ColorBase300 = "#0c1221",
ColorBaseContent = "#dde5f5", ColorBaseContent = "#dde5f5",

4
Moonlight.Shared/Misc/ApplicationTheme.cs
View File

@@ -2,12 +2,8 @@ namespace Moonlight.Shared.Misc;
public class ApplicationTheme public class ApplicationTheme
{ {
public string ColorBackground { get; set; }
public string ColorBase100 { get; set; } public string ColorBase100 { get; set; }
public string ColorBase150 { get; set; }
public string ColorBase200 { get; set; } public string ColorBase200 { get; set; }
public string ColorBase250 { get; set; }
public string ColorBase300 { get; set; } public string ColorBase300 { get; set; }
public string ColorBaseContent { get; set; } public string ColorBaseContent { get; set; }

2
Moonlight.Shared/Moonlight.Shared.csproj
View File

@@ -9,7 +9,7 @@
<Title>Moonlight.Shared</Title> <Title>Moonlight.Shared</Title>
<PackageTags>shared</PackageTags> <PackageTags>shared</PackageTags>
<PackageId>Moonlight.Shared</PackageId> <PackageId>Moonlight.Shared</PackageId>
<Version>2.1.14</Version> <Version>2.1.15</Version>
<Authors>Moonlight Panel</Authors> <Authors>Moonlight Panel</Authors>
<Description>A build of the shared classes for moonlight development</Description> <Description>A build of the shared classes for moonlight development</Description>
<PackageProjectUrl>https://github.com/Moonlight-Panel/Moonlight</PackageProjectUrl> <PackageProjectUrl>https://github.com/Moonlight-Panel/Moonlight</PackageProjectUrl>