From bca50104629bdf928dd7ae6573417ecbe8f07819 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 21:53:25 +0100 Subject: [PATCH 01/18] Format dates in `` with user's current locale settings Fixes: https://github.com/go-gitea/gitea/issues/28371 --- modules/timeutil/datetime.go | 2 +- modules/timeutil/datetime_test.go | 10 +++++----- modules/timeutil/since.go | 2 +- templates/admin/system_status.tmpl | 4 ++-- web_src/js/components/DiffCommitSelector.vue | 2 +- web_src/js/components/RepoContributors.vue | 2 ++ 6 files changed, 12 insertions(+), 10 deletions(-) diff --git a/modules/timeutil/datetime.go b/modules/timeutil/datetime.go index 62b94f7cf481c..fe707ebeec752 100644 --- a/modules/timeutil/datetime.go +++ b/modules/timeutil/datetime.go @@ -51,7 +51,7 @@ func DateTime(format string, datetime any, extraAttrs ...string) template.HTML { attrs := make([]string, 0, 10+len(extraAttrs)) attrs = append(attrs, extraAttrs...) - attrs = append(attrs, `data-tooltip-content`, `data-tooltip-interactive="true"`) + attrs = append(attrs, `data-tooltip-content`, `data-tooltip-interactive="true"`, `lang="unknown"`) attrs = append(attrs, `format="datetime"`, `weekday=""`, `year="numeric"`) switch format { diff --git a/modules/timeutil/datetime_test.go b/modules/timeutil/datetime_test.go index 26494b84754f9..83134c30230f4 100644 --- a/modules/timeutil/datetime_test.go +++ b/modules/timeutil/datetime_test.go @@ -27,17 +27,17 @@ func TestDateTime(t *testing.T) { assert.EqualValues(t, "-", DateTime("short", TimeStamp(0))) actual := DateTime("short", "invalid") - assert.EqualValues(t, `invalid`, actual) + assert.EqualValues(t, `invalid`, actual) actual = DateTime("short", refTimeStr) - assert.EqualValues(t, `2018-01-01T00:00:00Z`, actual) + assert.EqualValues(t, `2018-01-01T00:00:00Z`, actual) actual = DateTime("short", refTime) - assert.EqualValues(t, `2018-01-01`, actual) + assert.EqualValues(t, `2018-01-01`, actual) actual = DateTime("short", refTimeStamp) - assert.EqualValues(t, `2017-12-31`, actual) + assert.EqualValues(t, `2017-12-31`, actual) actual = DateTime("full", refTimeStamp) - assert.EqualValues(t, `2017-12-31 19:00:00 -05:00`, actual) + assert.EqualValues(t, `2017-12-31 19:00:00 -05:00`, actual) } diff --git a/modules/timeutil/since.go b/modules/timeutil/since.go index dfaa0e3e3aa37..4d310d4be8014 100644 --- a/modules/timeutil/since.go +++ b/modules/timeutil/since.go @@ -126,7 +126,7 @@ func timeSinceUnix(then, now time.Time, _ translation.Locale) template.HTML { } // declare data-tooltip-content attribute to switch from "title" tooltip to "tippy" tooltip - htm := fmt.Sprintf(`%s`, + htm := fmt.Sprintf(`%s`, attrs, then.Format(time.RFC3339), friendlyText) return template.HTML(htm) } diff --git a/templates/admin/system_status.tmpl b/templates/admin/system_status.tmpl index 7b5c9be6ccce3..f67e9e76bb2ca 100644 --- a/templates/admin/system_status.tmpl +++ b/templates/admin/system_status.tmpl @@ -1,6 +1,6 @@
{{ctx.Locale.Tr "admin.dashboard.server_uptime"}}
-
{{.SysStatus.StartTime}}
+
{{.SysStatus.StartTime}}
{{ctx.Locale.Tr "admin.dashboard.current_goroutine"}}
{{.SysStatus.NumGoroutine}}
@@ -52,7 +52,7 @@
{{ctx.Locale.Tr "admin.dashboard.next_gc_recycle"}}
{{.SysStatus.NextGC}}
{{ctx.Locale.Tr "admin.dashboard.last_gc_time"}}
-
{{.SysStatus.LastGCTime}}
+
{{.SysStatus.LastGCTime}}
{{ctx.Locale.Tr "admin.dashboard.total_gc_pause"}}
{{.SysStatus.PauseTotalNs}}
{{ctx.Locale.Tr "admin.dashboard.last_gc_pause"}}
diff --git a/web_src/js/components/DiffCommitSelector.vue b/web_src/js/components/DiffCommitSelector.vue index 54877a18c0fc5..40400b4d0bebf 100644 --- a/web_src/js/components/DiffCommitSelector.vue +++ b/web_src/js/components/DiffCommitSelector.vue @@ -248,7 +248,7 @@ export default { {{ commit.committer_or_author_name }} - {{ commit.time }} + {{ commit.time }} diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue index 22c247ae326ee..89927b6a90b1c 100644 --- a/web_src/js/components/RepoContributors.vue +++ b/web_src/js/components/RepoContributors.vue @@ -312,6 +312,7 @@ export default { month="short" day="numeric" weekday="" + lang="unknown" :datetime="new Date(xAxisMin)" > {{ new Date(xAxisMin) }} @@ -324,6 +325,7 @@ export default { month="short" day="numeric" weekday="" + lang="unknown" :datetime="new Date(xAxisMax)" > {{ new Date(xAxisMax) }} From 100666a0748dd815f7b0738c7384cd831f5cb1cf Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 22:03:09 +0100 Subject: [PATCH 02/18] add comments --- modules/timeutil/datetime.go | 1 + modules/timeutil/since.go | 1 + 2 files changed, 2 insertions(+) diff --git a/modules/timeutil/datetime.go b/modules/timeutil/datetime.go index fe707ebeec752..8542d629fc84d 100644 --- a/modules/timeutil/datetime.go +++ b/modules/timeutil/datetime.go @@ -51,6 +51,7 @@ func DateTime(format string, datetime any, extraAttrs ...string) template.HTML { attrs := make([]string, 0, 10+len(extraAttrs)) attrs = append(attrs, extraAttrs...) + // lang=unknown is used to let format according to user's preferences attrs = append(attrs, `data-tooltip-content`, `data-tooltip-interactive="true"`, `lang="unknown"`) attrs = append(attrs, `format="datetime"`, `weekday=""`, `year="numeric"`) diff --git a/modules/timeutil/since.go b/modules/timeutil/since.go index 4d310d4be8014..d8ed8f170e305 100644 --- a/modules/timeutil/since.go +++ b/modules/timeutil/since.go @@ -126,6 +126,7 @@ func timeSinceUnix(then, now time.Time, _ translation.Locale) template.HTML { } // declare data-tooltip-content attribute to switch from "title" tooltip to "tippy" tooltip + // lang=unknown is used to let format according to user's preferences htm := fmt.Sprintf(`%s`, attrs, then.Format(time.RFC3339), friendlyText) return template.HTML(htm) From 3b9d5c3dc445e5f44095ea6f52c089b3e2009b77 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 22:22:05 +0100 Subject: [PATCH 03/18] fix test --- modules/timeutil/datetime_test.go | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/modules/timeutil/datetime_test.go b/modules/timeutil/datetime_test.go index 83134c30230f4..860c62b7cb23f 100644 --- a/modules/timeutil/datetime_test.go +++ b/modules/timeutil/datetime_test.go @@ -27,17 +27,17 @@ func TestDateTime(t *testing.T) { assert.EqualValues(t, "-", DateTime("short", TimeStamp(0))) actual := DateTime("short", "invalid") - assert.EqualValues(t, `invalid`, actual) + assert.EqualValues(t, `invalid`, actual) actual = DateTime("short", refTimeStr) - assert.EqualValues(t, `2018-01-01T00:00:00Z`, actual) + assert.EqualValues(t, `2018-01-01T00:00:00Z`, actual) actual = DateTime("short", refTime) - assert.EqualValues(t, `2018-01-01`, actual) + assert.EqualValues(t, `2018-01-01`, actual) actual = DateTime("short", refTimeStamp) - assert.EqualValues(t, `2017-12-31`, actual) + assert.EqualValues(t, `2017-12-31`, actual) actual = DateTime("full", refTimeStamp) - assert.EqualValues(t, `2017-12-31 19:00:00 -05:00`, actual) + assert.EqualValues(t, `2017-12-31 19:00:00 -05:00`, actual) } From 57c2bad5ddb996eff9a255b43df6630943e80661 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 22:26:10 +0100 Subject: [PATCH 04/18] tweak comment --- modules/timeutil/datetime.go | 2 +- modules/timeutil/since.go | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/timeutil/datetime.go b/modules/timeutil/datetime.go index 8542d629fc84d..c8fc8f142f910 100644 --- a/modules/timeutil/datetime.go +++ b/modules/timeutil/datetime.go @@ -51,7 +51,7 @@ func DateTime(format string, datetime any, extraAttrs ...string) template.HTML { attrs := make([]string, 0, 10+len(extraAttrs)) attrs = append(attrs, extraAttrs...) - // lang=unknown is used to let format according to user's preferences + // lang=unknown is used to let format according to user's current local attrs = append(attrs, `data-tooltip-content`, `data-tooltip-interactive="true"`, `lang="unknown"`) attrs = append(attrs, `format="datetime"`, `weekday=""`, `year="numeric"`) diff --git a/modules/timeutil/since.go b/modules/timeutil/since.go index d8ed8f170e305..0a084279d66af 100644 --- a/modules/timeutil/since.go +++ b/modules/timeutil/since.go @@ -126,7 +126,7 @@ func timeSinceUnix(then, now time.Time, _ translation.Locale) template.HTML { } // declare data-tooltip-content attribute to switch from "title" tooltip to "tippy" tooltip - // lang=unknown is used to let format according to user's preferences + // lang=unknown is used to let format according to user's current local htm := fmt.Sprintf(`%s`, attrs, then.Format(time.RFC3339), friendlyText) return template.HTML(htm) From e7a8477dbd2bffd5e19f6df71389f490a0627039 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 22:26:29 +0100 Subject: [PATCH 05/18] typo --- modules/timeutil/datetime.go | 2 +- modules/timeutil/since.go | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/timeutil/datetime.go b/modules/timeutil/datetime.go index c8fc8f142f910..328f83505d695 100644 --- a/modules/timeutil/datetime.go +++ b/modules/timeutil/datetime.go @@ -51,7 +51,7 @@ func DateTime(format string, datetime any, extraAttrs ...string) template.HTML { attrs := make([]string, 0, 10+len(extraAttrs)) attrs = append(attrs, extraAttrs...) - // lang=unknown is used to let format according to user's current local + // lang=unknown is used to let format according to user's current locale attrs = append(attrs, `data-tooltip-content`, `data-tooltip-interactive="true"`, `lang="unknown"`) attrs = append(attrs, `format="datetime"`, `weekday=""`, `year="numeric"`) diff --git a/modules/timeutil/since.go b/modules/timeutil/since.go index 0a084279d66af..ebb7d3322866b 100644 --- a/modules/timeutil/since.go +++ b/modules/timeutil/since.go @@ -126,7 +126,7 @@ func timeSinceUnix(then, now time.Time, _ translation.Locale) template.HTML { } // declare data-tooltip-content attribute to switch from "title" tooltip to "tippy" tooltip - // lang=unknown is used to let format according to user's current local + // lang=unknown is used to let format according to user's current locale htm := fmt.Sprintf(`%s`, attrs, then.Format(time.RFC3339), friendlyText) return template.HTML(htm) From 3462582c82596c2e1b331709e97bc967c9a97f5f Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 23:04:20 +0100 Subject: [PATCH 06/18] use js solution --- web_src/js/components/RepoActionView.vue | 4 ++-- web_src/js/modules/tippy.js | 9 ++++++++- web_src/js/utils/time.js | 15 +++++++++++++++ 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 97cd05b45bcc4..cc7f95bc11672 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -3,7 +3,7 @@ import {SvgIcon} from '../svg.js'; import ActionRunStatus from './ActionRunStatus.vue'; import {createApp} from 'vue'; import {toggleElem} from '../utils/dom.js'; -import {getCurrentLocale} from '../utils.js'; +import {formatDateTime} from '../utils/time.js'; import {renderAnsi} from '../render/ansi.js'; import {POST, DELETE} from '../modules/fetch.js'; @@ -167,7 +167,7 @@ const sfc = { const logTimeStamp = document.createElement('span'); logTimeStamp.className = 'log-time-stamp'; const date = new Date(parseFloat(line.timestamp * 1000)); - const timeStamp = date.toLocaleString(getCurrentLocale(), {timeZoneName: 'short'}); + const timeStamp = formatDateTime(date); logTimeStamp.textContent = timeStamp; toggleElem(logTimeStamp, this.timeVisible['log-time-stamp']); // for "Show seconds" diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index 27f371fd88659..0c4794c11428c 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -1,5 +1,6 @@ import tippy, {followCursor} from 'tippy.js'; import {isDocumentFragmentOrElementNode} from '../utils/dom.js'; +import {formatDateTime} from '../utils/time.js'; const visibleInstances = new Set(); @@ -93,8 +94,14 @@ function attachTooltip(target, content = null) { } function switchTitleToTooltip(target) { - const title = target.getAttribute('title'); + let title = target.getAttribute('title'); if (title) { + if (target.tagName === 'RELATIVE-TIME') { + const datetime = target.getAttribute('datetime'); + if (datetime) { + title = formatDateTime(new Date(datetime)); + } + } target.setAttribute('data-tooltip-content', title); target.setAttribute('aria-label', title); // keep the attribute, in case there are some other "[title]" selectors diff --git a/web_src/js/utils/time.js b/web_src/js/utils/time.js index 3284e893e1377..daf90c30843da 100644 --- a/web_src/js/utils/time.js +++ b/web_src/js/utils/time.js @@ -44,3 +44,18 @@ export function fillEmptyStartDaysWithZeroes(startDays, data) { return Object.values(result); } + +// TODO: replace with Intl.Locale.prototype.getHourCycles once there is broad browser support +const use24h = Number.isInteger(Number(new Intl.DateTimeFormat([], {hour: 'numeric'}).format())); + +export function formatDateTime(date) { + return new Intl.DateTimeFormat(document.documentElement.lang, { + day: 'numeric', + month: 'short', + year: 'numeric', + hour: 'numeric', + hour12: !use24h, + minute: '2-digit', + timeZoneName: 'short', + }).format(date); +} From 7de2d92cdd5a2b4a8d7678a45953bf40f3ada9f4 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 23:06:09 +0100 Subject: [PATCH 07/18] revert go files --- modules/timeutil/datetime.go | 3 +-- modules/timeutil/datetime_test.go | 10 +++++----- modules/timeutil/since.go | 3 +-- templates/admin/system_status.tmpl | 4 ++-- 4 files changed, 9 insertions(+), 11 deletions(-) diff --git a/modules/timeutil/datetime.go b/modules/timeutil/datetime.go index 328f83505d695..62b94f7cf481c 100644 --- a/modules/timeutil/datetime.go +++ b/modules/timeutil/datetime.go @@ -51,8 +51,7 @@ func DateTime(format string, datetime any, extraAttrs ...string) template.HTML { attrs := make([]string, 0, 10+len(extraAttrs)) attrs = append(attrs, extraAttrs...) - // lang=unknown is used to let format according to user's current locale - attrs = append(attrs, `data-tooltip-content`, `data-tooltip-interactive="true"`, `lang="unknown"`) + attrs = append(attrs, `data-tooltip-content`, `data-tooltip-interactive="true"`) attrs = append(attrs, `format="datetime"`, `weekday=""`, `year="numeric"`) switch format { diff --git a/modules/timeutil/datetime_test.go b/modules/timeutil/datetime_test.go index 860c62b7cb23f..26494b84754f9 100644 --- a/modules/timeutil/datetime_test.go +++ b/modules/timeutil/datetime_test.go @@ -27,17 +27,17 @@ func TestDateTime(t *testing.T) { assert.EqualValues(t, "-", DateTime("short", TimeStamp(0))) actual := DateTime("short", "invalid") - assert.EqualValues(t, `invalid`, actual) + assert.EqualValues(t, `invalid`, actual) actual = DateTime("short", refTimeStr) - assert.EqualValues(t, `2018-01-01T00:00:00Z`, actual) + assert.EqualValues(t, `2018-01-01T00:00:00Z`, actual) actual = DateTime("short", refTime) - assert.EqualValues(t, `2018-01-01`, actual) + assert.EqualValues(t, `2018-01-01`, actual) actual = DateTime("short", refTimeStamp) - assert.EqualValues(t, `2017-12-31`, actual) + assert.EqualValues(t, `2017-12-31`, actual) actual = DateTime("full", refTimeStamp) - assert.EqualValues(t, `2017-12-31 19:00:00 -05:00`, actual) + assert.EqualValues(t, `2017-12-31 19:00:00 -05:00`, actual) } diff --git a/modules/timeutil/since.go b/modules/timeutil/since.go index ebb7d3322866b..dfaa0e3e3aa37 100644 --- a/modules/timeutil/since.go +++ b/modules/timeutil/since.go @@ -126,8 +126,7 @@ func timeSinceUnix(then, now time.Time, _ translation.Locale) template.HTML { } // declare data-tooltip-content attribute to switch from "title" tooltip to "tippy" tooltip - // lang=unknown is used to let format according to user's current locale - htm := fmt.Sprintf(`%s`, + htm := fmt.Sprintf(`%s`, attrs, then.Format(time.RFC3339), friendlyText) return template.HTML(htm) } diff --git a/templates/admin/system_status.tmpl b/templates/admin/system_status.tmpl index f67e9e76bb2ca..7b5c9be6ccce3 100644 --- a/templates/admin/system_status.tmpl +++ b/templates/admin/system_status.tmpl @@ -1,6 +1,6 @@
{{ctx.Locale.Tr "admin.dashboard.server_uptime"}}
-
{{.SysStatus.StartTime}}
+
{{.SysStatus.StartTime}}
{{ctx.Locale.Tr "admin.dashboard.current_goroutine"}}
{{.SysStatus.NumGoroutine}}
@@ -52,7 +52,7 @@
{{ctx.Locale.Tr "admin.dashboard.next_gc_recycle"}}
{{.SysStatus.NextGC}}
{{ctx.Locale.Tr "admin.dashboard.last_gc_time"}}
-
{{.SysStatus.LastGCTime}}
+
{{.SysStatus.LastGCTime}}
{{ctx.Locale.Tr "admin.dashboard.total_gc_pause"}}
{{.SysStatus.PauseTotalNs}}
{{ctx.Locale.Tr "admin.dashboard.last_gc_pause"}}
From 23fcea813ff247b0bfd7a1ea20bb3dd33dbce201 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 23:07:09 +0100 Subject: [PATCH 08/18] revert remaining files --- web_src/js/components/DiffCommitSelector.vue | 2 +- web_src/js/components/RepoContributors.vue | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/web_src/js/components/DiffCommitSelector.vue b/web_src/js/components/DiffCommitSelector.vue index 40400b4d0bebf..54877a18c0fc5 100644 --- a/web_src/js/components/DiffCommitSelector.vue +++ b/web_src/js/components/DiffCommitSelector.vue @@ -248,7 +248,7 @@ export default { {{ commit.committer_or_author_name }} - {{ commit.time }} + {{ commit.time }} diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue index 89927b6a90b1c..22c247ae326ee 100644 --- a/web_src/js/components/RepoContributors.vue +++ b/web_src/js/components/RepoContributors.vue @@ -312,7 +312,6 @@ export default { month="short" day="numeric" weekday="" - lang="unknown" :datetime="new Date(xAxisMin)" > {{ new Date(xAxisMin) }} @@ -325,7 +324,6 @@ export default { month="short" day="numeric" weekday="" - lang="unknown" :datetime="new Date(xAxisMax)" > {{ new Date(xAxisMax) }} From 27385ea58cf0f17b45a54892685fca14b0ae14b8 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 23:09:08 +0100 Subject: [PATCH 09/18] remove unused function --- web_src/js/utils.js | 5 ----- web_src/js/utils/time.js | 1 + 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/web_src/js/utils.js b/web_src/js/utils.js index ce0fb66343b13..89499181eda0f 100644 --- a/web_src/js/utils.js +++ b/web_src/js/utils.js @@ -39,11 +39,6 @@ export function parseUrl(str) { return new URL(str, str.startsWith('http') ? undefined : window.location.origin); } -// return current locale chosen by user -export function getCurrentLocale() { - return document.documentElement.lang; -} - // given a month (0-11), returns it in the documents language export function translateMonth(month) { return new Date(Date.UTC(2022, month, 12)).toLocaleString(getCurrentLocale(), {month: 'short', timeZone: 'UTC'}); diff --git a/web_src/js/utils/time.js b/web_src/js/utils/time.js index daf90c30843da..69a49c4aa2eb7 100644 --- a/web_src/js/utils/time.js +++ b/web_src/js/utils/time.js @@ -48,6 +48,7 @@ export function fillEmptyStartDaysWithZeroes(startDays, data) { // TODO: replace with Intl.Locale.prototype.getHourCycles once there is broad browser support const use24h = Number.isInteger(Number(new Intl.DateTimeFormat([], {hour: 'numeric'}).format())); +// format a date to current local, but with 24h time format as per the user's current locale export function formatDateTime(date) { return new Intl.DateTimeFormat(document.documentElement.lang, { day: 'numeric', From 9fd5c370b0db74e5966f3717b42e23658dcfb5bd Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 23:11:17 +0100 Subject: [PATCH 10/18] tweak comment --- web_src/js/utils/time.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/utils/time.js b/web_src/js/utils/time.js index 69a49c4aa2eb7..8d02b79c8710e 100644 --- a/web_src/js/utils/time.js +++ b/web_src/js/utils/time.js @@ -48,7 +48,7 @@ export function fillEmptyStartDaysWithZeroes(startDays, data) { // TODO: replace with Intl.Locale.prototype.getHourCycles once there is broad browser support const use24h = Number.isInteger(Number(new Intl.DateTimeFormat([], {hour: 'numeric'}).format())); -// format a date to current local, but with 24h time format as per the user's current locale +// format a datetime to document's lang, but with 24h time format from user's current locale export function formatDateTime(date) { return new Intl.DateTimeFormat(document.documentElement.lang, { day: 'numeric', From 3f5244232698931c11009af150f2dc3f438daa43 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 23:16:36 +0100 Subject: [PATCH 11/18] make it easier to grep --- web_src/js/modules/tippy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index 0c4794c11428c..250926aaae513 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -96,7 +96,7 @@ function attachTooltip(target, content = null) { function switchTitleToTooltip(target) { let title = target.getAttribute('title'); if (title) { - if (target.tagName === 'RELATIVE-TIME') { + if (target.tagName.toLowerCase() === 'relative-time') { const datetime = target.getAttribute('datetime'); if (datetime) { title = formatDateTime(new Date(datetime)); From dae77cb097e4a61865ebcd6ea98a0e191a04bfce Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 23:17:43 +0100 Subject: [PATCH 12/18] tweak --- web_src/js/utils/time.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/utils/time.js b/web_src/js/utils/time.js index 8d02b79c8710e..afa704df59fd9 100644 --- a/web_src/js/utils/time.js +++ b/web_src/js/utils/time.js @@ -48,7 +48,7 @@ export function fillEmptyStartDaysWithZeroes(startDays, data) { // TODO: replace with Intl.Locale.prototype.getHourCycles once there is broad browser support const use24h = Number.isInteger(Number(new Intl.DateTimeFormat([], {hour: 'numeric'}).format())); -// format a datetime to document's lang, but with 24h time format from user's current locale +// format a Date object to document's lang, but with 24h format from user's current locale export function formatDateTime(date) { return new Intl.DateTimeFormat(document.documentElement.lang, { day: 'numeric', From 82d77b657d038ce89b0163b0868a06d310a51d48 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 23:22:46 +0100 Subject: [PATCH 13/18] fix lint --- web_src/js/utils.js | 5 +++++ web_src/js/utils/time.js | 5 +++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/web_src/js/utils.js b/web_src/js/utils.js index 89499181eda0f..ce0fb66343b13 100644 --- a/web_src/js/utils.js +++ b/web_src/js/utils.js @@ -39,6 +39,11 @@ export function parseUrl(str) { return new URL(str, str.startsWith('http') ? undefined : window.location.origin); } +// return current locale chosen by user +export function getCurrentLocale() { + return document.documentElement.lang; +} + // given a month (0-11), returns it in the documents language export function translateMonth(month) { return new Date(Date.UTC(2022, month, 12)).toLocaleString(getCurrentLocale(), {month: 'short', timeZone: 'UTC'}); diff --git a/web_src/js/utils/time.js b/web_src/js/utils/time.js index afa704df59fd9..ac8904026436d 100644 --- a/web_src/js/utils/time.js +++ b/web_src/js/utils/time.js @@ -1,4 +1,5 @@ import dayjs from 'dayjs'; +import {getCurrentLocale} from '../utils.js'; // Returns an array of millisecond-timestamps of start-of-week days (Sundays) export function startDaysBetween(startDate, endDate) { @@ -48,9 +49,9 @@ export function fillEmptyStartDaysWithZeroes(startDays, data) { // TODO: replace with Intl.Locale.prototype.getHourCycles once there is broad browser support const use24h = Number.isInteger(Number(new Intl.DateTimeFormat([], {hour: 'numeric'}).format())); -// format a Date object to document's lang, but with 24h format from user's current locale +// format a Date object to document's locale, but with 24h format from user's current locale export function formatDateTime(date) { - return new Intl.DateTimeFormat(document.documentElement.lang, { + return new Intl.DateTimeFormat(getCurrentLocale(), { day: 'numeric', month: 'short', year: 'numeric', From 3c43d8edbf3cd0b4481eece46e25a0eb7cb53a6d Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 23:24:11 +0100 Subject: [PATCH 14/18] rename func --- web_src/js/components/RepoActionView.vue | 4 ++-- web_src/js/modules/tippy.js | 4 ++-- web_src/js/utils/time.js | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index cc7f95bc11672..de9625b143bab 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -3,7 +3,7 @@ import {SvgIcon} from '../svg.js'; import ActionRunStatus from './ActionRunStatus.vue'; import {createApp} from 'vue'; import {toggleElem} from '../utils/dom.js'; -import {formatDateTime} from '../utils/time.js'; +import {formatDatetime} from '../utils/time.js'; import {renderAnsi} from '../render/ansi.js'; import {POST, DELETE} from '../modules/fetch.js'; @@ -167,7 +167,7 @@ const sfc = { const logTimeStamp = document.createElement('span'); logTimeStamp.className = 'log-time-stamp'; const date = new Date(parseFloat(line.timestamp * 1000)); - const timeStamp = formatDateTime(date); + const timeStamp = formatDatetime(date); logTimeStamp.textContent = timeStamp; toggleElem(logTimeStamp, this.timeVisible['log-time-stamp']); // for "Show seconds" diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index 250926aaae513..ad851f5a0a3ca 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -1,6 +1,6 @@ import tippy, {followCursor} from 'tippy.js'; import {isDocumentFragmentOrElementNode} from '../utils/dom.js'; -import {formatDateTime} from '../utils/time.js'; +import {formatDatetime} from '../utils/time.js'; const visibleInstances = new Set(); @@ -99,7 +99,7 @@ function switchTitleToTooltip(target) { if (target.tagName.toLowerCase() === 'relative-time') { const datetime = target.getAttribute('datetime'); if (datetime) { - title = formatDateTime(new Date(datetime)); + title = formatDatetime(new Date(datetime)); } } target.setAttribute('data-tooltip-content', title); diff --git a/web_src/js/utils/time.js b/web_src/js/utils/time.js index ac8904026436d..2301127ce70df 100644 --- a/web_src/js/utils/time.js +++ b/web_src/js/utils/time.js @@ -50,7 +50,7 @@ export function fillEmptyStartDaysWithZeroes(startDays, data) { const use24h = Number.isInteger(Number(new Intl.DateTimeFormat([], {hour: 'numeric'}).format())); // format a Date object to document's locale, but with 24h format from user's current locale -export function formatDateTime(date) { +export function formatDatetime(date) { return new Intl.DateTimeFormat(getCurrentLocale(), { day: 'numeric', month: 'short', From 1609e08a19947847a3c6d83b231a832b716499aa Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 23:29:12 +0100 Subject: [PATCH 15/18] create dateFormat only once and on-demand --- web_src/js/utils/time.js | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/web_src/js/utils/time.js b/web_src/js/utils/time.js index 2301127ce70df..497541468ce39 100644 --- a/web_src/js/utils/time.js +++ b/web_src/js/utils/time.js @@ -46,18 +46,21 @@ export function fillEmptyStartDaysWithZeroes(startDays, data) { return Object.values(result); } -// TODO: replace with Intl.Locale.prototype.getHourCycles once there is broad browser support -const use24h = Number.isInteger(Number(new Intl.DateTimeFormat([], {hour: 'numeric'}).format())); +let dateFormat; // format a Date object to document's locale, but with 24h format from user's current locale export function formatDatetime(date) { - return new Intl.DateTimeFormat(getCurrentLocale(), { - day: 'numeric', - month: 'short', - year: 'numeric', - hour: 'numeric', - hour12: !use24h, - minute: '2-digit', - timeZoneName: 'short', - }).format(date); + if (!dateFormat) { + // TODO: replace `hour12` with `Intl.Locale.prototype.getHourCycles`` once there is broad browser support + dateFormat = new Intl.DateTimeFormat(getCurrentLocale(), { + day: 'numeric', + month: 'short', + year: 'numeric', + hour: 'numeric', + hour12: !Number.isInteger(Number(new Intl.DateTimeFormat([], {hour: 'numeric'}).format())), + minute: '2-digit', + timeZoneName: 'short', + }); + } + return dateFormat.format(date); } From 89837c69d3854948d985a07559cdd9b5b0a648ee Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 23:29:30 +0100 Subject: [PATCH 16/18] typo --- web_src/js/utils/time.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/utils/time.js b/web_src/js/utils/time.js index 497541468ce39..c8ca341d2adc1 100644 --- a/web_src/js/utils/time.js +++ b/web_src/js/utils/time.js @@ -51,7 +51,7 @@ let dateFormat; // format a Date object to document's locale, but with 24h format from user's current locale export function formatDatetime(date) { if (!dateFormat) { - // TODO: replace `hour12` with `Intl.Locale.prototype.getHourCycles`` once there is broad browser support + // TODO: replace `hour12` with `Intl.Locale.prototype.getHourCycles` once there is broad browser support dateFormat = new Intl.DateTimeFormat(getCurrentLocale(), { day: 'numeric', month: 'short', From e43a5a00422f873b3f0a1a4cfe7f277d7e6432db Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 23:30:53 +0100 Subject: [PATCH 17/18] add comment --- web_src/js/modules/tippy.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index ad851f5a0a3ca..489afc0ae1cfa 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -96,6 +96,7 @@ function attachTooltip(target, content = null) { function switchTitleToTooltip(target) { let title = target.getAttribute('title'); if (title) { + // apply custom formatting to relative-time's tooltips if (target.tagName.toLowerCase() === 'relative-time') { const datetime = target.getAttribute('datetime'); if (datetime) { From 2918a926d3493087250dd90146d5492aa85c776c Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 7 Mar 2024 23:32:36 +0100 Subject: [PATCH 18/18] update comment --- web_src/js/utils/time.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web_src/js/utils/time.js b/web_src/js/utils/time.js index c8ca341d2adc1..1848792c984c9 100644 --- a/web_src/js/utils/time.js +++ b/web_src/js/utils/time.js @@ -48,7 +48,8 @@ export function fillEmptyStartDaysWithZeroes(startDays, data) { let dateFormat; -// format a Date object to document's locale, but with 24h format from user's current locale +// format a Date object to document's locale, but with 24h format from user's current locale because this +// option is a personal preference of the user, not something that the document's locale should dictate. export function formatDatetime(date) { if (!dateFormat) { // TODO: replace `hour12` with `Intl.Locale.prototype.getHourCycles` once there is broad browser support