diff --git a/packages/vsx-registry/src/browser/style/index.css b/packages/vsx-registry/src/browser/style/index.css index b6d498c7b5d22..fc051b7ab52f4 100644 --- a/packages/vsx-registry/src/browser/style/index.css +++ b/packages/vsx-registry/src/browser/style/index.css @@ -91,6 +91,12 @@ font-size: 110%; } +.theia-vsx-extension-content .title .stat .download-count, +.theia-vsx-extension-content .title .stat .average-rating { + display: inline-flex; + align-items: center; +} + .theia-vsx-extension-content .title .stat .average-rating > i { color: #ff8e00; } diff --git a/packages/vsx-registry/src/browser/vsx-extension.tsx b/packages/vsx-registry/src/browser/vsx-extension.tsx index de85d963b6401..e39a95d3cc7ed 100644 --- a/packages/vsx-registry/src/browser/vsx-extension.tsx +++ b/packages/vsx-registry/src/browser/vsx-extension.tsx @@ -271,18 +271,18 @@ export class VSXExtension implements VSXExtensionData, TreeElement { } get tooltip(): string { - let md = `__${this.displayName}__ ${VSXExtension.formatVersion(this.version)}\n\n${this.description}\n_____\n\nPublisher: ${this.publisher}`; + let md = `__${this.displayName}__ ${VSXExtension.formatVersion(this.version)}\n\n${this.description}\n_____\n\n${nls.localizeByDefault('Publisher: {0}', this.publisher)}`; if (this.license) { - md += ` \rLicense: ${this.license}`; + md += ` \r${nls.localize('theia/vsx-registry/license', 'License: {0}', this.license)}`; } if (this.downloadCount) { - md += ` \rDownload count: ${downloadCompactFormatter.format(this.downloadCount)}`; + md += ` \r${nls.localize('theia/vsx-registry/downloadCount', 'Download count: {0}', downloadCompactFormatter.format(this.downloadCount))}`; } if (this.averageRating) { - md += ` \rAverage Rating: ${this.averageRating.toFixed(1)}`; + md += ` \r${getAverageRatingTitle(this.averageRating)}`; } return markdownit().render(md); @@ -443,7 +443,10 @@ export namespace AbstractVSXExtensionComponent { const downloadFormatter = new Intl.NumberFormat(); // eslint-disable-next-line @typescript-eslint/no-explicit-any -const downloadCompactFormatter = new Intl.NumberFormat(undefined, { notation: 'compact', compactDisplay: 'short' } as any); +const downloadCompactFormatter = new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' } as any); +const averageRatingFormatter = (averageRating: number): number => Math.round(averageRating * 2) / 2; +const getAverageRatingTitle = (averageRating: number): string => + nls.localize('theia/vsx-registry/averageRating', 'Average rating: {0} out of 5', averageRatingFormatter(averageRating)); export namespace VSXExtensionComponent { export interface Props extends AbstractVSXExtensionComponent.Props { @@ -466,7 +469,7 @@ export class VSXExtensionComponent
{!!downloadCount && {downloadCompactFormatter.format(downloadCount)}} - {!!averageRating && {averageRating.toFixed(1)}} + {!!averageRating && {averageRatingFormatter(averageRating)}}
{description}
@@ -516,7 +519,10 @@ export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent { {!!downloadCount && {downloadFormatter.format(downloadCount)}} - {averageRating !== undefined && {this.renderStars()}} + { + averageRating !== undefined && + {this.renderStars()} + } {repository && Repository} {license && {license}} {version && {VSXExtension.formatVersion(version)}} @@ -527,7 +533,7 @@ export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent { { sanitizedReadme && - < div className='scroll-container' +
this._scrollContainer = (ref || undefined)}>