extension viewlet css

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<IExtensionEntry, ITemplateData>
 		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<IExtensionEntry, ITemplateData>
 	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<IExtensionEntry, ITemplateData>
 
 		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 {

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 = '';
 		});
 	}
 

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<any> {

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