From b587c784039291802ddd16771ac03877c90ec579 Mon Sep 17 00:00:00 2001 From: Ramya Achutha Rao Date: Sun, 29 Oct 2017 00:05:14 -0700 Subject: [PATCH] Revert use of version label to show recommendation #36650 --- .../extensions/browser/extensionsList.ts | 23 +++++++------ .../media/extensionsViewlet.css | 33 ++++++++++++++----- 2 files changed, 35 insertions(+), 21 deletions(-) diff --git a/src/vs/workbench/parts/extensions/browser/extensionsList.ts b/src/vs/workbench/parts/extensions/browser/extensionsList.ts index e531ac183a6e4..204b4bcdbffff 100644 --- a/src/vs/workbench/parts/extensions/browser/extensionsList.ts +++ b/src/vs/workbench/parts/extensions/browser/extensionsList.ts @@ -18,12 +18,11 @@ import { domEvent } from 'vs/base/browser/event'; import { IExtension, IExtensionsWorkbenchService } from 'vs/workbench/parts/extensions/common/extensions'; import { InstallAction, UpdateAction, BuiltinStatusLabelAction, ManageExtensionAction, ReloadAction } from 'vs/workbench/parts/extensions/browser/extensionsActions'; import { areSameExtensions } from 'vs/platform/extensionManagement/common/extensionManagementUtil'; -import { RatingsWidget, InstallWidget } from 'vs/workbench/parts/extensions/browser/extensionsWidgets'; +import { Label, RatingsWidget, InstallWidget } from 'vs/workbench/parts/extensions/browser/extensionsWidgets'; import { EventType } from 'vs/base/common/events'; import { IContextMenuService } from 'vs/platform/contextview/browser/contextView'; import { IExtensionService } from 'vs/platform/extensions/common/extensions'; import { IExtensionTipsService } from 'vs/platform/extensionManagement/common/extensionManagement'; -import { localize } from 'vs/nls'; export interface ITemplateData { root: HTMLElement; @@ -34,7 +33,6 @@ export interface ITemplateData { ratings: HTMLElement; author: HTMLElement; description: HTMLElement; - subText: HTMLElement; extension: IExtension; disposables: IDisposable[]; extensionDisposables: IDisposable[]; @@ -65,14 +63,15 @@ export class Renderer implements IPagedRenderer { get templateId() { return 'extension'; } renderTemplate(root: HTMLElement): ITemplateData { + const bookmark = append(root, $('span.bookmark')); + append(bookmark, $('span.octicon.octicon-star')); const element = append(root, $('.extension')); const icon = append(element, $('img.icon')); const details = append(element, $('.details')); const headerContainer = append(details, $('.header-container')); const header = append(headerContainer, $('.header')); const name = append(header, $('span.name')); - const subTextContainer = append(header, $('span.subtext-container')); - const subText = append(subTextContainer, $('span.subtext')); + const version = append(header, $('span.version')); const installCount = append(header, $('span.install-count')); const ratings = append(header, $('span.ratings')); const description = append(details, $('.description.ellipsis')); @@ -89,6 +88,7 @@ export class Renderer implements IPagedRenderer { }); actionbar.addListener(EventType.RUN, ({ error }) => error && this.messageService.show(Severity.Error, error)); + const versionWidget = this.instantiationService.createInstance(Label, version, (e: IExtension) => e.version); const installCountWidget = this.instantiationService.createInstance(InstallWidget, installCount, { small: true }); const ratingsWidget = this.instantiationService.createInstance(RatingsWidget, ratings, { small: true }); @@ -99,12 +99,13 @@ export class Renderer implements IPagedRenderer { const manageAction = this.instantiationService.createInstance(ManageExtensionAction); actionbar.push([reloadAction, updateAction, installAction, builtinStatusAction, manageAction], actionOptions); - const disposables = [installCountWidget, ratingsWidget, builtinStatusAction, updateAction, reloadAction, manageAction, actionbar]; + const disposables = [versionWidget, installCountWidget, ratingsWidget, builtinStatusAction, updateAction, reloadAction, manageAction, actionbar]; return { - root, element, icon, name, installCount, ratings, author, description, subText, disposables, + root, element, icon, name, installCount, ratings, author, description, disposables, extensionDisposables: [], set extension(extension: IExtension) { + versionWidget.extension = extension; installCountWidget.extension = extension; ratingsWidget.extension = extension; builtinStatusAction.extension = extension; @@ -153,17 +154,15 @@ export class Renderer implements IPagedRenderer { data.icon.style.visibility = 'inherit'; } - data.subText.textContent = isInstalled ? extension.version : ''; data.root.setAttribute('aria-label', extension.displayName); - removeClass(data.subText, 'recommended'); + removeClass(data.root, 'recommended'); const extRecommendations = this.extensionTipsService.getAllRecommendationsWithReason(); if (extRecommendations[extension.id.toLowerCase()] && !isInstalled) { data.root.setAttribute('aria-label', extension.displayName + '. ' + extRecommendations[extension.id]); if (this.showRecommendedLabel) { - data.subText.textContent = localize('recommended', "Recommended"); - addClass(data.subText, 'recommended'); - data.subText.title = extRecommendations[extension.id.toLowerCase()]; + addClass(data.root, 'recommended'); + data.root.title = extRecommendations[extension.id.toLowerCase()]; } } 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 f49a027deeb29..cad1e5d635b43 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css @@ -61,6 +61,27 @@ cursor: default; } +.extensions-viewlet > .extensions .monaco-list-row > .bookmark { + display: none; +} + +.extensions-viewlet > .extensions .monaco-list-row.recommended > .bookmark { + display: inline-block; + height: 20px; + width: 20px; + border-right: 20px solid transparent; + border-top: 20px solid grey; + box-sizing: border-box; +} + +.extensions-viewlet > .extensions .monaco-list-row > .bookmark > .octicon { + position: absolute; + top: 1px; + left: 1px; + color: white; + font-size: 90%; +} + .extensions-viewlet > .extensions .extension { box-sizing: border-box; width: 100%; @@ -68,6 +89,8 @@ padding: 0 11px 0 16px; overflow: hidden; display: flex; + position: absolute; + top: 0; } .extensions-viewlet > .extensions .extension.loading { @@ -118,7 +141,7 @@ overflow: hidden; } -.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .subtext-container { +.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .version { opacity: 0.85; font-size: 80%; padding-left: 6px; @@ -126,14 +149,6 @@ min-width: fit-content; } -.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .subtext-container > span.subtext.recommended { - color: white; - background-color: green; - border: solid 1px green; - border-radius: 10px; - padding: 0 5px; -} - .extensions-viewlet > .extensions .extension > .details > .header-container > .header > .install-count:not(:empty) { font-size: 80%; margin: 0 6px;