Renamed theme tab to customisation tab. Added basic theme crud
This commit is contained in:
103
Moonlight.Client/UI/Views/Admin/Sys/Customisation/Index.razor
Normal file
103
Moonlight.Client/UI/Views/Admin/Sys/Customisation/Index.razor
Normal file
@@ -0,0 +1,103 @@
|
||||
@page "/admin/system/customisation"
|
||||
|
||||
@using Microsoft.AspNetCore.Authorization
|
||||
@using MoonCore.Blazor.FlyonUi.DataTables
|
||||
@using MoonCore.Models
|
||||
@using Moonlight.Client.Services
|
||||
@using Moonlight.Shared.Http.Responses.Admin
|
||||
|
||||
@attribute [Authorize(Policy = "permissions:admin.system.theme")]
|
||||
|
||||
@inject ThemeService ThemeService
|
||||
@inject AlertService AlertService
|
||||
@inject ToastService ToastService
|
||||
|
||||
<NavTabs Index="1" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks"/>
|
||||
|
||||
<div class="mt-5 flex justify-between">
|
||||
<span class="text-lg font-semibold">Themes</span>
|
||||
<div>
|
||||
<label for="import-theme" class="btn btn-info me-1">
|
||||
<i class="icon-file-up"></i>
|
||||
Import
|
||||
</label>
|
||||
<InputFile id="import-theme" class="hidden" />
|
||||
<a href="/admin/system/customisation/themes/create" class="btn btn-primary">Create</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-2.5">
|
||||
<DataTable TItem="ThemeResponse">
|
||||
<Configuration>
|
||||
<DataTableColumn TItem="ThemeResponse" Field="@(x => x.Id)" Name="Id"/>
|
||||
<DataTableColumn TItem="ThemeResponse" Field="@(x => x.Name)" Name="Name">
|
||||
<ColumnTemplate>
|
||||
<div class="flex items-center">
|
||||
@context.Name
|
||||
|
||||
@if (context.IsEnabled)
|
||||
{
|
||||
<i class="icon-check text-success ms-2"></i>
|
||||
}
|
||||
</div>
|
||||
</ColumnTemplate>
|
||||
</DataTableColumn>
|
||||
<DataTableColumn TItem="ThemeResponse" Field="@(x => x.Author)" Name="Author"/>
|
||||
<DataTableColumn TItem="ThemeResponse" Field="@(x => x.Version)" Name="Version"/>
|
||||
<DataTableColumn TItem="ThemeResponse">
|
||||
<ColumnTemplate>
|
||||
<div class="flex justify-end">
|
||||
@if (!string.IsNullOrEmpty(context.DonateUrl))
|
||||
{
|
||||
<a href="@context.DonateUrl" target="_blank" class="flex items-center mr-2 sm:mr-3">
|
||||
<i class="text-accent icon-heart me-1"></i>
|
||||
<span class="text-accent">Donate</span>
|
||||
</a>
|
||||
}
|
||||
|
||||
@if (!string.IsNullOrEmpty(context.UpdateUrl))
|
||||
{
|
||||
<a href="#" class="flex items-center mr-2 sm:mr-3">
|
||||
<i class="text-info icon-refresh-cw me-1"></i>
|
||||
<span class="text-info">Update</span>
|
||||
</a>
|
||||
}
|
||||
|
||||
<a href="/admin/system/customisation/themes/@(context.Id)" class="mr-2 sm:mr-3">
|
||||
<i class="icon-pencil text-primary"></i>
|
||||
</a>
|
||||
|
||||
<a href="#" @onclick="() => Delete(context)" @onclick:preventDefault>
|
||||
<i class="icon-trash text-error"></i>
|
||||
</a>
|
||||
</div>
|
||||
</ColumnTemplate>
|
||||
</DataTableColumn>
|
||||
<Pagination TItem="ThemeResponse" PageSize="10" ItemSource="LoadItems"/>
|
||||
</Configuration>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
|
||||
@code
|
||||
{
|
||||
private DataTable<ThemeResponse> Table;
|
||||
|
||||
private async Task<IPagedData<ThemeResponse>> LoadItems(PaginationOptions options)
|
||||
=> await ThemeService.Get(options.Page, options.PerPage);
|
||||
|
||||
private async Task Delete(ThemeResponse response)
|
||||
{
|
||||
await AlertService.ConfirmDanger(
|
||||
"Theme deletion",
|
||||
$"Do you really want to delete the theme: {response.Name}",
|
||||
async () =>
|
||||
{
|
||||
await ThemeService.Delete(response.Id);
|
||||
|
||||
await ToastService.Success("Successfully deleted theme");
|
||||
await Table.Refresh();
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
@page "/admin/system/customisation/themes/create"
|
||||
|
||||
@using Moonlight.Client.Services
|
||||
@using Moonlight.Shared.Misc
|
||||
@using Moonlight.Client.UI.Components
|
||||
@using Moonlight.Shared.Http.Requests.Admin.Sys.Theme
|
||||
|
||||
@inject ThemeService ThemeService
|
||||
@inject ToastService ToastService
|
||||
@inject NavigationManager NavigationManager
|
||||
|
||||
<PageHeader Title="Create theme">
|
||||
<a href="/admin/system/customisation" class="btn btn-secondary">
|
||||
<i class="icon-chevron-left"></i>
|
||||
Back
|
||||
</a>
|
||||
<WButton OnClick="_ => Form.Submit()" CssClasses="btn btn-primary">
|
||||
<i class="icon-check"></i>
|
||||
Create
|
||||
</WButton>
|
||||
</PageHeader>
|
||||
|
||||
<HandleForm @ref="Form" Model="Request" OnValidSubmit="OnValidSubmit">
|
||||
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 mb-5 mt-5">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-medium leading-6 text-base-content">Name</label>
|
||||
<div class="mt-2">
|
||||
<input @bind="Request.Name" type="text" autocomplete="off" class="input w-full">
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-medium leading-6 text-base-content">Author</label>
|
||||
<div class="mt-2">
|
||||
<input @bind="Request.Author" type="text" autocomplete="off" class="input w-full">
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-medium leading-6 text-base-content">Version</label>
|
||||
<div class="mt-2">
|
||||
<input @bind="Request.Version" type="text" autocomplete="off" class="input w-full">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ThemeEditor Theme="Request.Content"/>
|
||||
</HandleForm>
|
||||
|
||||
@code
|
||||
{
|
||||
private HandleForm Form;
|
||||
private CreateThemeRequest Request = new();
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Request.Content = CreateDefault();
|
||||
}
|
||||
|
||||
private async Task OnValidSubmit()
|
||||
{
|
||||
await ThemeService.Create(Request);
|
||||
await ToastService.Success("Successfully created theme");
|
||||
|
||||
NavigationManager.NavigateTo("/admin/system/customisation");
|
||||
}
|
||||
|
||||
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
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
@page "/admin/system/customisation/themes/{id:int}"
|
||||
|
||||
@using Moonlight.Client.Services
|
||||
@using Moonlight.Shared.Http.Requests.Admin.Sys.Theme
|
||||
@using Moonlight.Shared.Http.Responses.Admin
|
||||
@using Moonlight.Client.UI.Components
|
||||
|
||||
@inject ThemeService ThemeService
|
||||
@inject ToastService ToastService
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<LazyLoader Load="Load">
|
||||
<PageHeader Title="@($"Update {Request.Name}")">
|
||||
<a href="/admin/system/customisation" class="btn btn-secondary">
|
||||
<i class="icon-chevron-left"></i>
|
||||
Back
|
||||
</a>
|
||||
<WButton OnClick="_ => Form.Submit()" CssClasses="btn btn-primary">
|
||||
<i class="icon-check"></i>
|
||||
Update
|
||||
</WButton>
|
||||
</PageHeader>
|
||||
|
||||
<HandleForm @ref="Form" Model="Request" OnValidSubmit="OnValidSubmit">
|
||||
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 mb-5 mt-5">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-medium leading-6 text-base-content">Enable</label>
|
||||
<div class="mt-2">
|
||||
<div class="flex items-center gap-1">
|
||||
<input @bind="Request.IsEnabled" type="checkbox" class="switch" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-medium leading-6 text-base-content">Name</label>
|
||||
<div class="mt-2">
|
||||
<input @bind="Request.Name" type="text" autocomplete="off" class="input w-full">
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-medium leading-6 text-base-content">Author</label>
|
||||
<div class="mt-2">
|
||||
<input @bind="Request.Author" type="text" autocomplete="off" class="input w-full">
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-medium leading-6 text-base-content">Version</label>
|
||||
<div class="mt-2">
|
||||
<input @bind="Request.Version" type="text" autocomplete="off" class="input w-full">
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-medium leading-6 text-base-content">Donate URL</label>
|
||||
<div class="mt-2">
|
||||
<input @bind="Request.DonateUrl" type="text" autocomplete="off" class="input w-full">
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-medium leading-6 text-base-content">Update URL</label>
|
||||
<div class="mt-2">
|
||||
<input @bind="Request.UpdateUrl" type="text" autocomplete="off" class="input w-full">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ThemeEditor Theme="Request.Content"/>
|
||||
</HandleForm>
|
||||
</LazyLoader>
|
||||
|
||||
@code
|
||||
{
|
||||
[Parameter] public int Id { get; set; }
|
||||
|
||||
private ThemeResponse Response;
|
||||
private UpdateThemeRequest Request;
|
||||
|
||||
private HandleForm Form;
|
||||
|
||||
private async Task Load(LazyLoader _)
|
||||
{
|
||||
Response = await ThemeService.Get(Id);
|
||||
|
||||
Request = new()
|
||||
{
|
||||
Content = Response.Content,
|
||||
Author = Response.Author,
|
||||
Name = Response.Name,
|
||||
Version = Response.Version,
|
||||
DonateUrl = Response.DonateUrl,
|
||||
IsEnabled = Response.IsEnabled,
|
||||
UpdateUrl = Response.UpdateUrl
|
||||
};
|
||||
}
|
||||
|
||||
private async Task OnValidSubmit()
|
||||
{
|
||||
await ThemeService.Update(Id, Request);
|
||||
|
||||
await ToastService.Success("Successfully updated theme");
|
||||
Navigation.NavigateTo("/admin/system/customisation");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,197 +0,0 @@
|
||||
@page "/admin/system/theme"
|
||||
|
||||
@using Microsoft.AspNetCore.Authorization
|
||||
@using Moonlight.Client.UI.Components
|
||||
@using Moonlight.Shared.Misc
|
||||
|
||||
@attribute [Authorize(Policy = "permissions:admin.system.theme")]
|
||||
|
||||
<NavTabs Index="1" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks"/>
|
||||
|
||||
<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="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