Skip to content

Commit

Permalink
Theme extensions
Browse files Browse the repository at this point in the history 
Adds the ability to choose the themeing strategy: Extend one of the existing themes (light or dark) or go fully custom. The latter was the only option up to now, which isn't ideal:

- One had to provide a full-blown theme file overriding all variables
- Tedious, error prone and hard to maintain, because one has to keep track of updates

This PR makes it so that one can choose light or dark as base theme and do modifications on top.

Benefit: You can specify a limited set of variables and might get away with 5-20 lines of CSS.
  • Loading branch information
@dennisreimann
dennisreimann committed Dec 4, 2022
1 parent 8894d14 commit 30572ec
Show file tree
Hide file tree
Showing 5 changed files with 165 additions and 48 deletions.
53 changes: 48 additions & 5 deletions BTCPayServer/Controllers/UIServerController.cs
View file
Expand Up @@ -982,7 +982,10 @@ public async Task<IActionResult> Theme()
}

[HttpPost("server/theme")]
public async Task<IActionResult> Theme(ThemeSettings model, [FromForm] bool RemoveLogoFile)
public async Task<IActionResult> Theme(
ThemeSettings model,
[FromForm] bool RemoveLogoFile,
[FromForm] bool RemoveCustomThemeFile)
{
var settingsChanged = false;
var settings = await _SettingsRepository.GetSettingAsync<ThemeSettings>() ?? new ThemeSettings();
Expand All @@ -991,6 +994,40 @@ public async Task<IActionResult> Theme(ThemeSettings model, [FromForm] bool Remo
if (userId is null)
return NotFound();

if (model.CustomThemeFile != null)
{
if (model.CustomThemeFile.ContentType.Equals("text/css", StringComparison.InvariantCulture))
{
// delete existing file
if (!string.IsNullOrEmpty(settings.CustomThemeFileId))
{
await _fileService.RemoveFile(settings.CustomThemeFileId, userId);
}

// add new file
try
{
var storedFile = await _fileService.AddFile(model.CustomThemeFile, userId);
settings.CustomThemeFileId = storedFile.Id;
settingsChanged = true;
}
catch (Exception e)
{
ModelState.AddModelError(nameof(model.CustomThemeFile), $"Could not save theme file: {e.Message}");
}
}
else
{
ModelState.AddModelError(nameof(model.CustomThemeFile), "The uploaded theme file needs to be a CSS file");
}
}
else if (RemoveCustomThemeFile && !string.IsNullOrEmpty(settings.CustomThemeFileId))
{
await _fileService.RemoveFile(settings.CustomThemeFileId, userId);
settings.CustomThemeFileId = null;
settingsChanged = true;
}

if (model.LogoFile != null)
{
if (model.LogoFile.ContentType.StartsWith("image/", StringComparison.InvariantCulture))
Expand Down Expand Up @@ -1025,14 +1062,20 @@ public async Task<IActionResult> Theme(ThemeSettings model, [FromForm] bool Remo
settingsChanged = true;
}

if (model.CustomTheme && !Uri.IsWellFormedUriString(model.CssUri, UriKind.RelativeOrAbsolute))
if (model.CustomTheme && !string.IsNullOrEmpty(model.CssUri) && !Uri.IsWellFormedUriString(model.CssUri, UriKind.RelativeOrAbsolute))
{
ModelState.AddModelError(nameof(model.CssUri), "Please provide a non-empty theme URI");
}

if (settings.CustomThemeExtension != model.CustomThemeExtension)
{
ModelState.AddModelError(nameof(model.CustomTheme), "Please provide a non-empty theme URI");
settings.CustomThemeExtension = model.CustomThemeExtension;
settingsChanged = true;
}
else if (settings.CustomTheme != model.CustomTheme)

if (settings.CustomTheme != model.CustomTheme)
{
settings.CustomTheme = model.CustomTheme;
settings.CustomThemeCssUri = model.CustomThemeCssUri;
settingsChanged = true;
}

Expand Down
74 changes: 46 additions & 28 deletions BTCPayServer/Services/ThemesSettings.cs
View file
Expand Up @@ -2,35 +2,53 @@
using Microsoft.AspNetCore.Http;
using Newtonsoft.Json;

namespace BTCPayServer.Services
namespace BTCPayServer.Services;

public enum ThemeExtension
{
[Display(Name = "Does not extend a BTCPay Server theme, fully custom")]
Custom,
[Display(Name = "Extends the BTCPay Server Light theme")]
Light,
[Display(Name = "Extends the BTCPay Server Dark theme")]
Dark
}

public class ThemeSettings
{
public class ThemeSettings
[Display(Name = "Use custom theme")]
public bool CustomTheme { get; set; }

[Display(Name = "Custom Theme Extension Type")]
public ThemeExtension CustomThemeExtension { get; set; }

[JsonProperty(DefaultValueHandling = DefaultValueHandling.Populate)]
[MaxLength(500)]
[Display(Name = "Custom Theme CSS URL")]
public string CustomThemeCssUri { get; set; }

[Display(Name = "Custom Theme File")]
[JsonIgnore]
public IFormFile CustomThemeFile { get; set; }

public string CustomThemeFileId { get; set; }

[Display(Name = "Logo")]
[JsonIgnore]
public IFormFile LogoFile { get; set; }

public string LogoFileId { get; set; }

public bool FirstRun { get; set; }

public override string ToString()
{
// no logs
return string.Empty;
}

public string CssUri
{
[Display(Name = "Use custom theme")]
public bool CustomTheme { get; set; }

[JsonProperty(DefaultValueHandling = DefaultValueHandling.Populate)]
[MaxLength(500)]
[Display(Name = "Custom Theme CSS URL")]
public string CustomThemeCssUri { get; set; }

public string CssUri
{
get => CustomTheme ? CustomThemeCssUri : "/main/themes/default.css";
}

public bool FirstRun { get; set; }

[Display(Name = "Logo")]
[JsonIgnore]
public IFormFile LogoFile { get; set; }

public string LogoFileId { get; set; }

public override string ToString()
{
// no logs
return string.Empty;
}
get => CustomTheme ? CustomThemeCssUri : "/main/themes/default.css";
}
}
19 changes: 17 additions & 2 deletions BTCPayServer/Views/Shared/LayoutHeadTheme.cshtml
View file
@@ -1,11 +1,26 @@
@using BTCPayServer.Abstractions.Extensions
@using BTCPayServer.Services
@using Microsoft.AspNetCore.Mvc.TagHelpers
@using BTCPayServer.Abstractions.Contracts
@inject ThemeSettings Theme
@inject IFileService FileService

@if (Theme.CustomTheme)
{
@if (Theme.CustomTheme && !string.IsNullOrEmpty(Theme.CssUri))
{ // legacy customization with CSS URI - keep it for backwards-compatibility
<link href="@Context.Request.GetRelativePathOrAbsolute(Theme.CssUri)" rel="stylesheet" asp-append-version="true" />
}
else if (Theme.CustomTheme)
{ // new customization uses theme file id provided by upload
@if (Theme.CustomThemeExtension != ThemeExtension.Custom)
{ // needs to be added for light and dark, because dark extends light
<link href="~/main/themes/default.css" rel="stylesheet" asp-append-version="true" />
}
@if (Theme.CustomThemeExtension == ThemeExtension.Dark)
{
<link href="~/main/themes/default-dark.css" rel="stylesheet" asp-append-version="true" />
}
<link href="@(await FileService.GetFileUrl(Context.Request.GetAbsoluteRootUri(), Theme.CustomThemeFileId))" rel="stylesheet" asp-append-version="true" />
}
else
{
<link href="~/main/themes/default.css" asp-append-version="true" rel="stylesheet" />
Expand Down
64 changes: 52 additions & 12 deletions BTCPayServer/Views/UIServer/Theme.cshtml
View file
@@ -1,9 +1,12 @@
@using BTCPayServer.Abstractions.Contracts
@using BTCPayServer.Services
@model BTCPayServer.Services.ThemeSettings
@inject IFileService FileService
@{
ViewData.SetActivePage(ServerNavPages.Theme, "Theme");
var canUpload = await FileService.IsAvailable();
var themeExtension = ((ThemeExtension[])Enum.GetValues(typeof(ThemeExtension))).Select(t =>
new SelectListItem(typeof(ThemeExtension).DisplayName(t.ToString()), t == ThemeExtension.Custom ? null : t.ToString()));
}

@section PageFootContent {
Expand All @@ -15,21 +18,58 @@
<div class="row">
<div class="col-xl-8 col-xxl-constrain">
<form method="post" enctype="multipart/form-data">
<p>Use the default Light or Dark Themes, or provide a CSS theme file below.</p>
<p>Use the default Light or Dark Themes, or provide a custom CSS theme file below.</p>

<div class="form-group d-flex align-items-center">
<input asp-for="CustomTheme" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#CustomThemeSettings" aria-expanded="@Model.CustomTheme" aria-controls="CustomThemeSettings" />
<label asp-for="CustomTheme" class="form-label mb-0"></label>
<div class="d-flex align-items-center mb-3">
<input asp-for="CustomTheme" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#CustomThemeSettings" aria-expanded="@(Model.CustomTheme)" aria-controls="CustomThemeSettings" />
<div>
<label asp-for="CustomTheme" class="form-label"></label>
<div class="text-muted">
<a href="https://docs.btcpayserver.org/Development/Theme/#1-custom-themes" target="_blank" rel="noreferrer noopener">Adjust the design</a>
of your BTCPay Server instance to your needs.
</div>
</div>
</div>
<div class="collapse @(Model.CustomTheme ? "show" : "")" id="CustomThemeSettings">
<div class="form-group">
<label asp-for="CustomThemeCssUri" class="form-label"></label>
<a href="https://docs.btcpayserver.org/Development/Theme/#1-custom-themes" target="_blank" rel="noreferrer noopener">
<span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
</a>
<input asp-for="CustomThemeCssUri" class="form-control" />
<span asp-validation-for="CustomThemeCssUri" class="text-danger"></span>
<span asp-validation-for="CustomTheme" class="text-danger"></span>
<div class="form-group pt-2">
<label asp-for="CustomThemeExtension" class="form-label" data-required></label>
<select asp-for="CustomThemeExtension" asp-items="@themeExtension" class="form-select w-auto"></select>
</div>
<div class="form-group mb-0">
@if (!string.IsNullOrEmpty(Model.CustomThemeCssUri))
{
<label asp-for="CustomThemeCssUri" class="form-label" data-required></label>
<input asp-for="CustomThemeCssUri" class="form-control"/>
<span asp-validation-for="CustomThemeCssUri" class="text-danger"></span>
}
else
{
<div class="d-flex align-items-center justify-content-between gap-2">
<label asp-for="CustomThemeFile" class="form-label" data-required></label>
@if (!string.IsNullOrEmpty(Model.CustomThemeFileId))
{
<button type="submit" class="btn btn-link p-0 text-danger" name="RemoveCustomThemeFile" value="true">
<span class="fa fa-times"></span> Remove
</button>
}
</div>
@if (canUpload)
{
<div class="d-flex align-items-center gap-3">
<input asp-for="CustomThemeFile" type="file" class="form-control flex-grow">
@if (!string.IsNullOrEmpty(Model.CustomThemeFileId))
{
<a href="@(await FileService.GetFileUrl(Context.Request.GetAbsoluteRootUri(), Model.CustomThemeFileId))" target="_blank" rel="noreferrer noopener" class="text-nowrap">Custom CSS</a>
}
</div>
<span asp-validation-for="CustomThemeFile" class="text-danger"></span>
}
else
{
<input asp-for="CustomThemeFile" type="file" class="form-control" disabled>
<p class="form-text text-muted">In order to upload a theme file, a <a asp-controller="UIServer" asp-action="Files">file storage</a> must be configured.</p>
}
}
</div>
</div>

Expand Down
3 changes: 2 additions & 1 deletion BTCPayServer/wwwroot/main/themes/default-dark.css
View file
Expand Up @@ -17,7 +17,7 @@
--btcpay-body-text: var(--btcpay-white);
--btcpay-body-text-muted: var(--btcpay-neutral-600);
--btcpay-body-text-rgb: 255, 255, 255;
--btcpay-body-link-accent: var(--btcpay-primary-300);
--btcpay-body-link-accent: var(--btcpay-primary-accent);
--btcpay-form-bg: var(--btcpay-bg-dark);
--btcpay-form-text: var(--btcpay-neutral-800);
--btcpay-form-text-label: var(--btcpay-neutral-900);
Expand All @@ -27,6 +27,7 @@
--btcpay-nav-link-active: var(--btcpay-white);
--btcpay-footer-link-accent: var(--btcpay-neutral-800);
--btcpay-pre-bg: var(--btcpay-bg-dark);
--btcpay-primary-accent: var(--btcpay-primary-300);
--btcpay-secondary: transparent;
--btcpay-secondary-text-active: var(--btcpay-primary);
--btcpay-secondary-rgb: 22, 27, 34;
Expand Down

0 comments on commit 30572ec

Please sign in to comment.