diff options
| author | Yarden Shoham <git@yardenshoham.com> | 2023-04-11 02:01:20 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-04-11 01:01:20 +0200 |
| commit | b7b58348317cbe0145dc453d45c886b8e2764b4c (patch) | |
| tree | cec91679aaba2b2d74242e6acdc7d9a8f8d3f213 | |
| parent | 2b91841cd3e1213ff3e4ed4209d6a4be89c2fa79 (diff) | |
| download | gitea-b7b58348317cbe0145dc453d45c886b8e2764b4c.tar.gz gitea-b7b58348317cbe0145dc453d45c886b8e2764b4c.zip | |
Use auto-updating, natively hoverable, localized time elements (#23988)
- Added [GitHub's `relative-time` element](https://github.com/github/relative-time-element)
- Converted all formatted timestamps to use this element
- No more flashes of unstyled content around time elements
- These elements are localized using the `lang` property of the HTML file
- Relative (e.g. the activities in the dashboard) and duration (e.g.
server uptime in the admin page) time elements are auto-updated to keep
up with the current time without refreshing the page
- Code that is not needed anymore such as `formatting.js` and parts of `since.go` have been deleted
Replaces #21440
Follows #22861
## Screenshots
### Localized
### Tooltips
#### Native for dates
#### Interactive for relative
### Auto-update
---------
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: delvh <dev.lh@web.de>
45 files changed, 111 insertions, 336 deletions
diff --git a/modules/templates/helper.go b/modules/templates/helper.go index 40a79d9578..f93419fe87 100644 --- a/modules/templates/helper.go +++ b/modules/templates/helper.go @@ -138,7 +138,7 @@ func NewFuncMap() []template.FuncMap { "TimeSinceUnix": timeutil.TimeSinceUnix, "Sec2Time": util.SecToTime, "DateFmtLong": func(t time.Time) string { - return t.Format(time.RFC1123Z) + return t.Format(time.RFC3339) }, "LoadTimes": func(startTime time.Time) string { return fmt.Sprint(time.Since(startTime).Nanoseconds()/1e6) + "ms" diff --git a/modules/timeutil/since.go b/modules/timeutil/since.go index daa5e15419..bdde54c617 100644 --- a/modules/timeutil/since.go +++ b/modules/timeutil/since.go @@ -6,11 +6,9 @@ package timeutil import ( "fmt" "html/template" - "math" "strings" "time" - "code.gitea.io/gitea/modules/setting" "code.gitea.io/gitea/modules/translation" ) @@ -24,10 +22,6 @@ const ( Year = 12 * Month ) -func round(s float64) int64 { - return int64(math.Round(s)) -} - func computeTimeDiffFloor(diff int64, lang translation.Locale) (int64, string) { diffStr := "" switch { @@ -86,94 +80,6 @@ func computeTimeDiffFloor(diff int64, lang translation.Locale) (int64, string) { return diff, diffStr } -func computeTimeDiff(diff int64, lang translation.Locale) (int64, string) { - diffStr := "" - switch { - case diff <= 0: - diff = 0 - diffStr = lang.Tr("tool.now") - case diff < 2: - diff = 0 - diffStr = lang.Tr("tool.1s") - case diff < 1*Minute: - diffStr = lang.Tr("tool.seconds", diff) - diff = 0 - - case diff < Minute+Minute/2: - diff -= 1 * Minute - diffStr = lang.Tr("tool.1m") - case diff < 1*Hour: - minutes := round(float64(diff) / Minute) - if minutes > 1 { - diffStr = lang.Tr("tool.minutes", minutes) - } else { - diffStr = lang.Tr("tool.1m") - } - diff -= diff / Minute * Minute - - case diff < Hour+Hour/2: - diff -= 1 * Hour - diffStr = lang.Tr("tool.1h") - case diff < 1*Day: - hours := round(float64(diff) / Hour) - if hours > 1 { - diffStr = lang.Tr("tool.hours", hours) - } else { - diffStr = lang.Tr("tool.1h") - } - diff -= diff / Hour * Hour - - case diff < Day+Day/2: - diff -= 1 * Day - diffStr = lang.Tr("tool.1d") - case diff < 1*Week: - days := round(float64(diff) / Day) - if days > 1 { - diffStr = lang.Tr("tool.days", days) - } else { - diffStr = lang.Tr("tool.1d") - } - diff -= diff / Day * Day - - case diff < Week+Week/2: - diff -= 1 * Week - diffStr = lang.Tr("tool.1w") - case diff < 1*Month: - weeks := round(float64(diff) / Week) - if weeks > 1 { - diffStr = lang.Tr("tool.weeks", weeks) - } else { - diffStr = lang.Tr("tool.1w") - } - diff -= diff / Week * Week - - case diff < 1*Month+Month/2: - diff -= 1 * Month - diffStr = lang.Tr("tool.1mon") - case diff < 1*Year: - months := round(float64(diff) / Month) - if months > 1 { - diffStr = lang.Tr("tool.months", months) - } else { - diffStr = lang.Tr("tool.1mon") - } - diff -= diff / Month * Month - - case diff < Year+Year/2: - diff -= 1 * Year - diffStr = lang.Tr("tool.1y") - default: - years := round(float64(diff) / Year) - if years > 1 { - diffStr = lang.Tr("tool.years", years) - } else { - diffStr = lang.Tr("tool.1y") - } - diff -= (diff / Year) * Year - } - return diff, diffStr -} - // MinutesToFriendly returns a user friendly string with number of minutes // converted to hours and minutes. func MinutesToFriendly(minutes int, lang translation.Locale) string { @@ -208,43 +114,14 @@ func timeSincePro(then, now time.Time, lang translation.Locale) string { return strings.TrimPrefix(timeStr, ", ") } -func timeSince(then, now time.Time, lang translation.Locale) string { - return timeSinceUnix(then.Unix(), now.Unix(), lang) -} - -func timeSinceUnix(then, now int64, lang translation.Locale) string { - lbl := "tool.ago" - diff := now - then - if then > now { - lbl = "tool.from_now" - diff = then - now - } - if diff <= 0 { - return lang.Tr("tool.now") - } - - _, diffStr := computeTimeDiff(diff, lang) - return lang.Tr(lbl, diffStr) -} - -// TimeSince calculates the time interval and generate user-friendly string. +// TimeSince renders relative time HTML given a time.Time func TimeSince(then time.Time, lang translation.Locale) template.HTML { - return htmlTimeSince(then, time.Now(), lang) + timestamp := then.UTC().Format(time.RFC3339) + // declare data-tooltip-content attribute to switch from "title" tooltip to "tippy" tooltip + return template.HTML(fmt.Sprintf(`<relative-time class="time-since" prefix="%s" datetime="%s" data-tooltip-content data-tooltip-interactive="true">%s</relative-time>`, lang.Tr("on_date"), timestamp, timestamp)) } -func htmlTimeSince(then, now time.Time, lang translation.Locale) template.HTML { - return template.HTML(fmt.Sprintf(`<span class="time-since" data-tooltip-content="%s" data-tooltip-interactive="true">%s</span>`, - then.In(setting.DefaultUILocation).Format(GetTimeFormat(lang.Language())), - timeSince(then, now, lang))) -} - -// TimeSinceUnix calculates the time interval and generate user-friendly string. +// TimeSinceUnix renders relative time HTML given a TimeStamp func TimeSinceUnix(then TimeStamp, lang translation.Locale) template.HTML { - return htmlTimeSinceUnix(then, TimeStamp(time.Now().Unix()), lang) -} - -func htmlTimeSinceUnix(then, now TimeStamp, lang translation.Locale) template.HTML { - return template.HTML(fmt.Sprintf(`<span class="time-since" data-tooltip-content="%s" data-tooltip-interactive="true">%s</span>`, - then.FormatInLocation(GetTimeFormat(lang.Language()), setting.DefaultUILocation), - timeSinceUnix(int64(then), int64(now), lang))) + return TimeSince(then.AsLocalTime(), lang) } diff --git a/modules/timeutil/since_test.go b/modules/timeutil/since_test.go index 9a037c7bd0..40fefe8700 100644 --- a/modules/timeutil/since_test.go +++ b/modules/timeutil/since_test.go @@ -5,7 +5,6 @@ package timeutil import ( "context" - "fmt" "os" "testing" "time" @@ -40,46 +39,6 @@ func TestMain(m *testing.M) { os.Exit(retVal) } -func TestTimeSince(t *testing.T) { - assert.Equal(t, "now", timeSince(BaseDate, BaseDate, translation.NewLocale("en-US"))) - - // test that each diff in `diffs` yields the expected string - test := func(expected string, diffs ...time.Duration) { - t.Run(expected, func(t *testing.T) { - for _, diff := range diffs { - actual := timeSince(BaseDate, BaseDate.Add(diff), translation.NewLocale("en-US")) - assert.Equal(t, translation.NewLocale("en-US").Tr("tool.ago", expected), actual) - actual = timeSince(BaseDate.Add(diff), BaseDate, translation.NewLocale("en-US")) - assert.Equal(t, translation.NewLocale("en-US").Tr("tool.from_now", expected), actual) - } - }) - } - test("1 second", time.Second, time.Second+50*time.Millisecond) - test("2 seconds", 2*time.Second, 2*time.Second+50*time.Millisecond) - test("1 minute", time.Minute, time.Minute+29*time.Second) - test("2 minutes", 2*time.Minute, time.Minute+30*time.Second) - test("2 minutes", 2*time.Minute, 2*time.Minute+29*time.Second) - test("1 hour", time.Hour, time.Hour+29*time.Minute) - test("2 hours", 2*time.Hour, time.Hour+30*time.Minute) - test("2 hours", 2*time.Hour, 2*time.Hour+29*time.Minute) - test("3 hours", 3*time.Hour, 2*time.Hour+30*time.Minute) - test("1 day", DayDur, DayDur+11*time.Hour) - test("2 days", 2*DayDur, DayDur+12*time.Hour) - test("2 days", 2*DayDur, 2*DayDur+11*time.Hour) - test("3 days", 3*DayDur, 2*DayDur+12*time.Hour) - test("1 week", WeekDur, WeekDur+3*DayDur) - test("2 weeks", 2*WeekDur, WeekDur+4*DayDur) - test("2 weeks", 2*WeekDur, 2*WeekDur+3*DayDur) - test("3 weeks", 3*WeekDur, 2*WeekDur+4*DayDur) - test("1 month", MonthDur, MonthDur+14*DayDur) - test("2 months", 2*MonthDur, MonthDur+15*DayDur) - test("2 months", 2*MonthDur, 2*MonthDur+14*DayDur) - test("1 year", YearDur, YearDur+5*MonthDur) - test("2 years", 2*YearDur, YearDur+6*MonthDur) - test("2 years", 2*YearDur, 2*YearDur+5*MonthDur) - test("3 years", 3*YearDur, 2*YearDur+6*MonthDur) -} - func TestTimeSincePro(t *testing.T) { assert.Equal(t, "now", timeSincePro(BaseDate, BaseDate, translation.NewLocale("en-US"))) @@ -113,60 +72,6 @@ func TestTimeSincePro(t *testing.T) { 12*time.Minute+17*time.Second) } -func TestHtmlTimeSince(t *testing.T) { - setting.TimeFormat = time.UnixDate - setting.DefaultUILocation = time.UTC - // test that `diff` yields a result containing `expected` - test := func(expected string, diff time.Duration) { - actual := htmlTimeSince(BaseDate, BaseDate.Add(diff), translation.NewLocale("en-US")) - assert.Contains(t, actual, `data-tooltip-content="Sat Jan 1 00:00:00 UTC 2000"`) - assert.Contains(t, actual, expected) - } - test("1 second", time.Second) - test("3 minutes", 3*time.Minute+5*time.Second) - test("1 day", DayDur+11*time.Hour) - test("1 week", WeekDur+3*DayDur) - test("3 months", 3*MonthDur+2*WeekDur) - test("2 years", 2*YearDur) - test("3 years", 2*YearDur+11*MonthDur+4*WeekDur) -} - -func TestComputeTimeDiff(t *testing.T) { - // test that for each offset in offsets, - // computeTimeDiff(base + offset) == (offset, str) - test := func(base int64, str string, offsets ...int64) { - for _, offset := range offsets { - t.Run(fmt.Sprintf("%s:%d", str, offset), func(t *testing.T) { - diff, diffStr := computeTimeDiff(base+offset, translation.NewLocale("en-US")) - assert.Equal(t, offset, diff) - assert.Equal(t, str, diffStr) - }) - } - } - test(0, "now", 0) - test(1, "1 second", 0) - test(2, "2 seconds", 0) - test(Minute, "1 minute", 0, 1, 29) - test(Minute, "2 minutes", 30, Minute-1) - test(2*Minute, "2 minutes", 0, 29) - test(2*Minute, "3 minutes", 30, Minute-1) - test(Hour, "1 hour", 0, 1, 29*Minute) - test(Hour, "2 hours", 30*Minute, Hour-1) - test(5*Hour, "5 hours", 0, 29*Minute) - test(Day, "1 day", 0, 1, 11*Hour) - test(Day, "2 days", 12*Hour, Day-1) - test(5*Day, "5 days", 0, 11*Hour) - test(Week, "1 week", 0, 1, 3*Day) - test(Week, "2 weeks", 4*Day, Week-1) - test(3*Week, "3 weeks", 0, 3*Day) - test(Month, "1 month", 0, 1) - test(Month, "2 months", 16*Day, Month-1) - test(10*Month, "10 months", 0, 13*Day) - test(Year, "1 year", 0, 179*Day) - test(Year, "2 years", 180*Day, Year-1) - test(3*Year, "3 years", 0, 179*Day) -} - func TestMinutesToFriendly(t *testing.T) { // test that a number of minutes yields the expected string test := func(expected string, minutes int) { diff --git a/modules/timeutil/timestamp.go b/modules/timeutil/timestamp.go index c8e0d4bdc1..c60d287fae 100644 --- a/modules/timeutil/timestamp.go +++ b/modules/timeutil/timestamp.go @@ -64,9 +64,8 @@ func (ts TimeStamp) AsLocalTime() time.Time { } // AsTimeInLocation convert timestamp as time.Time in Local locale -func (ts TimeStamp) AsTimeInLocation(loc *time.Location) (tm time.Time) { - tm = time.Unix(int64(ts), 0).In(loc) - return tm +func (ts TimeStamp) AsTimeInLocation(loc *time.Location) time.Time { + return time.Unix(int64(ts), 0).In(loc) } // AsTimePtr convert timestamp as *time.Time in Local locale diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index bd7e64fc6d..08b23e0387 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -112,6 +112,8 @@ never = Never rss_feed = RSS Feed +on_date = on + [aria] navbar = Navigation Bar footer = Footer @@ -3191,7 +3193,6 @@ details.documentation_site = Documentation Site details.license = License assets = Assets versions = Versions -versions.on = on versions.view_all = View all dependency.id = ID dependency.version = Version diff --git a/package-lock.json b/package-lock.json index 3d565d7864..e857bc137c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@citation-js/plugin-software-formats": "0.6.1", "@claviska/jquery-minicolors": "2.3.6", "@github/markdown-toolbar-element": "2.1.1", + "@github/relative-time-element": "4.2.4", "@github/text-expander-element": "2.3.0", "@mcaptcha/vanilla-glue": "0.1.0-alpha-3", "@primer/octicons": "18.3.0", @@ -851,6 +852,11 @@ "resolved": "https://registry.npmjs.org/@github/markdown-toolbar-element/-/markdown-toolbar-element-2.1.1.tgz", "integrity": "sha512-J++rpd5H9baztabJQB82h26jtueOeBRSTqetk9Cri+Lj/s28ndu6Tovn0uHQaOKtBWDobFunk9b5pP5vcqt7cA==" }, + "node_modules/@github/relative-time-element": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.2.4.tgz", + "integrity": "sha512-18qgH9FYUHYN9K3z4s35auDHww1dKTU6TacI8JkA5OuvHVa1lTMuSTZ4hIoJngD5+mizcoRMOs6p/yZYMIjsyg==" + }, "node_modules/@github/text-expander-element": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.3.0.tgz", diff --git a/package.json b/package.json index 829b9f4ad0..57dcfc2f7f 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@citation-js/plugin-software-formats": "0.6.1", "@claviska/jquery-minicolors": "2.3.6", "@github/markdown-toolbar-element": "2.1.1", + "@github/relative-time-element": "4.2.4", "@github/text-expander-element": "2.3.0", "@mcaptcha/vanilla-glue": "0.1.0-alpha-3", "@primer/octicons": "18.3.0", diff --git a/routers/web/admin/admin.go b/routers/web/admin/admin.go index 0a51000c70..9847a6d923 100644 --- a/routers/web/admin/admin.go +++ b/routers/web/admin/admin.go @@ -18,8 +18,6 @@ import ( "code.gitea.io/gitea/modules/process" "code.gitea.io/gitea/modules/queue" "code.gitea.io/gitea/modules/setting" - "code.gitea.io/gitea/modules/timeutil" - "code.gitea.io/gitea/modules/translation" "code.gitea.io/gitea/modules/updatechecker" "code.gitea.io/gitea/modules/web" "code.gitea.io/gitea/services/cron" @@ -34,7 +32,7 @@ const ( ) var sysStatus struct { - Uptime string + StartTime string NumGoroutine int // General statistics. @@ -75,7 +73,7 @@ var sysStatus struct { } func updateSystemStatus() { - sysStatus.Uptime = timeutil.TimeSincePro(setting.AppStartTime, translation.NewLocale("en-US")) + sysStatus.StartTime = setting.AppStartTime.Format(time.RFC3339) m := new(runtime.MemStats) runtime.ReadMemStats(m) diff --git a/templates/admin/auth/list.tmpl b/templates/admin/auth/list.tmpl index c431c79cb5..3b8d17ff7d 100644 --- a/templates/admin/auth/list.tmpl +++ b/templates/admin/auth/list.tmpl @@ -29,8 +29,8 @@ <td><a href="{{AppSubUrl}}/admin/auths/{{.ID}}">{{.Name}}</a></td> <td>{{.TypeName}}</td> <td>{{if .IsActive}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td> - <td><span data-tooltip-content="{{.UpdatedUnix.FormatShort}}"><time data-format="short-date" datetime="{{.UpdatedUnix.FormatLong}}">{{.UpdatedUnix.FormatShort}}</time></span></td> - <td><span data-tooltip-content="{{.CreatedUnix.FormatLong}}"><time data-format="short-date" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</time></span></td> + <td>{{template "shared/datetime/short" (dict "Datetime" .UpdatedUnix.FormatLong "Fallback" .UpdatedUnix.FormatShort)}}</td> + <td>{{template "shared/datetime/short" (dict "Datetime" .CreatedUnix.FormatLong "Fallback" .CreatedUnix.FormatShort)}}</td> <td><a href="{{AppSubUrl}}/admin/auths/{{.ID}}">{{svg "octicon-pencil"}}</a></td> </tr> {{end}} diff --git a/templates/admin/cron.tmpl b/templates/admin/cron.tmpl index 29e4bc09bc..51685112ba 100644 --- a/templates/admin/cron.tmpl +++ b/templates/admin/cron.tmpl @@ -21,8 +21,8 @@ <td><button type="submit" class="ui green button" name="op" value="{{.Name}}" title="{{$.locale.Tr "admin.dashboard.operation_run"}}">{{svg "octicon-triangle-right"}}</button></td> <td>{{$.locale.Tr (printf "admin.dashboard.%s" .Name)}}</td> <td>{{.Spec}}</td> - <td>{{DateFmtLong .Next}}</td> - <td>{{if gt .Prev.Year 1}}{{DateFmtLong .Prev}}{{else}}N/A{{end}}</td> + <td>{{template "shared/datetime/full" (dict "Datetime" (DateFmtLong .Next) "Fallback" (DateFmtLong .Next) )}}</td> + <td>{{if gt .Prev.Year 1}}{{template "shared/datetime/full" (dict "Datetime" (DateFmtLong .Prev) "Fallback" (DateFmtLong .Prev) )}}{{else}}N/A{{end}}</td> <td>{{.ExecTimes}}</td> <td {{if ne .Status ""}}data-tooltip-content="{{.FormatLastMessage $.locale}}"{{end}} >{{if eq .Status ""}}—{{else if eq .Status "finished"}}{{svg "octicon-check" 16}}{{else}}{{svg "octicon-x" 16}}{{end}}</td> </tr> diff --git a/templates/admin/dashboard.tmpl b/templates/admin/dashboard.tmpl index d2ba1e2b01..fc1b1f4385 100644 --- a/templates/admin/dashboard.tmpl +++ b/templates/admin/dashboard.tmpl @@ -83,7 +83,7 @@ <div class="ui attached table segment"> <dl class="dl-horizontal admin-dl-horizontal"> <dt>{{.locale.Tr "admin.dashboard.server_uptime"}}</dt> - <dd>{{.SysStatus.Uptime}}</dd> + <dd><relative-time format="duration" datetime="{{.SysStatus.StartTime}}">{{.SysStatus.StartTime}}</relative-time></dd> <dt>{{.locale.Tr "admin.dashboard.current_goroutine"}}</dt> <dd>{{.SysStatus.NumGoroutine}}</dd> <div class="ui divider"></div> diff --git a/templates/admin/notice.tmpl b/templates/admin/notice.tmpl index bfe4762350..dd17bde036 100644 --- a/templates/admin/notice.tmpl +++ b/templates/admin/notice.tmpl @@ -29,7 +29,7 @@ <td>{{.ID}}</td> <td>{{$.locale.Tr .TrStr}}</td> <td class="view-detail"><span class="notice-description text truncate">{{.Description}}</span></td> - <td><span class="notice-created-time" data-tooltip-content="{{.CreatedUnix.AsTime}}"><time data-format="short-date" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</time></span></td> + <td>{{template "shared/datetime/short" (dict "Datetime" .CreatedUnix.FormatLong "Fallback" .CreatedUnix.FormatShort)}}</td> <td><a href="#">{{svg "octicon-note" 16 "view-detail"}}</a></td> </tr> {{end}} diff --git a/templates/admin/org/list.tmpl b/templates/admin/org/list.tmpl index 9bf7a6268e..f114b90fc7 100644 --- a/templates/admin/org/list.tmpl +++ b/templates/admin/org/list.tmpl @@ -44,7 +44,7 @@ <td>{{.NumTeams}}</td> <td>{{.NumMembers}}</td> <td>{{.NumRepos}}</td> - <td><span title="{{.CreatedUnix.FormatLong}}"><time data-format="short-date" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</time></span></td> + <td>{{template "shared/datetime/short" (dict "Datetime" .CreatedUnix.FormatLong "Fallback" .CreatedUnix.FormatShort)}}</td> <td><a href="{{.OrganisationLink}}/settings">{{svg "octicon-pencil"}}</a></td> </tr> {{end}} diff --git a/templates/admin/packages/list.tmpl b/templates/admin/packages/list.tmpl index bb36ca1ae3..121f575861 100644 --- a/templates/admin/packages/list.tmpl +++ b/templates/admin/packages/list.tmpl @@ -68,7 +68,7 @@ {{end}} </td> <td>{{FileSize .CalculateBlobSize}}</td> - <td><span title="{{.Version.CreatedUnix.FormatLong}}"><time data-format="short-date" datetime="{{.Version.CreatedUnix.FormatLong}}">{{.Version.CreatedUnix.FormatShort}}</time></span></td> + <td>{{template "shared/datetime/short" (dict "Datetime" .Version.CreatedUnix.FormatLong "Fallback" .Version.CreatedUnix.FormatShort)}}</td> <td><a class="delete-button" href="" data-url="{{$.Link}}/delete?page={{$.Page.Paginater.Current}}&sort={{$.SortType}}" data-id="{{.Version.ID}}" data-name="{{.Package.Name}}" data-data-version="{{.Version.Version}}">{{svg "octicon-trash"}}</a></td> </tr> {{end}} diff --git a/templates/admin/process-row.tmpl b/templates/admin/process-row.tmpl index 477bf5a41e..8fd2d1af70 100644 --- a/templates/admin/process-row.tmpl +++ b/templates/admin/process-row.tmpl @@ -3,7 +3,7 @@ <div class="icon gt-ml-3 gt-mr-3">{{if eq .Process.Type "request"}}{{svg "octicon-globe" 16}}{{else if eq .Process.Type "system"}}{{svg "octicon-cpu" 16}}{{else}}{{svg "octicon-terminal" 16}}{{end}}</div> <div class="content gt-f1"> <div class="header">{{.Process.Description}}</div> - <div class="description"><span title="{{DateFmtLong .Process.Start}}">{{TimeSince .Process.Start .root.locale}}</span></div> + <div class="description">{{TimeSince .Process.Start .root.locale}}</div> </div> <div> {{if ne .Process.Type "system"}} diff --git a/templates/admin/queue.tmpl b/templates/admin/queue.tmpl index 19dd70da12..767c235a38 100644 --- a/templates/admin/queue.tmpl +++ b/templates/admin/queue.tmpl @@ -158,8 +158,8 @@ {{range .Queue.Workers}} <tr> <td>{{.Workers}}{{if .IsFlusher}}<span title="{{$.locale.Tr "admin.monitor.queue.flush"}}">{{svg "octicon-sync"}}</span>{{end}}</td> - <td>{{DateFmtLong .Start}}</td> - <td>{{if .HasTimeout}}{{DateFmtLong .Timeout}}{{else}}-{{end}}</td> + <td>{{template "shared/datetime/full" (dict "Datetime" (DateFmtLong .Start) "Fallback" (DateFmtLong .Start) )}}</td> + <td>{{if .HasTimeout}}{{template "shared/datetime/full" (dict "Datetime" (DateFmtLong .Timeout) "Fallback" (DateFmtLong .Timeout) )}}{{else}}-{{end}}</td> <td> <a class="delete-button" href="" data-url="{{$.Link}}/cancel/{{.PID}}" data-id="{{.PID}}" data-name="{{.Workers}}" title="{{$.locale.Tr "remove"}}">{{svg "octicon-trash"}}</a> </td> diff --git a/templates/admin/repo/list.tmpl b/templates/admin/repo/list.tmpl index 11216b8c86..f8e2bbc844 100644 --- a/templates/admin/repo/list.tmpl +++ b/templates/admin/repo/list.tmpl @@ -83,7 +83,7 @@ <td>{{.NumForks}}</td> <td>{{.NumIssues}}</td> <td>{{FileSize .Size}}</td> - <td><span title="{{.CreatedUnix.FormatLong}}"><time data-format="short-date" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</time></span></td> + <td>{{template "shared/datetime/short" (dict "Datetime" .CreatedUnix.FormatLong "Fallback" .CreatedUnix.FormatShort)}}</td> <td><a class="delete-button" href="" data-url="{{$.Link}}/delete?page={{$.Page.Paginater.Current}}&sort={{$.SortType}}" data-id="{{.ID}}" data-name="{{.Name}}">{{svg "octicon-trash"}}</a></td> </tr> {{end}} diff --git a/templates/admin/stacktrace-row.tmpl b/templates/admin/stacktrace-row.tmpl index e6d2e68cbb..15e51e4aca 100644 --- a/templates/admin/stacktrace-row.tmpl +++ b/templates/admin/stacktrace-row.tmpl @@ -13,7 +13,7 @@ </div> <div class="content gt-f1"> <div class="header">{{.Process.Description}}</div> - <div class="description">{{if ne .Process.Type "none"}}<span title="{{DateFmtLong .Process.Start}}">{{TimeSince .Process.Start .root.locale}}</span>{{end}}</div> + <div class="description">{{if ne .Process.Type "none"}}{{TimeSince .Process.Start .root.locale}}{{end}}</div> </div> <div> {{if or (eq .Process.Type "request") (eq .Process.Type "normal")}} diff --git a/templates/admin/user/list.tmpl b/templates/admin/user/list.tmpl index 88af2172b7..50b9d13619 100644 --- a/templates/admin/user/list.tmpl +++ b/templates/admin/user/list.tmpl @@ -94,9 +94,9 @@ <td>{{if .IsRestricted}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td> <td>{{if index $.UsersTwoFaStatus .ID}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td> <td>{{.NumRepos}}</td> - <td><span title="{{.CreatedUnix.FormatLong}}"><time data-format="short-date" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</time></span></td> + <td>{{template "shared/datetime/short" (dict "Datetime" .CreatedUnix.FormatLong "Fallback" .CreatedUnix.FormatShort)}}</td> {{if .LastLoginUnix}} - <td><span title="{{.LastLoginUnix.FormatLong}}"><time data-format="short-date" datetime="{{.LastLoginUnix.FormatLong}}">{{.LastLoginUnix.FormatShort}}</time></span></td> + <td>{{template "shared/datetime/short" (dict "Datetime" .LastLoginUnix.FormatLong "Fallback" .LastLoginUnix.FormatShort)}}</td> {{else}} <td><span>{{$.locale.Tr "admin.users.never_login"}}</span></td> {{end}} diff --git a/templates/explore/organizations.tmpl b/templates/explore/organizations.tmpl index c763fcffc6..fe9359251b 100644 --- a/templates/explore/organizations.tmpl +++ b/templates/explore/organizations.tmpl @@ -23,7 +23,7 @@ {{svg "octicon-link"}} <a href="{{.Website}}" rel="nofollow">{{.Website}}</a> {{end}} - {{svg "octicon-clock"}} {{$.locale.Tr "user.join_on"}} <time data-format="short-date" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</time> + {{svg "octicon-clock"}} {{$.locale.Tr "user.join_on"}} {{template "shared/datetime/short" (dict "Datetime" .CreatedUnix.FormatLong "Fallback" .CreatedUnix.FormatShort)}} </div> </div> </div> diff --git a/templates/explore/users.tmpl b/templates/explore/users.tmpl index aa397e65b7..5dbc4ef6e7 100644 --- a/templates/explore/users.tmpl +++ b/templates/explore/users.tmpl @@ -18,7 +18,7 @@ {{svg "octicon-mail"}} <a href="mailto:{{.Email}}" rel="nofollow">{{.Email}}</a> {{end}} - {{svg "octicon-clock"}} {{$.locale.Tr "user.join_on"}} <time data-format="short-date" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</time> + {{svg "octicon-clock"}} {{$.locale.Tr "user.join_on"}} {{template "shared/datetime/short" (dict "Datetime" .CreatedUnix.FormatLong "Fallback" .CreatedUnix.FormatShort)}} </div> </div> </div> diff --git a/templates/package/shared/cleanup_rules/preview.tmpl b/templates/package/shared/cleanup_rules/preview.tmpl index c59ad67f77..f9c9bc71f0 100644 --- a/templates/package/shared/cleanup_rules/preview.tmpl +++ b/templates/package/shared/cleanup_rules/preview.tmpl @@ -22,7 +22,7 @@ <td><a href="{{.FullWebLink}}">{{.Version.Version}}</a></td> <td><a href="{{.Creator.HomeLink}}">{{.Creator.Name}}</a></td> <td>{{FileSize .CalculateBlobSize}}</td> - <td><span title="{{.Version.CreatedUnix.FormatLong}}"><time data-format="short-date" datetime="{{.Version.CreatedUnix.FormatLong}}">{{.Version.CreatedUnix.FormatShort}}</time></span></td> + <td>{{template "shared/datetime/short" (dict "Datetime" .Version.CreatedUnix.FormatLong "Fallback" .Version.CreatedUnix.FormatShort)}}</td> </tr> {{else}} <tr> diff --git a/templates/package/view.tmpl b/templates/package/view.tmpl index beadcf5c1e..9677b8eb09 100644 --- a/templates/package/view.tmpl +++ b/templates/package/view.tmpl @@ -86,7 +86,7 @@ {{range .LatestVersions}} <div class="item"> <a href="{{$.PackageDescriptor.PackageWebLink}}/{{PathEscape .LowerVersion}}">{{.Version}}</a> - <span class="text small">{{$.locale.Tr "packages.versions.on"}} {{.CreatedUnix.FormatDate}}</span> + <span class="text small">{{$.locale.Tr "on_date"}} {{.CreatedUnix.FormatDate}}</span> </div> {{end}} </div> diff --git a/templates/repo/activity.tmpl b/templates/repo/activity.tmpl index ae1d426bc0..aa71fe838b 100644 --- a/templates/repo/activity.tmpl +++ b/templates/repo/activity.tmpl @@ -2,7 +2,7 @@ <div role="main" aria-label="{{.Title}}" class="page-content repository commits"> {{template "repo/header" .}} <div class="ui container"> - <h2 class="ui header"><time data-format="date" datetime="{{.DateFrom}}">{{.DateFrom}}</time> - <time data-format="date" datetime="{{.DateUntil}}">{{.DateUntil}}</time> + <h2 class="ui header">{{template "shared/datetime/long" (dict "Datetime" .DateFrom "Fallback" .DateFrom)}} - {{template "shared/datetime/long" (dict "Datetime" .DateUntil "Fallback" .DateUntil)}} <div class="ui right"> <!-- Period --> <div class="ui floating dropdown jump filter"> diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl index 521d6ba1d3..a2f12083c6 100644 --- a/templates/repo/issue/view_content/sidebar.tmpl +++ b/templates/repo/issue/view_content/sidebar.tmpl @@ -385,7 +385,7 @@ <div class="gt-df gt-sb gt-ac"> <div class="due-date {{if .Issue.IsOverdue}}text red{{end}}" {{if .Issue.IsOverdue}}data-tooltip-content="{{.locale.Tr "repo.issues.due_date_overdue"}}"{{end}}> {{svg "octicon-calendar" 16 "gt-mr-3"}} - <time data-format="date" datetime="{{.Issue.DeadlineUnix.FormatDate}}">{{.Issue.DeadlineUnix.FormatDate}}</time> + {{template "shared/datetime/long" (dict "Datetime" .Issue.DeadlineUnix.FormatDate "Fallback" .Issue.DeadlineUnix.FormatDate)}} </div> <div> {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}} diff --git a/templates/repo/settings/deploy_keys.tmpl b/templates/repo/settings/deploy_keys.tmpl index 952d1b8418..33f3937201 100644 --- a/templates/repo/settings/deploy_keys.tmpl +++ b/templates/repo/settings/deploy_keys.tmpl @@ -64,7 +64,7 @@ {{.Fingerprint}} </div> <div class="activity meta"> - <i>{{$.locale.Tr "settings.add_on"}} <span><time data-format="short-date" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</time></span> — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}><time data-format="short-date" datetime="{{.UpdatedUnix.FormatLong}}">{{.UpdatedUnix.FormatShort}}</time></span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}} - <span>{{$.locale.Tr "settings.can_read_info"}}{{if not .IsReadOnly}} / {{$.locale.Tr "settings.can_write_info"}} {{end}}</span></i> + <i>{{$.locale.Tr "settings.add_on"}} <span>{{template "shared/datetime/short" (dict "Datetime" .CreatedUnix.FormatLong "Fallback" .CreatedUnix.FormatShort)}}</span> — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{template "shared/datetime/short" (dict "Datetime" .UpdatedUnix.FormatLong "Fallback" .UpdatedUnix.FormatShort)}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}} - <span>{{$.locale.Tr "settings.can_read_info"}}{{if not .IsReadOnly}} / {{$.locale.Tr "settings.can_write_info"}} {{end}}</span></i> </div> </div> </div> diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl index 023be5cee4..1aaf58ee91 100644 --- a/templates/repo/settings/options.tmpl +++ b/templates/repo/settings/options.tmpl @@ -93,7 +93,7 @@ <tr> <td>{{(MirrorRemoteAddress $.Context .Repository .Mirror.GetRemoteName false).Address}}</td> <td>{{$.locale.Tr "repo.settings.mirror_settings.direction.pull"}}</td> - <td><time data-format="date-time" datetime="{{.Mirror.UpdatedUnix.FormatLong}}">{{.Mirror.UpdatedUnix.AsTime}}</time></td> + <td>{{template "shared/datetime/full" (dict "Datetime" .Mirror.UpdatedUnix.FormatLong "Fallback" .Mirror.UpdatedUnix.AsTime)}}</td> <td class="right aligned"> <form method="post" style="display: inline-block"> {{.CsrfTokenHtml}} @@ -171,7 +171,7 @@ {{$address := MirrorRemoteAddress $.Context $.Repository .GetRemoteName true}} <td>{{$address.Address}}</td> <td>{{$.locale.Tr "repo.settings.mirror_settings.direction.push"}}</td> - <td>{{if .LastUpdateUnix}}<time data-format="date-time" datetime="{{.LastUpdateUnix.FormatLong}}">{{.LastUpdateUnix.AsTime}}</time>{{else}}{{$.locale.Tr "never"}}{{end}} {{if .LastError}}<div class="ui red label" data-tooltip-content="{{.LastError}}">{{$.locale.Tr "error"}}</div>{{end}}</td> + <td>{{if .LastUpdateUnix}}{{template "shared/datetime/full" (dict "Datetime" .LastUpdateUnix.FormatLong "Fallback" .LastUpdateUnix.AsTime)}}{{else}}{{$.locale.Tr "never"}}{{end}} {{if .LastError}}<div class="ui red label" data-tooltip-content="{{.LastError}}">{{$.locale.Tr "error"}}</div>{{end}}</td> <td class="right aligned"> <form method="post" style="display: inline-block"> {{$.CsrfTokenHtml}} diff --git a/templates/repo/user_cards.tmpl b/templates/repo/user_cards.tmpl index b7bc3060b2..a48fd41744 100644 --- a/templates/repo/user_cards.tmpl +++ b/templates/repo/user_cards.tmpl @@ -18,7 +18,7 @@ {{else if .Location}} {{svg "octicon-location"}} {{.Location}} {{else}} - {{svg "octicon-clock"}} {{$.locale.Tr "user.join_on"}} <time data-format="short-date" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</time> + {{svg "octicon-clock"}} {{$.locale.Tr "user.join_on"}} {{template "shared/datetime/short" (dict "Datetime" .CreatedUnix.FormatLong "Fallback" .CreatedUnix.FormatShort)}} {{end}} </div> </li> diff --git a/templates/shared/datetime/full.tmpl b/templates/shared/datetime/full.tmpl new file mode 100644 index 0000000000..1c55a4b53e --- /dev/null +++ b/templates/shared/datetime/full.tmpl @@ -0,0 +1 @@ +<relative-time format="datetime" weekday="" year="numeric" month="short" day="numeric" hour="numeric" minute="numeric" second="numeric" datetime="{{.Datetime}}">{{.Fallback}}</relative-time> diff --git a/templates/shared/datetime/long.tmpl b/templates/shared/datetime/long.tmpl new file mode 100644 index 0000000000..4880cf3f91 --- /dev/null +++ b/templates/shared/datetime/long.tmpl @@ -0,0 +1 @@ +<relative-time format="datetime" year="numeric" month="long" day="numeric" weekday="" datetime="{{.Datetime}}">{{.Fallback}}</relative-time> diff --git a/templates/shared/datetime/short.tmpl b/templates/shared/datetime/short.tmpl new file mode 100644 index 0000000000..e5bcef6459 --- /dev/null +++ b/templates/shared/datetime/short.tmpl @@ -0,0 +1 @@ +<relative-time format="datetime" year="numeric" month="short" day="numeric" weekday="" datetime="{{.Datetime}}">{{.Fallback}}</relative-time> diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index 35994fc435..198e76f37c 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -106,7 +106,7 @@ <span class="due-date" data-tooltip-content="{{$.locale.Tr "repo.issues.due_date"}}"> <span{{if .IsOverdue}} class="overdue"{{end}}> {{svg "octicon-calendar" 14 "gt-mr-2"}} - <time data-format="short-date" datetime="{{.DeadlineUnix.FormatDate}}">{{.DeadlineUnix.FormatShort}}</time> + {{template "shared/datetime/short" (dict "Datetime" .DeadlineUnix.FormatDate "Fallback" .DeadlineUnix.FormatShort)}} </span> </span> {{end}} diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl index e0e05575fa..9bde03f001 100644 --- a/templates/user/profile.tmpl +++ b/templates/user/profile.tmpl @@ -73,7 +73,7 @@ </li> {{end}} {{end}} - <li>{{svg "octicon-clock"}} {{.locale.Tr "user.join_on"}} <time data-format="short-date" datetime="{{.Owner.CreatedUnix.FormatLong}}">{{.Owner.CreatedUnix.FormatShort}}</time></li> + <li>{{svg "octicon-clock"}} {{.locale.Tr "user.join_on"}} {{template "shared/datetime/short" (dict "Datetime" .Owner.CreatedUnix.FormatLong "Fallback" .Owner.CreatedUnix.FormatShort)}}</li> {{if and .Orgs .HasOrgsVisible}} <li> <ul class="user-orgs"> diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl index 23cd111229..2694f5cad0 100644 --- a/templates/user/settings/applications.tmpl +++ b/templates/user/settings/applications.tmpl @@ -30,7 +30,7 @@ </ul> </details> <div class="activity meta"> - <i>{{$.locale.Tr "settings.add_on"}} <span><time data-format="short-date" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</time></span> — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}><time data-format="short-date" datetime="{{.UpdatedUnix.FormatLong}}">{{.UpdatedUnix.FormatShort}}</time></span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i> + <i>{{$.locale.Tr "settings.add_on"}} <span>{{template "shared/datetime/short" (dict "Datetime" .CreatedUnix.FormatLong "Fallback" .CreatedUnix.FormatShort)}}</span> — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{template "shared/datetime/short" (dict "Datetime" .UpdatedUnix.FormatLong "Fallback" .UpdatedUnix.FormatShort)}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i> </div> </div> </div> diff --git a/templates/user/settings/grants_oauth2.tmpl b/templates/user/settings/grants_oauth2.tmpl index 0adc981683..3b92f35f37 100644 --- a/templates/user/settings/grants_oauth2.tmpl +++ b/templates/user/settings/grants_oauth2.tmpl @@ -20,7 +20,7 @@ <div class="content"> <strong>{{$grant.Application.Name}}</strong> <div class="activity meta"> - <i>{{$.locale.Tr "settings.add_on"}} <span><time data-format="short-date" datetime="{{$grant.CreatedUnix.FormatLong}}">{{$grant.CreatedUnix.FormatShort}}</time></span></i> + <i>{{$.locale.Tr "settings.add_on"}} <span>{{template "shared/datetime/short" (dict "Datetime" $grant.CreatedUnix.FormatLong "Fallback" $grant.CreatedUnix.FormatShort)}}</span></i> </div> </div> </div> diff --git a/templates/user/settings/keys_gpg.tmpl b/templates/user/settings/keys_gpg.tmpl index 772fc4613b..9ba9199db7 100644 --- a/templates/user/settings/keys_gpg.tmpl +++ b/templates/user/settings/keys_gpg.tmpl @@ -68,9 +68,9 @@ <b>{{$.locale.Tr "settings.subkeys"}}:</b> {{range .SubsKey}} {{.PaddedKeyID}} {{end}} </div> <div class="activity meta"> - <i>{{$.locale.Tr "settings.add_on"}} <span><time data-format="short-date" datetime="{{.AddedUnix.FormatLong}}">{{.AddedUnix.FormatShort}}</time></span></i> + <i>{{$.locale.Tr "settings.add_on"}} <span>{{template "shared/datetime/short" (dict "Datetime" .AddedUnix.FormatLong "Fallback" .AddedUnix.FormatShort)}}</span></i> - - <i>{{if not .ExpiredUnix.IsZero}}{{$.locale.Tr "settings.valid_until"}} <span><time data-format="short-date" datetime="{{.ExpiredUnix.FormatLong}}">{{.ExpiredUnix.FormatShort}}</time></span>{{else}}{{$.locale.Tr "settings.valid_forever"}}{{end}}</i> + <i>{{if not .ExpiredUnix.IsZero}}{{$.locale.Tr "settings.valid_until"}} <span>{{template "shared/datetime/short" (dict "Datetime" .ExpiredUnix.FormatLong "Fallback" .ExpiredUnix.FormatShort)}}</span>{{else}}{{$.locale.Tr "settings.valid_forever"}}{{end}}</i> </div> </div> </div> diff --git a/templates/user/settings/keys_principal.tmpl b/templates/user/settings/keys_principal.tmpl index a156306112..6194db13ab 100644 --- a/templates/user/settings/keys_principal.tmpl +++ b/templates/user/settings/keys_principal.tmpl @@ -25,7 +25,7 @@ <div class="content"> <strong>{{.Name}}</strong> <div class="activity meta"> - <i>{{$.locale.Tr "settings.add_on"}} <span><time data-format="short-date" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</time></span> — {{svg "octicon-info" 16}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}><time data-format="short-date" datetime="{{.UpdatedUnix.FormatLong}}">{{.UpdatedUnix.FormatShort}}</time></span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i> + <i>{{$.locale.Tr "settings.add_on"}} <span>{{template "shared/datetime/short" (dict "Datetime" .CreatedUnix.FormatLong "Fallback" .CreatedUnix.FormatShort)}}</span> — {{svg "octicon-info" 16}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{template "shared/datetime/short" (dict "Datetime" .UpdatedUnix.FormatLong "Fallback" .UpdatedUnix.FormatShort)}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i> </div> </div> </div> diff --git a/templates/user/settings/keys_ssh.tmpl b/templates/user/settings/keys_ssh.tmpl index 160dedc93c..b60434cae4 100644 --- a/templates/user/settings/keys_ssh.tmpl +++ b/templates/user/settings/keys_ssh.tmpl @@ -59,7 +59,7 @@ {{.Fingerprint}} </div> <div class="activity meta"> - <i>{{$.locale.Tr "settings.add_on"}} <span><time data-format="short-date" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</time></span> — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}><time data-format="short-date" datetime="{{.UpdatedUnix.FormatLong}}">{{.UpdatedUnix.FormatShort}}</time></span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i> + <i>{{$.locale.Tr "settings.add_on"}} <span>{{template "shared/datetime/short" (dict "Datetime" .CreatedUnix.FormatLong "Fallback" .CreatedUnix.FormatShort)}}</span> — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{template "shared/datetime/short" (dict "Datetime" .UpdatedUnix.FormatLong "Fallback" .UpdatedUnix.FormatShort)}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i> </div> </div> </div> diff --git a/tests/integration/repo_test.go b/tests/integration/repo_test.go index 1765577999..5ddedfcf36 100644 --- a/tests/integration/repo_test.go +++ b/tests/integration/repo_test.go @@ -75,7 +75,10 @@ func testViewRepo(t *testing.T) { } }) - f.commitTime, _ = s.Find("span.time-since").Attr("data-tooltip-content") + // convert "2017-06-14 21:54:21 +0800" to "Wed, 14 Jun 2017 13:54:21 UTC" + htmlTimeString, _ := s.Find("relative-time.time-since").Attr("datetime") + htmlTime, _ := time.Parse(time.RFC3339, htmlTimeString) + f.commitTime = htmlTime.UTC().Format("Mon, 02 Jan 2006 15:04:05 UTC") items = append(items, f) }) diff --git a/web_src/js/features/admin/common.js b/web_src/js/features/admin/common.js index be5aa876a5..8f895152c7 100644 --- a/web_src/js/features/admin/common.js +++ b/web_src/js/features/admin/common.js @@ -178,7 +178,7 @@ export function initAdminCommon() { // Attach view detail modals $('.view-detail').on('click', function () { $detailModal.find('.content pre').text($(this).parents('tr').find('.notice-description').text()); - $detailModal.find('.sub.header').text($(this).parents('tr').find('.notice-created-time').text()); + $detailModal.find('.sub.header').text($(this).parents('tr').find('relative-time').attr('title')); $detailModal.modal('show'); return false; }); diff --git a/web_src/js/features/formatting.js b/web_src/js/features/formatting.js deleted file mode 100644 index 5590ba44d1..0000000000 --- a/web_src/js/features/formatting.js +++ /dev/null @@ -1,31 +0,0 @@ -const {lang} = document.documentElement; -const dateFormatter = new Intl.DateTimeFormat(lang, {year: 'numeric', month: 'long', day: 'numeric'}); -const shortDateFormatter = new Intl.DateTimeFormat(lang, {year: 'numeric', month: 'short', day: 'numeric'}); -const dateTimeFormatter = new Intl.DateTimeFormat(lang, {year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric'}); - -export function initFormattingReplacements() { - // for each <time></time> tag, if it has the data-format attribute, format - // the text according to the user's chosen locale and formatter. - formatAllTimeElements(); -} - -function formatAllTimeElements() { - const timeElements = document.querySelectorAll('time[data-format]'); - for (const timeElement of timeElements) { - const formatter = getFormatter(timeElement.dataset.format); - timeElement.textContent = formatter.format(new Date(timeElement.dateTime)); - } -} - -function getFormatter(format) { - switch (format) { - case 'date': - return dateFormatter; - case 'short-date': - return shortDateFormatter; - case 'date-time': - return dateTimeFormatter; - default: - throw new Error('Unknown format'); - } -} diff --git a/web_src/js/index.js b/web_src/js/index.js index 878afb10d7..f7cbb24e85 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -74,7 +74,6 @@ import {initRepoBranchButton} from './features/repo-branch.js'; import {initCommonOrganization} from './features/common-organization.js'; import {initRepoWikiForm} from './features/repo-wiki.js'; import {initRepoCommentForm, initRepository} from './features/repo-legacy.js'; -import {initFormattingReplacements} from './features/formatting.js'; import {initCopyContent} from './features/copycontent.js'; import {initCaptcha} from './features/captcha.js'; import {initRepositoryActionView} from './components/RepoActionView.vue'; @@ -83,10 +82,6 @@ import {initGiteaFomantic} from './modules/fomantic.js'; import {onDomReady} from './utils/dom.js'; import {initRepoIssueList} from './features/repo-issue-list.js'; -// Run time-critical code as soon as possible. This is safe to do because this -// script appears at the end of <body> and rendered HTML is accessible at that point. -// TODO: replace them with CustomElements -initFormattingReplacements(); // Init Gitea's Fomantic settings initGiteaFomantic(); diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index 0d57af4f0f..6cec95d766 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -6,7 +6,7 @@ export function createTippy(target, opts = {}) { animation: false, allowHTML: false, hideOnClick: false, - interactiveBorder: 30, + interactiveBorder: 20, ignoreAttributes: true, maxWidth: 500, // increase over default 350px arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`, @@ -36,6 +36,8 @@ export function createTippy(target, opts = {}) { * @returns {null|tippy} */ function attachTooltip(target, content = null) { + switchTitleToTooltip(target); + content = content ?? target.getAttribute('data-tooltip-content'); if (!content) return null; @@ -55,6 +57,18 @@ function attachTooltip(target, content = null) { return target._tippy; } +function switchTitleToTooltip(target) { + const title = target.getAttribute('title'); + if (title) { + target.setAttribute('data-tooltip-content', title); + target.setAttribute('aria-label', title); + // keep the attribute, in case there are some other "[title]" selectors + // and to prevent infinite loop with <relative-time> which will re-add + // title if it is absent + target.setAttribute('title', ''); + } +} + /** * Creating tooltip tippy instance is expensive, so we only create it when the user hovers over the element * According to https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order , mouseover event is fired before mouseenter event @@ -67,48 +81,57 @@ function lazyTooltipOnMouseHover(e) { attachTooltip(this); } -/** - * Activate the tooltip for all children elements - * And if the element has no aria-label, use the tooltip content as aria-label - * @param target {HTMLElement} - */ -function attachChildrenLazyTooltip(target) { - for (const el of target.querySelectorAll('[data-tooltip-content]')) { - el.addEventListener('mouseover', lazyTooltipOnMouseHover, true); +// Activate the tooltip for current element. +// If the element has no aria-label, use the tooltip content as aria-label. +function attachLazyTooltip(el) { + el.addEventListener('mouseover', lazyTooltipOnMouseHover, {capture: true}); - // meanwhile, if the element has no aria-label, use the tooltip content as aria-label - if (!el.hasAttribute('aria-label')) { - const content = target.getAttribute('data-tooltip-content'); - if (content) { - el.setAttribute('aria-label', content); - } + // meanwhile, if the element has no aria-label, use the tooltip content as aria-label + if (!el.hasAttribute('aria-label')) { + const content = el.getAttribute('data-tooltip-content'); + if (content) { + el.setAttribute('aria-label', content); } } } +// Activate the tooltip for all children elements. +function attachChildrenLazyTooltip(target) { + for (const el of target.querySelectorAll('[data-tooltip-content]')) { + attachLazyTooltip(el); + } +} + +const elementNodeTypes = new Set([Node.ELEMENT_NODE, Node.DOCUMENT_FRAGMENT_NODE]); + export function initGlobalTooltips() { - // use MutationObserver to detect new elements added to the DOM, or attributes changed - const observer = new MutationObserver((mutationList) => { - for (const mutation of mutationList) { + // use MutationObserver to detect new "data-tooltip-content" elements added to the DOM, or attributes changed + const observerConnect = (observer) => observer.observe(document, { + subtree: true, + childList: true, + attributeFilter: ['data-tooltip-content', 'title'] + }); + const observer = new MutationObserver((mutationList, observer) => { + const pending = observer.takeRecords(); + observer.disconnect(); + for (const mutation of [...mutationList, ...pending]) { if (mutation.type === 'childList') { // mainly for Vue components and AJAX rendered elements for (const el of mutation.addedNodes) { - // handle all "tooltip" elements in added nodes which have 'querySelectorAll' method, skip non-related nodes (eg: "#text") - if ('querySelectorAll' in el) { + if (elementNodeTypes.has(el.nodeType)) { attachChildrenLazyTooltip(el); + if (el.hasAttribute('data-tooltip-content')) { + attachLazyTooltip(el); + } } } } else if (mutation.type === 'attributes') { - // sync the tooltip content if the attributes change attachTooltip(mutation.target); } } + observerConnect(observer); }); - observer.observe(document, { - subtree: true, - childList: true, - attributeFilter: ['data-tooltip-content'], - }); + observerConnect(observer); attachChildrenLazyTooltip(document.documentElement); } diff --git a/web_src/js/webcomponents/README.md b/web_src/js/webcomponents/README.md index 2b586a63d2..0fde507310 100644 --- a/web_src/js/webcomponents/README.md +++ b/web_src/js/webcomponents/README.md @@ -10,9 +10,3 @@ https://developer.mozilla.org/en-US/docs/Web/Web_Components so they should have their own dependencies and should be very light, then they won't affect the page loading time too much. * If the component is not a public one, it's suggested to have its own `Gitea` or `gitea-` prefix to avoid conflicts. - -# TODO - -There are still some components that are not migrated to web components yet: - -* `<time data-format>` diff --git a/web_src/js/webcomponents/webcomponents.js b/web_src/js/webcomponents/webcomponents.js index 5c4afb1eec..7e8135aa00 100644 --- a/web_src/js/webcomponents/webcomponents.js +++ b/web_src/js/webcomponents/webcomponents.js @@ -1,3 +1,4 @@ import '@webcomponents/custom-elements'; // polyfill for some browsers like Pale Moon +import '@github/relative-time-element'; import './GiteaLocaleNumber.js'; import './GiteaOriginUrl.js'; |