Expanding theme tab to customization tab. Started improving theme selection.
This commit is contained in:
@@ -1,23 +1,197 @@
|
||||
@page "/admin/system/theme"
|
||||
|
||||
@using Microsoft.AspNetCore.Authorization
|
||||
@using Moonlight.Client.UI.Partials.Design
|
||||
@using Moonlight.Client.UI.Components
|
||||
@using Moonlight.Shared.Misc
|
||||
|
||||
@attribute [Authorize(Policy = "permissions:admin.system.theme")]
|
||||
|
||||
<div class="mb-5">
|
||||
<NavTabs Index="1" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks" />
|
||||
</div>
|
||||
<NavTabs Index="1" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks"/>
|
||||
|
||||
<div class="mt-5">
|
||||
<div class="mockup-browser bg-base-300/40">
|
||||
<div class="mockup-browser-toolbar">
|
||||
<div class="input bg-base-200">https://your-moonlight.instance</div>
|
||||
<div class="mt-5 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">
|
||||
<ColorSelector @bind-Value="ThemeData.ColorBackground"/>
|
||||
<span class="ms-1">Background</span>
|
||||
</div>
|
||||
<div class="flex h-80 justify-center">
|
||||
<iframe src="http://localhost:5165/admin/system" class="w-full object-cover" >
|
||||
|
||||
</iframe>
|
||||
|
||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
||||
<ColorSelector @bind-Value="ThemeData.ColorBaseContent"/>
|
||||
<span class="ms-1">Base Content</span>
|
||||
</div>
|
||||
|
||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
||||
<ColorSelector @bind-Value="ThemeData.ColorBase100"/>
|
||||
<span class="ms-1">Base 100</span>
|
||||
</div>
|
||||
|
||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
||||
<ColorSelector @bind-Value="ThemeData.ColorBase150"/>
|
||||
<span class="ms-1">Base 150</span>
|
||||
</div>
|
||||
|
||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
||||
<ColorSelector @bind-Value="ThemeData.ColorBase200"/>
|
||||
<span class="ms-1">Base 200</span>
|
||||
</div>
|
||||
|
||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
||||
<ColorSelector @bind-Value="ThemeData.ColorBase250"/>
|
||||
<span class="ms-1">Base 250</span>
|
||||
</div>
|
||||
|
||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
||||
<ColorSelector @bind-Value="ThemeData.ColorBase300"/>
|
||||
<span class="ms-1">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">
|
||||
<ColorSelector @bind-Value="ThemeData.ColorPrimary"/>
|
||||
<span class="ms-1">Primary</span>
|
||||
</div>
|
||||
|
||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
||||
<ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorPrimaryContent"/>
|
||||
<span class="ms-1">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">
|
||||
<ColorSelector @bind-Value="ThemeData.ColorSecondary"/>
|
||||
<span class="ms-1">Secondary</span>
|
||||
</div>
|
||||
|
||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
||||
<ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorSecondaryContent"/>
|
||||
<span class="ms-1">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">
|
||||
<ColorSelector @bind-Value="ThemeData.ColorAccent"/>
|
||||
<span class="ms-1">Accent</span>
|
||||
</div>
|
||||
|
||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
||||
<ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorAccentContent"/>
|
||||
<span class="ms-1">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">
|
||||
<ColorSelector @bind-Value="ThemeData.ColorInfo"/>
|
||||
<span class="ms-1">Info</span>
|
||||
</div>
|
||||
|
||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
||||
<ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorInfoContent"/>
|
||||
<span class="ms-1">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">
|
||||
<ColorSelector @bind-Value="ThemeData.ColorSuccess"/>
|
||||
<span class="ms-1">Success</span>
|
||||
</div>
|
||||
|
||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
||||
<ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorSuccessContent"/>
|
||||
<span class="ms-1">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">
|
||||
<ColorSelector @bind-Value="ThemeData.ColorWarning"/>
|
||||
<span class="ms-1">Warning</span>
|
||||
</div>
|
||||
|
||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
||||
<ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorWarningContent"/>
|
||||
<span class="ms-1">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">
|
||||
<ColorSelector @bind-Value="ThemeData.ColorError"/>
|
||||
<span class="ms-1">Error</span>
|
||||
</div>
|
||||
|
||||
<div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
|
||||
<ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorErrorContent"/>
|
||||
<span class="ms-1">Error Content</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@code
|
||||
{
|
||||
private ApplicationTheme ThemeData;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
ThemeData = CreateDefault();
|
||||
}
|
||||
|
||||
private ApplicationTheme CreateDefault()
|
||||
{
|
||||
return new ApplicationTheme()
|
||||
{
|
||||
ColorBackground = "#0c0f18",
|
||||
|
||||
ColorBase100 = "#1e2b47",
|
||||
ColorBase150 = "#1a2640",
|
||||
ColorBase200 = "#101a2e",
|
||||
ColorBase250 = "#0f1729",
|
||||
ColorBase300 = "#0c1221",
|
||||
|
||||
ColorBaseContent = "#dde5f5",
|
||||
|
||||
ColorPrimary = "#4f39f6",
|
||||
ColorPrimaryContent = "#dde5f5",
|
||||
|
||||
ColorSecondary = "#354052",
|
||||
ColorSecondaryContent = "#dde5f5",
|
||||
|
||||
ColorAccent = "#ad46ff",
|
||||
ColorAccentContent = "#dde5f5",
|
||||
|
||||
ColorNeutral = "#dde5f5",
|
||||
ColorNeutralContent = "#09090b",
|
||||
|
||||
ColorInfo = "#155dfc",
|
||||
ColorInfoContent = "#dde5f5",
|
||||
|
||||
ColorSuccess = "#00a63e",
|
||||
ColorSuccessContent = "#dde5f5",
|
||||
|
||||
ColorWarning = "#ffba00",
|
||||
ColorWarningContent = "#dde5f5",
|
||||
|
||||
ColorError = "#ec003f",
|
||||
ColorErrorContent = "#dde5f5",
|
||||
|
||||
RadiusSelector = 0.25f,
|
||||
RadiusField = 0.5f,
|
||||
RadiusBox = 0.5f,
|
||||
|
||||
SizeSelector = 0.25f,
|
||||
SizeField = 0.25f,
|
||||
|
||||
Border = 1f,
|
||||
Depth = 0f,
|
||||
Noise = 0f
|
||||
};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user