diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts index fbf9f959e9806adeb5499444ce288d2292c93622..4fdfedc8d9598c48189f46336c292e04b46766e5 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts @@ -26,6 +26,7 @@ export class ExtensionEditor extends BaseEditor { static ID: string = 'workbench.editor.extension'; + private icon: HTMLElement; private body: HTMLElement; private _highlight: ITemplateData; @@ -52,7 +53,11 @@ export class ExtensionEditor extends BaseEditor { const root = append(container, $('.extension-editor')); const header = append(root, $('.header')); - header.innerText = 'here goes description, author name, links, ratings, install buttons, etc'; + + this.icon = append(header, $('.icon')); + // const details = append(header, $('.details')); + + // header.innerText = 'here goes description, author name, links, ratings, install buttons, etc'; this.body = append(root, $('.body')); } @@ -64,6 +69,8 @@ export class ExtensionEditor extends BaseEditor { let promise = TPromise.as(null); const extension = input.extension; + this.icon.style.backgroundImage = `url("${ extension.iconUrl }")`; + if (!extension.readmeUrl) { this.body.innerHTML = 'no readme :('; } else { diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts index c1bda409f4e478816c7ab3f1aff248323768ccca..5ae9f3bf737801df1669111c271ca3fa24fe8628 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts @@ -17,7 +17,7 @@ import { CombinedInstallAction } from './extensionsActions'; export interface ITemplateData { extension: IExtension; element: HTMLElement; - icon: HTMLImageElement; + icon: HTMLElement; name: HTMLElement; version: HTMLElement; author: HTMLElement; @@ -49,7 +49,7 @@ export class Renderer implements IPagedRenderer { renderTemplate(root: HTMLElement): ITemplateData { const element = append(root, $('.extension')); - const icon = append(element, $('img.icon')); + const icon = append(element, $('.icon')); const details = append(element, $('.details')); const header = append(details, $('.header')); const name = append(header, $('span.name.ellipsis')); @@ -69,7 +69,7 @@ export class Renderer implements IPagedRenderer { addClass(data.element, 'loading'); data.extension = null; - data.icon.src = ''; + data.icon.style.backgroundImage = ''; data.name.textContent = ''; data.version.textContent = ''; data.author.textContent = ''; @@ -82,7 +82,7 @@ export class Renderer implements IPagedRenderer { removeClass(data.element, 'loading'); data.extension = extension; - data.icon.src = extension.iconUrl; + data.icon.style.backgroundImage = `url("${ extension.iconUrl }")`; data.name.textContent = extension.displayName; data.version.textContent = extension.version; data.author.textContent = extension.publisherDisplayName; diff --git a/src/vs/workbench/parts/extensions/electron-browser/media/extensionEditor.css b/src/vs/workbench/parts/extensions/electron-browser/media/extensionEditor.css index b7d968f605f0d1d83252283c638fb42808d792b5..3ca51d19158581b45ef5c4a10f6ee86c56e33e68 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensionEditor.css +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensionEditor.css @@ -12,11 +12,19 @@ } .extension-editor > .header { - height: 40px; + height: 128px; background: rgba(128, 128, 128, 0.15); /* TODO */ padding: 20px; } +.extension-editor > .header > .icon { + height: 128px; + width: 128px; + background-size: 128px; + background-repeat: no-repeat; + background-position: center center; +} + .extension-editor > .body { flex: 1; overflow-y: scroll; 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 9e118a0ebb9d97f513364fd16922d8577ce25c1f..b4c880b5eaef9f42d5b2c78ef7f695cb3de73b68 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css @@ -44,6 +44,9 @@ height: 42px; padding: 10px 14px 10px 0; flex-shrink: 0; + background-repeat: no-repeat; + background-size: 42px; + background-position: left center; } .extensions-viewlet > .extensions .extension.loading > .icon {