Skip to content

Commit c73f32c

Browse files
emma-sgemma-sg
committed
add basic date & time formatters using navigator language
also use tabular nums in a few places
1 parent 6493f99 commit c73f32c

File tree

7 files changed

+62
-26
lines changed

7 files changed

+62
-26
lines changed

Diff for: ‎src/embed-receipt.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { tsToDate } from "./pageutils";
1212
import prettyBytes from "pretty-bytes";
1313
import { property } from "lit/decorators.js";
1414
import type { ItemType } from "./types";
15+
import { dateTimeFormatter } from "./utils/dateTimeFormatter";
1516

1617
// ===========================================================================
1718
export class RWPEmbedReceipt extends LitElement {
@@ -184,7 +185,9 @@ export class RWPEmbedReceipt extends LitElement {
184185
? `https://crt.sh/?q=${certFingerprint}`
185186
: "";
186187

187-
const dateStr = tsToDate(this.ts).toLocaleString();
188+
const dateStr = this.ts
189+
? dateTimeFormatter.format(tsToDate(this.ts) as Date)
190+
: "";
188191

189192
return html`
190193
<div class="dropdown mb-4 ${this.active ? "is-active" : ""}">

Diff for: ‎src/item-info.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import prettyBytes from "pretty-bytes";
77
import type { ItemType } from "./types";
88

99
import "./components/labeled-field";
10+
import { dateTimeFormatter } from "./utils/dateTimeFormatter";
1011

1112
// ===========================================================================
1213
class ItemInfo extends LitElement {
@@ -111,7 +112,9 @@ class ItemInfo extends LitElement {
111112
</wr-labeled-field>`
112113
: nothing}
113114
<wr-labeled-field label="Date Loaded" class="column is-2">
114-
${item!.ctime ? new Date(item!.ctime).toLocaleString() : nothing}
115+
${item!.ctime
116+
? dateTimeFormatter.format(new Date(item!.ctime))
117+
: nothing}
115118
</wr-labeled-field>
116119
<wr-labeled-field label="Total Size" class="column is-2">
117120
${prettyBytes(Number(item!.totalSize || item!.size || 0))}

Diff for: ‎src/item.ts

+15-3
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ import type { Replay } from "./replay";
5555
import { ifDefined } from "lit/directives/if-defined.js";
5656

5757
import "./item-info";
58+
import { dateTimeFormatter } from "./utils/dateTimeFormatter";
5859

5960
const RWP_SCHEME = "search://";
6061

@@ -756,6 +757,7 @@ class Item extends LitElement {
756757
align-items: center;
757758
transition: background-color var(--sl-transition-fast);
758759
color: var(--sl-color-neutral-600);
760+
font-variant-numeric: tabular-nums;
759761
}
760762
761763
.timestamp-dropdown-btn:hover {
@@ -782,6 +784,10 @@ class Item extends LitElement {
782784
transform: translateY(0.075em);
783785
}
784786
787+
.timestamp-menu-item {
788+
font-variant-numeric: tabular-nums;
789+
}
790+
785791
.timestamp-menu-item[aria-selected="true"]::part(label) {
786792
color: var(--sl-color-blue-600);
787793
}
@@ -1245,7 +1251,9 @@ class Item extends LitElement {
12451251
protected renderToolbarRight() {
12461252
const isReplay = !!this.tabData.url;
12471253

1248-
const dateStr = tsToDate(this.ts).toLocaleString();
1254+
const dateStr = this.ts
1255+
? dateTimeFormatter.format(tsToDate(this.ts) as Date)
1256+
: "";
12491257

12501258
return html` <div
12511259
class="dropdown is-right ${this.menuActive ? "is-active" : ""}"
@@ -1419,7 +1427,9 @@ class Item extends LitElement {
14191427
// Filter out invalid dates
14201428
try {
14211429
const date = getDateFromTS(+ts);
1422-
const dateStr = tsToDate(date).toLocaleString();
1430+
const dateStr = date
1431+
? dateTimeFormatter.format(tsToDate(date) as Date)
1432+
: "";
14231433
timestampStrs.push({
14241434
date,
14251435
label: dateStr,
@@ -1428,7 +1438,9 @@ class Item extends LitElement {
14281438
/* empty */
14291439
}
14301440
});
1431-
const currDateStr = tsToDate(this.ts).toLocaleString();
1441+
const currDateStr = this.ts
1442+
? dateTimeFormatter.format(tsToDate(this.ts) as Date)
1443+
: "";
14321444
return html`<div id="datetime" class="control is-hidden-mobile">
14331445
${timestampStrs.length > 1
14341446
? html`

Diff for: ‎src/pageentry.ts

+12-19
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ import { getPageDateTS, getReplayLink } from "./pageutils";
99

1010
import { wrapCss } from "./misc";
1111
import type { URLResource } from "./types";
12+
import {
13+
dateFormatter,
14+
dateTimeFormatter,
15+
timeFormatter,
16+
} from "./utils/dateTimeFormatter";
1217

1318
// ===========================================================================
1419
class PageEntry extends LitElement {
@@ -154,6 +159,10 @@ class PageEntry extends LitElement {
154159
.media-content a {
155160
display: block;
156161
}
162+
163+
.col-date {
164+
font-variant-numeric: tabular-nums;
165+
}
157166
`);
158167
}
159168

@@ -218,20 +227,8 @@ class PageEntry extends LitElement {
218227
`
219228
: ""}
220229
<div class="column col-date is-2">
221-
<div>
222-
${
223-
// TODO: Fix this the next time the file is edited.
224-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
225-
date ? date.toLocaleDateString() : ""
226-
}
227-
</div>
228-
<div>
229-
${
230-
// TODO: Fix this the next time the file is edited.
231-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
232-
date ? date.toLocaleTimeString() : ""
233-
}
234-
</div>
230+
<div>${date ? dateFormatter.format(date) : ""}</div>
231+
<div>${date ? timeFormatter.format(date) : ""}</div>
235232
</div>
236233
<div class="column">
237234
<div class="media">
@@ -259,11 +256,7 @@ class PageEntry extends LitElement {
259256
>${this.thumbnailValid ? this.renderFavicon() : ""}
260257
</p>
261258
<p class="has-text-grey-dark text is-inline-date">
262-
${
263-
// TODO: Fix this the next time the file is edited.
264-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
265-
date ? date.toLocaleString() : ""
266-
}
259+
${date ? dateTimeFormatter.format(date) : ""}
267260
</p>
268261
</a>
269262
${this.textSnippet

Diff for: ‎src/story.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { getTS, getReplayLink } from "./pageutils";
1010
import Split from "split.js";
1111
import { type ItemType } from "./types";
1212
import { customElement, property } from "lit/decorators.js";
13+
import { dateTimeFormatter } from "./utils/dateTimeFormatter";
1314

1415
// ===========================================================================
1516
@customElement("wr-coll-story")
@@ -364,7 +365,7 @@ class Story extends LitElement {
364365
<p class="is-size-6 has-text-weight-bold has-text-link">${p.title}</p>
365366
<p class="has-text-dark">${p.url}</p>
366367
</a>
367-
<p>${date.toLocaleString()}</p>
368+
<p>${dateTimeFormatter.format(date)}</p>
368369
<p>${p.desc}</p>
369370
</div>
370371
<hr />

Diff for: ‎src/url-resources.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import fasSearch from "@fortawesome/fontawesome-free/svgs/solid/search.svg";
88
import "keyword-mark-element/lib/keyword-mark.js";
99
import { type ItemType } from "./types";
1010
import { type URLResource } from "./types";
11+
import { dateTimeFormatter } from "./utils/dateTimeFormatter";
1112

1213
// ===========================================================================
1314
/**
@@ -544,7 +545,7 @@ class URLResources extends LitElement {
544545
</td>
545546
<td class="column col-ts is-2">
546547
<p class="minihead is-hidden-tablet">Date</p>
547-
${new Date(result.date).toLocaleString()}
548+
${dateTimeFormatter.format(new Date(result.date))}
548549
</td>
549550
<td class="column col-mime is-3">
550551
<p class="minihead is-hidden-tablet">Media Type</p>

Diff for: ‎src/utils/dateTimeFormatter.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export const dateTimeFormatter = new Intl.DateTimeFormat(
2+
[...navigator.languages],
3+
{
4+
month: "2-digit",
5+
day: "2-digit",
6+
year: "numeric",
7+
hour: "2-digit",
8+
minute: "2-digit",
9+
second: "2-digit",
10+
},
11+
);
12+
13+
export const dateFormatter = new Intl.DateTimeFormat([...navigator.languages], {
14+
month: "2-digit",
15+
day: "2-digit",
16+
year: "numeric",
17+
});
18+
19+
export const timeFormatter = new Intl.DateTimeFormat([...navigator.languages], {
20+
hour: "2-digit",
21+
minute: "2-digit",
22+
second: "2-digit",
23+
});

0 commit comments

Comments
 (0)