maxmustermann/vscode
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

show remote badge when extension icon is hidden

Browse source
This commit is contained in:
Sandeep Somavarapu 2019-04-16 16:16:16 +02:00
parent eb383430e8
commit a357a44042
5 changed files with 94 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/vs/workbench/contrib/extensions/electron-browser/extensionsList.ts
View file

@ -65,7 +65,7 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
const element = append(root, $('.extension'));
const iconContainer = append(element, $('.icon-container'));
const icon = append(iconContainer, $<HTMLImageElement>('img.icon'));
const badgeWidget = this.instantiationService.createInstance(RemoteBadgeWidget, iconContainer);
const iconRemoteBadgeWidget = this.instantiationService.createInstance(RemoteBadgeWidget, iconContainer);
const details = append(element, $('.details'));
const headerContainer = append(details, $('.header-container'));
const header = append(headerContainer, $('.header'));
@ -73,6 +73,7 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
const version = append(header, $('span.version'));
const installCount = append(header, $('span.install-count'));
const ratings = append(header, $('span.ratings'));
const headerRemoteBadgeWidget = this.instantiationService.createInstance(RemoteBadgeWidget, header);
const description = append(details, $('.description.ellipsis'));
const footer = append(details, $('.footer'));
const author = append(footer, $('.author.ellipsis'));
@ -102,7 +103,8 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
const tooltipWidget = this.instantiationService.createInstance(TooltipWidget, root, disabledLabelAction, recommendationWidget);
const widgets = [
recommendationWidget,
badgeWidget,
iconRemoteBadgeWidget,
headerRemoteBadgeWidget,
tooltipWidget,
this.instantiationService.createInstance(Label, version, (e: IExtension) => e.version),
this.instantiationService.createInstance(InstallCountWidget, installCount, true),

92
src/vs/workbench/contrib/extensions/electron-browser/extensionsWidgets.ts
View file

@ -18,6 +18,7 @@ import { IWorkspaceContextService, WorkbenchState } from 'vs/platform/workspace/
import { REMOTE_HOST_SCHEME } from 'vs/platform/remote/common/remoteHosts';
import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService';
import { Emitter, Event } from 'vs/base/common/event';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
export abstract class ExtensionWidget extends Disposable implements IExtensionContainer {
private _extension: IExtension;
@ -238,27 +239,28 @@ export class RecommendationWidget extends ExtensionWidget {
export class RemoteBadgeWidget extends ExtensionWidget {
private element: HTMLElement | null;
private remoteBadge: RemoteBadge | null;
private disposables: IDisposable[] = [];
private element: HTMLElement;
constructor(
private parent: HTMLElement,
@ILabelService private readonly labelService: ILabelService,
@IThemeService private readonly themeService: IThemeService,
parent: HTMLElement,
@IExtensionManagementServerService private readonly extensionManagementServerService: IExtensionManagementServerService,
@IWorkspaceContextService private readonly workspaceContextService: IWorkspaceContextService,
@IWorkbenchEnvironmentService private readonly environmentService: IWorkbenchEnvironmentService
@IInstantiationService private readonly instantiationService: IInstantiationService
) {
super();
this.element = append(parent, $('.extension-remote-badge-container'));
this.render();
this._register(toDisposable(() => this.clear()));
}
private clear(): void {
if (this.element) {
this.parent.removeChild(this.element);
if (this.remoteBadge) {
this.element.removeChild(this.remoteBadge.element);
this.remoteBadge.dispose();
}
this.element = null;
this.remoteBadge = null;
this.disposables = dispose(this.disposables);
}
@ -268,30 +270,56 @@ export class RemoteBadgeWidget extends ExtensionWidget {
return;
}
if (this.extension.server === this.extensionManagementServerService.remoteExtensionManagementServer) {
this.element = append(this.parent, $('div.extension-remote-badge'));
append(this.element, $('span.octicon.octicon-remote'));
const applyBadgeStyle = () => {
if (!this.element) {
return;
}
const bgColor = this.themeService.getTheme().getColor(STATUS_BAR_HOST_NAME_BACKGROUND);
const fgColor = this.workspaceContextService.getWorkbenchState() === WorkbenchState.EMPTY ? this.themeService.getTheme().getColor(STATUS_BAR_NO_FOLDER_FOREGROUND) : this.themeService.getTheme().getColor(STATUS_BAR_FOREGROUND);
this.element.style.backgroundColor = bgColor ? bgColor.toString() : '';
this.element.style.color = fgColor ? fgColor.toString() : '';
};
applyBadgeStyle();
this.themeService.onThemeChange(applyBadgeStyle, this, this.disposables);
this.workspaceContextService.onDidChangeWorkbenchState(applyBadgeStyle, this, this.disposables);
const updateTitle = () => {
if (this.element) {
this.element.title = localize('remote extension title', "Extension in {0}", this.labelService.getHostLabel(REMOTE_HOST_SCHEME, this.environmentService.configuration.remoteAuthority));
}
};
this.labelService.onDidChangeFormatters(() => updateTitle(), this, this.disposables);
updateTitle();
this.remoteBadge = this.instantiationService.createInstance(RemoteBadge);
append(this.element, this.remoteBadge.element);
}
}
dispose(): void {
if (this.remoteBadge) {
this.remoteBadge.dispose();
}
super.dispose();
}
}
class RemoteBadge extends Disposable {
readonly element: HTMLElement;
constructor(
@ILabelService private readonly labelService: ILabelService,
@IThemeService private readonly themeService: IThemeService,
@IWorkspaceContextService private readonly workspaceContextService: IWorkspaceContextService,
@IWorkbenchEnvironmentService private readonly environmentService: IWorkbenchEnvironmentService
) {
super();
this.element = $('div.extension-remote-badge');
this.render();
}
private render(): void {
append(this.element, $('span.octicon.octicon-remote'));
const applyBadgeStyle = () => {
if (!this.element) {
return;
}
const bgColor = this.themeService.getTheme().getColor(STATUS_BAR_HOST_NAME_BACKGROUND);
const fgColor = this.workspaceContextService.getWorkbenchState() === WorkbenchState.EMPTY ? this.themeService.getTheme().getColor(STATUS_BAR_NO_FOLDER_FOREGROUND) : this.themeService.getTheme().getColor(STATUS_BAR_FOREGROUND);
this.element.style.backgroundColor = bgColor ? bgColor.toString() : '';
this.element.style.color = fgColor ? fgColor.toString() : '';
};
applyBadgeStyle();
this._register(this.themeService.onThemeChange(() => applyBadgeStyle()));
this._register(this.workspaceContextService.onDidChangeWorkbenchState(() => applyBadgeStyle()));
const updateTitle = () => {
if (this.element) {
this.element.title = localize('remote extension title', "Extension in {0}", this.labelService.getHostLabel(REMOTE_HOST_SCHEME, this.environmentService.configuration.remoteAuthority));
}
};
this._register(this.labelService.onDidChangeFormatters(() => updateTitle()));
updateTitle();
}
}

2
src/vs/workbench/contrib/extensions/electron-browser/media/extensionEditor.css
View file

@ -39,6 +39,8 @@
width: 38px;
height: 38px;
line-height: 38px;
border-radius: 20px;
text-align: center;
}
.extension-editor > .header > .icon-container .extension-remote-badge .octicon {

30
src/vs/workbench/contrib/extensions/electron-browser/media/extensionsViewlet.css
View file

@ -102,10 +102,32 @@
object-fit: contain;
}
.extensions-viewlet > .extensions .monaco-list-row > .extension > .icon-container > .extension-remote-badge {
.extensions-viewlet > .extensions .monaco-list-row > .extension > .icon-container .extension-remote-badge {
position: absolute;
right: 5px;
bottom: 5px;
width: 22px;
height: 22px;
line-height: 22px;
border-radius: 20px;
text-align: center;
}
.extensions-viewlet > .extensions .monaco-list-row > .extension > .details > .header-container > .header > .extension-remote-badge-container {
margin-left: 6px;
}
.extensions-viewlet > .extensions .monaco-list-row > .extension > .details > .header-container > .header .extension-remote-badge {
width: 14px;
height: 14px;
line-height: 14px;
border-radius: 20px;
text-align: center;
}
.extensions-viewlet > .extensions .monaco-list-row > .extension > .details > .header-container > .header .extension-remote-badge > .octicon {
font-size: 13px;
vertical-align: middle;
}
.extensions-viewlet.narrow > .extensions .extension > .icon-container,
@ -146,10 +168,13 @@
opacity: 0.85;
font-size: 80%;
padding-left: 6px;
flex: 1;
min-width: fit-content;
}
.extensions-viewlet:not(.narrow) > .extensions .extension > .details > .header-container > .header > .version {
flex: 1;
}
.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .install-count:not(:empty) {
font-size: 80%;
margin: 0 6px;
@ -164,6 +189,7 @@
text-align: right;
}
.extensions-viewlet:not(.narrow) > .extensions .extension > .details > .header-container > .header > .extension-remote-badge-container,
.extensions-viewlet.narrow > .extensions .extension > .details > .header-container > .header > .ratings,
.extensions-viewlet.narrow > .extensions .extension > .details > .header-container > .header > .install-count {
display: none;

8
src/vs/workbench/contrib/extensions/electron-browser/media/extensionsWidgets.css
View file

@ -46,12 +46,4 @@
.extension-ratings.small > .count {
margin-left: 2px;
}
.extension-remote-badge {
width: 22px;
height: 22px;
line-height: 22px;
border-radius: 20px;
text-align: center;
}