From e202f24592564b24376da6976ecec129d55f2fc8 Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Mon, 18 Apr 2022 03:23:32 +0200
Subject: [PATCH] Wallet view: Minor display improvements (#3647)

* Label improvements

* Fix erratic display bug in ToTimeAgo helper
---
 .../Extensions/ViewsRazor.cs                  |   6 +-
 .../Views/UIWallets/WalletTransactions.cshtml | 100 ++++++++----------
 2 files changed, 50 insertions(+), 56 deletions(-)

diff --git a/BTCPayServer.Abstractions/Extensions/ViewsRazor.cs b/BTCPayServer.Abstractions/Extensions/ViewsRazor.cs
index e0dab593b..8f467201e 100644
--- a/BTCPayServer.Abstractions/Extensions/ViewsRazor.cs
+++ b/BTCPayServer.Abstractions/Extensions/ViewsRazor.cs
@@ -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;
         }
     }
 }
diff --git a/BTCPayServer/Views/UIWallets/WalletTransactions.cshtml b/BTCPayServer/Views/UIWallets/WalletTransactions.cshtml
index c1c9191d7..3d10d950e 100644
--- a/BTCPayServer/Views/UIWallets/WalletTransactions.cshtml
+++ b/BTCPayServer/Views/UIWallets/WalletTransactions.cshtml
@@ -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>