Skip to content

Commit

Permalink
UI: Theme extensions (#4398)
Browse files Browse the repository at this point in the history 
* Theme extensions

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.

* Ensure custom theme is present

* Update checkout test
  • Loading branch information
@dennisreimann
dennisreimann committed Dec 14, 2022
1 parent 18ba014 commit 6972e8a
Show file tree
Hide file tree
Showing 6 changed files with 180 additions and 51 deletions.
2 changes: 2 additions & 0 deletions BTCPayServer.Tests/SeleniumTester.cs
View file
Expand Up @@ -193,6 +193,8 @@ public void EnableCheckoutV2(bool bip21 = false)
Driver.WaitForElement(By.Id("OnChainWithLnInvoiceFallback"));
Driver.SetCheckbox(By.Id("OnChainWithLnInvoiceFallback"), bip21);
Driver.FindElement(By.Id("Save")).Click();
Assert.Contains("Store successfully updated", FindAlertMessage().Text);
Assert.True(Driver.FindElement(By.Id("UseNewCheckout")).Selected);
}

public Mnemonic GenerateWallet(string cryptoCode = "BTC", string seed = "", bool? importkeys = null, bool isHotWallet = false, ScriptPubKeyType format = ScriptPubKeyType.Segwit)
Expand Down
65 changes: 58 additions & 7 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(settings.CustomThemeFile), $"Could not save theme file: {e.Message}");
}
}
else
{
ModelState.AddModelError(nameof(settings.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 All @@ -1010,12 +1047,12 @@ public async Task<IActionResult> Theme(ThemeSettings model, [FromForm] bool Remo
}
catch (Exception e)
{
ModelState.AddModelError(nameof(model.LogoFile), $"Could not save logo: {e.Message}");
ModelState.AddModelError(nameof(settings.LogoFile), $"Could not save logo: {e.Message}");
}
}
else
{
ModelState.AddModelError(nameof(model.LogoFile), "The uploaded logo file needs to be an image");
ModelState.AddModelError(nameof(settings.LogoFile), "The uploaded logo file needs to be an image");
}
}
else if (RemoveLogoFile && !string.IsNullOrEmpty(settings.LogoFileId))
Expand All @@ -1025,14 +1062,28 @@ 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.CustomThemeCssUri) && !Uri.IsWellFormedUriString(model.CustomThemeCssUri, UriKind.RelativeOrAbsolute))
{
ModelState.AddModelError(nameof(model.CustomTheme), "Please provide a non-empty theme URI");
ModelState.AddModelError(nameof(settings.CustomThemeCssUri), "Please provide a non-empty theme URI");
}
else if (settings.CustomTheme != model.CustomTheme)

if (settings.CustomThemeExtension != model.CustomThemeExtension)
{
// Require a custom theme to be defined in that case
if (string.IsNullOrEmpty(model.CustomThemeCssUri) && string.IsNullOrEmpty(settings.CustomThemeFileId))
{
ModelState.AddModelError(nameof(settings.CustomThemeFile), "Please provide a custom theme");
}
else
{
settings.CustomThemeExtension = model.CustomThemeExtension;
settingsChanged = true;
}
}

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 && !string.IsNullOrEmpty(Theme.CustomThemeFileId))
{ // 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
68 changes: 55 additions & 13 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,22 +18,61 @@
<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>
@if (!string.IsNullOrEmpty(Model.CustomThemeCssUri))
{
<div class="form-group mb-0 pt-2">
<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>
</div>
}
else
{
<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">
<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>

<h3 class="mt-5 mb-3">Branding</h3>
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 6972e8a

Please sign in to comment.