diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts index d6f7da44ee24815c05638df68dabc205253aeff3..21f0e418754a469bed0be5937a7cc653ace6d253 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts @@ -22,7 +22,6 @@ export interface ITemplateData { version: HTMLElement; author: HTMLElement; description: HTMLElement; - body: HTMLElement; } export enum ExtensionState { @@ -78,8 +77,7 @@ export class Renderer implements IPagedRenderer const version = append(subtitle, $('span.version')); const author = append(subtitle, $('span.author')); const description = append(details, $('.description')); - const body = append(element, $('.body')); - const result = { extension: null, container, element, icon, name, version, author, description, body }; + const result = { extension: null, container, element, icon, name, version, author, description }; this._templates.push(result); return result; @@ -88,12 +86,11 @@ export class Renderer implements IPagedRenderer renderPlaceholder(index: number, data: ITemplateData): void { addClass(data.element, 'loading'); data.extension = null; - data.icon.style.display = 'none'; + data.icon.src = ''; data.name.textContent = ''; data.version.textContent = ''; data.author.textContent = ''; data.description.textContent = ''; - data.body.textContent = ''; } renderElement(entry: IExtensionEntry, index: number, data: ITemplateData): void { @@ -103,13 +100,11 @@ export class Renderer implements IPagedRenderer data.extension = extension; removeClass(data.element, 'loading'); - data.icon.style.display = 'block'; data.icon.src = version.iconUrl; data.name.textContent = extension.displayName; data.version.textContent = ` ${ extension.version }`; data.author.textContent = ` ${ localize('author', "by {0}", publisher)}`; data.description.textContent = extension.description; - data.body.textContent = ''; } disposeTemplate(data: ITemplateData): void { diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionsPart.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionsPart.ts index 7b9221d704302f314652b4ac0abb8deb6bc6c9ff..d544f4443f598d88d59c6888962f511f50a4fee8 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionsPart.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionsPart.ts @@ -197,15 +197,15 @@ export class ExtensionsPart extends BaseEditor { this.request(version.readmeUrl) .then(opts => assign(opts, { headers })) .then(opts => downloadText(opts)) - .then(marked.parse) - .then(html => data.body.innerHTML = html); + .then(marked.parse); + // .then(html => data.body.innerHTML = html); // set up disposable for later this.highlightDisposable = toDisposable(() => { listener.dispose(); container.appendChild(data.container); this.overlay.style.height = '0'; - data.body.innerHTML = ''; + // data.body.innerHTML = ''; }); } diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts index 546792f30f95a2d80920b895987200127bb31520..8ad240437e7b633e32d6ed2f68333ef1db8c3d0d 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts @@ -12,13 +12,14 @@ import { TPromise } from 'vs/base/common/winjs.base'; import { IDisposable, dispose } from 'vs/base/common/lifecycle'; import { Builder, Dimension } from 'vs/base/browser/builder'; import { Viewlet } from 'vs/workbench/browser/viewlet'; -import { append, emmet as $, addClass, removeClass } from 'vs/base/browser/dom'; +import { append, emmet as $ } from 'vs/base/browser/dom'; import { PagedModel, mapPager } from 'vs/base/common/paging'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { PagedList } from 'vs/base/browser/ui/list/listPaging'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IExtensionEntry, Delegate, Renderer, ExtensionState } from './extensionsList'; import { IGalleryService } from '../common/extensions'; +import { IProgressService } from 'vs/platform/progress/common/progress'; const EmptyModel = new PagedModel({ firstPage: [], @@ -41,6 +42,7 @@ export class ExtensionsViewlet extends Viewlet { constructor( @ITelemetryService telemetryService: ITelemetryService, @IGalleryService private galleryService: IGalleryService, + @IProgressService private progressService: IProgressService, @IInstantiationService private instantiationService: IInstantiationService ) { super(ExtensionsViewlet.ID, telemetryService); @@ -89,8 +91,8 @@ export class ExtensionsViewlet extends Viewlet { const promise = this.searchDelayer.trigger(() => this.doSearch(text), delay); - addClass(this.extensionsBox, 'loading'); - always(promise, () => removeClass(this.extensionsBox, 'loading')); + const progressRunner = this.progressService.show(true); + always(promise, () => progressRunner.done()); } private doSearch(text: string = ''): TPromise { diff --git a/src/vs/workbench/parts/extensions/electron-browser/media/extensions-viewlet.css b/src/vs/workbench/parts/extensions/electron-browser/media/extensions-viewlet.css index d18539b39b49d49d4609d8a26fb8dc5df6935a85..79e3582c817873834ea74426b7b6f08b049cca5c 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensions-viewlet.css +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensions-viewlet.css @@ -8,9 +8,87 @@ } .extensions-viewlet > .search { - height: 50px; + height: 38px; + box-sizing: border-box; + padding: 5px 9px 5px 16px; +} + +.extensions-viewlet > .search > .search-box { + width: 100%; + height: 100%; + box-sizing: border-box; + padding: 0 3px; } .extensions-viewlet > .extensions { - height: calc(100% - 50px); + height: calc(100% - 26px); +} + +.extensions-viewlet > .extensions .extension-container { + width: 100%; + height: 100%; +} + +.extensions-viewlet > .extensions .extension-container > .extension { + margin: 10px 20px 10px 17px; + width: calc(100% - 30px); + height: calc(100% - 20px); + overflow: hidden; + background-color: white; + box-shadow: 2px 2px 5px rgba(0,0,0,.1); +} + +.extensions-viewlet > .extensions .extension-container > .extension:hover { + box-shadow: 2px 2px 5px rgba(0,0,0,.25); +} + +.extensions-viewlet > .extensions .extension-container > .extension.loading { + background-image: url('loading.svg'); + background-position: center center; + background-repeat: no-repeat; +} + +.extensions-viewlet > .extensions .extension-container > .extension > .header { + display: flex; +} + +.extensions-viewlet > .extensions .extension-container > .extension > .header > .icon { + box-sizing: border-box; + width: 70px; + height: 70px; + padding: 8px; + flex-shrink: 0; +} + +.extensions-viewlet > .extensions .extension-container > .extension.loading > .header > .icon { + display: none; +} + +.extensions-viewlet > .extensions .extension-container > .extension > .header > .details { + flex: 1; + padding: 8px; + overflow: hidden; +} + +.extensions-viewlet > .extensions .extension-container > .extension > .header > .details > .title > .name { + font-weight: bold; +} + +.extensions-viewlet > .extensions .extension-container > .extension > .header > .details > .subtitle { + font-size: 90%; +} + +.extensions-viewlet > .extensions .extension-container > .extension > .header > .details > .subtitle > .author { + font-style: italic; +} + +.extensions-viewlet > .extensions .extension-container > .extension > .header > .details > div { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + width: 100%; +} + +.extensions-viewlet > .extensions .extension-container > .extension > .body { + display: none; } \ No newline at end of file