From ad4e97584c16996b1c3342aeffbbce6ea3ef070d Mon Sep 17 00:00:00 2001 From: Rob Lourens Date: Wed, 19 Aug 2020 18:18:39 -0700 Subject: [PATCH] Force delete button to right Fix #104082 --- .../notebook/browser/contrib/coreActions.ts | 24 +++++++++++++++---- .../notebook/browser/media/notebook.css | 2 +- .../browser/view/renderers/cellRenderer.ts | 18 ++++++++++---- 3 files changed, 33 insertions(+), 11 deletions(-) diff --git a/src/vs/workbench/contrib/notebook/browser/contrib/coreActions.ts b/src/vs/workbench/contrib/notebook/browser/contrib/coreActions.ts index 63f2adeb309..90000b71cf2 100644 --- a/src/vs/workbench/contrib/notebook/browser/contrib/coreActions.ts +++ b/src/vs/workbench/contrib/notebook/browser/contrib/coreActions.ts @@ -87,8 +87,7 @@ const enum CellToolbarOrder { EditCell, SplitCell, SaveCell, - ClearCellOutput, - DeleteCell + ClearCellOutput } const enum CellOverflowToolbarGroups { @@ -261,6 +260,23 @@ export class CancelCellAction extends MenuItemAction { } } +export class DeleteCellAction extends MenuItemAction { + constructor( + @IContextKeyService contextKeyService: IContextKeyService, + @ICommandService commandService: ICommandService + ) { + super( + { + id: DELETE_CELL_COMMAND_ID, + title: localize('notebookActions.deleteCell', "Delete Cell"), + icon: { id: 'codicon/trash' } + }, + undefined, + { shouldForwardArgs: true }, + contextKeyService, + commandService); + } +} registerAction2(class extends NotebookCellAction { constructor() { @@ -775,9 +791,7 @@ registerAction2(class extends NotebookCellAction { title: localize('notebookActions.deleteCell', "Delete Cell"), menu: { id: MenuId.NotebookCellTitle, - order: CellToolbarOrder.DeleteCell, - when: NOTEBOOK_EDITOR_EDITABLE, - group: CELL_TITLE_CELL_GROUP_ID + when: NOTEBOOK_EDITOR_EDITABLE }, keybinding: { primary: KeyCode.Delete, diff --git a/src/vs/workbench/contrib/notebook/browser/media/notebook.css b/src/vs/workbench/contrib/notebook/browser/media/notebook.css index ffd4ca82fa9..c4bf75602a0 100644 --- a/src/vs/workbench/contrib/notebook/browser/media/notebook.css +++ b/src/vs/workbench/contrib/notebook/browser/media/notebook.css @@ -291,7 +291,7 @@ .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-title-toolbar { visibility: hidden; - display: inline-block; + display: inline-flex; position: absolute; height: 26px; right: 44px; diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts index 40011006554..76a93795aa8 100644 --- a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts +++ b/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts @@ -36,7 +36,7 @@ import { ServiceCollection } from 'vs/platform/instantiation/common/serviceColle import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { INotificationService } from 'vs/platform/notification/common/notification'; import { BOTTOM_CELL_TOOLBAR_HEIGHT, CELL_BOTTOM_MARGIN, CELL_TOP_MARGIN, EDITOR_BOTTOM_PADDING, EDITOR_TOOLBAR_HEIGHT, EDITOR_TOP_PADDING } from 'vs/workbench/contrib/notebook/browser/constants'; -import { CancelCellAction, ExecuteCellAction, INotebookCellActionContext } from 'vs/workbench/contrib/notebook/browser/contrib/coreActions'; +import { CancelCellAction, DeleteCellAction, ExecuteCellAction, INotebookCellActionContext } from 'vs/workbench/contrib/notebook/browser/contrib/coreActions'; import { BaseCellRenderTemplate, CellEditState, CodeCellRenderTemplate, EXPAND_CELL_CONTENT_COMMAND_ID, ICellViewModel, INotebookEditor, isCodeCellRenderTemplate, MarkdownCellRenderTemplate } from 'vs/workbench/contrib/notebook/browser/notebookBrowser'; import { CellContextKeyManager } from 'vs/workbench/contrib/notebook/browser/view/renderers/cellContextKeys'; import { CellMenus } from 'vs/workbench/contrib/notebook/browser/view/renderers/cellMenus'; @@ -379,7 +379,12 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR const container = DOM.append(rootContainer, DOM.$('.cell-inner-container')); const disposables = new DisposableStore(); const contextKeyService = disposables.add(this.contextKeyServiceProvider(container)); - const toolbar = disposables.add(this.createToolbar(container, 'cell-title-toolbar')); + + const titleToolbarContainer = DOM.append(container, $('.cell-title-toolbar')); + const toolbar = disposables.add(this.createToolbar(titleToolbarContainer)); + const deleteToolbar = disposables.add(this.createToolbar(titleToolbarContainer, 'cell-delete-toolbar')); + deleteToolbar.setActions([this.instantiationService.createInstance(DeleteCellAction)]); + const focusIndicatorLeft = DOM.append(container, DOM.$('.cell-focus-indicator.cell-focus-indicator-side.cell-focus-indicator-left')); const codeInnerContent = DOM.append(container, $('.cell.code')); @@ -644,14 +649,17 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende const contextKeyService = disposables.add(this.contextKeyServiceProvider(container)); DOM.append(container, $('.cell-focus-indicator.cell-focus-indicator-top')); - const toolbar = disposables.add(this.createToolbar(container, 'cell-title-toolbar')); + const titleToolbarContainer = DOM.append(container, $('.cell-title-toolbar')); + const toolbar = disposables.add(this.createToolbar(titleToolbarContainer)); + const deleteToolbar = disposables.add(this.createToolbar(titleToolbarContainer, 'cell-delete-toolbar')); + deleteToolbar.setActions([this.instantiationService.createInstance(DeleteCellAction)]); + const focusIndicator = DOM.append(container, DOM.$('.cell-focus-indicator.cell-focus-indicator-side.cell-focus-indicator-left')); const dragHandle = DOM.append(container, DOM.$('.cell-drag-handle')); const cellContainer = DOM.append(container, $('.cell.code')); const runButtonContainer = DOM.append(cellContainer, $('.run-button-container')); - const runToolbar = this.createToolbar(runButtonContainer); - disposables.add(runToolbar); + const runToolbar = disposables.add(this.createToolbar(runButtonContainer)); const executionOrderLabel = DOM.append(runButtonContainer, $('div.execution-count-label'));