From 4c7017656d01e57a38f48df462d71fe15987b789 Mon Sep 17 00:00:00 2001 From: Joao Moreno Date: Mon, 11 Jul 2016 16:32:28 +0200 Subject: [PATCH] improve extension viewlet layout fixes #8922 fixes #8510 --- .../electron-browser/extensionsList.ts | 6 ++-- .../electron-browser/extensionsViewlet.ts | 9 ++++-- .../electron-browser/extensionsWidgets.ts | 30 +++++++++++-------- .../media/extensionsViewlet.css | 13 ++++++++ .../media/extensionsWidgets.css | 8 +++++ 5 files changed, 49 insertions(+), 17 deletions(-) diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts index 59ad64fe184..ea7fabb84a2 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts @@ -48,7 +48,7 @@ export class Renderer implements IPagedRenderer { const details = append(element, $('.details')); const header = append(details, $('.header')); const name = append(header, $('span.name')); - const version = append(header, $('span.version.ellipsis')); + 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')); @@ -88,8 +88,8 @@ export class Renderer implements IPagedRenderer { data.name.textContent = extension.displayName; data.author.textContent = extension.publisherDisplayName; data.description.textContent = extension.description; - data.installCount.style.display = 'initial'; - data.ratings.style.display = 'initial'; + data.installCount.style.display = ''; + data.ratings.style.display = ''; const version = this.instantiationService.createInstance(Label, data.version, extension, e => e.version); const installCount = this.instantiationService.createInstance(InstallWidget, data.installCount, extension, { small: true }); diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts index 5f732cf8572..399b102723e 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts @@ -18,7 +18,7 @@ import { domEvent } from 'vs/base/browser/event'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { KeyCode } from 'vs/base/common/keyCodes'; import { Viewlet } from 'vs/workbench/browser/viewlet'; -import { append, emmet as $, addStandardDisposableListener, EventType, addClass, removeClass } from 'vs/base/browser/dom'; +import { append, emmet as $, addStandardDisposableListener, EventType, addClass, removeClass, toggleClass } from 'vs/base/browser/dom'; import { IPager, PagedModel } from 'vs/base/common/paging'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { PagedList } from 'vs/base/browser/ui/list/listPaging'; @@ -119,8 +119,13 @@ export class ExtensionsViewlet extends Viewlet implements IExtensionsViewlet { this.searchBox.focus(); } - layout({ height }: Dimension):void { + layout({ height, width }: Dimension):void { this.list.layout(height - 38); + toggleClass(this.root, 'narrow', width <= 300); + } + + getOptimalWidth(): number { + return 400; } getActions(): IAction[] { diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionsWidgets.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionsWidgets.ts index 0c58e21e814..fbc447a0e63 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionsWidgets.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionsWidgets.ts @@ -101,24 +101,30 @@ export class RatingsWidget implements IDisposable { const rating = Math.round(this.extension.rating * 2) / 2; this.container.innerHTML = ''; - if (rating === null) { + if (this.extension.rating === null) { return; } - for (let i = 1; i <= 5; i++) { - if (rating >= i) { - append(this.container, $('span.full.star')); - } else if (rating >= i - 0.5) { - append(this.container, $('span.half.star')); - } else { - append(this.container, $('span.empty.star')); - } + if (this.options.small && this.extension.ratingCount === 0) { + return; } - if (!this.options.small) { - const count = append(this.container, $('span.count')); - count.textContent = String(this.extension.ratingCount); + if (this.options.small) { + append(this.container, $('span.full.star')); + } else { + for (let i = 1; i <= 5; i++) { + if (rating >= i) { + append(this.container, $('span.full.star')); + } else if (rating >= i - 0.5) { + append(this.container, $('span.half.star')); + } else { + append(this.container, $('span.empty.star')); + } + } } + + const count = append(this.container, $('span.count')); + count.textContent = String(this.options.small ? rating : 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 33fd2824e37..70ed0ed69d4 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css @@ -46,6 +46,10 @@ background-position: left center; } +.extensions-viewlet.narrow > .extensions .extension > .icon { + display: none; +} + .extensions-viewlet > .extensions .extension.loading > .icon { display: none; } @@ -59,6 +63,9 @@ .extensions-viewlet > .extensions .extension > .details > .header { display: flex; align-items: baseline; + flex-wrap: wrap; + height: 19px; + overflow: hidden; } .extensions-viewlet > .extensions .extension > .details > .header > .name { @@ -71,6 +78,7 @@ font-size: 80%; padding-left: 6px; flex: 1; + min-width: fit-content; } .extensions-viewlet > .extensions .extension > .details > .header > .install-count:not(:empty) { @@ -87,6 +95,11 @@ text-align: right; } +.extensions-viewlet.narrow > .extensions .extension > .details > .header > .ratings, +.extensions-viewlet.narrow > .extensions .extension > .details > .header > .install-count { + display: none; +} + .extensions-viewlet > .extensions .extension > .details > .footer { display: flex; justify-content: flex-end; 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 4178c0d2aa9..7ddd1d4c880 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensionsWidgets.css +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensionsWidgets.css @@ -7,6 +7,10 @@ display: inline-block; } +.extension-ratings.small { + font-size: 80%; +} + .extension-ratings > .star { display: inline-block; width: 16px; @@ -38,4 +42,8 @@ .extension-ratings > .count { margin-left: 6px; +} + +.extension-ratings.small > .count { + margin-left: 2px; } \ No newline at end of file -- GitLab