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

Added theme loading. Improved theme editor. Updated app theme model

Browse Source
This commit is contained in:
ChiaraBm
2025-07-22 21:08:03 +02:00
parent a480ae9c50
commit 7dde1d86f8
8 changed files with 339 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,21 +1,73 @@
@using Moonlight.ApiServer.Database.Entities
@using Moonlight.Shared.Misc
<!DOCTYPE html>
<html lang="en" class="bg-background text-base-content font-inter">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>@Configuration.Title</title>
<base href="/" />
<base href="/"/>
@foreach (var style in Configuration.Styles)
{
<link rel="stylesheet" href="@style" />
<link rel="stylesheet" href="@style"/>
}
<link href="manifest.webmanifest" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="/_content/Moonlight.Client/img/icon-512.png" />
<link rel="apple-touch-icon" sizes="192x192" href="/_content/Moonlight.Client/img/icon-192.png" />
<link href="manifest.webmanifest" rel="manifest"/>
<link rel="apple-touch-icon" sizes="512x512" href="/_content/Moonlight.Client/img/icon-512.png"/>
<link rel="apple-touch-icon" sizes="192x192" href="/_content/Moonlight.Client/img/icon-192.png"/>
@if (Theme != null)
{
<style>
:root {
--mooncore-color-background: @(Theme.Content.ColorBackground);
--mooncore-color-base-100: @(Theme.Content.ColorBase100);
--mooncore-color-base-150: @(Theme.Content.ColorBase150);
--mooncore-color-base-200: @(Theme.Content.ColorBase200);
--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);
--mooncore-color-primary-content: @(Theme.Content.ColorPrimaryContent);
--mooncore-color-secondary: @(Theme.Content.ColorSecondary);
--mooncore-color-secondary-content: @(Theme.Content.ColorSecondaryContent);
--mooncore-color-accent: @(Theme.Content.ColorAccent);
--mooncore-color-accent-content: @(Theme.Content.ColorAccentContent);
--mooncore-color-neutral: @(Theme.Content.ColorNeutral);
--mooncore-color-neutral-content: @(Theme.Content.ColorNeutralContent);
--mooncore-color-info: @(Theme.Content.ColorInfo);
--mooncore-color-info-content: @(Theme.Content.ColorInfoContent);
--mooncore-color-success: @(Theme.Content.ColorSuccess);
--mooncore-color-success-content: @(Theme.Content.ColorSuccessContent);
--mooncore-color-warning: @(Theme.Content.ColorWarning);
--mooncore-color-warning-content: @(Theme.Content.ColorWarningContent);
--mooncore-color-error: @(Theme.Content.ColorError);
--mooncore-color-error-content: @(Theme.Content.ColorErrorContent);
--mooncore-radius-selector: @(Theme.Content.RadiusSelector)rem;
--mooncore-radius-field: @(Theme.Content.RadiusField)rem;
--mooncore-radius-box: @(Theme.Content.RadiusBox)rem;
--mooncore-size-selector: @(Theme.Content.SizeSelector)rem;
--mooncore-size-field: @(Theme.Content.SizeField)rem;
--mooncore-border: @(Theme.Content.Border)px;
--mooncore-depth: @(Theme.Content.Depth);
--mooncore-noise: @(Theme.Content.Noise);
}
</style>
}
</head>
<body>
@@ -48,4 +100,5 @@
@code
{
[Parameter] public FrontendConfiguration Configuration { get; set; }
[Parameter] public Theme? Theme { get; set; }
}

4
Moonlight.ApiServer/Models/ApplicationTheme.cs
View File

@@ -44,6 +44,6 @@ public class ApplicationTheme
public float SizeField { get; set; }
public float Border { get; set; }
public float Depth { get; set; }
public float Noise { get; set; }
public int Depth { get; set; }
public int Noise { get; set; }
}

13
Moonlight.ApiServer/Services/FrontendService.cs
View File

@@ -2,11 +2,14 @@ using System.IO.Compression;
using System.Text;
using System.Text.Json;
using Microsoft.AspNetCore.Hosting;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.FileProviders;
using MoonCore.Attributes;
using MoonCore.Exceptions;
using MoonCore.Extended.Abstractions;
using MoonCore.Helpers;
using Moonlight.ApiServer.Configuration;
using Moonlight.ApiServer.Database.Entities;
using Moonlight.ApiServer.Http.Controllers.Frontend;
using Moonlight.ApiServer.Models;
using Moonlight.Shared.Misc;
@@ -20,18 +23,21 @@ public class FrontendService
private readonly IWebHostEnvironment WebHostEnvironment;
private readonly IEnumerable<FrontendConfigurationOption> ConfigurationOptions;
private readonly IServiceProvider ServiceProvider;
private readonly DatabaseRepository<Theme> ThemeRepository;
public FrontendService(
AppConfiguration configuration,
IWebHostEnvironment webHostEnvironment,
IEnumerable<FrontendConfigurationOption> configurationOptions,
IServiceProvider serviceProvider
IServiceProvider serviceProvider,
DatabaseRepository<Theme> themeRepository
)
{
Configuration = configuration;
WebHostEnvironment = webHostEnvironment;
ConfigurationOptions = configurationOptions;
ServiceProvider = serviceProvider;
ThemeRepository = themeRepository;
}
public async Task<FrontendConfiguration> GetConfiguration()
@@ -71,11 +77,16 @@ public class FrontendService
{
var configuration = await GetConfiguration();
var theme = await ThemeRepository
.Get()
.FirstOrDefaultAsync(x => x.IsEnabled);
return await ComponentHelper.RenderComponent<FrontendPage>(
ServiceProvider,
parameters =>
{
parameters["Configuration"] = configuration;
parameters["Theme"] = theme!;
}
);
}

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

@@ -224,9 +224,11 @@ grid
grid-cols-1
grid-cols-12
grid-cols-2
grid-cols-3
grid-flow-col
grow
grow-0
h-0
h-12
h-14
h-2
@@ -399,6 +401,7 @@ overlay-open:duration-50
overlay-open:opacity-100
p-0.5
p-1
p-1.5
p-2
p-2.5
p-3

83
Moonlight.Client/UI/Components/ThemeColorSelector.razor
View File

@@ -1,83 +0,0 @@
@using System.Drawing
@using MoonCore.Helpers
<div class="card card-body py-2 px-4 flex flex-row items-center justify-between">
<span>
@PrettyIdentifier
</span>
<div class="flex flex-row items-center gap-x-1">
@{
var currentValue = Value ?? DefaultValue;
var currentHex = ColorToHex(currentValue);
var elementId = $"colorSelect{GetHashCode()}";
}
<input id="@elementId" @onchange="OnColorChanged" type="color" hidden="" value="@(currentHex)"/>
<label for="@elementId" class="btn w-32 justify-between" style="background-color: @(currentHex)">
<i class="icon-palette mix-blend-exclusion"></i>
<span class="ms-2 mix-blend-exclusion">@(currentHex)</span>
</label>
<button @onclick="Reset" class="btn btn-error">
<i class="icon-rotate-ccw"></i>
</button>
</div>
</div>
@code
{
[Parameter] public string? Value { get; set; }
[Parameter] public string Identifier { get; set; }
[Parameter] public string DefaultValue { get; set; }
[Parameter] public Func<string, Task> OnChanged { get; set; }
private string PrettyIdentifier;
protected override void OnInitialized()
{
var parts = Identifier
.Split("-")
.Select(Formatter.CapitalizeFirstCharacter);
PrettyIdentifier = string.Join(" ", parts);
}
private async Task Save()
{
await OnChanged.Invoke(Value ?? DefaultValue);
}
private async Task Reset()
{
Value = DefaultValue;
await Save();
}
private async Task OnColorChanged(ChangeEventArgs eventArgs)
{
var strVal = eventArgs.Value?.ToString() ?? null;
if (strVal == null)
Value = DefaultValue;
else
Value = HexToColor(strVal);
await Save();
}
private string ColorToHex(string str)
{
var colorParts = str.Split(" ");
var r = int.Parse(colorParts[0]);
var g = int.Parse(colorParts[1]);
var b = int.Parse(colorParts[2]);
return ColorTranslator.ToHtml(Color.FromArgb(r, g, b));
}
private string HexToColor(string str)
{
var color = ColorTranslator.FromHtml(str);
return $"{color.R} {color.G} {color.B}";
}
}

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

@@ -1,132 +1,322 @@
@using Moonlight.Shared.Misc
<div class="grid grid-cols-3 gap-3">
<div class="col-span-1 flex flex-col gap-3">
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3">
<div class="col-span-1 flex flex-col gap-y-3 card card-body">
<div class="text-lg text-base-content mb-2.5 flex items-center">
<i class="icon-paint-bucket me-2"></i>
<span>Base Colors</span>
</div>
<div class="flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorBackground"/>
<span class="ms-1">Background</span>
<span class="ms-2.5">Background</span>
</div>
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorBaseContent"/>
<span class="ms-1">Base Content</span>
<span class="ms-2.5">Base Content</span>
</div>
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorBase100"/>
<span class="ms-1">Base 100</span>
<span class="ms-2.5">Base 100</span>
</div>
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorBase150"/>
<span class="ms-1">Base 150</span>
<span class="ms-2.5">Base 150</span>
</div>
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorBase200"/>
<span class="ms-1">Base 200</span>
<span class="ms-2.5">Base 200</span>
</div>
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorBase250"/>
<span class="ms-1">Base 250</span>
<span class="ms-2.5">Base 250</span>
</div>
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorBase300"/>
<span class="ms-1">Base 300</span>
<span class="ms-2.5">Base 300</span>
</div>
</div>
<div class="col-span-2 grid grid-cols-2 gap-3">
<div class="col-span-1 flex flex-col gap-y-3">
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="col-span-1 flex flex-col gap-y-3 card card-body">
<div class="text-lg text-base-content mb-2.5 flex items-center">
<i class="icon-paint-bucket me-2"></i>
<span>Colors</span>
</div>
<div class="grid grid-cols-2 gap-y-1.5">
<div class="col-span-1 flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorPrimary"/>
<span class="ms-1">Primary</span>
<span class="ms-2.5">Primary</span>
</div>
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="col-span-1 flex flex-row items-center">
<ColorSelector Icon="icon-type" @bind-Value="Theme.ColorPrimaryContent"/>
<span class="ms-1">Primary Content</span>
<span class="ms-2.5">Primary Content</span>
</div>
</div>
<div class="col-span-1 flex flex-col gap-y-3">
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="col-span-1 flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorSecondary"/>
<span class="ms-1">Secondary</span>
<span class="ms-2.5">Secondary</span>
</div>
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="col-span-1 flex flex-row items-center">
<ColorSelector Icon="icon-type" @bind-Value="Theme.ColorSecondaryContent"/>
<span class="ms-1">Secondary Content</span>
<span class="ms-2.5">Secondary Content</span>
</div>
</div>
<div class="col-span-1 flex flex-col gap-y-3">
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="col-span-1 flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorAccent"/>
<span class="ms-1">Accent</span>
<span class="ms-2.5">Accent</span>
</div>
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="col-span-1 flex flex-row items-center">
<ColorSelector Icon="icon-type" @bind-Value="Theme.ColorAccentContent"/>
<span class="ms-1">Accent Content</span>
<span class="ms-2.5">Accent Content</span>
</div>
</div>
<div class="col-span-1 flex flex-col gap-y-3">
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="col-span-1 flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorInfo"/>
<span class="ms-1">Info</span>
<span class="ms-2.5">Info</span>
</div>
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="col-span-1 flex flex-row items-center">
<ColorSelector Icon="icon-type" @bind-Value="Theme.ColorInfoContent"/>
<span class="ms-1">Info Content</span>
<span class="ms-2.5">Info Content</span>
</div>
</div>
<div class="col-span-1 flex flex-col gap-y-3">
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="col-span-1 flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorSuccess"/>
<span class="ms-1">Success</span>
<span class="ms-2.5">Success</span>
</div>
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="col-span-1 flex flex-row items-center">
<ColorSelector Icon="icon-type" @bind-Value="Theme.ColorSuccessContent"/>
<span class="ms-1">Success Content</span>
<span class="ms-2.5">Success Content</span>
</div>
</div>
<div class="col-span-1 flex flex-col gap-y-3">
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="col-span-1 flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorWarning"/>
<span class="ms-1">Warning</span>
<span class="ms-2.5">Warning</span>
</div>
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="col-span-1 flex flex-row items-center">
<ColorSelector Icon="icon-type" @bind-Value="Theme.ColorWarningContent"/>
<span class="ms-1">Warning Content</span>
<span class="ms-2.5">Warning Content</span>
</div>
</div>
<div class="col-span-1 flex flex-col gap-y-3">
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="col-span-1 flex flex-row items-center">
<ColorSelector @bind-Value="Theme.ColorError"/>
<span class="ms-1">Error</span>
<span class="ms-2.5">Error</span>
</div>
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
<div class="col-span-1 flex flex-row items-center">
<ColorSelector Icon="icon-type" @bind-Value="Theme.ColorErrorContent"/>
<span class="ms-1">Error Content</span>
<span class="ms-2.5">Error Content</span>
</div>
</div>
</div>
<div class="col-span-1 flex flex-col gap-3 card card-body">
<div class="text-lg text-base-content mb-2.5 flex items-center">
<i class="icon-square-round-corner me-2"></i>
<span>Radius</span>
</div>
<div>
<div class="mb-1 text-base-content">Boxes</div>
<div class="flex w-full items-start gap-3 flex-wrap sm:flex-nowrap">
@foreach (var possibleValue in RadiusValues)
{
<label class="custom-option flex sm:w-1/2 flex-row items-start gap-3 p-2">
@if (Math.Abs(Theme.RadiusBox - possibleValue) == 0)
{
<input type="radio" name="radius-box" class="radio hidden" checked="checked"/>
}
else
{
<input @onclick="_ => UpdateRadiusBox(possibleValue)" type="radio" name="radius-box" class="radio hidden"/>
}
<span class="label-text w-full">
<div class="pe-1.5 pt-1.5" aria-hidden="true">
<div class="bg-base-200 h-6 w-8 border-e-2 border-t-2 border-base-content/60"
style="border-start-end-radius: @(possibleValue)rem">
</div>
</div>
</span>
</label>
}
</div>
</div>
<div>
<div class="mb-1 text-base-content">Fields</div>
<div class="flex w-full items-start gap-3 flex-wrap sm:flex-nowrap">
@foreach (var possibleValue in RadiusValues)
{
<label class="custom-option flex sm:w-1/2 flex-row items-start gap-3 p-2">
@if (Math.Abs(Theme.RadiusField - possibleValue) == 0)
{
<input type="radio" name="radius-field" class="radio hidden" checked="checked"/>
}
else
{
<input @onclick="_ => UpdateRadiusField(possibleValue)" type="radio" name="radius-field" class="radio hidden"/>
}
<span class="label-text w-full">
<div class="pe-1.5 pt-1.5" aria-hidden="true">
<div class="bg-base-200 h-6 w-8 border-e-2 border-t-2 border-base-content/60"
style="border-start-end-radius: @(possibleValue)rem">
</div>
</div>
</span>
</label>
}
</div>
</div>
<div>
<div class="mb-1 text-base-content">Selectors</div>
<div class="flex w-full items-start gap-3 flex-wrap sm:flex-nowrap">
@foreach (var possibleValue in RadiusValues)
{
<label class="custom-option flex sm:w-1/2 flex-row items-start gap-3 p-2">
@if (Math.Abs(Theme.RadiusSelector - possibleValue) == 0)
{
<input type="radio" name="radius-selector" class="radio hidden" checked="checked"/>
}
else
{
<input @onclick="_ => UpdateRadiusSelector(possibleValue)" type="radio" name="radius-selector" class="radio hidden"/>
}
<span class="label-text w-full">
<div class="pe-1.5 pt-1.5" aria-hidden="true">
<div class="bg-base-200 h-6 w-8 border-e-2 border-t-2 border-base-content/60"
style="border-start-end-radius: @(possibleValue)rem">
</div>
</div>
</span>
</label>
}
</div>
</div>
</div>
<div class="col-span-1 flex flex-col gap-3 card card-body">
<div class="text-lg text-base-content mb-2.5 flex items-center">
<i class="icon-star me-2"></i>
<span>Effects</span>
</div>
<div class="flex items-center gap-1">
<input @bind="InputDepth" type="checkbox" class="switch" id="depthEffect" />
<label class="label-text text-base" for="depthEffect">
Depth Effect
</label>
</div>
<div class="flex items-center gap-1">
<input @bind="InputNoise" type="checkbox" class="switch" id="noiseEffect" />
<label class="label-text text-base" for="noiseEffect">
Noise Effect
</label>
</div>
</div>
<div class="col-span-1 flex flex-col gap-3 card card-body">
<div class="text-lg text-base-content mb-2.5 flex items-center">
<i class="icon-ruler me-2"></i>
<span>Sizes</span>
</div>
<div>
<div class="mb-1 text-base-content">Fields</div>
<input @bind="Theme.SizeField" type="range" min="3" max="5" class="range" step="0.5" aria-label="range"/>
<div class="w-full flex justify-between text-xs px-2">
<span>3</span>
<span>3.5</span>
<span>4</span>
<span>4.5</span>
<span>5</span>
</div>
</div>
<div>
<div class="mb-1 text-base-content">Selector</div>
<input @bind="Theme.SizeSelector" type="range" min="3" max="5" class="range" step="0.5" aria-label="range"/>
<div class="w-full flex justify-between text-xs px-2">
<span>3</span>
<span>3.5</span>
<span>4</span>
<span>4.5</span>
<span>5</span>
</div>
</div>
<div>
<div class="mb-1 text-base-content">Border Width</div>
<input @bind="Theme.Border" type="range" min="0.5" max="2" class="range" step="0.5" aria-label="range"/>
<div class="w-full flex justify-between text-xs px-2">
<span>0.5</span>
<span>1</span>
<span>1.5</span>
<span>2</span>
</div>
</div>
</div>
</div>
@code
{
[Parameter] public ApplicationTheme Theme { get; set; }
private float[] RadiusValues =
[
0,
0.25f,
0.5f,
1f,
2f
];
private bool InputDepth
{
get => Theme.Depth != 0;
set => Theme.Depth = value ? 1 : 0;
}
private bool InputNoise
{
get => Theme.Noise != 0;
set => Theme.Noise = value ? 1 : 0;
}
private async Task UpdateRadiusBox(float value)
{
Theme.RadiusBox = value;
await InvokeAsync(StateHasChanged);
}
private async Task UpdateRadiusField(float value)
{
Theme.RadiusField = value;
await InvokeAsync(StateHasChanged);
}
private async Task UpdateRadiusSelector(float value)
{
Theme.RadiusSelector = value;
await InvokeAsync(StateHasChanged);
}
}

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

@@ -109,8 +109,8 @@
SizeField = 0.25f,
Border = 1f,
Depth = 0f,
Noise = 0f
Depth = 0,
Noise = 0
};
}
}

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

@@ -44,6 +44,6 @@ public class ApplicationTheme
public float SizeField { get; set; }
public float Border { get; set; }
public float Depth { get; set; }
public float Noise { get; set; }
public int Depth { get; set; }
public int Noise { get; set; }
}