diff --git a/src/vs/workbench/parts/extensions/browser/extensionsActions.ts b/src/vs/workbench/parts/extensions/browser/extensionsActions.ts index 47ccf37113e0594ac22cbf6129403b449cc2a4d4..3b557abaf33cf8a9a2fd5e923fbf26ce3bd6c031 100644 --- a/src/vs/workbench/parts/extensions/browser/extensionsActions.ts +++ b/src/vs/workbench/parts/extensions/browser/extensionsActions.ts @@ -32,13 +32,16 @@ import { IExtensionService, IExtensionDescription } from 'vs/platform/extensions import URI from 'vs/base/common/uri'; import { CommandsRegistry } from 'vs/platform/commands/common/commands'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; +import { registerThemingParticipant, ITheme, ICssStyleCollector } from "vs/platform/theme/common/themeService"; +import { buttonBackground, buttonForeground, buttonHoverBackground, contrastBorder, registerColor } from "vs/platform/theme/common/colorRegistry"; +import { Color } from "vs/base/common/color"; export class InstallAction extends Action { private static InstallLabel = localize('installAction', "Install"); private static InstallingLabel = localize('installing', "Installing"); - private static Class = 'extension-action install'; + private static Class = 'extension-action prominent install'; private static InstallingClass = 'extension-action install installing'; private disposables: IDisposable[] = []; @@ -153,7 +156,7 @@ export class UninstallAction extends Action { export class CombinedInstallAction extends Action { - private static NoExtensionClass = 'extension-action install no-extension'; + private static NoExtensionClass = 'extension-action prominent install no-extension'; private installAction: InstallAction; private uninstallAction: UninstallAction; private disposables: IDisposable[] = []; @@ -224,7 +227,7 @@ export class CombinedInstallAction extends Action { export class UpdateAction extends Action { - private static EnabledClass = 'extension-action update'; + private static EnabledClass = 'extension-action prominent update'; private static DisabledClass = `${UpdateAction.EnabledClass} disabled`; private static Label = localize('updateAction', "Update"); @@ -477,7 +480,7 @@ export class EnableGloballyAction extends Action implements IExtensionAction { export class EnableAction extends Action { static ID = 'extensions.enable'; - private static EnabledClass = 'extension-action enable'; + private static EnabledClass = 'extension-action prominent enable'; private static DisabledClass = `${EnableAction.EnabledClass} disabled`; private disposables: IDisposable[] = []; @@ -1385,3 +1388,58 @@ CommandsRegistry.registerCommand('workbench.extensions.action.showLanguageExtens viewlet.focus(); }); }); + +export const extensionButtonProminentBackground = registerColor('extensionButton.prominentBackground', { + dark: '#327e36', + light: '#327e36', + hc: null +}, localize('extensionButtonProminentBackground', "Button background color for actions extension that stand out (e.g. install button).")); + +export const extensionButtonProminentForeground = registerColor('extensionButton.prominentForeground', { + dark: Color.white, + light: Color.white, + hc: null +}, localize('extensionButtonProminentForeground', "Button foreground color for actions extension that stand out (e.g. install button).")); + +export const extensionButtonProminentHoverBackground = registerColor('extensionButton.prominentHoverBackground', { + dark: '#28632b', + light: '#28632b', + hc: null +}, localize('extensionButtonProminentHoverBackground', "Button background hover color for actions extension that stand out (e.g. install button).")); + +registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { + const buttonBackgroundColor = theme.getColor(buttonBackground); + if (buttonBackgroundColor) { + collector.addRule(`.monaco-action-bar .action-item .action-label.extension-action { background-color: ${buttonBackgroundColor}; }`); + } + + const buttonForegroundColor = theme.getColor(buttonForeground); + if (buttonForegroundColor) { + collector.addRule(`.monaco-action-bar .action-item .action-label.extension-action { color: ${buttonForegroundColor}; }`); + } + + const buttonHoverBackgroundColor = theme.getColor(buttonHoverBackground); + if (buttonHoverBackgroundColor) { + collector.addRule(`.monaco-action-bar .action-item:hover .action-label.extension-action { background-color: ${buttonHoverBackgroundColor}; }`); + } + + const contrastBorderColor = theme.getColor(contrastBorder); + if (contrastBorderColor) { + collector.addRule(`.monaco-action-bar .action-item .action-label.extension-action { border: 1px solid ${contrastBorderColor}; }`); + } + + const extensionButtonProminentBackgroundColor = theme.getColor(extensionButtonProminentBackground); + if (extensionButtonProminentBackground) { + collector.addRule(`.monaco-action-bar .action-item .action-label.extension-action.prominent { background-color: ${extensionButtonProminentBackgroundColor}; }`); + } + + const extensionButtonProminentForegroundColor = theme.getColor(extensionButtonProminentForeground); + if (extensionButtonProminentForeground) { + collector.addRule(`.monaco-action-bar .action-item .action-label.extension-action.prominent { color: ${extensionButtonProminentForegroundColor}; }`); + } + + const extensionButtonProminentHoverBackgroundColor = theme.getColor(extensionButtonProminentHoverBackground); + if (extensionButtonProminentHoverBackground) { + collector.addRule(`.monaco-action-bar .action-item:hover .action-label.extension-action.prominent { background-color: ${extensionButtonProminentHoverBackgroundColor}; }`); + } +}); \ No newline at end of file diff --git a/src/vs/workbench/parts/extensions/browser/media/extensionActions.css b/src/vs/workbench/parts/extensions/browser/media/extensionActions.css index 5a51986dce882f7b197e117fd261b61a6d70a3ab..e80db60cdef0e8f904b2a26d66ad93229f953d85 100644 --- a/src/vs/workbench/parts/extensions/browser/media/extensionActions.css +++ b/src/vs/workbench/parts/extensions/browser/media/extensionActions.css @@ -4,69 +4,10 @@ *--------------------------------------------------------------------------------------------*/ .monaco-action-bar .action-item .action-label.extension-action { - border: 1px solid #CCC; - color: #6C6C6C; - background-color: #E2E2E2; padding: 0 5px; line-height: initial; } -.monaco-action-bar .action-item:not(.disabled):hover .action-label.extension-action { - background-color: #D9D9D9; -} - -.monaco-action-bar .action-item:not(.disabled):active .action-label.extension-action { - background-color: #C9C9C9; -} - -.vs-dark .monaco-action-bar .action-item .action-label.extension-action { - border: 1px solid #545454; - color: #CCC; - background-color: #3A3A3A; -} - -.vs-dark .monaco-action-bar .action-item:not(.disabled):hover .action-label.extension-action { - background-color: #464646; -} - -.vs-dark .monaco-action-bar .action-item:not(.disabled):active .action-label.extension-action { - background-color: #505050; -} - -.monaco-action-bar .action-item .action-label.extension-action.install, -.monaco-action-bar .action-item .action-label.extension-action.enable, -.monaco-action-bar .action-item .action-label.extension-action.update { - color: white; - background-color: #327e36; - border-color: #519A55; -} - -.monaco-action-bar .action-item:not(.disabled):hover .action-label.extension-action.install, -.monaco-action-bar .action-item:not(.disabled):hover .action-label.extension-action.enable, -.monaco-action-bar .action-item:not(.disabled):hover .action-label.extension-action.update { - background-color: #478E4B; -} - -.monaco-action-bar .action-item:not(.disabled):active .action-label.extension-action.install, -.monaco-action-bar .action-item:not(.disabled):active .action-label.extension-action.enable, -.monaco-action-bar .action-item:not(.disabled):active .action-label.extension-action.update { - background-color: #6DA770; -} - -.monaco-action-bar .action-item .action-label.extension-action.reload { - color: white; - background-color: #007ACC; - border-color: #3F8BCE; -} - -.monaco-action-bar .action-item:not(.disabled):hover .action-label.extension-action.reload { - background-color: #2584C4; -} - -.monaco-action-bar .action-item:not(.disabled):active .action-label.extension-action.reload { - background-color: #4294CC -} - .monaco-action-bar .action-item .action-label.clear-extensions { background: url('clear.svg') center center no-repeat; }