From 4b6ab496d0f8cad1ff1b7335a2adcdd452c18bd2 Mon Sep 17 00:00:00 2001 From: Justin Chen <54879025+justschen@users.noreply.github.com> Date: Fri, 12 Aug 2022 14:37:58 -0700 Subject: [PATCH] Code action widget style fixes and fix #158030 * added disabled hover * code cleanup on disabled option hovers * removed comments * widget enabled by default * code cleanup and fix on build * clean up on css removed unused importants * small patch for css rules * minor refactor on codeactionitems * fix on disabled option click * fix on disabled option click * added some icons but just temp * added iconws and modified widget look * added beginning logic for menu groupings * looks pretty good for a menu wooo * added headers to menu + removed extra text from option labels * minor code cleanup on group filtering * Refactoring on code action kind * changed styling based on feedback * code cleanup * First couple of fixes on PR for code action kinds * modified icons and refactoring * removed extra push * removed parsing and added code action kind for surround * minor style fixes and fix on border --- .../codeAction/browser/codeActionMenu.ts | 15 +++++---- .../codeAction/browser/media/action.css | 31 ++++++++++--------- 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/src/vs/editor/contrib/codeAction/browser/codeActionMenu.ts b/src/vs/editor/contrib/codeAction/browser/codeActionMenu.ts index 54298742e052f..6cd56c0e6e1ad 100644 --- a/src/vs/editor/contrib/codeAction/browser/codeActionMenu.ts +++ b/src/vs/editor/contrib/codeAction/browser/codeActionMenu.ts @@ -175,7 +175,9 @@ class CodeMenuRenderer implements IListRenderer { const [accept, preview] = this.acceptKeybindings; - data.root.title = localize({ key: 'label', comment: ['placeholders are keybindings, e.g "F2 to Refactor, Shift+F2 to Preview"'] }, "{0} to Refactor, {1} to Preview", this.keybindingService.lookupKeybinding(accept)?.getLabel(), this.keybindingService.lookupKeybinding(preview)?.getLabel()); + + data.root.title = localize({ key: 'label', comment: ['placeholders are keybindings, e.g "F2 to Apply, Shift+F2 to Preview"'] }, "{0} to Apply, {1} to Preview", this.keybindingService.lookupKeybinding(accept)?.getLabel(), this.keybindingService.lookupKeybinding(preview)?.getLabel()); + }; updateLabel(); } @@ -404,15 +406,16 @@ export class CodeActionMenu extends Disposable implements IEditorContribution { if (entry.length > 0 && entry[0] instanceof CodeActionAction) { const firstAction = entry[0].action.kind; if (CodeActionKind.SurroundWith.contains(new CodeActionKind(String(firstAction)))) { - menuEntriesToPush(localize('codeAction.widget.id.surround', 'Surround With ...'), entry); + menuEntriesToPush(localize('codeAction.widget.id.surround', 'Surround With...'), entry); } else if (CodeActionKind.QuickFix.contains(new CodeActionKind(String(firstAction)))) { - menuEntriesToPush(localize('codeAction.widget.id.quickfix', 'Quick Fix ...'), entry); + menuEntriesToPush(localize('codeAction.widget.id.quickfix', 'Quick Fix...'), entry); } else if (CodeActionKind.Extract.contains(new CodeActionKind(String(firstAction)))) { - menuEntriesToPush(localize('codeAction.widget.id.extract', 'Extract ...'), entry); + menuEntriesToPush(localize('codeAction.widget.id.extract', 'Extract...'), entry); } else if (CodeActionKind.Convert.contains(new CodeActionKind(String(firstAction)))) { - menuEntriesToPush(localize('codeAction.widget.id.convert', 'Convert ...'), entry); + menuEntriesToPush(localize('codeAction.widget.id.convert', 'Convert...'), entry); } else if (CodeActionKind.Source.contains(new CodeActionKind(String(firstAction)))) { - menuEntriesToPush(localize('codeAction.widget.id.source', 'Source Action ...'), entry); + menuEntriesToPush(localize('codeAction.widget.id.source', 'Source Action...'), entry); + } else if (firstAction === CodeActionMenu.documentationID) { totalActionEntries.push(...entry); } diff --git a/src/vs/editor/contrib/codeAction/browser/media/action.css b/src/vs/editor/contrib/codeAction/browser/media/action.css index aa1c902c34038..98bd96c9e8ea6 100644 --- a/src/vs/editor/contrib/codeAction/browser/media/action.css +++ b/src/vs/editor/contrib/codeAction/browser/media/action.css @@ -3,6 +3,21 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ +.codeActionMenuWidget .monaco-list:not(.element-focused):focus:before { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 5; /* make sure we are on top of the tree items */ + content: ""; + pointer-events: none; /* enable click through */ + outline: 0px solid !important; /* we still need to handle the empty tree or no focus item case */ + outline-width: 0px !important; + outline-style: none; + outline-offset: 0px; +} + .codeActionMenuWidget { padding: 0px 1px 3px 0px; overflow: auto; @@ -14,27 +29,13 @@ /* flex-direction: column; flex: 0 1 auto; */ width: 100%; - border: 1px solid var(--vscode-menu-separatorBackground); + border: 1px solid var(--vscode-menu-separatorBackground) !important; border-color: none; background-color: var(--vscode-menu-background); color: var(--vscode-menu-foreground); box-shadow: rgb(0,0,0, 16%) 0px 2px 8px; } -.codeActionMenuWidget .monaco-list:not(.element-focused):focus:before { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 5; /* make sure we are on top of the tree items */ - content: ""; - pointer-events: none; /* enable click through */ - outline: 0px solid !important; /* we still need to handle the empty tree or no focus item case */ - outline-width: 0px !important; - outline-style: none; - outline-offset: 0px; -} .codeActionMenuWidget .monaco-list { user-select: none;