Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Prettify number of issues #17760

Merged
merged 21 commits into from
Jun 12, 2022
Merged

Prettify number of issues #17760

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
325de8b
Prettify number of issues
Nov 22, 2021
ac90d3a
Use client-side formatting
Nov 23, 2021
6507761
prettify on both server and client
silverwind Nov 24, 2021
f6624c7
remove unused i18n entries
silverwind Nov 24, 2021
be2f7e5
handle more cases, support other int types in PrettyNumber
silverwind Nov 24, 2021
734f77c
specify locale to avoid issues with node default locale
silverwind Nov 24, 2021
472a12e
remove superfluos argument
silverwind Nov 24, 2021
c968fee
introduce template helper, octicon tweaks, js refactor
silverwind Nov 26, 2021
faaad8b
Update modules/templates/helper.go
silverwind Nov 26, 2021
22fb8cb
Merge branch 'main' into pretty-number
Feb 25, 2022
c071eff
Apply some suggestions.
Feb 25, 2022
aef87e0
Add comment
Feb 25, 2022
8a18fd7
Update templates/user/dashboard/issues.tmpl
Feb 26, 2022
e8a762c
Merge branch 'main' into pretty-number
Apr 14, 2022
c0a9be4
Merge branch 'main' into pretty-number
May 5, 2022
8d59655
Merge branch 'main' into pretty-number
May 16, 2022
3dce936
Merge branch 'main' into pretty-number
May 28, 2022
2a2712c
Merge branch 'main' into pretty-number
Jun 11, 2022
2d553d1
Merge branch 'main' into pretty-number
lunny Jun 12, 2022
0d18f79
Merge branch 'main' into pretty-number
lunny Jun 12, 2022
5116fcc
Merge branch 'main' into pretty-number
lunny Jun 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions modules/base/tool.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,9 +143,23 @@ func FileSize(s int64) string {
}

// PrettyNumber produces a string form of the given number in base 10 with
// commas after every three orders of magnitud
func PrettyNumber(v int64) string {
return humanize.Comma(v)
// commas after every three orders of magnitude
func PrettyNumber(i interface{}) string {
var value int64
switch v := i.(type) {
case int:
value = int64(v)
case int8:
value = int64(v)
case int16:
value = int64(v)
case int32:
value = int64(v)
case int64:
value = v
}

return humanize.Comma(value)
Gusted marked this conversation as resolved.
Show resolved Hide resolved
}

// Subtract deals with subtraction of all types of number.
Expand Down
1 change: 1 addition & 0 deletions modules/base/tool_test.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ func TestFileSize(t *testing.T) {

func TestPrettyNumber(t *testing.T) {
assert.Equal(t, "23,342,432", PrettyNumber(23342432))
assert.Equal(t, "23,342,432", PrettyNumber(int32(23342432)))
assert.Equal(t, "0", PrettyNumber(0))
assert.Equal(t, "-100,000", PrettyNumber(-100000))
}
Expand Down
46 changes: 34 additions & 12 deletions modules/templates/helper.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import (
"regexp"
"runtime"
"strings"
"strconv"
texttmpl "text/template"
"time"
"unicode"
Expand Down Expand Up @@ -92,18 +93,19 @@ func NewFuncMap() []template.FuncMap {
"CustomEmojis": func() map[string]string {
return setting.UI.CustomEmojisMap
},
"Safe": Safe,
"SafeJS": SafeJS,
"JSEscape": JSEscape,
"Str2html": Str2html,
"TimeSince": timeutil.TimeSince,
"TimeSinceUnix": timeutil.TimeSinceUnix,
"RawTimeSince": timeutil.RawTimeSince,
"FileSize": base.FileSize,
"PrettyNumber": base.PrettyNumber,
"Subtract": base.Subtract,
"EntryIcon": base.EntryIcon,
"MigrationIcon": MigrationIcon,
"Safe": Safe,
"SafeJS": SafeJS,
"JSEscape": JSEscape,
"Str2html": Str2html,
"TimeSince": timeutil.TimeSince,
"TimeSinceUnix": timeutil.TimeSinceUnix,
"RawTimeSince": timeutil.RawTimeSince,
"FileSize": base.FileSize,
"PrettyNumber": base.PrettyNumber,
"JsPrettyNumber": JsPrettyNumber,
"Subtract": base.Subtract,
"EntryIcon": base.EntryIcon,
"MigrationIcon": MigrationIcon,
"Add": func(a ...int) int {
sum := 0
for _, val := range a {
Expand Down Expand Up @@ -972,3 +974,23 @@ func mirrorRemoteAddress(m models.RemoteMirrorer) remoteAddress {

return a
}

// JsPrettyNumber renders a number using english decimal separators, e.g. 1,200
// subsequent Js will replace the number with locale-specific separators
silverwind marked this conversation as resolved.
Show resolved Hide resolved
func JsPrettyNumber(i interface{}) template.HTML {
var num int64
switch v := i.(type) {
Gusted marked this conversation as resolved.
Show resolved Hide resolved
case int:
num = int64(v)
case int8:
num = int64(v)
case int16:
num = int64(v)
case int32:
num = int64(v)
case int64:
num = v
}

return template.HTML(`<span class="js-pretty-number" data-value="` + strconv.FormatInt(num, 10) + `">` + base.PrettyNumber(num) + `</span>`)
}
4 changes: 0 additions & 4 deletions options/locale/locale_en-US.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1177,8 +1177,6 @@ issues.change_ref_at = `changed reference from <b><strike>%s</strike></b> to <b>
issues.remove_ref_at = `removed reference <b>%s</b> %s`
issues.add_ref_at = `added reference <b>%s</b> %s`
issues.delete_branch_at = `deleted branch <b>%s</b> %s`
issues.open_tab = %d Open
issues.close_tab = %d Closed
issues.filter_label = Label
issues.filter_label_exclude = `Use <code>alt</code> + <code>click/enter</code> to exclude labels`
issues.filter_label_no_select = All labels
Expand Down Expand Up @@ -1505,8 +1503,6 @@ pulls.merge_instruction_step1_desc = From your project repository, check out a n
pulls.merge_instruction_step2_desc = Merge the changes and update on Gitea.

milestones.new = New Milestone
milestones.open_tab = %d Open
milestones.close_tab = %d Closed
milestones.closed = Closed %s
milestones.update_ago = Updated %s ago
milestones.no_due_date = No due date
Expand Down
12 changes: 7 additions & 5 deletions templates/repo/issue/milestones.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
<div class="ui compact tiny menu">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=open&q={{$.Keyword}}">
{{svg "octicon-milestone" 16 "mr-3"}}
{{.i18n.Tr "repo.milestones.open_tab" .OpenCount}}
{{JsPrettyNumber .OpenCount}}&nbsp;{{.i18n.Tr "repo.issues.open_title"}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here and below, I worry about i18n here, Open and %d Open may need different translations.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some languages like Arabic do <open> <num> but we can not indicate num as decimal because it's going to be pre-formatted as string. I guess I can move this to a generic numopen translation token with that string but it's probably going to require re-translation according to earlier comment.

</a>
<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=closed&q={{$.Keyword}}">
{{svg "octicon-milestone" 16 "mr-3"}}
{{.i18n.Tr "repo.milestones.close_tab" .ClosedCount}}
{{svg "octicon-check" 16 "mr-3"}}
{{JsPrettyNumber .ClosedCount}}&nbsp;{{.i18n.Tr "repo.issues.closed_title"}}
</a>
</div>
</div>
Expand Down Expand Up @@ -80,8 +80,10 @@
{{end}}
{{end}}
<span class="issue-stats">
{{svg "octicon-issue-opened"}} {{$.i18n.Tr "repo.issues.open_tab" .NumOpenIssues}}
{{svg "octicon-issue-closed"}} {{$.i18n.Tr "repo.issues.close_tab" .NumClosedIssues}}
{{svg "octicon-issue-opened" 16 "mr-3"}}
{{JsPrettyNumber .NumOpenIssues}}&nbsp;{{$.i18n.Tr "repo.issues.open_title"}}
{{svg "octicon-check" 16 "mr-3"}}
{{JsPrettyNumber .NumClosedIssues}}&nbsp;{{$.i18n.Tr "repo.issues.closed_title"}}
{{if .TotalTrackedTime}}{{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Time}}{{end}}
{{if .UpdatedUnix}}{{svg "octicon-clock"}} {{$.i18n.Tr "repo.milestones.update_ago" (.TimeSinceUpdate|Sec2Time)}}{{end}}
</span>
Expand Down
12 changes: 8 additions & 4 deletions templates/repo/issue/openclose.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
<div class="ui compact tiny menu">
<a class="{{if not .IsShowClosed}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
{{svg "octicon-issue-opened" 16 "mr-3"}}
{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
{{if .PageIsPullList}}
{{svg "octicon-git-pull-request" 16 "mr-3"}}
{{else}}
{{svg "octicon-issue-opened" 16 "mr-3"}}
{{end}}
{{JsPrettyNumber .IssueStats.OpenCount}}&nbsp;{{.i18n.Tr "repo.issues.open_title"}}
</a>
<a class="{{if .IsShowClosed}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
{{svg "octicon-issue-closed" 16 "mr-3"}}
{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
{{svg "octicon-check" 16 "mr-3"}}
{{JsPrettyNumber .IssueStats.ClosedCount}}&nbsp;{{.i18n.Tr "repo.issues.closed_title"}}
</a>
</div>
14 changes: 8 additions & 6 deletions templates/repo/projects/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@
{{template "base/alert" .}}
<div class="ui compact tiny menu">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=open">
{{svg "octicon-project" 16 "mr-2"}}
{{.i18n.Tr "repo.issues.open_tab" .OpenCount}}
{{svg "octicon-project" 16 "mr-3"}}
{{JsPrettyNumber .OpenCount}}&nbsp;{{.i18n.Tr "repo.issues.open_title"}}
</a>
<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=closed">
{{svg "octicon-check" 16 "mr-2"}}
{{.i18n.Tr "repo.milestones.close_tab" .ClosedCount}}
{{svg "octicon-check" 16 "mr-3"}}
{{JsPrettyNumber .ClosedCount}}&nbsp;{{.i18n.Tr "repo.issues.closed_title"}}
</a>
</div>

Expand Down Expand Up @@ -47,8 +47,10 @@
{{svg "octicon-clock"}} {{$.i18n.Tr "repo.milestones.closed" $closedDate|Str2html}}
{{end}}
<span class="issue-stats">
{{svg "octicon-issue-opened"}} {{$.i18n.Tr "repo.issues.open_tab" .NumOpenIssues}}
{{svg "octicon-issue-closed"}} {{$.i18n.Tr "repo.issues.close_tab" .NumClosedIssues}}
{{svg "octicon-issue-opened" 16 "mr-3"}}
{{JsPrettyNumber .NumOpenIssues}}&nbsp;{{$.i18n.Tr "repo.issues.open_title"}}
{{svg "octicon-check" 16 "mr-3"}}
{{JsPrettyNumber .NumClosedIssues}}&nbsp;{{$.i18n.Tr "repo.issues.closed_title"}}
</span>
</div>
{{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}
Expand Down
12 changes: 8 additions & 4 deletions templates/user/dashboard/issues.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,16 @@
<div class="column">
<div class="ui compact tiny menu">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
{{svg "octicon-issue-opened" 16 "mr-3"}}
{{.i18n.Tr "repo.issues.open_tab" .ShownIssueStats.OpenCount}}
{{if .PageIsPulls}}
{{svg "octicon-git-pull-request" 16 "mr-3"}}
{{else}}
{{svg "octicon-issue-opened" 16 "mr-3"}}
{{end}}
{{JsPrettyNumber .ShownIssueStats.OpenCount}}&nbsp;{{.i18n.Tr "repo.issues.open_title"}}
</a>
<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed&q={{$.Keyword}}">
{{svg "octicon-issue-closed" 16 "mr-3"}}
{{.i18n.Tr "repo.issues.close_tab" .ShownIssueStats.ClosedCount}}
{{svg "octicon-check" 16 "mr-3"}}
{{JsPrettyNumber .ShownIssueStats.ClosedCount}}&nbsp;{{.i18n.Tr "repo.issues.closed_title"}}
</a>
</div>
</div>
Expand Down
18 changes: 11 additions & 7 deletions templates/user/dashboard/milestones.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,12 @@
<div class="column">
<div class="ui compact tiny menu">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
{{svg "octicon-issue-opened" 16 "mr-3"}}
{{.i18n.Tr "repo.milestones.open_tab" .MilestoneStats.OpenCount}}
{{svg "octicon-milestone" 16 "mr-3"}}
{{JsPrettyNumber .MilestoneStats.OpenCount}}&nbsp;{{.i18n.Tr "repo.issues.open_title"}}
</a>
<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed&q={{$.Keyword}}">
{{svg "octicon-issue-closed" 16 "mr-3"}}
{{.i18n.Tr "repo.milestones.close_tab" .MilestoneStats.ClosedCount}}
{{svg "octicon-check" 16 "mr-3"}}
{{JsPrettyNumber .MilestoneStats.ClosedCount}}&nbsp;{{.i18n.Tr "repo.issues.closed_title"}}
</a>
</div>
</div>
Expand Down Expand Up @@ -100,9 +100,13 @@
{{end}}
{{end}}
<span class="issue-stats">
{{svg "octicon-issue-opened"}} {{$.i18n.Tr "repo.milestones.open_tab" .NumOpenIssues}}
{{svg "octicon-issue-closed"}} {{$.i18n.Tr "repo.milestones.close_tab" .NumClosedIssues}}
{{if .TotalTrackedTime}}{{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Time}}{{end}}
{{svg "octicon-issue-opened" 16 "mr-3"}}
{{JsPrettyNumber .NumOpenIssues}}&nbsp;{{$.i18n.Tr "repo.issues.open_title"}}
{{svg "octicon-check" 16 "mr-3"}}
{{JsPrettyNumber .NumClosedIssues}}&nbsp;{{$.i18n.Tr "repo.issues.closed_title"}}
{{if .TotalTrackedTime}}
{{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Time}}
{{end}}
</span>
</div>
{{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}
Expand Down
15 changes: 15 additions & 0 deletions web_src/js/features/formatting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import {prettyNumber} from '../utils.js';

const {lang} = document.documentElement;
Gusted marked this conversation as resolved.
Show resolved Hide resolved

export function initFormattingReplacements() {
// replace english formatted numbers with locale-specific separators
for (const el of document.getElementsByClassName('js-pretty-number')) {
const num = Number(el.getAttribute('data-value'));
console.log(num);
Gusted marked this conversation as resolved.
Show resolved Hide resolved
const formatted = prettyNumber(num, lang);
if (formatted && formatted !== el.textContent) {
el.textContent = formatted;
}
}
}
5 changes: 5 additions & 0 deletions web_src/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,11 @@ 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';

// 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.
initFormattingReplacements();

// Silence fomantic's error logging when tabs are used without a target content element
$.fn.tab.settings.silent = true;
Expand Down
7 changes: 7 additions & 0 deletions web_src/js/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,3 +58,10 @@ export function parseIssueHref(href) {
const [_, owner, repo, type, index] = /([^/]+)\/([^/]+)\/(issues|pulls)\/([0-9]+)/.exec(path) || [];
return {owner, repo, type, index};
}

// pretty-print a number using locale-specific separators, e.g. 1200 -> 1,200
export function prettyNumber(num, locale = 'en-US') {
if (typeof num !== 'number') return '';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. locale = 'en-US' seems not a good idea, it's better to use browser default.
  2. typeof num !== 'number', maybe we had better support type-casting here, to support string value '123'

Copy link
Member

@silverwind silverwind Nov 28, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. The default is never going to be hit because locale is passed based on HTML attribute. It seemed more efficient to only read the HTML attribute once instead of every call to this function.
  2. I think I'll move it to inline script, so there won't be a function wrapper anymore

const {format} = new Intl.NumberFormat(locale);
return format(num);
}
12 changes: 12 additions & 0 deletions web_src/js/utils.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {
basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref,
prettyNumber,
} from './utils.js';

test('basename', () => {
Expand Down Expand Up @@ -84,3 +85,14 @@ test('parseIssueHref', () => {
expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
expect(parseIssueHref('')).toEqual({owner: undefined, repo: undefined, type: undefined, index: undefined});
});

test('prettyNumber', () => {
expect(prettyNumber()).toEqual('');
expect(prettyNumber(null)).toEqual('');
expect(prettyNumber(undefined)).toEqual('');
expect(prettyNumber('1200')).toEqual('');
expect(prettyNumber(12345678, 'en-US')).toEqual('12,345,678');
expect(prettyNumber(12345678, 'de-DE')).toEqual('12.345.678');
expect(prettyNumber(12345678, 'be-BE')).toEqual('12 345 678');
expect(prettyNumber(12345678, 'hi-IN')).toEqual('1,23,45,678');
});