mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-03-04 18:06:08 +01:00
Wallet view: Minor display improvements (#3647)
* Label improvements * Fix erratic display bug in ToTimeAgo helper
This commit is contained in:
d11n
GitHub
parent
d11f87f0cc
commit
e202f24592
2 changed files with 50 additions and 56 deletions
|
|
@ -90,7 +90,7 @@ namespace BTCPayServer.Abstractions.Extensions
|
|||
public static string ToTimeAgo(this DateTimeOffset date)
|
||||
{
|
||||
var diff = DateTimeOffset.UtcNow - date;
|
||||
var formatted = diff.Seconds > 0
|
||||
var formatted = diff.TotalSeconds > 0
|
||||
? $"{diff.TimeString()} ago"
|
||||
: $"in {diff.Negate().TimeString()}";
|
||||
return formatted;
|
||||
|
|
@ -113,9 +113,9 @@ namespace BTCPayServer.Abstractions.Extensions
|
|||
return $"{(int)timeSpan.TotalDays} day{Plural((int)timeSpan.TotalDays)}";
|
||||
}
|
||||
|
||||
private static string Plural(int totalDays)
|
||||
private static string Plural(int value)
|
||||
{
|
||||
return totalDays > 1 ? "s" : string.Empty;
|
||||
return value > 1 ? "s" : string.Empty;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,17 +23,12 @@
|
|||
|
||||
.switchTimeFormat {
|
||||
display: block;
|
||||
max-width: 150px;
|
||||
width: 150px;
|
||||
max-width: 125px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.badge-container:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.badge-container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
|
@ -52,12 +47,6 @@
|
|||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.transaction-details-icon {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
left: -8px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
|
|
@ -78,10 +67,10 @@
|
|||
|
||||
@if (Model.Transactions.Any())
|
||||
{
|
||||
<div class="d-flex align-items-center gap-3 mb-2">
|
||||
<div class="d-sm-flex align-items-center gap-3 mb-2">
|
||||
@if (Model.Labels.Any())
|
||||
{
|
||||
<div class="input-group">
|
||||
<div class="input-group mb-4 mb-sm-0">
|
||||
<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)
|
||||
|
|
@ -115,7 +104,7 @@
|
|||
<th style="width:2rem;" class="only-for-js">
|
||||
<input id="selectAllCheckbox" type="checkbox" class="form-check-input"/>
|
||||
</th>
|
||||
<th style="min-width: 90px;" class="col-md-auto">
|
||||
<th style="max-width:125px;">
|
||||
Date
|
||||
<a id="switchTimeFormat" href="#">
|
||||
<span class="fa fa-clock-o" title="Switch date format"></span>
|
||||
|
|
@ -124,7 +113,7 @@
|
|||
<th class="text-start">Label</th>
|
||||
<th>Transaction Id</th>
|
||||
<th class="text-end">Amount</th>
|
||||
<th class="text-end"></th>
|
||||
<th class="text-end" style="min-width:60px"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -140,38 +129,43 @@
|
|||
</span>
|
||||
</td>
|
||||
<td class="text-start">
|
||||
@foreach (var label in transaction.Labels)
|
||||
@if (transaction.Labels.Any())
|
||||
{
|
||||
<div class="badge-container">
|
||||
<div
|
||||
class="badge transactionLabel position-relative text-white d-block"
|
||||
style="background-color:@label.Color;padding-right: 16px; z-index: 1;"
|
||||
data-bs-toggle="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>
|
||||
@if (!string.IsNullOrEmpty(label.Link))
|
||||
<div class="d-flex flex-wrap gap-2 align-items-center">
|
||||
@foreach (var label in transaction.Labels)
|
||||
{
|
||||
<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>
|
||||
<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-toggle="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>
|
||||
@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>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
|
@ -190,10 +184,10 @@
|
|||
<td class="text-end text-danger">@transaction.Balance</td>
|
||||
}
|
||||
<td class="text-end">
|
||||
<div class="dropstart d-inline-block">
|
||||
<div class="dropstart d-inline-block me-2">
|
||||
<span class="fa fa-tags cursor-pointer" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
|
||||
<div class="dropdown-menu">
|
||||
<form asp-action="ModifyTransaction" method="post"
|
||||
<form asp-action="ModifyTransaction" method="post" style="width:260px;"
|
||||
asp-route-walletId="@Context.GetRouteValue("walletId")">
|
||||
<input type="hidden" name="transactionId" value="@transaction.Id"/>
|
||||
<div class="input-group input-group-sm p-2">
|
||||
|
|
@ -203,16 +197,16 @@
|
|||
@if (Model.Labels.Count > 0)
|
||||
{
|
||||
<div class="dropdown-divider"></div>
|
||||
<div class="px-2">
|
||||
<div class="py-2 px-3 d-flex flex-wrap gap-2">
|
||||
@foreach (var label in Model.Labels)
|
||||
{
|
||||
@if (transaction.Labels.Contains(label))
|
||||
{
|
||||
<button name="removelabel" class="bg-transparent border-0 p-0" type="submit" value="@label.Text"><span class="badge" style="display:block;background-color:@label.Color;color:white;text-align:left;"><span class="fa fa-check"></span> @label.Text</span></button>
|
||||
<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="display:block;background-color:@label.Color;color:white;text-align:left;">@label.Text</span></button>
|
||||
<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>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
|
@ -230,14 +224,14 @@
|
|||
<span class="fa fa-commenting cursor-pointer" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
|
||||
}
|
||||
<div class="dropdown-menu">
|
||||
<form asp-action="ModifyTransaction" method="post"
|
||||
<form asp-action="ModifyTransaction" method="post" style="width:260px;"
|
||||
asp-route-walletId="@Context.GetRouteValue("walletId")">
|
||||
<input type="hidden" name="transactionId" value="@transaction.Id"/>
|
||||
<div class="input-group p-2">
|
||||
<textarea name="addcomment" maxlength="200" rows="2" cols="20" class="form-control form-control-sm p-1">@transaction.Comment</textarea>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<button type="submit" class="btn btn-primary btn-sm">Save comment</button>
|
||||
<button type="submit" class="btn btn-primary btn-sm w-100">Save comment</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue