diff --git a/Moonlight.ApiServer/Http/Controllers/Frontend/FrontendPage.razor b/Moonlight.ApiServer/Http/Controllers/Frontend/FrontendPage.razor index 0832de32..4e97033a 100644 --- a/Moonlight.ApiServer/Http/Controllers/Frontend/FrontendPage.razor +++ b/Moonlight.ApiServer/Http/Controllers/Frontend/FrontendPage.razor @@ -1,21 +1,73 @@ +@using Moonlight.ApiServer.Database.Entities @using Moonlight.Shared.Misc + - - + + @Configuration.Title - - + + @foreach (var style in Configuration.Styles) { - + + } + + + + + + @if (Theme != null) + { + } - - - - @@ -31,7 +83,7 @@ - + @foreach (var script in Configuration.Scripts) @@ -48,4 +100,5 @@ @code { [Parameter] public FrontendConfiguration Configuration { get; set; } + [Parameter] public Theme? Theme { get; set; } } diff --git a/Moonlight.ApiServer/Models/ApplicationTheme.cs b/Moonlight.ApiServer/Models/ApplicationTheme.cs index e6fc1413..35b27433 100644 --- a/Moonlight.ApiServer/Models/ApplicationTheme.cs +++ b/Moonlight.ApiServer/Models/ApplicationTheme.cs @@ -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; } } \ No newline at end of file diff --git a/Moonlight.ApiServer/Services/FrontendService.cs b/Moonlight.ApiServer/Services/FrontendService.cs index e295f4bf..f00e677e 100644 --- a/Moonlight.ApiServer/Services/FrontendService.cs +++ b/Moonlight.ApiServer/Services/FrontendService.cs @@ -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 ConfigurationOptions; private readonly IServiceProvider ServiceProvider; + private readonly DatabaseRepository ThemeRepository; public FrontendService( AppConfiguration configuration, IWebHostEnvironment webHostEnvironment, IEnumerable configurationOptions, - IServiceProvider serviceProvider + IServiceProvider serviceProvider, + DatabaseRepository themeRepository ) { Configuration = configuration; WebHostEnvironment = webHostEnvironment; ConfigurationOptions = configurationOptions; ServiceProvider = serviceProvider; + ThemeRepository = themeRepository; } public async Task 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( ServiceProvider, parameters => { parameters["Configuration"] = configuration; + parameters["Theme"] = theme!; } ); } diff --git a/Moonlight.Client/Styles/mappings/classes.map b/Moonlight.Client/Styles/mappings/classes.map index c68ff6cc..7b8083ed 100644 --- a/Moonlight.Client/Styles/mappings/classes.map +++ b/Moonlight.Client/Styles/mappings/classes.map @@ -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 diff --git a/Moonlight.Client/UI/Components/ThemeColorSelector.razor b/Moonlight.Client/UI/Components/ThemeColorSelector.razor deleted file mode 100644 index 150bd8e0..00000000 --- a/Moonlight.Client/UI/Components/ThemeColorSelector.razor +++ /dev/null @@ -1,83 +0,0 @@ -@using System.Drawing -@using MoonCore.Helpers - -
- - @PrettyIdentifier - -
- @{ - var currentValue = Value ?? DefaultValue; - var currentHex = ColorToHex(currentValue); - var elementId = $"colorSelect{GetHashCode()}"; - } - - - - -
-
- -@code -{ - [Parameter] public string? Value { get; set; } - [Parameter] public string Identifier { get; set; } - [Parameter] public string DefaultValue { get; set; } - [Parameter] public Func 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}"; - } -} diff --git a/Moonlight.Client/UI/Components/ThemeEditor.razor b/Moonlight.Client/UI/Components/ThemeEditor.razor index b6689032..a7b8e7ea 100644 --- a/Moonlight.Client/UI/Components/ThemeEditor.razor +++ b/Moonlight.Client/UI/Components/ThemeEditor.razor @@ -1,132 +1,322 @@ @using Moonlight.Shared.Misc -
-
-
+
+
+
+ + Base Colors +
+ +
- Background + Background
-
+
- Base Content + Base Content
-
+
- Base 100 + Base 100
-
+
- Base 150 + Base 150
-
+
- Base 200 + Base 200
-
+
- Base 250 + Base 250
-
+
- Base 300 + Base 300
-
-
-
+
+ +
+ + Colors +
+ +
+ +
- Primary + Primary
- -
+
- Primary Content + Primary Content
-
-
-
+
- Secondary + Secondary
- -
+
- Secondary Content + Secondary Content
-
-
-
+
- Accent + Accent
- -
+
- Accent Content + Accent Content
-
-
-
+
- Info + Info
- -
+
- Info Content + Info Content
-
-
-
+
- Success + Success
- -
+
- Success Content + Success Content
-
-
-
+
- Warning + Warning
- -
+
- Warning Content + Warning Content
-
-
-
+
- Error + Error
- -
+
- Error Content + Error Content
+ +
+ +
+ + Radius +
+ +
+
Boxes
+
+ + @foreach (var possibleValue in RadiusValues) + { + + } +
+
+ +
+
Fields
+
+ + @foreach (var possibleValue in RadiusValues) + { + + } +
+
+ +
+
Selectors
+
+ + @foreach (var possibleValue in RadiusValues) + { + + } +
+
+
+ +
+ +
+ + Effects +
+ +
+ + +
+ +
+ + +
+
+ +
+ +
+ + Sizes +
+ +
+
Fields
+ + +
+ 3 + 3.5 + 4 + 4.5 + 5 +
+
+ +
+
Selector
+ + +
+ 3 + 3.5 + 4 + 4.5 + 5 +
+
+ +
+
Border Width
+ + +
+ 0.5 + 1 + 1.5 + 2 +
+
+ +
@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); + } } diff --git a/Moonlight.Client/UI/Views/Admin/Sys/Customisation/Themes/Create.razor b/Moonlight.Client/UI/Views/Admin/Sys/Customisation/Themes/Create.razor index f3e15c43..904a6cec 100644 --- a/Moonlight.Client/UI/Views/Admin/Sys/Customisation/Themes/Create.razor +++ b/Moonlight.Client/UI/Views/Admin/Sys/Customisation/Themes/Create.razor @@ -109,8 +109,8 @@ SizeField = 0.25f, Border = 1f, - Depth = 0f, - Noise = 0f + Depth = 0, + Noise = 0 }; } } diff --git a/Moonlight.Shared/Misc/ApplicationTheme.cs b/Moonlight.Shared/Misc/ApplicationTheme.cs index ee8ac295..b391ce59 100644 --- a/Moonlight.Shared/Misc/ApplicationTheme.cs +++ b/Moonlight.Shared/Misc/ApplicationTheme.cs @@ -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; } } \ No newline at end of file