Update transaction label display (#4700)

* Update transaction label display

* Fix test

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();

BTCPayServer/Views/UIWallets/CoinSelection.cshtml

@@ -30,25 +30,23 @@
             :key="item.outpoint"
             :class="{ 'active': item.selected }"
             v-on:click="toggleItem($event, item, !item.selected)">
-            <div class="d-flex align-items-center flex-grow-1 gap-2" style="min-width:0">
+            <div class="d-flex align-items-start flex-grow-1 gap-2" style="min-width:0">
-                <input class="form-check-input mt-0 flex-shrink-0"
+                <input class="form-check-input flex-shrink-0"
                        type="checkbox"
                        :id="item.outpoint"
                        :value="item.outpoint"
                        :checked="item.selected">
                 <a :href="item.link" target="_blank" class="text-truncate flex-grow-1" v-tooltip="item.outpoint">{{item.outpoint}}</a>
-                <template v-if="item.labels">
+                <div v-if="item.labels" class="d-flex flex-wrap gap-2 flex-fill" style="min-width:20%;max-width:40%;">
-                    <a v-for="label of item.labels"
+                    <span v-for="label of item.labels"
                        key="label.text"
-                       :href="label.link || '#'"
+                       class="transaction-label"
-                       target="_blank"
-                       class="badge rounded-pill px-2"
                        data-bs-toggle="tooltip"
                        v-tooltip="label.tooltip"
                        :style="styles(label.color)">
                         {{label.text}}
-                    </a>
+                    </span>
-                </template>
+                </div>
                 <span v-if="item.comment" data-bs-toggle="tooltip" v-tooltip="item.comment" class="badge bg-info rounded-pill" style="min-width:2em">
                     <span class="fa fa-info"></span>
                 </span>
@@ -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 }
             }
         }
     });

BTCPayServer/Views/UIWallets/WalletTransactions.cshtml

@@ -36,35 +36,6 @@
             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,8 +126,6 @@
     </script>
 }
 
-@if (Model.Transactions.Any())
-{
 @if (Model.Labels.Any())
 {
     <div class="col-xl-7 col-xxl-8 mb-4" id="Filter">
@@ -165,7 +134,7 @@
             <div class="form-control d-flex flex-wrap gap-2 align-items-center">
                 @foreach (var label in Model.Labels)
                 {
-                        <a asp-route-labelFilter="@label.Text" class="badge position-relative text-white flex-grow-0" style="background-color:@label.Color;color:@label.TextColor !important;">@label.Text</a>
+                    <a asp-route-labelFilter="@label.Text" class="transaction-label transaction-label-text@(labelFilter == label.Text ? " active" : string.Empty)" style="--label-bg:@label.Color;--label-fg:@label.TextColor;">@label.Text</a>
                 }
             </div>
             @if (labelFilter != null)
@@ -175,6 +144,9 @@
         </div>
     </div>
 }
+
+@if (Model.Transactions.Any())
+{
     <div class="d-inline-flex align-items-center gap-3" id="Dropdowns">
         <div class="dropdown ms-auto" id="Actions">
             <button class="btn btn-secondary dropdown-toggle" type="button" id="ActionsDropdownToggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -243,7 +215,7 @@
 else
 {
     <p class="text-secondary mt-3">
-        There are no transactions yet.
+        There are no transactions @(string.IsNullOrEmpty(labelFilter) ? "yet" : $"labeled with \"{labelFilter}\"").
     </p>
 }
 

BTCPayServer/Views/UIWallets/_WalletTransactionsList.cshtml

@@ -15,34 +15,22 @@
                 <div class="d-flex flex-wrap gap-2 align-items-center">
                     @foreach (var label in transaction.Tags)
                     {
-                        <div class="badge-container rounded-2" style="background-color:@label.Color;">
+                        <div class="transaction-label" style="--label-bg:@label.Color;--label-fg:@label.TextColor;">
-                            <div class="badge transactionLabel position-relative d-block"
+                            <a asp-route-labelFilter="@label.Text">@label.Text</a>
-                                 style="background-color:@label.Color;padding-right: 16px; z-index: 1;"
+                            <form method="post" asp-action="ModifyTransaction" asp-route-walletId="@Context.GetRouteValue("walletId")">
-                                 data-bs-html="true"
-                                 data-bs-toggle="tooltip"
-                                 data-bs-custom-class="label-tooltip"
-                                 title="@label.Tooltip">
-                                <a asp-route-labelFilter="@label.Text" style="color:@label.TextColor !important;">@label.Text</a>
-
-                                <form asp-route-walletId="@Context.GetRouteValue("walletId")"
-                                      asp-action="ModifyTransaction"
-                                      method="post"
-                                      class="removeTransactionLabelForm">
                                 <input type="hidden" name="transactionId" value="@transaction.Id" />
-                                    <button name="removelabel"
+                                <button name="removelabel" type="submit" value="@label.Text" class="transaction-label-action">
-                                            style="color: @label.Color; filter: brightness(0.5);"
+                                    <vc:icon symbol="remove"/>
-                                            type="submit"
-                                            value="@label.Text">
-                                        <span class="fa fa-close"></span>
                                 </button>
                             </form>
-                            </div>
                             @if (!string.IsNullOrEmpty(label.Link))
                             {
-                                <a href="@label.Link" target="_blank" class="badge transaction-details-icon" style="background-color: @label.Color; filter: brightness(1.1);" rel="noreferrer noopener">
+                                <a href="@label.Link" target="_blank" rel="noreferrer noopener" class="transaction-label-info transaction-details-icon"
-                                    <span class="fa fa-info-circle" title="Transaction details" style="color: @label.Color; filter: brightness(0.5);">
+                                   title="@label.Tooltip"
-                                        <span class="visually-hidden">Transaction details</span>
+                                   data-bs-html="true"
-                                    </span>
+                                   data-bs-toggle="tooltip"
+                                   data-bs-custom-class="transaction-label-tooltip">
+                                    <vc:icon symbol="info"/>
                                 </a>
                             }
                         </div>
@@ -79,14 +67,14 @@
                             <div class="py-2 px-3 d-flex flex-wrap gap-2">
                                 @foreach (var label in Model.Labels)
                                 {
-                                    @if (transaction.Tags.Any(l => l.Text == label.Text))
+                                    var isActive = transaction.Tags.Any(l => l.Text == label.Text);
-                                    {
+                                    <button name="@(isActive ? "removelabel" : "addlabelclick")" type="submit" value="@label.Text"
-                                        <button name="removelabel" class="bg-transparent border-0 p-0" type="submit" value="@label.Text"><span class="badge" style="background-color:@label.Color;color:@label.TextColor"><span class="fa fa-check"></span> @label.Text</span></button>
+                                            class="transaction-label@(isActive ? " active" : string.Empty)" style="--label-bg:@label.Color;--label-fg:@label.TextColor">
-                                    }
+                                        <span>@label.Text</span>
-                                    else
+                                        <span class="transaction-label-action">
-                                    {
+                                            <vc:icon symbol="@(isActive ? "remove" : "new")"/>
-                                        <button name="addlabelclick" class="bg-transparent border-0 p-0" type="submit" value="@label.Text"><span class="badge" style="background-color:@label.Color;color:@label.TextColor">@label.Text</span></button>
+                                        </span>
-                                    }
+                                    </button>
                                 }
                             </div>
                         }

BTCPayServer/wwwroot/img/icon-sprite.svg

@@ -24,6 +24,7 @@
 <symbol id="new-store" viewBox="0 0 32 32" fill="none"><path d="M16 10V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 16H10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle fill="none" cx="16" cy="16" r="15" stroke="currentColor" stroke-width="2"/></symbol>
 <symbol id="new-wallet" viewBox="0 0 32 32" fill="none"><path d="M16 10V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 16H10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle fill="none" cx="16" cy="16" r="15" stroke="currentColor" stroke-width="2"/></symbol>
 <symbol id="new" viewBox="0 0 24 24" fill="none"><path d="M17 11H13V7C13 6.45 12.55 6 12 6C11.45 6 11 6.45 11 7V11H7C6.45 11 6 11.45 6 12C6 12.55 6.45 13 7 13H11V17C11 17.55 11.45 18 12 18C12.55 18 13 17.55 13 17V13H17C17.55 13 18 12.55 18 12C18 11.45 17.55 11 17 11Z" fill="currentColor"/></symbol>
+<symbol id="remove" viewBox="0 0 24 24" fill="none"><path d="M17 11H13V7C13 6.45 12.55 6 12 6C11.45 6 11 6.45 11 7V11H7C6.45 11 6 11.45 6 12C6 12.55 6.45 13 7 13H11V17C11 17.55 11.45 18 12 18C12.55 18 13 17.55 13 17V13H17C17.55 13 18 12.55 18 12C18 11.45 17.55 11 17 11Z" fill="currentColor" transform="rotate(45 12 12)"/></symbol>
 <symbol id="note" viewBox="0 0 16 16" fill="none"><path d="M14.2 16H1.8C.808 16 0 15.192 0 14.2V1.8C0 .808.808 0 1.8 0h12.4c.992 0 1.8.808 1.8 1.8v12.4c0 .992-.808 1.8-1.8 1.8zM1.8 1.2a.6.6 0 00-.6.6v12.4c0 .33.269.6.6.6h12.4a.6.6 0 00.6-.6V1.8a.6.6 0 00-.6-.6H1.8z" fill="currentColor"/><path d="M12 5.312H4a.6.6 0 010-1.2h8a.6.6 0 110 1.2zM12 8.6H4a.6.6 0 010-1.2h8a.6.6 0 010 1.2zm-4 3.288H4a.6.6 0 110-1.2h4a.6.6 0 010 1.2z" fill="currentColor"/></symbol>
 <symbol id="notifications" viewBox="0 0 24 24" fill="none"><path d="M12.1933 0.992188C17.152 0.992188 19.2346 5.35582 19.7305 7.04178C20.3255 9.12442 19.8297 10.017 20.3255 12.893C20.6231 14.7773 21.6148 16.3641 22.4082 17.2567C22.7057 17.5542 22.4082 18.05 22.0115 18.05H13.2842H12.1933H2.07762C1.68092 18.05 1.3834 17.5542 1.68092 17.2567C2.37514 16.3641 3.46605 14.7773 3.76357 12.893C4.16026 10.017 3.76357 9.12442 4.35861 7.04178C4.85448 5.35582 7.03629 0.992188 12.1933 0.992188Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"/><path d="M16.2595 18.0488C16.2595 18.2472 16.3586 18.5447 16.3586 18.743C16.3586 21.1232 14.4743 23.0075 12.0942 23.0075C9.71401 23.0075 7.82971 21.1232 7.82971 18.743C7.82971 18.5447 7.82971 18.3463 7.82971 18.148" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"/></symbol>
 <symbol id="notifications-invoice-failure" viewBox="0 0 24 24" fill="none"><path d="M3.51481 20.4858C2.40048 19.3715 1.51654 18.0486 0.913469 16.5926C0.310397 15.1367 1.17414e-08 13.5762 0 12.0003C-1.17414e-08 10.4244 0.310397 8.86393 0.913469 7.40799C1.51654 5.95204 2.40048 4.62914 3.51481 3.51481C4.62914 2.40048 5.95204 1.51654 7.40799 0.913469C8.86393 0.310397 10.4244 -1.17414e-08 12.0003 0C13.5762 1.17414e-08 15.1367 0.310397 16.5926 0.913469C18.0486 1.51654 19.3715 2.40048 20.4858 3.51481C22.7363 5.7653 24.0006 8.81763 24.0006 12.0003C24.0006 15.183 22.7363 18.2353 20.4858 20.4858C18.2353 22.7363 15.183 24.0006 12.0003 24.0006C8.81763 24.0006 5.7653 22.7363 3.51481 20.4858ZM9.04531 7.45531C8.83205 7.25659 8.54998 7.1484 8.25852 7.15355C7.96707 7.15869 7.689 7.27676 7.48288 7.48288C7.27676 7.689 7.15869 7.96707 7.15355 8.25852C7.1484 8.54998 7.25659 8.83205 7.45531 9.04531L10.4103 12.0003L7.45531 14.9553C7.34478 15.0583 7.25613 15.1825 7.19464 15.3205C7.13315 15.4585 7.10009 15.6075 7.09742 15.7585C7.09476 15.9096 7.12254 16.0596 7.17912 16.1997C7.23571 16.3398 7.31992 16.467 7.42675 16.5739C7.53358 16.6807 7.66083 16.7649 7.80091 16.8215C7.94099 16.8781 8.09104 16.9059 8.24209 16.9032C8.39315 16.9005 8.54212 16.8675 8.68012 16.806C8.81812 16.7445 8.94232 16.6558 9.04531 16.5453L12.0003 13.5903L14.9553 16.5453C15.0583 16.6558 15.1825 16.7445 15.3205 16.806C15.4585 16.8675 15.6075 16.9005 15.7585 16.9032C15.9096 16.9059 16.0596 16.8781 16.1997 16.8215C16.3398 16.7649 16.467 16.6807 16.5739 16.5739C16.6807 16.467 16.7649 16.3398 16.8215 16.1997C16.8781 16.0596 16.9059 15.9096 16.9032 15.7585C16.9005 15.6075 16.8675 15.4585 16.806 15.3205C16.7445 15.1825 16.6558 15.0583 16.5453 14.9553L13.5903 12.0003L16.5453 9.04531C16.6558 8.94232 16.7445 8.81812 16.806 8.68012C16.8675 8.54212 16.9005 8.39315 16.9032 8.24209C16.9059 8.09104 16.8781 7.94099 16.8215 7.80091C16.7649 7.66083 16.6807 7.53358 16.5739 7.42675C16.467 7.31992 16.3398 7.23571 16.1997 7.17912C16.0596 7.12254 15.9096 7.09476 15.7585 7.09742C15.6075 7.10009 15.4585 7.13315 15.3205 7.19464C15.1825 7.25613 15.0583 7.34478 14.9553 7.45531L12.0003 10.4103L9.04531 7.45531Z" fill="#E11900"/></symbol>

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