From 2e02cbd69b022c46bdf65b66fe0b5d208e0ba75b Mon Sep 17 00:00:00 2001 From: Joao Moreno Date: Thu, 23 Jun 2016 10:52:51 +0200 Subject: [PATCH] install count and ratings in viewlet fixes #7980 --- .../electron-browser/extensionEditor.ts | 10 ++-- .../electron-browser/extensionsList.ts | 18 +++++-- .../electron-browser/extensionsWidgets.ts | 53 +++++++++++++++++-- .../media/extensionsViewlet.css | 35 ++++++++++-- .../media/extensionsWidgets.css | 4 +- 5 files changed, 98 insertions(+), 22 deletions(-) diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts index 97447434eb8..34813d0c482 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts @@ -21,7 +21,7 @@ import { ExtensionsInput } from './extensionsInput'; import { IExtensionsWorkbenchService } from './extensions'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { ITemplateData } from './extensionsList'; -import { RatingsWidget, Label } from './extensionsWidgets'; +import { RatingsWidget, InstallWidget } from './extensionsWidgets'; import { EditorOptions } from 'vs/workbench/common/editor'; import { shell } from 'electron'; import product from 'vs/platform/product'; @@ -81,9 +81,9 @@ export class ExtensionEditor extends BaseEditor { this.publisher = append(subtitle, $('a.publisher')); this.publisher.href = '#'; - const install = append(subtitle, $('span.install')); - append(install, $('span.octicon.octicon-cloud-download')); - this.installCount = append(install, $('span.count')); + this.installCount = append(subtitle, $('span.install')); + // append(install, $('span.octicon.octicon-cloud-download')); + // this.installCount = append(install, $('span.count')); this.rating = append(subtitle, $('a.rating')); this.rating.href = '#'; @@ -121,7 +121,7 @@ export class ExtensionEditor extends BaseEditor { }); } - const install = this.instantiationService.createInstance(Label, this.installCount, extension, e => `${ e.installCount }`); + const install = this.instantiationService.createInstance(InstallWidget, this.installCount, extension, {}); this.transientDisposables.push(install); const ratings = this.instantiationService.createInstance(RatingsWidget, this.rating, extension, {}); diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts index 9424c87c9c1..243b96d7a9c 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts @@ -13,7 +13,7 @@ import { IDelegate } from 'vs/base/browser/ui/list/list'; import { IPagedRenderer } from 'vs/base/browser/ui/list/listPaging'; import { IExtension } from './extensions'; import { CombinedInstallAction, UpdateAction } from './extensionsActions'; -import { Label } from './extensionsWidgets'; +import { Label, RatingsWidget, InstallWidget } from './extensionsWidgets'; export interface ITemplateData { extension: IExtension; @@ -21,6 +21,8 @@ export interface ITemplateData { icon: HTMLElement; name: HTMLElement; version: HTMLElement; + installCount: HTMLElement; + ratings: HTMLElement; author: HTMLElement; description: HTMLElement; actionbar: ActionBar; @@ -50,15 +52,17 @@ export class Renderer implements IPagedRenderer { const icon = append(element, $('.icon')); const details = append(element, $('.details')); const header = append(details, $('.header')); - const name = append(header, $('span.name.ellipsis')); + const name = append(header, $('span.name')); const version = append(header, $('span.version.ellipsis')); - const author = append(header, $('span.author.ellipsis')); + const ratings = append(header, $('span.ratings')); + const installCount = append(header, $('span.install-count')); const description = append(details, $('.description.ellipsis')); const footer = append(details, $('.footer')); + const author = append(footer, $('.author.ellipsis')); const actionbar = new ActionBar(footer, { animated: false }); const disposables = []; - const result = { extension: null, element, icon, name, version, author, description, actionbar, disposables }; + const result = { extension: null, element, icon, name, version, installCount, ratings, author, description, actionbar, disposables }; this._templates.push(result); return result; } @@ -87,12 +91,16 @@ export class Renderer implements IPagedRenderer { data.description.textContent = extension.description; const version = this.instantiationService.createInstance(Label, data.version, extension, e => e.version); + const ratings = this.instantiationService.createInstance(RatingsWidget, data.ratings, extension, { small: true }); + const installCount = this.instantiationService.createInstance(InstallWidget, data.installCount, extension, { small: true }); + const installAction = this.instantiationService.createInstance(CombinedInstallAction, extension); const updateAction = this.instantiationService.createInstance(UpdateAction, extension); + data.actionbar.clear(); data.actionbar.push([updateAction, installAction], actionOptions); - data.disposables.push(version, installAction, updateAction); + data.disposables.push(version, installCount, ratings, installAction, updateAction); } disposeTemplate(data: ITemplateData): void { diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionsWidgets.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionsWidgets.ts index 19db5b22415..023f007edbf 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionsWidgets.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionsWidgets.ts @@ -34,16 +34,57 @@ export class Label implements IDisposable { } } -export class RatingsWidget implements IDisposable { +export class InstallWidget implements IDisposable { + + private disposables: IDisposable[] = []; - static ID: string = 'workbench.editor.extension'; + constructor( + private container: HTMLElement, + private extension: IExtension, + private options: IOptions, + @IExtensionsWorkbenchService extensionsWorkbenchService: IExtensionsWorkbenchService + ) { + this.disposables.push(extensionsWorkbenchService.onChange(() => this.render())); + addClass(container, 'extension-install-count'); + this.render(); + } + + private render(): void { + const installCount = this.extension.installCount; + this.container.innerHTML = ''; + + if (installCount === null) { + return; + } + + let installLabel: string; + + if (this.options.small) { + if (installCount > 1000000) { + installLabel = `${ Math.floor(installCount / 1000000) }M`; + } else if (installCount > 1000) { + installLabel = `${ Math.floor(installCount / 1000) }K`; + } + } + + append(this.container, $('span.octicon.octicon-cloud-download')); + const count = append(this.container, $('span.count')); + count.textContent = installLabel || String(installCount); + } + + dispose(): void { + this.disposables = dispose(this.disposables); + } +} + +export class RatingsWidget implements IDisposable { private disposables: IDisposable[] = []; constructor( private container: HTMLElement, private extension: IExtension, - options: IOptions, + private options: IOptions, @IExtensionsWorkbenchService extensionsWorkbenchService: IExtensionsWorkbenchService ) { this.disposables.push(extensionsWorkbenchService.onChange(() => this.render())); @@ -74,8 +115,10 @@ export class RatingsWidget implements IDisposable { } } - const count = append(this.container, $('span.count')); - count.textContent = String(this.extension.ratingCount); + if (!this.options.small) { + const count = append(this.container, $('span.count')); + count.textContent = String(this.extension.ratingCount); + } } dispose(): void { diff --git a/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css b/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css index ab1211adaa5..9e2452f3782 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css @@ -31,7 +31,7 @@ box-sizing: border-box; width: 100%; height: 100%; - padding: 0 19px 0 16px; + padding: 0 9px 0 16px; overflow: hidden; display: flex; } @@ -64,23 +64,40 @@ .extensions-viewlet > .extensions .extension > .details > .header { display: flex; + align-items: baseline; } .extensions-viewlet > .extensions .extension > .details > .header > .name { font-weight: bold; + min-width: fit-content; } .extensions-viewlet > .extensions .extension > .details > .header > .version { opacity: 0.6; font-size: 80%; padding-left: 6px; + flex: 1; } -.extensions-viewlet > .extensions .extension > .details > .header > .author { - flex: 1; - font-size: 90%; +.extensions-viewlet > .extensions .extension > .details > .header > .install-count:not(:empty) { + opacity: 0.6; + font-size: 80%; + border: 1px solid rgba(173, 173, 173, 0.5); + border-radius: 3px; + display: inline-block; + line-height: 14px; + padding: 0 3px; + text-align: right; +} + +.extensions-viewlet > .extensions .extension > .details > .header > .install-count > .octicon { + font-size: 100%; + margin-right: 2px; +} + +.extensions-viewlet > .extensions .extension > .details > .header > .ratings { + margin-right: 6px; text-align: right; - padding-left: 6px; } .extensions-viewlet > .extensions .extension > .details > .footer { @@ -90,6 +107,14 @@ overflow: hidden; } +.extensions-viewlet > .extensions .extension > .details > .footer > .author { + flex: 1; + font-size: 90%; + padding-right: 6px; + opacity: 0.6; + font-weight: 600; +} + .extensions-viewlet > .extensions .extension > .details > .footer > .monaco-action-bar > .actions-container { flex-wrap: wrap-reverse; } diff --git a/src/vs/workbench/parts/extensions/electron-browser/media/extensionsWidgets.css b/src/vs/workbench/parts/extensions/electron-browser/media/extensionsWidgets.css index 680ce6acfd7..67ed62a2bbd 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensionsWidgets.css +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensionsWidgets.css @@ -20,8 +20,8 @@ } .extension-ratings.small > .star { - width: 12px; - height: 12px; + width: 10px; + height: 10px; } .extension-ratings > .full { -- GitLab