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)
|
public static string ToTimeAgo(this DateTimeOffset date)
|
||||||
{
|
{
|
||||||
var diff = DateTimeOffset.UtcNow - date;
|
var diff = DateTimeOffset.UtcNow - date;
|
||||||
var formatted = diff.Seconds > 0
|
var formatted = diff.TotalSeconds > 0
|
||||||
? $"{diff.TimeString()} ago"
|
? $"{diff.TimeString()} ago"
|
||||||
: $"in {diff.Negate().TimeString()}";
|
: $"in {diff.Negate().TimeString()}";
|
||||||
return formatted;
|
return formatted;
|
||||||
|
|
@ -113,9 +113,9 @@ namespace BTCPayServer.Abstractions.Extensions
|
||||||
return $"{(int)timeSpan.TotalDays} day{Plural((int)timeSpan.TotalDays)}";
|
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 {
|
.switchTimeFormat {
|
||||||
display: block;
|
display: block;
|
||||||
max-width: 150px;
|
max-width: 125px;
|
||||||
width: 150px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-container:not(:last-child) {
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-container {
|
.badge-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
|
@ -52,12 +47,6 @@
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.transaction-details-icon {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 12px;
|
|
||||||
left: -8px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -78,10 +67,10 @@
|
||||||
|
|
||||||
@if (Model.Transactions.Any())
|
@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())
|
@if (Model.Labels.Any())
|
||||||
{
|
{
|
||||||
<div class="input-group">
|
<div class="input-group mb-4 mb-sm-0">
|
||||||
<span class="input-group-text">Filter</span>
|
<span class="input-group-text">Filter</span>
|
||||||
<div class="form-control d-flex flex-wrap gap-2 align-items-center">
|
<div class="form-control d-flex flex-wrap gap-2 align-items-center">
|
||||||
@foreach (var label in Model.Labels)
|
@foreach (var label in Model.Labels)
|
||||||
|
|
@ -115,7 +104,7 @@
|
||||||
<th style="width:2rem;" class="only-for-js">
|
<th style="width:2rem;" class="only-for-js">
|
||||||
<input id="selectAllCheckbox" type="checkbox" class="form-check-input"/>
|
<input id="selectAllCheckbox" type="checkbox" class="form-check-input"/>
|
||||||
</th>
|
</th>
|
||||||
<th style="min-width: 90px;" class="col-md-auto">
|
<th style="max-width:125px;">
|
||||||
Date
|
Date
|
||||||
<a id="switchTimeFormat" href="#">
|
<a id="switchTimeFormat" href="#">
|
||||||
<span class="fa fa-clock-o" title="Switch date format"></span>
|
<span class="fa fa-clock-o" title="Switch date format"></span>
|
||||||
|
|
@ -124,7 +113,7 @@
|
||||||
<th class="text-start">Label</th>
|
<th class="text-start">Label</th>
|
||||||
<th>Transaction Id</th>
|
<th>Transaction Id</th>
|
||||||
<th class="text-end">Amount</th>
|
<th class="text-end">Amount</th>
|
||||||
<th class="text-end"></th>
|
<th class="text-end" style="min-width:60px"></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
|
@ -140,38 +129,43 @@
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td class="text-start">
|
<td class="text-start">
|
||||||
@foreach (var label in transaction.Labels)
|
@if (transaction.Labels.Any())
|
||||||
{
|
{
|
||||||
<div class="badge-container">
|
<div class="d-flex flex-wrap gap-2 align-items-center">
|
||||||
<div
|
@foreach (var label in transaction.Labels)
|
||||||
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))
|
|
||||||
{
|
{
|
||||||
<a href="@label.Link" target="_blank" class="badge transaction-details-icon" style="background-color: @label.Color; filter: brightness(1.1);" rel="noreferrer noopener">
|
<div class="badge-container rounded-2" style="background-color:@label.Color;">
|
||||||
<span class="fa fa-info-circle" title="Transaction details" style="color: @label.Color; filter: brightness(0.5);">
|
<div
|
||||||
<span class="visually-hidden">Transaction details</span>
|
class="badge transactionLabel position-relative d-block"
|
||||||
</span>
|
style="background-color:@label.Color;padding-right: 16px; z-index: 1;"
|
||||||
</a>
|
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>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
@ -190,10 +184,10 @@
|
||||||
<td class="text-end text-danger">@transaction.Balance</td>
|
<td class="text-end text-danger">@transaction.Balance</td>
|
||||||
}
|
}
|
||||||
<td class="text-end">
|
<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>
|
<span class="fa fa-tags cursor-pointer" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
|
||||||
<div class="dropdown-menu">
|
<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")">
|
asp-route-walletId="@Context.GetRouteValue("walletId")">
|
||||||
<input type="hidden" name="transactionId" value="@transaction.Id"/>
|
<input type="hidden" name="transactionId" value="@transaction.Id"/>
|
||||||
<div class="input-group input-group-sm p-2">
|
<div class="input-group input-group-sm p-2">
|
||||||
|
|
@ -203,16 +197,16 @@
|
||||||
@if (Model.Labels.Count > 0)
|
@if (Model.Labels.Count > 0)
|
||||||
{
|
{
|
||||||
<div class="dropdown-divider"></div>
|
<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)
|
@foreach (var label in Model.Labels)
|
||||||
{
|
{
|
||||||
@if (transaction.Labels.Contains(label))
|
@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
|
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>
|
</div>
|
||||||
|
|
@ -230,14 +224,14 @@
|
||||||
<span class="fa fa-commenting cursor-pointer" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
|
<span class="fa fa-commenting cursor-pointer" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
|
||||||
}
|
}
|
||||||
<div class="dropdown-menu">
|
<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")">
|
asp-route-walletId="@Context.GetRouteValue("walletId")">
|
||||||
<input type="hidden" name="transactionId" value="@transaction.Id"/>
|
<input type="hidden" name="transactionId" value="@transaction.Id"/>
|
||||||
<div class="input-group p-2">
|
<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>
|
<textarea name="addcomment" maxlength="200" rows="2" cols="20" class="form-control form-control-sm p-1">@transaction.Comment</textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-2">
|
<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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue