From faed5349fbc6a57d142ed7689b97434c0736bd9f Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Mon, 27 Sep 2021 14:45:04 +0200 Subject: [PATCH] Make theme switch a view component --- .../Components/ThemeSwitch/Default.cshtml | 12 ++++++++++++ .../Components/ThemeSwitch/ThemeSwitch.cs | 17 +++++++++++++++++ .../ThemeSwitch/ThemeSwitchViewModel.cs | 8 ++++++++ BTCPayServer/Views/Shared/_Layout.cshtml | 8 +------- BTCPayServer/wwwroot/main/site.css | 9 +++++++++ BTCPayServer/wwwroot/main/site.js | 14 ++++++-------- 6 files changed, 53 insertions(+), 15 deletions(-) create mode 100644 BTCPayServer/Components/ThemeSwitch/Default.cshtml create mode 100644 BTCPayServer/Components/ThemeSwitch/ThemeSwitch.cs create mode 100644 BTCPayServer/Components/ThemeSwitch/ThemeSwitchViewModel.cs diff --git a/BTCPayServer/Components/ThemeSwitch/Default.cshtml b/BTCPayServer/Components/ThemeSwitch/Default.cshtml new file mode 100644 index 000000000..dbfb27104 --- /dev/null +++ b/BTCPayServer/Components/ThemeSwitch/Default.cshtml @@ -0,0 +1,12 @@ +@model BTCPayServer.Components.ThemeSwitch.ThemeSwitchViewModel + + diff --git a/BTCPayServer/Components/ThemeSwitch/ThemeSwitch.cs b/BTCPayServer/Components/ThemeSwitch/ThemeSwitch.cs new file mode 100644 index 000000000..cf8f41ae9 --- /dev/null +++ b/BTCPayServer/Components/ThemeSwitch/ThemeSwitch.cs @@ -0,0 +1,17 @@ +using Microsoft.AspNetCore.Mvc; + +namespace BTCPayServer.Components.ThemeSwitch +{ + public class ThemeSwitch : ViewComponent + { + public IViewComponentResult Invoke(string cssClass = null, string responsive = null) + { + var vm = new ThemeSwitchViewModel + { + CssClass = cssClass, + Responsive = responsive + }; + return View(vm); + } + } +} diff --git a/BTCPayServer/Components/ThemeSwitch/ThemeSwitchViewModel.cs b/BTCPayServer/Components/ThemeSwitch/ThemeSwitchViewModel.cs new file mode 100644 index 000000000..6b4652e1b --- /dev/null +++ b/BTCPayServer/Components/ThemeSwitch/ThemeSwitchViewModel.cs @@ -0,0 +1,8 @@ +namespace BTCPayServer.Components.ThemeSwitch +{ + public class ThemeSwitchViewModel + { + public string CssClass { get; set; } + public string Responsive { get; set; } + } +} diff --git a/BTCPayServer/Views/Shared/_Layout.cshtml b/BTCPayServer/Views/Shared/_Layout.cshtml index 2b2b63a7a..805f7acd7 100644 --- a/BTCPayServer/Views/Shared/_Layout.cshtml +++ b/BTCPayServer/Views/Shared/_Layout.cshtml @@ -90,13 +90,7 @@ @if (!theme.CustomTheme) {
  • - +
    • }
  • diff --git a/BTCPayServer/wwwroot/main/site.css b/BTCPayServer/wwwroot/main/site.css index f1d7ab742..1fa59eed4 100644 --- a/BTCPayServer/wwwroot/main/site.css +++ b/BTCPayServer/wwwroot/main/site.css @@ -161,11 +161,20 @@ hr.light { border: 0; } +.btcpay-theme-switch:not(.nav-link) { + display: inline-flex; + align-items: center; +} + .btcpay-theme-switch svg { height: 1rem; width: 1rem; } +.btcpay-theme-switch svg[class="d-inline-block"] + span { + margin-left: var(--btcpay-space-xs); +} + .btcpay-theme-switch path { stroke-width: .5px; fill: currentColor; diff --git a/BTCPayServer/wwwroot/main/site.js b/BTCPayServer/wwwroot/main/site.js index 8e86f9fcb..26a78e482 100644 --- a/BTCPayServer/wwwroot/main/site.js +++ b/BTCPayServer/wwwroot/main/site.js @@ -99,14 +99,12 @@ document.addEventListener("DOMContentLoaded", function () { }); }); - document.querySelectorAll(".btcpay-theme-switch").forEach(function (link) { - link.addEventListener("click", function (e) { - e.preventDefault(); - const current = document.documentElement.getAttribute(THEME_ATTR) || COLOR_MODES[0]; - const mode = current === COLOR_MODES[0] ? COLOR_MODES[1] : COLOR_MODES[0]; - setColorMode(mode); - }); - }); + delegate('click', '.btcpay-theme-switch', function (e) { + e.preventDefault(); + const current = document.documentElement.getAttribute(THEME_ATTR) || COLOR_MODES[0]; + const mode = current === COLOR_MODES[0] ? COLOR_MODES[1] : COLOR_MODES[0]; + setColorMode(mode); + }) }); function switchTimeFormat() {