Fixes: https://github.com/go-gitea/gitea/issues/28371 Fixed by using a JS solution that formats according to `lang`, but alters the 24h format setting as per user's locale. This will work for all tooltips: <img width="243" alt="Screenshot 2024-03-07 at 23 03 35" src="https://github.com/go-gitea/gitea/assets/115237/6d16c71c-6786-4eda-8cdc-50ec68ba62c6"> <img width="250" alt="Screenshot 2024-03-07 at 23 03 17" src="https://github.com/go-gitea/gitea/assets/115237/4e26bbb7-12df-4b81-bd37-14705e87e8f7"> <img width="310" alt="Screenshot 2024-03-07 at 23 14 34" src="https://github.com/go-gitea/gitea/assets/115237/1ef599f0-6401-4e19-b1da-59cdfc09b0f6"> I think there is only one other place in the UI where we render such absolute dates, which is in the actions view and which I've also fixed: <img width="275" alt="Screenshot 2024-03-07 at 23 04 00" src="https://github.com/go-gitea/gitea/assets/115237/df0fbe1f-96ee-4338-ab5e-2b10e215005d">tags/v1.22.0-rc0
@@ -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" |
@@ -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,15 @@ function attachTooltip(target, content = null) { | |||
} | |||
function switchTitleToTooltip(target) { | |||
const title = target.getAttribute('title'); | |||
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) { | |||
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 |
@@ -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) { | |||
@@ -44,3 +45,23 @@ export function fillEmptyStartDaysWithZeroes(startDays, data) { | |||
return Object.values(result); | |||
} | |||
let dateFormat; | |||
// 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 | |||
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); | |||
} |