mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-02-20 13:34:37 +01:00
Code Issues Projects Releases Packages Wiki Activity

Make theme switch a view component

Browse source
This commit is contained in:
Dennis Reimann 2021-09-27 14:45:04 +02:00 • committed by Andrew Camilleri
parent 7bcaf956e7
commit faed5349fb
6 changed files with 53 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
BTCPayServer/Components/ThemeSwitch/Default.cshtml Normal file
View file

@ -0,0 +1,12 @@
@model BTCPayServer.Components.ThemeSwitch.ThemeSwitchViewModel
<button class="btcpay-theme-switch @Model.CssClass">
<svg class="@(string.IsNullOrEmpty(Model.Responsive) || Model.Responsive == "none" ? "d-inline-block" : $"d-{Model.Responsive}-inline-block d-none")" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
<path class="btcpay-theme-switch-dark" transform="translate(1 1)" d="M2.72 0A3.988 3.988 0 000 3.78c0 2.21 1.79 4 4 4 1.76 0 3.25-1.14 3.78-2.72-.4.13-.83.22-1.28.22-2.21 0-4-1.79-4-4 0-.45.08-.88.22-1.28z"/>
<path class="btcpay-theme-switch-light" transform="translate(1 1)" d="M4 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 0 4 0zM1.5 1c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM.5 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM1.5 6c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 7 4 7z"/>
</svg>
@if (!string.IsNullOrEmpty(Model.Responsive))
{
<span class="d-@Model.Responsive-none d-inline-block"><span class="btcpay-theme-switch-dark">Dark theme</span><span class="btcpay-theme-switch-light">Light theme</span></span>
}
</button>

17
BTCPayServer/Components/ThemeSwitch/ThemeSwitch.cs Normal file
View file

@ -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);
}
}
}

8
BTCPayServer/Components/ThemeSwitch/ThemeSwitchViewModel.cs Normal file
View file

@ -0,0 +1,8 @@
namespace BTCPayServer.Components.ThemeSwitch
{
public class ThemeSwitchViewModel
{
public string CssClass { get; set; }
public string Responsive { get; set; }
}
}

8
BTCPayServer/Views/Shared/_Layout.cshtml
View file

@ -90,13 +90,7 @@
@if (!theme.CustomTheme)
{
<li class="nav-item">
<button class="btcpay-theme-switch nav-link">
<span class="d-lg-none d-sm-block"><span class="btcpay-theme-switch-dark">Dark theme</span><span class="btcpay-theme-switch-light">Light theme</span></span>
<svg class="d-lg-inline-block d-none" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
<path class="btcpay-theme-switch-dark" transform="translate(1 1)" d="M2.72 0A3.988 3.988 0 000 3.78c0 2.21 1.79 4 4 4 1.76 0 3.25-1.14 3.78-2.72-.4.13-.83.22-1.28.22-2.21 0-4-1.79-4-4 0-.45.08-.88.22-1.28z"/>
<path class="btcpay-theme-switch-light" transform="translate(1 1)" d="M4 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 0 4 0zM1.5 1c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM.5 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM1.5 6c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 7 4 7z"/>
</svg>
</button>
<vc:theme-switch responsive="lg" css-class="nav-link" />
</li>
}
<li class="nav-item">

9
BTCPayServer/wwwroot/main/site.css
View file

@ -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;

14
BTCPayServer/wwwroot/main/site.js
View file

@ -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() {