PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2025-03-17 17:10:03 +01:00
Code Issues Projects Releases Packages Wiki Activity

Use Intl.NumberFormat with French style instead of a manual impl

Browse source
This commit is contained in:
MareStare 2025-03-13 23:36:19 +00:00
parent 84ecf1ea4e
commit 84b6ef74df
3 changed files with 11 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
assets/css/views/tags.css
View file

@ -98,12 +98,6 @@
.autocomplete__item__tag__count { .autocomplete__item__tag__count {
color: var(--autocomplete-tag-count-color); color: var(--autocomplete-tag-count-color);
/*
Reduce the space size between groups of 3 digits in big numbers like "1 000 000".
This way the number is more compact and easier to read.
*/
word-spacing: -3px;
} }
.autocomplete__item:hover:not(.autocomplete__item--selected) { .autocomplete__item:hover:not(.autocomplete__item--selected) {

11
assets/js/utils/__tests__/suggestions.spec.ts
View file

@ -213,6 +213,8 @@ describe('Suggestions', () => {
describe('TagSuggestion', () => { describe('TagSuggestion', () => {
it('should format suggested tags as tag name and the count', () => { it('should format suggested tags as tag name and the count', () => {
// The snapshots in this test contain a "narrow no-break space"
/* eslint-disable no-irregular-whitespace */
expectTagRender({ canonical: 'safe', images: 10 }).toMatchInlineSnapshot(` expectTagRender({ canonical: 'safe', images: 10 }).toMatchInlineSnapshot(`
{ {
"label": " safe 10", "label": " safe 10",
@ -221,28 +223,29 @@ describe('Suggestions', () => {
`); `);
expectTagRender({ canonical: 'safe', images: 10_000 }).toMatchInlineSnapshot(` expectTagRender({ canonical: 'safe', images: 10_000 }).toMatchInlineSnapshot(`
{ {
"label": " safe 10 000", "label": " safe 10 000",
"value": "safe", "value": "safe",
} }
`); `);
expectTagRender({ canonical: 'safe', images: 100_000 }).toMatchInlineSnapshot(` expectTagRender({ canonical: 'safe', images: 100_000 }).toMatchInlineSnapshot(`
{ {
"label": " safe 100 000", "label": " safe 100 000",
"value": "safe", "value": "safe",
} }
`); `);
expectTagRender({ canonical: 'safe', images: 1000_000 }).toMatchInlineSnapshot(` expectTagRender({ canonical: 'safe', images: 1000_000 }).toMatchInlineSnapshot(`
{ {
"label": " safe 1 000 000", "label": " safe 1 000 000",
"value": "safe", "value": "safe",
} }
`); `);
expectTagRender({ canonical: 'safe', images: 10_000_000 }).toMatchInlineSnapshot(` expectTagRender({ canonical: 'safe', images: 10_000_000 }).toMatchInlineSnapshot(`
{ {
"label": " safe 10 000 000", "label": " safe 10 000 000",
"value": "safe", "value": "safe",
} }
`); `);
/* eslint-enable no-irregular-whitespace */
}); });
it('should display alias -> canonical for aliased tags', () => { it('should display alias -> canonical for aliased tags', () => {

10
assets/js/utils/suggestions.ts
View file

@ -64,13 +64,11 @@ export class TagSuggestion {
} }
static formatImageCount(count: number): string { static formatImageCount(count: number): string {
const chars = [...count.toString()]; // We use the 'fr' (French) number formatting style with space-separated
// groups of 3 digits.
const formatter = new Intl.NumberFormat('fr', { useGrouping: true });
for (let i = chars.length - 3; i > 0; i -= 3) { return formatter.format(count);
chars.splice(i, 0, ' ');
}
return chars.join('');
} }
} }