mirror of
https://github.com/aljazceru/btcpayserver.git
synced 2025-12-18 22:44:29 +01:00
Update transaction label display (#4700)
* Update transaction label display * Fix test
This commit is contained in:
d11n
@@ -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();
|
||||
|
||||
@@ -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">
|
||||
<input class="form-check-input mt-0 flex-shrink-0"
|
||||
<div class="d-flex align-items-start flex-grow-1 gap-2" style="min-width: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">
|
||||
<a v-for="label of item.labels"
|
||||
<div v-if="item.labels" class="d-flex flex-wrap gap-2 flex-fill" style="min-width:20%;max-width:40%;">
|
||||
<span v-for="label of item.labels"
|
||||
key="label.text"
|
||||
:href="label.link || '#'"
|
||||
target="_blank"
|
||||
class="badge rounded-pill px-2"
|
||||
class="transaction-label"
|
||||
data-bs-toggle="tooltip"
|
||||
v-tooltip="label.tooltip"
|
||||
:style="styles(label.color)">
|
||||
{{label.text}}
|
||||
</a>
|
||||
</template>
|
||||
</span>
|
||||
</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 }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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,26 +126,27 @@
|
||||
</script>
|
||||
}
|
||||
|
||||
@if (Model.Transactions.Any())
|
||||
@if (Model.Labels.Any())
|
||||
{
|
||||
@if (Model.Labels.Any())
|
||||
{
|
||||
<div class="col-xl-7 col-xxl-8 mb-4" id="Filter">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">Filter</span>
|
||||
<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>
|
||||
}
|
||||
</div>
|
||||
@if (labelFilter != null)
|
||||
<div class="col-xl-7 col-xxl-8 mb-4" id="Filter">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">Filter</span>
|
||||
<div class="form-control d-flex flex-wrap gap-2 align-items-center">
|
||||
@foreach (var label in Model.Labels)
|
||||
{
|
||||
<a asp-route-labelFilter="" class="btn btn-secondary d-flex align-items-center">Clear filter</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)
|
||||
{
|
||||
<a asp-route-labelFilter="" class="btn btn-secondary d-flex align-items-center">Clear filter</a>
|
||||
}
|
||||
</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>
|
||||
}
|
||||
|
||||
|
||||
@@ -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="badge transactionLabel position-relative d-block"
|
||||
style="background-color:@label.Color;padding-right: 16px; z-index: 1;"
|
||||
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"
|
||||
style="color: @label.Color; filter: brightness(0.5);"
|
||||
type="submit"
|
||||
value="@label.Text">
|
||||
<span class="fa fa-close"></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="transaction-label" style="--label-bg:@label.Color;--label-fg:@label.TextColor;">
|
||||
<a asp-route-labelFilter="@label.Text">@label.Text</a>
|
||||
<form method="post" asp-action="ModifyTransaction" asp-route-walletId="@Context.GetRouteValue("walletId")">
|
||||
<input type="hidden" name="transactionId" value="@transaction.Id" />
|
||||
<button name="removelabel" type="submit" value="@label.Text" class="transaction-label-action">
|
||||
<vc:icon symbol="remove"/>
|
||||
</button>
|
||||
</form>
|
||||
@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">
|
||||
<span class="fa fa-info-circle" title="Transaction details" style="color: @label.Color; filter: brightness(0.5);">
|
||||
<span class="visually-hidden">Transaction details</span>
|
||||
</span>
|
||||
<a href="@label.Link" target="_blank" rel="noreferrer noopener" class="transaction-label-info transaction-details-icon"
|
||||
title="@label.Tooltip"
|
||||
data-bs-html="true"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-custom-class="transaction-label-tooltip">
|
||||
<vc:icon symbol="info"/>
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
@@ -50,7 +38,7 @@
|
||||
</div>
|
||||
}
|
||||
</td>
|
||||
<td class="smMaxWidth text-truncate @(transaction.IsConfirmed ? "" : "unconf")">
|
||||
<td class="smMaxWidth text-truncate@(transaction.IsConfirmed ? "" : " unconf")">
|
||||
<a href="@transaction.Link" target="_blank" rel="noreferrer noopener">
|
||||
@transaction.Id
|
||||
</a>
|
||||
@@ -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))
|
||||
{
|
||||
<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>
|
||||
}
|
||||
else
|
||||
{
|
||||
<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>
|
||||
}
|
||||
var isActive = transaction.Tags.Any(l => l.Text == label.Text);
|
||||
<button name="@(isActive ? "removelabel" : "addlabelclick")" type="submit" value="@label.Text"
|
||||
class="transaction-label@(isActive ? " active" : string.Empty)" style="--label-bg:@label.Color;--label-fg:@label.TextColor">
|
||||
<span>@label.Text</span>
|
||||
<span class="transaction-label-action">
|
||||
<vc:icon symbol="@(isActive ? "remove" : "new")"/>
|
||||
</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user