From e72af78fd0a7414a05ed776d3ae46be804e0d771 Mon Sep 17 00:00:00 2001 From: Joao Moreno Date: Tue, 21 Jun 2016 17:59:14 +0200 Subject: [PATCH] pimp up extension actions --- .../base/browser/ui/actionbar/actionbar.css | 4 +- src/vs/base/browser/ui/actionbar/actionbar.ts | 7 ++- .../electron-browser/extensionEditor.ts | 4 +- .../electron-browser/extensionsActions.ts | 9 ++-- .../electron-browser/extensionsList.ts | 7 ++- .../media/extensionActions.css | 49 ++++++++++++++++++- .../media/extensionsViewlet.css | 5 ++ 7 files changed, 70 insertions(+), 15 deletions(-) diff --git a/src/vs/base/browser/ui/actionbar/actionbar.css b/src/vs/base/browser/ui/actionbar/actionbar.css index 2cfe0ecafe7..a58a08217a8 100644 --- a/src/vs/base/browser/ui/actionbar/actionbar.css +++ b/src/vs/base/browser/ui/actionbar/actionbar.css @@ -36,7 +36,7 @@ cursor: default; } -.monaco-action-bar .action-item.active { +.monaco-action-bar.animated .action-item.active { -ms-transform: translate(0, -3px); -webkit-transform: translate(0, -3px); -moz-transform: translate(0, -3px); @@ -77,7 +77,7 @@ margin-right: .8em; } -.monaco-action-bar.vertical .action-item.active { +.monaco-action-bar.animated.vertical .action-item.active { -ms-transform: translate(5px, 0); -webkit-transform: translate(5px, 0); -moz-transform: translate(5px, 0); diff --git a/src/vs/base/browser/ui/actionbar/actionbar.ts b/src/vs/base/browser/ui/actionbar/actionbar.ts index 8c73c19bfde..46207f71a75 100644 --- a/src/vs/base/browser/ui/actionbar/actionbar.ts +++ b/src/vs/base/browser/ui/actionbar/actionbar.ts @@ -137,7 +137,7 @@ export class BaseActionItem extends EventEmitter implements IActionItem { public onClick(event: Event): void { DOM.EventHelper.stop(event, true); - + let context: any; if (types.isUndefinedOrNull(this._context)) { context = event; @@ -388,6 +388,7 @@ export interface IActionBarOptions { actionItemProvider?: IActionItemProvider; actionRunner?: IActionRunner; ariaLabel?: string; + animated?: boolean; } let defaultOptions: IActionBarOptions = { @@ -440,6 +441,10 @@ export class ActionBar extends EventEmitter implements IActionRunner { this.domNode = document.createElement('div'); this.domNode.className = 'monaco-action-bar'; + if (options.animated !== false) { + DOM.addClass(this.domNode, 'animated'); + } + let isVertical = this.options.orientation === ActionsOrientation.VERTICAL; if (isVertical) { this.domNode.className += ' vertical'; diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts index 38d033e07bc..264370d6c24 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts @@ -28,7 +28,7 @@ import { IExtensionsViewlet } from './extensions'; import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar'; import { CombinedInstallAction, UpdateAction } from './extensionsActions'; -const actionOptions = { icon: true, label: false }; +const actionOptions = { icon: true, label: true }; export class ExtensionEditor extends BaseEditor { @@ -85,7 +85,7 @@ export class ExtensionEditor extends BaseEditor { this.description = append(details, $('.description')); const actions = append(details, $('.actions')); - this.actionBar = new ActionBar(actions); + this.actionBar = new ActionBar(actions, { animated: false }); this.body = append(root, $('.body')); } diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionsActions.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionsActions.ts index 178f8ad8fce..b3ef7418e98 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionsActions.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionsActions.ts @@ -117,7 +117,7 @@ export class InstallAction extends Action { private disposables: IDisposable[] = []; constructor(private model: ExtensionsModel, private extension: IExtension) { - super('extensions.install', nls.localize('installAction', "Install"), 'octicon octicon-cloud-download', false); + super('extensions.install', nls.localize('installAction', "Install"), 'extension-action install', false); this.disposables.push(this.model.onChange(() => this.updateEnablement())); this.updateEnablement(); @@ -177,7 +177,7 @@ export class UninstallAction extends Action { private disposables: IDisposable[] = []; constructor(private model: ExtensionsModel, private extension: IExtension) { - super('extensions.uninstall', nls.localize('uninstall', "Uninstall"), 'octicon octicon-x', false); + super('extensions.uninstall', nls.localize('uninstall', "Uninstall"), 'extension-action uninstall', false); this.disposables.push(this.model.onChange(() => this.updateEnablement())); this.updateEnablement(); @@ -194,7 +194,6 @@ export class UninstallAction extends Action { return TPromise.as(null); } - return this.model.uninstall(this.extension); // this.enabled = false; @@ -297,13 +296,13 @@ export class CombinedInstallAction extends Action { export class UpdateAction extends Action { - private static EnabledClass = 'extension-update-action octicon octicon-cloud-download'; + private static EnabledClass = 'extension-action update'; private static DisabledClass = `${ UpdateAction.EnabledClass } disabled`; private disposables: IDisposable[] = []; constructor(private model: ExtensionsModel, private extension: IExtension) { - super('extensions.install', nls.localize('installAction', "Install"), UpdateAction.DisabledClass, false); + super('extensions.update', nls.localize('updateAction', "Update"), UpdateAction.DisabledClass, false); this.disposables.push(this.model.onChange(() => this.updateEnablement())); this.updateEnablement(); diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts index bc690b66e93..69cf962cceb 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts @@ -32,7 +32,7 @@ export class Delegate implements IDelegate { getTemplateId() { return 'extension'; } } -const actionOptions = { icon: true, label: false }; +const actionOptions = { icon: true, label: true }; export class Renderer implements IPagedRenderer { @@ -57,7 +57,7 @@ export class Renderer implements IPagedRenderer { const version = append(header, $('span.version.ellipsis')); const author = append(header, $('span.author.ellipsis')); const description = append(details, $('.description.ellipsis')); - const actionbar = new ActionBar(details); + const actionbar = new ActionBar(details, { animated: false }); const disposables = []; const result = { extension: null, element, icon, name, version, author, description, actionbar, disposables }; @@ -89,13 +89,12 @@ export class Renderer implements IPagedRenderer { data.description.textContent = extension.description; const version = new Label(data.version, this.model, extension, e => e.version); - const installAction = new CombinedInstallAction(this.model, extension); const updateAction = new UpdateAction(this.model, extension); data.actionbar.clear(); data.actionbar.push([updateAction, installAction], actionOptions); - data.disposables.push(version, installAction, updateAction); + data.disposables.push(version, installAction, updateAction); } disposeTemplate(data: ITemplateData): void { diff --git a/src/vs/workbench/parts/extensions/electron-browser/media/extensionActions.css b/src/vs/workbench/parts/extensions/electron-browser/media/extensionActions.css index 889bb56307d..d27e14f9f8a 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensionActions.css +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensionActions.css @@ -3,6 +3,53 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-action-bar .action-item .icon.extension-update-action.disabled { +.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.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.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.update { + background-color: #6DA770; +} + +.monaco-action-bar .action-item.disabled .action-label.extension-action.update { display: none; } \ No newline at end of file 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 b4c880b5eae..b66e7ae2142 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css @@ -80,6 +80,11 @@ padding-left: 6px; } +.extensions-viewlet > .extensions .extension > .details > .monaco-action-bar .action-label { + margin-right: 0; + margin-left: 0.3em; +} + .extensions-viewlet > .extensions .extension .ellipsis { overflow: hidden; white-space: nowrap; -- GitLab