Date display improvements (#4191)

Fixes styling issues introduced in #4074, because the `max-width` was to small for localized dates.

Also adds the ability to choose the prefered initial display format, which can be the localized or relative date.

BTCPayServer.Abstractions/Extensions/ViewsRazor.cs

@@ -14,6 +14,12 @@ namespace BTCPayServer.Abstractions.Extensions
         private const string ACTIVE_ID_KEY = "ActiveId";
         private const string ActivePageClass = "active";
 
+        public enum DateDisplayFormat
+        {
+            Localized,
+            Relative
+        }
+
         public static void SetActivePage<T>(this ViewDataDictionary viewData, T activePage, string title = null, string activeId = null)
             where T : IConvertible
         {
@@ -86,18 +92,22 @@ namespace BTCPayServer.Abstractions.Extensions
             return categoryAndPageMatch && idMatch ? ActivePageClass : null;
         }
 
-        public static HtmlString ToBrowserDate(this DateTimeOffset date)
+        public static HtmlString ToBrowserDate(this DateTimeOffset date, DateDisplayFormat format = DateDisplayFormat.Localized)
         {
-            var displayDate = date.ToString("g", CultureInfo.InvariantCulture);
+            var relative = date.ToTimeAgo();
+            var initial = format.ToString().ToLower();
             var dateTime = date.ToString("s", CultureInfo.InvariantCulture);
-            return new HtmlString($"<time datetime=\"{dateTime}\" data-relative=\"{date.ToTimeAgo()}\">{displayDate}</time>");
+            var displayDate = format == DateDisplayFormat.Relative ? relative : date.ToString("g", CultureInfo.InvariantCulture);
+            return new HtmlString($"<time datetime=\"{dateTime}\" data-relative=\"{relative}\" data-initial=\"{initial}\">{displayDate}</time>");
         }
 
-        public static HtmlString ToBrowserDate(this DateTime date)
+        public static HtmlString ToBrowserDate(this DateTime date, DateDisplayFormat format = DateDisplayFormat.Localized)
         {
-            var displayDate = date.ToString("g", CultureInfo.InvariantCulture);
+            var relative = date.ToTimeAgo();
+            var initial = format.ToString().ToLower();
             var dateTime = date.ToString("s", CultureInfo.InvariantCulture);
-            return new HtmlString($"<time datetime=\"{dateTime}\" data-relative=\"{date.ToTimeAgo()}\">{displayDate}</time>");
+            var displayDate = format == DateDisplayFormat.Relative ? relative : date.ToString("g", CultureInfo.InvariantCulture);
+            return new HtmlString($"<time datetime=\"{dateTime}\" data-relative=\"{relative}\" data-initial=\"{initial}\">{displayDate}</time>");
         }
 
         public static string ToTimeAgo(this DateTimeOffset date) => (DateTimeOffset.UtcNow - date).ToTimeAgo();

BTCPayServer/Views/UIInvoice/ListInvoices.cshtml

@@ -282,9 +282,11 @@
                     <tr>
                         <th style="width:2rem;" class="only-for-js">
                             <input id="selectAllCheckbox" type="checkbox" class="form-check-input" />
-                        <th style="min-width:90px;" class="col-md-auto">
+                        <th class="w-150px">
+                            <div class="d-flex align-items-center gap-1">
                                 Date
-                            <a id="switchTimeFormat" href="#" class="fa fa-clock-o" title="Switch date format"></a>
+                                <button type="button" class="btn btn-link p-0 fa fa-clock-o switch-time-format" title="Switch date format"></button>
+                            </div>
                         </th>
                         <th class="text-nowrap">Order Id</th>
                         <th class="text-nowrap">Invoice Id</th>

BTCPayServer/Views/UINotifications/Index.cshtml

@@ -39,9 +39,11 @@
                                     <input name="selectedItems" id="selectAllCheckbox" type="checkbox" class="form-check-input" />
                                 }
                             </th>
-                            <th>
+                            <th class="w-150px">
+                                <div class="d-flex align-items-center gap-1">
                                     Date
-                                <a href="#" id="switchTimeFormat" class="fa fa-clock-o" title="Switch date format"></a>
+                                    <button type="button" class="btn btn-link p-0 fa fa-clock-o switch-time-format" title="Switch date format"></button>
+                                </div>
                             </th>
                             <th>Message</th>
                             <th class="text-end">Actions</th>

BTCPayServer/Views/UIWallets/WalletTransactions.cshtml

@@ -206,9 +206,11 @@
                     <th style="width:2rem;" class="only-for-js">
                         <input id="selectAllCheckbox" type="checkbox" class="form-check-input" />
                     </th>
-                    <th style="max-width:125px;">
+                    <th class="w-150px">
+                        <div class="d-flex align-items-center gap-1">
                             Date
-                        <a id="switchTimeFormat" class="fa fa-clock-o" title="Switch date format" href="#"></a>
+                            <button type="button" class="btn btn-link p-0 fa fa-clock-o switch-time-format" title="Switch date format" id="switchTimeFormat"></button>
+                        </div>
                     </th>
                     <th class="text-start">Label</th>
                     <th>Transaction Id</th>

BTCPayServer/wwwroot/main/site.css

@@ -96,14 +96,6 @@ a.unobtrusive-link {
     transform: rotate(-180deg);
 }
 
-time[datetime] {
-    display: block;
-    max-width: 125px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
 /* Badges */
 .badge-new {
     background: #d4edda;

BTCPayServer/wwwroot/main/site.js

@@ -3,14 +3,14 @@ const flatpickrInstances = [];
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
 const dtFormatOpts = { dateStyle: 'short', timeStyle: 'short' };
 
-const formatDateTimes = mode => {
+const formatDateTimes = format => {
-    if (!mode) mode = 'localized';
     // select only elements which haven't been initialized before, those without data-localized
     document.querySelectorAll("time[datetime]:not([data-localized])").forEach($el => {
         const date = new Date($el.getAttribute("datetime"));
         // initialize and set localized attribute
         $el.dataset.localized = new Intl.DateTimeFormat('default', dtFormatOpts).format(date);
         // set text to chosen mode
+        const mode = format || $el.dataset.initial;
         if ($el.dataset[mode]) $el.innerText = $el.dataset[mode];
     });
 };
@@ -139,7 +139,7 @@ document.addEventListener("DOMContentLoaded", () => {
     });
     
     // Time Format
-    delegate('click', '#switchTimeFormat', switchTimeFormat);
+    delegate('click', '.switch-time-format', switchTimeFormat);
 
     // Theme Switch
     delegate('click', '.btcpay-theme-switch', e => {