Skip to content

Commit

Permalink
Proper fix #86192
Browse files Browse the repository at this point in the history
  • Loading branch information
@sandy081
sandy081 committed Jun 12, 2020
1 parent 5711fad commit 7bf2e47
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 36 deletions.
83 changes: 52 additions & 31 deletions src/vs/workbench/contrib/extensions/browser/extensionsList.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/

import 'vs/css!./media/extension';
import { append, $, addClass, removeClass } from 'vs/base/browser/dom';
import { append, $, addClass, removeClass, toggleClass } from 'vs/base/browser/dom';
import { IDisposable, dispose, combinedDisposable } from 'vs/base/common/lifecycle';
import { IAction } from 'vs/base/common/actions';
import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
Expand All @@ -21,8 +21,8 @@ import { IExtensionService } from 'vs/workbench/services/extensions/common/exten
import { IExtensionManagementServerService } from 'vs/workbench/services/extensionManagement/common/extensionManagement';
import { INotificationService } from 'vs/platform/notification/common/notification';
import { isLanguagePackExtension } from 'vs/platform/extensions/common/extensions';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { foreground } from 'vs/platform/theme/common/colorRegistry';
import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
import { foreground, listActiveSelectionForeground, listActiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionBackground, listFocusForeground, listFocusBackground, listHoverForeground, listHoverBackground } from 'vs/platform/theme/common/colorRegistry';
import { WORKBENCH_BACKGROUND } from 'vs/workbench/common/theme';

export interface IExtensionsViewState {
Expand Down Expand Up @@ -61,7 +61,6 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
@IExtensionService private readonly extensionService: IExtensionService,
@IExtensionManagementServerService private readonly extensionManagementServerService: IExtensionManagementServerService,
@IExtensionsWorkbenchService private readonly extensionsWorkbenchService: IExtensionsWorkbenchService,
@IThemeService private readonly themeService: IThemeService,
) { }

get templateId() { return 'extension'; }
Expand Down Expand Up @@ -167,23 +166,10 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
const runningExtension = runningExtensions.filter(e => areSameExtensions({ id: e.identifier.value, uuid: e.uuid }, extension.identifier))[0];
isDisabled = !(runningExtension && extension.server === this.extensionManagementServerService.getExtensionManagementServer(runningExtension.extensionLocation));
}

};
const updateStyles = () => {
data.author.style.color = '';
data.root.style.color = '';
if (isDisabled) {
addClass(data.root, 'disabled');
data.root.style.color = this.getDisabledForeground();
} else {
removeClass(data.root, 'disabled');
data.author.style.color = this.getAuthorForeground();
}
toggleClass(data.root, 'disabled', isDisabled);
};

updateEnablement().then(() => updateStyles());
this.extensionService.onDidChangeExtensions(() => updateEnablement().then(() => updateStyles()), this, data.extensionDisposables);
this.themeService.onDidColorThemeChange(() => updateStyles(), this, data.extensionDisposables);
updateEnablement();
this.extensionService.onDidChangeExtensions(() => updateEnablement(), this, data.extensionDisposables);

const onError = Event.once(domEvent(data.icon, 'error'));
onError(() => data.icon.src = extension.iconUrlFallback, null, data.extensionDisposables);
Expand Down Expand Up @@ -221,19 +207,54 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {

}

private getAuthorForeground(): string {
const colorTheme = this.themeService.getColorTheme();
const foregroundColor = colorTheme.getColor(foreground);
return foregroundColor ? foregroundColor.transparent(.9).makeOpaque(WORKBENCH_BACKGROUND(colorTheme)).toString() : '';
disposeTemplate(data: ITemplateData): void {
data.disposables = dispose(data.disposables);
}
}

private getDisabledForeground(): string {
const colorTheme = this.themeService.getColorTheme();
const foregroundColor = colorTheme.getColor(foreground);
return foregroundColor ? foregroundColor.transparent(.5).makeOpaque(WORKBENCH_BACKGROUND(colorTheme)).toString() : '';
registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
const foregroundColor = theme.getColor(foreground);
if (foregroundColor) {
const authorForeground = foregroundColor.transparent(.9).makeOpaque(WORKBENCH_BACKGROUND(theme));
collector.addRule(`.extensions-list .monaco-list .monaco-list-row:not(.disabled) .author { color: ${authorForeground}; }`);
const disabledExtensionForeground = foregroundColor.transparent(.5).makeOpaque(WORKBENCH_BACKGROUND(theme));
collector.addRule(`.extensions-list .monaco-list .monaco-list-row.disabled { color: ${disabledExtensionForeground}; }`);
}

disposeTemplate(data: ITemplateData): void {
data.disposables = dispose(data.disposables);
const listActiveSelectionForegroundColor = theme.getColor(listActiveSelectionForeground);
const listActiveSelectionBackgroundColor = theme.getColor(listActiveSelectionBackground);
if (listActiveSelectionForegroundColor && listActiveSelectionBackgroundColor) {
const authorForeground = listActiveSelectionForegroundColor.transparent(.9).makeOpaque(listActiveSelectionBackgroundColor);
collector.addRule(`.extensions-list .monaco-list:focus .monaco-list-row:not(.disabled).selected.focused .author { color: ${authorForeground}; }`);
const disabledExtensionForeground = listActiveSelectionForegroundColor.transparent(.5).makeOpaque(listActiveSelectionBackgroundColor);
collector.addRule(`.extensions-list .monaco-list:focus .monaco-list-row.disabled.selected.focused { color: ${disabledExtensionForeground}; }`);
}
}

const listInactiveSelectionForegroundColor = theme.getColor(listInactiveSelectionForeground);
const listInactiveSelectionBackgroundColor = theme.getColor(listInactiveSelectionBackground);
if (listInactiveSelectionForegroundColor && listInactiveSelectionBackgroundColor) {
const authorForeground = listInactiveSelectionForegroundColor.transparent(.9).makeOpaque(listInactiveSelectionBackgroundColor);
collector.addRule(`.extensions-list .monaco-list .monaco-list-row:not(.disabled).selected.focused .author { color: ${authorForeground}; }`);
const disabledExtensionForeground = listInactiveSelectionForegroundColor.transparent(.5).makeOpaque(listInactiveSelectionBackgroundColor);
collector.addRule(`.extensions-list .monaco-list .monaco-list-row.disabled.selected.focused { color: ${disabledExtensionForeground}; }`);
}

const listFocusForegroundColor = theme.getColor(listFocusForeground);
const listFocusBackgroundColor = theme.getColor(listFocusBackground);
if (listFocusForegroundColor && listFocusBackgroundColor) {
const authorForeground = listFocusForegroundColor.transparent(.9).makeOpaque(listFocusBackgroundColor);
collector.addRule(`.extensions-list .monaco-list:focus .monaco-list-row:not(.disabled).focused .author { color: ${authorForeground}; }`);
const disabledExtensionForeground = listFocusForegroundColor.transparent(.5).makeOpaque(listFocusBackgroundColor);
collector.addRule(`.extensions-list .monaco-list:focus .monaco-list-row.disabled.focused { color: ${disabledExtensionForeground}; }`);
}

const listHoverForegroundColor = theme.getColor(listHoverForeground);
const listHoverBackgroundColor = theme.getColor(listHoverBackground);
if (listHoverForegroundColor && listHoverBackgroundColor) {
const authorForeground = listHoverForegroundColor.transparent(.9).makeOpaque(listHoverBackgroundColor);
collector.addRule(`.extensions-list .monaco-list .monaco-list-row:hover:not(.disabled):not(.selected):.not(.focused) .author { color: ${authorForeground}; }`);
const disabledExtensionForeground = listHoverForegroundColor.transparent(.5).makeOpaque(listHoverBackgroundColor);
collector.addRule(`.extensions-list .monaco-list .monaco-list-row.disabled:hover:not(.selected):.not(.focused) { color: ${disabledExtensionForeground}; }`);
}
});

5 changes: 0 additions & 5 deletions src/vs/workbench/contrib/extensions/browser/media/extensionsViewlet.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,11 +103,6 @@
display: none;
}

.extensions-viewlet > .extensions .selected .extension-list-item > .details > .footer > .author,
.extensions-viewlet > .extensions .selected.focused .extension-list-item > .details > .footer > .author {
opacity: 1;
}

.extensions-viewlet.narrow > .extensions .extension-list-item > .details > .footer > .monaco-action-bar > .actions-container .extension-action {
max-width: 100px;
}
Expand Down

0 comments on commit 7bf2e47

Please sign in to comment.