diff --git a/BTCPayServer.Tests/SeleniumTests.cs b/BTCPayServer.Tests/SeleniumTests.cs index df3c926cc..a7f055db2 100644 --- a/BTCPayServer.Tests/SeleniumTests.cs +++ b/BTCPayServer.Tests/SeleniumTests.cs @@ -1329,7 +1329,7 @@ namespace BTCPayServer.Tests // Check the label is applied to the tx - Assert.Equal("label2", s.Driver.FindElement(By.XPath("//*[@id=\"WalletTransactionsList\"]//*[contains(@class, 'transactionLabel')]")).Text); + Assert.Equal("label2", s.Driver.FindElement(By.XPath("//*[@id=\"WalletTransactionsList\"]//*[contains(@class, 'transaction-label')]")).Text); //change the wallet and ensure old address is not there and generating a new one does not result in the prev one s.GenerateWallet(cryptoCode, "", true); @@ -1617,9 +1617,9 @@ namespace BTCPayServer.Tests TestUtils.Eventually(() => { s.Driver.Navigate().Refresh(); - Assert.Contains("badge transactionLabel", s.Driver.PageSource); + Assert.Contains("transaction-label", s.Driver.PageSource); }); - Assert.Equal("payout", s.Driver.FindElement(By.ClassName("transactionLabel")).Text); + Assert.Equal("payout", s.Driver.FindElement(By.ClassName("transaction-label")).Text); s.GoToStore(s.StoreId, StoreNavPages.Payouts); s.Driver.FindElement(By.Id($"{PayoutState.InProgress}-view")).Click(); diff --git a/BTCPayServer/Views/UIWallets/CoinSelection.cshtml b/BTCPayServer/Views/UIWallets/CoinSelection.cshtml index 01d870679..3270ecb5d 100644 --- a/BTCPayServer/Views/UIWallets/CoinSelection.cshtml +++ b/BTCPayServer/Views/UIWallets/CoinSelection.cshtml @@ -30,25 +30,23 @@ :key="item.outpoint" :class="{ 'active': item.selected }" v-on:click="toggleItem($event, item, !item.selected)"> -
- + {{item.outpoint}} - + +
@@ -242,7 +240,7 @@ document.addEventListener("DOMContentLoaded", function () { // Check contrast color = (yiq >= 128) ? 'black' : 'white'; } - return { 'background-color': bgColor, color } + return { '--label-bg': bgColor, '--label-fg': color } } } }); diff --git a/BTCPayServer/Views/UIWallets/WalletTransactions.cshtml b/BTCPayServer/Views/UIWallets/WalletTransactions.cshtml index 5bb841d45..870e5ce09 100644 --- a/BTCPayServer/Views/UIWallets/WalletTransactions.cshtml +++ b/BTCPayServer/Views/UIWallets/WalletTransactions.cshtml @@ -35,35 +35,6 @@ .unconf > * { opacity: 0.5; } - - .badge-container { - display: flex; - flex-wrap: nowrap; - } - - .removeTransactionLabelForm { - display: inline; - position: absolute; - right: 4px; - } - - .removeTransactionLabelForm button { - cursor: pointer; - display: inline; - padding: 0; - background-color: transparent; - border: 0; - } - - .label-tooltip .tooltip-inner { - max-width: 15rem; - text-align: left; - } - - .label-tooltip ul { - margin: 0; - padding-left: var(--btcpay-space-m); - } #LoadingIndicator { margin-bottom: 1.5rem; @@ -155,26 +126,27 @@ } -@if (Model.Transactions.Any()) +@if (Model.Labels.Any()) { - @if (Model.Labels.Any()) - { -
-
- Filter -
- @foreach (var label in Model.Labels) - { - @label.Text - } -
- @if (labelFilter != null) +
+
+ Filter +
+ @foreach (var label in Model.Labels) { - Clear filter + @label.Text }
+ @if (labelFilter != null) + { + Clear filter + }
- } +
+} + +@if (Model.Transactions.Any()) +{ } - + @transaction.Id @@ -79,14 +67,14 @@
@foreach (var label in Model.Labels) { - @if (transaction.Tags.Any(l => l.Text == label.Text)) - { - - } - else - { - - } + var isActive = transaction.Tags.Any(l => l.Text == label.Text); + }
} diff --git a/BTCPayServer/wwwroot/img/icon-sprite.svg b/BTCPayServer/wwwroot/img/icon-sprite.svg index 6ca0798fe..b546fa126 100644 --- a/BTCPayServer/wwwroot/img/icon-sprite.svg +++ b/BTCPayServer/wwwroot/img/icon-sprite.svg @@ -24,6 +24,7 @@ + @@ -59,4 +60,4 @@ - \ No newline at end of file + diff --git a/BTCPayServer/wwwroot/main/site.css b/BTCPayServer/wwwroot/main/site.css index a662ae6cc..c28a5b619 100644 --- a/BTCPayServer/wwwroot/main/site.css +++ b/BTCPayServer/wwwroot/main/site.css @@ -128,7 +128,6 @@ svg.icon.icon-info { position: relative; top: -.05em; color: var(--btcpay-neutral-500); - transition: 200ms; } svg.icon.icon-info:hover { @@ -770,3 +769,84 @@ input:checked + .btcpay-list-select-item { padding: var(--btcpay-space-xs) 0; font-weight: var(--btcpay-font-weight-semibold); } + +/* Transaction Labels */ +.transaction-label { + display: inline-flex; + flex-wrap: nowrap; + align-items: center; + gap: var(--btcpay-space-xs); + color: var(--btcpay-body-text); + background: transparent; + border: 1px solid var(--label-bg); + border-radius: var(--btcpay-border-radius-l); + font-size: var(--btcpay-font-size-s); + padding: var(--btcpay-space-xs) var(--btcpay-space-s); + text-align: left; +} + +.transaction-label a { + display: inline-flex; + align-items: center; + color: var(--btcpay-body-text); +} + +.transaction-label:focus, +.transaction-label:hover, +.transaction-label.active { + color: var(--label-fg); + background: var(--label-bg); +} + +.transaction-label:focus a, +.transaction-label:focus .transaction-label-info svg.icon, +.transaction-label:focus .transaction-label-action svg.icon, +.transaction-label:hover a, +.transaction-label:hover .transaction-label-info svg.icon, +.transaction-label:hover .transaction-label-action svg.icon, +.transaction-label.active a, +.transaction-label.active .transaction-label-info svg.icon, +.transaction-label.active .transaction-label-action svg.icon { + color: var(--label-fg); +} + +.transaction-label-info, +.transaction-label-action, +.transaction-label form { + --button-size: .9rem; + display: inline-flex; + flex-wrap: nowrap; + align-items: center; + width: var(--button-size); + height: var(--button-size); + flex: 0 0 var(--button-size); +} + +.transaction-label svg.icon { + display: block; + position: static; + width: 100%; + height: 100%; + color: var(--label-bg); +} + +.transaction-label-action { + cursor: pointer; + border: 0; + background: transparent; + padding: 0; +} + +.transaction-label-action svg.icon { + transform: scale(1.725); +} + +.transaction-label-tooltip .tooltip-inner { + max-width: 15rem; + text-align: left; +} + +.transaction-label-tooltip ul { + margin: 0; + padding-left: var(--btcpay-space-m); +}