Added theme loading. Improved theme editor. Updated app theme model
This commit is contained in:
@@ -1,21 +1,73 @@
|
|||||||
|
@using Moonlight.ApiServer.Database.Entities
|
||||||
@using Moonlight.Shared.Misc
|
@using Moonlight.Shared.Misc
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" class="bg-background text-base-content font-inter">
|
<html lang="en" class="bg-background text-base-content font-inter">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>@Configuration.Title</title>
|
<title>@Configuration.Title</title>
|
||||||
<base href="/" />
|
<base href="/"/>
|
||||||
|
|
||||||
@foreach (var style in Configuration.Styles)
|
@foreach (var style in Configuration.Styles)
|
||||||
{
|
{
|
||||||
<link rel="stylesheet" href="@style" />
|
<link rel="stylesheet" href="@style"/>
|
||||||
}
|
}
|
||||||
|
|
||||||
<link href="manifest.webmanifest" rel="manifest" />
|
<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="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 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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@@ -48,4 +100,5 @@
|
|||||||
@code
|
@code
|
||||||
{
|
{
|
||||||
[Parameter] public FrontendConfiguration Configuration { get; set; }
|
[Parameter] public FrontendConfiguration Configuration { get; set; }
|
||||||
|
[Parameter] public Theme? Theme { get; set; }
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -44,6 +44,6 @@ public class ApplicationTheme
|
|||||||
public float SizeField { get; set; }
|
public float SizeField { get; set; }
|
||||||
|
|
||||||
public float Border { get; set; }
|
public float Border { get; set; }
|
||||||
public float Depth { get; set; }
|
public int Depth { get; set; }
|
||||||
public float Noise { get; set; }
|
public int Noise { get; set; }
|
||||||
}
|
}
|
||||||
@@ -2,11 +2,14 @@ using System.IO.Compression;
|
|||||||
using System.Text;
|
using System.Text;
|
||||||
using System.Text.Json;
|
using System.Text.Json;
|
||||||
using Microsoft.AspNetCore.Hosting;
|
using Microsoft.AspNetCore.Hosting;
|
||||||
|
using Microsoft.EntityFrameworkCore;
|
||||||
using Microsoft.Extensions.FileProviders;
|
using Microsoft.Extensions.FileProviders;
|
||||||
using MoonCore.Attributes;
|
using MoonCore.Attributes;
|
||||||
using MoonCore.Exceptions;
|
using MoonCore.Exceptions;
|
||||||
|
using MoonCore.Extended.Abstractions;
|
||||||
using MoonCore.Helpers;
|
using MoonCore.Helpers;
|
||||||
using Moonlight.ApiServer.Configuration;
|
using Moonlight.ApiServer.Configuration;
|
||||||
|
using Moonlight.ApiServer.Database.Entities;
|
||||||
using Moonlight.ApiServer.Http.Controllers.Frontend;
|
using Moonlight.ApiServer.Http.Controllers.Frontend;
|
||||||
using Moonlight.ApiServer.Models;
|
using Moonlight.ApiServer.Models;
|
||||||
using Moonlight.Shared.Misc;
|
using Moonlight.Shared.Misc;
|
||||||
@@ -20,18 +23,21 @@ public class FrontendService
|
|||||||
private readonly IWebHostEnvironment WebHostEnvironment;
|
private readonly IWebHostEnvironment WebHostEnvironment;
|
||||||
private readonly IEnumerable<FrontendConfigurationOption> ConfigurationOptions;
|
private readonly IEnumerable<FrontendConfigurationOption> ConfigurationOptions;
|
||||||
private readonly IServiceProvider ServiceProvider;
|
private readonly IServiceProvider ServiceProvider;
|
||||||
|
private readonly DatabaseRepository<Theme> ThemeRepository;
|
||||||
|
|
||||||
public FrontendService(
|
public FrontendService(
|
||||||
AppConfiguration configuration,
|
AppConfiguration configuration,
|
||||||
IWebHostEnvironment webHostEnvironment,
|
IWebHostEnvironment webHostEnvironment,
|
||||||
IEnumerable<FrontendConfigurationOption> configurationOptions,
|
IEnumerable<FrontendConfigurationOption> configurationOptions,
|
||||||
IServiceProvider serviceProvider
|
IServiceProvider serviceProvider,
|
||||||
|
DatabaseRepository<Theme> themeRepository
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
Configuration = configuration;
|
Configuration = configuration;
|
||||||
WebHostEnvironment = webHostEnvironment;
|
WebHostEnvironment = webHostEnvironment;
|
||||||
ConfigurationOptions = configurationOptions;
|
ConfigurationOptions = configurationOptions;
|
||||||
ServiceProvider = serviceProvider;
|
ServiceProvider = serviceProvider;
|
||||||
|
ThemeRepository = themeRepository;
|
||||||
}
|
}
|
||||||
|
|
||||||
public async Task<FrontendConfiguration> GetConfiguration()
|
public async Task<FrontendConfiguration> GetConfiguration()
|
||||||
@@ -71,11 +77,16 @@ public class FrontendService
|
|||||||
{
|
{
|
||||||
var configuration = await GetConfiguration();
|
var configuration = await GetConfiguration();
|
||||||
|
|
||||||
|
var theme = await ThemeRepository
|
||||||
|
.Get()
|
||||||
|
.FirstOrDefaultAsync(x => x.IsEnabled);
|
||||||
|
|
||||||
return await ComponentHelper.RenderComponent<FrontendPage>(
|
return await ComponentHelper.RenderComponent<FrontendPage>(
|
||||||
ServiceProvider,
|
ServiceProvider,
|
||||||
parameters =>
|
parameters =>
|
||||||
{
|
{
|
||||||
parameters["Configuration"] = configuration;
|
parameters["Configuration"] = configuration;
|
||||||
|
parameters["Theme"] = theme!;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -224,9 +224,11 @@ grid
|
|||||||
grid-cols-1
|
grid-cols-1
|
||||||
grid-cols-12
|
grid-cols-12
|
||||||
grid-cols-2
|
grid-cols-2
|
||||||
|
grid-cols-3
|
||||||
grid-flow-col
|
grid-flow-col
|
||||||
grow
|
grow
|
||||||
grow-0
|
grow-0
|
||||||
|
h-0
|
||||||
h-12
|
h-12
|
||||||
h-14
|
h-14
|
||||||
h-2
|
h-2
|
||||||
@@ -399,6 +401,7 @@ overlay-open:duration-50
|
|||||||
overlay-open:opacity-100
|
overlay-open:opacity-100
|
||||||
p-0.5
|
p-0.5
|
||||||
p-1
|
p-1
|
||||||
|
p-1.5
|
||||||
p-2
|
p-2
|
||||||
p-2.5
|
p-2.5
|
||||||
p-3
|
p-3
|
||||||
|
|||||||
@@ -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}";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,132 +1,322 @@
|
|||||||
@using Moonlight.Shared.Misc
|
@using Moonlight.Shared.Misc
|
||||||
|
|
||||||
<div class="grid grid-cols-3 gap-3">
|
<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-3">
|
<div class="col-span-1 flex flex-col gap-y-3 card card-body">
|
||||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
<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"/>
|
<ColorSelector @bind-Value="Theme.ColorBackground"/>
|
||||||
<span class="ms-1">Background</span>
|
<span class="ms-2.5">Background</span>
|
||||||
</div>
|
</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"/>
|
<ColorSelector @bind-Value="Theme.ColorBaseContent"/>
|
||||||
<span class="ms-1">Base Content</span>
|
<span class="ms-2.5">Base Content</span>
|
||||||
</div>
|
</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"/>
|
<ColorSelector @bind-Value="Theme.ColorBase100"/>
|
||||||
<span class="ms-1">Base 100</span>
|
<span class="ms-2.5">Base 100</span>
|
||||||
</div>
|
</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"/>
|
<ColorSelector @bind-Value="Theme.ColorBase150"/>
|
||||||
<span class="ms-1">Base 150</span>
|
<span class="ms-2.5">Base 150</span>
|
||||||
</div>
|
</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"/>
|
<ColorSelector @bind-Value="Theme.ColorBase200"/>
|
||||||
<span class="ms-1">Base 200</span>
|
<span class="ms-2.5">Base 200</span>
|
||||||
</div>
|
</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"/>
|
<ColorSelector @bind-Value="Theme.ColorBase250"/>
|
||||||
<span class="ms-1">Base 250</span>
|
<span class="ms-2.5">Base 250</span>
|
||||||
</div>
|
</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"/>
|
<ColorSelector @bind-Value="Theme.ColorBase300"/>
|
||||||
<span class="ms-1">Base 300</span>
|
<span class="ms-2.5">Base 300</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-span-2 grid grid-cols-2 gap-3">
|
<div class="col-span-1 flex flex-col gap-y-3 card card-body">
|
||||||
<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="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"/>
|
<ColorSelector @bind-Value="Theme.ColorPrimary"/>
|
||||||
<span class="ms-1">Primary</span>
|
<span class="ms-2.5">Primary</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-span-1 flex flex-row items-center">
|
||||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
|
||||||
<ColorSelector Icon="icon-type" @bind-Value="Theme.ColorPrimaryContent"/>
|
<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>
|
|
||||||
|
|
||||||
<div class="col-span-1 flex flex-col gap-y-3">
|
<div class="col-span-1 flex flex-row items-center">
|
||||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
|
||||||
<ColorSelector @bind-Value="Theme.ColorSecondary"/>
|
<ColorSelector @bind-Value="Theme.ColorSecondary"/>
|
||||||
<span class="ms-1">Secondary</span>
|
<span class="ms-2.5">Secondary</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-span-1 flex flex-row items-center">
|
||||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
|
||||||
<ColorSelector Icon="icon-type" @bind-Value="Theme.ColorSecondaryContent"/>
|
<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>
|
|
||||||
|
|
||||||
<div class="col-span-1 flex flex-col gap-y-3">
|
<div class="col-span-1 flex flex-row items-center">
|
||||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
|
||||||
<ColorSelector @bind-Value="Theme.ColorAccent"/>
|
<ColorSelector @bind-Value="Theme.ColorAccent"/>
|
||||||
<span class="ms-1">Accent</span>
|
<span class="ms-2.5">Accent</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-span-1 flex flex-row items-center">
|
||||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
|
||||||
<ColorSelector Icon="icon-type" @bind-Value="Theme.ColorAccentContent"/>
|
<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>
|
|
||||||
|
|
||||||
<div class="col-span-1 flex flex-col gap-y-3">
|
<div class="col-span-1 flex flex-row items-center">
|
||||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
|
||||||
<ColorSelector @bind-Value="Theme.ColorInfo"/>
|
<ColorSelector @bind-Value="Theme.ColorInfo"/>
|
||||||
<span class="ms-1">Info</span>
|
<span class="ms-2.5">Info</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-span-1 flex flex-row items-center">
|
||||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
|
||||||
<ColorSelector Icon="icon-type" @bind-Value="Theme.ColorInfoContent"/>
|
<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>
|
|
||||||
|
|
||||||
<div class="col-span-1 flex flex-col gap-y-3">
|
<div class="col-span-1 flex flex-row items-center">
|
||||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
|
||||||
<ColorSelector @bind-Value="Theme.ColorSuccess"/>
|
<ColorSelector @bind-Value="Theme.ColorSuccess"/>
|
||||||
<span class="ms-1">Success</span>
|
<span class="ms-2.5">Success</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-span-1 flex flex-row items-center">
|
||||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
|
||||||
<ColorSelector Icon="icon-type" @bind-Value="Theme.ColorSuccessContent"/>
|
<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>
|
|
||||||
|
|
||||||
<div class="col-span-1 flex flex-col gap-y-3">
|
<div class="col-span-1 flex flex-row items-center">
|
||||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
|
||||||
<ColorSelector @bind-Value="Theme.ColorWarning"/>
|
<ColorSelector @bind-Value="Theme.ColorWarning"/>
|
||||||
<span class="ms-1">Warning</span>
|
<span class="ms-2.5">Warning</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-span-1 flex flex-row items-center">
|
||||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
|
||||||
<ColorSelector Icon="icon-type" @bind-Value="Theme.ColorWarningContent"/>
|
<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>
|
|
||||||
|
|
||||||
<div class="col-span-1 flex flex-col gap-y-3">
|
<div class="col-span-1 flex flex-row items-center">
|
||||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
|
||||||
<ColorSelector @bind-Value="Theme.ColorError"/>
|
<ColorSelector @bind-Value="Theme.ColorError"/>
|
||||||
<span class="ms-1">Error</span>
|
<span class="ms-2.5">Error</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-span-1 flex flex-row items-center">
|
||||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
|
||||||
<ColorSelector Icon="icon-type" @bind-Value="Theme.ColorErrorContent"/>
|
<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>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@code
|
@code
|
||||||
{
|
{
|
||||||
[Parameter] public ApplicationTheme Theme { get; set; }
|
[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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -109,8 +109,8 @@
|
|||||||
SizeField = 0.25f,
|
SizeField = 0.25f,
|
||||||
|
|
||||||
Border = 1f,
|
Border = 1f,
|
||||||
Depth = 0f,
|
Depth = 0,
|
||||||
Noise = 0f
|
Noise = 0
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -44,6 +44,6 @@ public class ApplicationTheme
|
|||||||
public float SizeField { get; set; }
|
public float SizeField { get; set; }
|
||||||
|
|
||||||
public float Border { get; set; }
|
public float Border { get; set; }
|
||||||
public float Depth { get; set; }
|
public int Depth { get; set; }
|
||||||
public float Noise { get; set; }
|
public int Noise { get; set; }
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user