insert toolbar on the left.
This commit is contained in:
parent
18296326a9
commit
2b6564c101
5 changed files with 118 additions and 15 deletions
|
@ -1027,7 +1027,25 @@ MenuRegistry.appendMenuItem(MenuId.NotebookCellBetween, {
|
|||
},
|
||||
order: 0,
|
||||
group: 'inline',
|
||||
when: NOTEBOOK_EDITOR_EDITABLE.isEqualTo(true)
|
||||
when: ContextKeyExpr.and(
|
||||
NOTEBOOK_EDITOR_EDITABLE.isEqualTo(true),
|
||||
ContextKeyExpr.notEquals('config.notebook.experimental.insertToolbarAlignment', 'left')
|
||||
)
|
||||
});
|
||||
|
||||
MenuRegistry.appendMenuItem(MenuId.NotebookCellBetween, {
|
||||
command: {
|
||||
id: INSERT_CODE_CELL_BELOW_COMMAND_ID,
|
||||
title: localize('notebookActions.menu.insertCode.minimalToolbar', "Add Code"),
|
||||
icon: Codicon.add,
|
||||
tooltip: localize('notebookActions.menu.insertCode.tooltip', "Add Code Cell")
|
||||
},
|
||||
order: 0,
|
||||
group: 'inline',
|
||||
when: ContextKeyExpr.and(
|
||||
NOTEBOOK_EDITOR_EDITABLE.isEqualTo(true),
|
||||
ContextKeyExpr.equals('config.notebook.experimental.insertToolbarAlignment', 'left')
|
||||
)
|
||||
});
|
||||
|
||||
MenuRegistry.appendMenuItem(MenuId.NotebookToolbar, {
|
||||
|
@ -1054,7 +1072,25 @@ MenuRegistry.appendMenuItem(MenuId.NotebookCellListTop, {
|
|||
},
|
||||
order: 0,
|
||||
group: 'inline',
|
||||
when: NOTEBOOK_EDITOR_EDITABLE.isEqualTo(true)
|
||||
when: ContextKeyExpr.and(
|
||||
NOTEBOOK_EDITOR_EDITABLE.isEqualTo(true),
|
||||
ContextKeyExpr.notEquals('config.notebook.experimental.insertToolbarAlignment', 'left')
|
||||
)
|
||||
});
|
||||
|
||||
MenuRegistry.appendMenuItem(MenuId.NotebookCellListTop, {
|
||||
command: {
|
||||
id: INSERT_CODE_CELL_AT_TOP_COMMAND_ID,
|
||||
title: localize('notebookActions.menu.insertCode.minimaltoolbar', "Add Code"),
|
||||
icon: Codicon.add,
|
||||
tooltip: localize('notebookActions.menu.insertCode.tooltip', "Add Code Cell")
|
||||
},
|
||||
order: 0,
|
||||
group: 'inline',
|
||||
when: ContextKeyExpr.and(
|
||||
NOTEBOOK_EDITOR_EDITABLE.isEqualTo(true),
|
||||
ContextKeyExpr.equals('config.notebook.experimental.insertToolbarAlignment', 'left')
|
||||
)
|
||||
});
|
||||
|
||||
registerAction2(class InsertMarkdownCellAboveAction extends InsertCellCommand {
|
||||
|
@ -1097,7 +1133,10 @@ MenuRegistry.appendMenuItem(MenuId.NotebookCellBetween, {
|
|||
},
|
||||
order: 1,
|
||||
group: 'inline',
|
||||
when: NOTEBOOK_EDITOR_EDITABLE.isEqualTo(true)
|
||||
when: ContextKeyExpr.and(
|
||||
NOTEBOOK_EDITOR_EDITABLE.isEqualTo(true),
|
||||
ContextKeyExpr.notEquals('config.notebook.experimental.insertToolbarAlignment', 'left')
|
||||
)
|
||||
});
|
||||
|
||||
MenuRegistry.appendMenuItem(MenuId.NotebookToolbar, {
|
||||
|
@ -1124,7 +1163,10 @@ MenuRegistry.appendMenuItem(MenuId.NotebookCellListTop, {
|
|||
},
|
||||
order: 1,
|
||||
group: 'inline',
|
||||
when: NOTEBOOK_EDITOR_EDITABLE.isEqualTo(true)
|
||||
when: ContextKeyExpr.and(
|
||||
NOTEBOOK_EDITOR_EDITABLE.isEqualTo(true),
|
||||
ContextKeyExpr.notEquals('config.notebook.experimental.insertToolbarAlignment', 'left')
|
||||
)
|
||||
});
|
||||
|
||||
registerAction2(class EditCellAction extends NotebookCellAction {
|
||||
|
|
|
@ -369,7 +369,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
|
|||
this._updateForNotebookConfiguration();
|
||||
}
|
||||
|
||||
if (e.compactView || e.focusIndicator || e.insertToolbarPosition || e.cellToolbarLocation || e.dragAndDropEnabled || e.fontSize) {
|
||||
if (e.compactView || e.focusIndicator || e.insertToolbarPosition || e.cellToolbarLocation || e.dragAndDropEnabled || e.fontSize || e.insertToolbarAlignment) {
|
||||
this._styleElement?.remove();
|
||||
this._createLayoutStyles();
|
||||
this._webview?.updateOptions(this.notebookOptions.computeWebviewOptions());
|
||||
|
@ -564,6 +564,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
|
|||
compactView,
|
||||
focusIndicator,
|
||||
insertToolbarPosition,
|
||||
insertToolbarAlignment,
|
||||
fontSize
|
||||
} = this._notebookOptions.getLayoutConfiguration();
|
||||
|
||||
|
@ -669,6 +670,35 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
|
|||
styleSheets.push(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .cell-list-top-cell-toolbar-container { display: none; }`);
|
||||
}
|
||||
|
||||
if (insertToolbarAlignment === 'left') {
|
||||
styleSheets.push(`
|
||||
.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .action-item:first-child,
|
||||
.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .action-item:first-child, .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container .action-item:first-child {
|
||||
margin-right: 0px !important;
|
||||
}`);
|
||||
|
||||
styleSheets.push(`
|
||||
.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .monaco-toolbar .action-label,
|
||||
.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .monaco-toolbar .action-label, .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container .monaco-toolbar .action-label {
|
||||
padding: 0px !important;
|
||||
justify-content: center;
|
||||
}`);
|
||||
|
||||
styleSheets.push(`
|
||||
.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container,
|
||||
.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container, .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container {
|
||||
align-items: flex-start;
|
||||
justify-content: left;
|
||||
margin: 0 16px 0 8px;
|
||||
}`);
|
||||
|
||||
styleSheets.push(`
|
||||
.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container,
|
||||
.notebookOverlay .cell-bottom-toolbar-container .action-item {
|
||||
border: 0px;
|
||||
}`);
|
||||
}
|
||||
|
||||
// top insert toolbar
|
||||
const topInsertToolbarHeight = this._notebookOptions.computeTopInserToolbarHeight(this.viewModel?.viewType);
|
||||
styleSheets.push(`.notebookOverlay .cell-list-top-cell-toolbar-container { top: -${topInsertToolbarHeight}px }`);
|
||||
|
|
|
@ -26,7 +26,7 @@ import { ITextModel } from 'vs/editor/common/model';
|
|||
import * as modes from 'vs/editor/common/modes';
|
||||
import { tokenizeLineToHTML } from 'vs/editor/common/modes/textToHtmlTokenizer';
|
||||
import { localize } from 'vs/nls';
|
||||
import { createActionViewItem, createAndFillInActionBarActions } from 'vs/platform/actions/browser/menuEntryActionViewItem';
|
||||
import { createActionViewItem, createAndFillInActionBarActions, MenuEntryActionViewItem } from 'vs/platform/actions/browser/menuEntryActionViewItem';
|
||||
import { IMenu, MenuItemAction } from 'vs/platform/actions/common/actions';
|
||||
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
|
||||
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
|
||||
|
@ -52,6 +52,7 @@ import { ThemeIcon } from 'vs/platform/theme/common/themeService';
|
|||
import { errorStateIcon, successStateIcon, unfoldIcon } from 'vs/workbench/contrib/notebook/browser/notebookIcons';
|
||||
import { syncing } from 'vs/platform/theme/common/iconRegistry';
|
||||
import { CellEditorOptions } from 'vs/workbench/contrib/notebook/browser/view/renderers/cellEditorOptions';
|
||||
import { NotebookOptions } from 'vs/workbench/contrib/notebook/common/notebookOptions';
|
||||
|
||||
const $ = DOM.$;
|
||||
|
||||
|
@ -108,12 +109,15 @@ abstract class AbstractCellRenderer {
|
|||
this.dndController = undefined;
|
||||
}
|
||||
|
||||
protected createBetweenCellToolbar(container: HTMLElement, disposables: DisposableStore, contextKeyService: IContextKeyService): ToolBar {
|
||||
protected createBetweenCellToolbar(container: HTMLElement, disposables: DisposableStore, contextKeyService: IContextKeyService, notebookOptions: NotebookOptions): ToolBar {
|
||||
const toolbar = new ToolBar(container, this.contextMenuService, {
|
||||
actionViewItemProvider: action => {
|
||||
if (action instanceof MenuItemAction) {
|
||||
const item = new CodiconActionViewItem(action, this.keybindingService, this.notificationService);
|
||||
return item;
|
||||
if (notebookOptions.getLayoutConfiguration().insertToolbarAlignment === 'center') {
|
||||
return new CodiconActionViewItem(action, this.keybindingService, this.notificationService);
|
||||
} else {
|
||||
return new MenuEntryActionViewItem(action, this.keybindingService, this.notificationService);
|
||||
}
|
||||
}
|
||||
|
||||
return undefined;
|
||||
|
@ -129,6 +133,11 @@ abstract class AbstractCellRenderer {
|
|||
};
|
||||
|
||||
disposables.add(menu.onDidChange(() => updateActions()));
|
||||
disposables.add(notebookOptions.onDidChangeOptions((e) => {
|
||||
if (e.insertToolbarAlignment) {
|
||||
updateActions();
|
||||
}
|
||||
}));
|
||||
updateActions();
|
||||
|
||||
return toolbar;
|
||||
|
@ -342,7 +351,7 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR
|
|||
const { collapsedPart, expandButton } = this.setupCollapsedPart(container);
|
||||
|
||||
const bottomCellContainer = DOM.append(container, $('.cell-bottom-toolbar-container'));
|
||||
const betweenCellToolbar = disposables.add(this.createBetweenCellToolbar(bottomCellContainer, disposables, contextKeyService));
|
||||
const betweenCellToolbar = disposables.add(this.createBetweenCellToolbar(bottomCellContainer, disposables, contextKeyService, this.notebookEditor.notebookOptions));
|
||||
const focusIndicatorBottom = DOM.append(container, $('.cell-focus-indicator.cell-focus-indicator-bottom'));
|
||||
|
||||
const statusBar = disposables.add(this.instantiationService.createInstance(CellEditorStatusBar, editorPart));
|
||||
|
@ -727,7 +736,7 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
|
|||
focusSinkElement.setAttribute('tabindex', '0');
|
||||
const bottomCellContainer = DOM.append(container, $('.cell-bottom-toolbar-container'));
|
||||
const focusIndicatorBottom = DOM.append(container, $('.cell-focus-indicator.cell-focus-indicator-bottom'));
|
||||
const betweenCellToolbar = this.createBetweenCellToolbar(bottomCellContainer, disposables, contextKeyService);
|
||||
const betweenCellToolbar = this.createBetweenCellToolbar(bottomCellContainer, disposables, contextKeyService, this.notebookEditor.notebookOptions);
|
||||
|
||||
const titleMenu = disposables.add(this.cellMenus.getCellTitleMenu(contextKeyService));
|
||||
|
||||
|
|
|
@ -908,6 +908,7 @@ export const ExperimentalUseMarkdownRenderer = 'notebook.experimental.useMarkdow
|
|||
export const ExperimentalCompactView = 'notebook.experimental.compactView';
|
||||
export const ExperimentalFocusIndicator = 'notebook.experimental.cellFocusIndicator';
|
||||
export const ExperimentalInsertToolbarPosition = 'notebook.experimental.insertToolbarPosition';
|
||||
export const ExperimentalInsertToolbarAlignment = 'notebook.experimental.insertToolbarAlignment';
|
||||
export const ExperimentalGlobalToolbar = 'notebook.experimental.globalToolbar';
|
||||
export const ExperimentalUndoRedoPerCell = 'notebook.experimental.undoRedoPerCell';
|
||||
export const ExperimentalConsolidatedOutputButton = 'notebook.experimental.consolidatedOutputButton';
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
import { Emitter } from 'vs/base/common/event';
|
||||
import { IDisposable } from 'vs/base/common/lifecycle';
|
||||
import { IConfigurationChangeEvent, IConfigurationService } from 'vs/platform/configuration/common/configuration';
|
||||
import { CellToolbarLocKey, CellToolbarVisibility, ExperimentalCompactView, ExperimentalConsolidatedOutputButton, ExperimentalDragAndDropEnabled, ExperimentalFocusIndicator, ExperimentalGlobalToolbar, ExperimentalInsertToolbarPosition, ExperimentalShowFoldingControls, ShowCellStatusBarKey } from 'vs/workbench/contrib/notebook/common/notebookCommon';
|
||||
import { CellToolbarLocKey, CellToolbarVisibility, ExperimentalCompactView, ExperimentalConsolidatedOutputButton, ExperimentalDragAndDropEnabled, ExperimentalFocusIndicator, ExperimentalGlobalToolbar, ExperimentalInsertToolbarAlignment, ExperimentalInsertToolbarPosition, ExperimentalShowFoldingControls, ShowCellStatusBarKey } from 'vs/workbench/contrib/notebook/common/notebookCommon';
|
||||
|
||||
const SCROLLABLE_ELEMENT_PADDING_TOP = 18;
|
||||
|
||||
|
@ -49,6 +49,7 @@ export interface NotebookLayoutConfiguration {
|
|||
compactView: boolean;
|
||||
focusIndicator: 'border' | 'gutter';
|
||||
insertToolbarPosition: 'betweenCells' | 'notebookToolbar' | 'both' | 'hidden';
|
||||
insertToolbarAlignment: 'left' | 'center';
|
||||
globalToolbar: boolean;
|
||||
consolidatedOutputButton: boolean;
|
||||
showFoldingControls: 'always' | 'mouseover';
|
||||
|
@ -64,6 +65,7 @@ interface NotebookOptionsChangeEvent {
|
|||
compactView?: boolean;
|
||||
focusIndicator?: boolean;
|
||||
insertToolbarPosition?: boolean;
|
||||
insertToolbarAlignment?: boolean;
|
||||
globalToolbar?: boolean;
|
||||
showFoldingControls?: boolean;
|
||||
consolidatedOutputButton?: boolean;
|
||||
|
@ -103,8 +105,9 @@ export class NotebookOptions {
|
|||
const compactView = this.configurationService.getValue<boolean>(ExperimentalCompactView);
|
||||
const focusIndicator = this._computeFocusIndicatorOption();
|
||||
const insertToolbarPosition = this._computeInsertToolbarPositionOption();
|
||||
const insertToolbarAlignment = this._computeInsertToolbarAlignmentOption();
|
||||
const showFoldingControls = this._computeShowFoldingControlsOption();
|
||||
const { bottomToolbarGap, bottomToolbarHeight } = this._computeBottomToolbarDimensions(compactView, insertToolbarPosition);
|
||||
const { bottomToolbarGap, bottomToolbarHeight } = this._computeBottomToolbarDimensions(compactView, insertToolbarPosition, insertToolbarAlignment);
|
||||
const fontSize = this.configurationService.getValue<number>('editor.fontSize');
|
||||
|
||||
this._disposables = [];
|
||||
|
@ -132,6 +135,7 @@ export class NotebookOptions {
|
|||
compactView,
|
||||
focusIndicator,
|
||||
insertToolbarPosition,
|
||||
insertToolbarAlignment,
|
||||
showFoldingControls,
|
||||
fontSize
|
||||
};
|
||||
|
@ -155,6 +159,7 @@ export class NotebookOptions {
|
|||
const compactView = e.affectsConfiguration(ExperimentalCompactView);
|
||||
const focusIndicator = e.affectsConfiguration(ExperimentalFocusIndicator);
|
||||
const insertToolbarPosition = e.affectsConfiguration(ExperimentalInsertToolbarPosition);
|
||||
const insertToolbarAlignment = e.affectsConfiguration(ExperimentalInsertToolbarAlignment);
|
||||
const globalToolbar = e.affectsConfiguration(ExperimentalGlobalToolbar);
|
||||
const consolidatedOutputButton = e.affectsConfiguration(ExperimentalConsolidatedOutputButton);
|
||||
const showFoldingControls = e.affectsConfiguration(ExperimentalShowFoldingControls);
|
||||
|
@ -168,6 +173,7 @@ export class NotebookOptions {
|
|||
&& !compactView
|
||||
&& !focusIndicator
|
||||
&& !insertToolbarPosition
|
||||
&& !insertToolbarAlignment
|
||||
&& !globalToolbar
|
||||
&& !consolidatedOutputButton
|
||||
&& !showFoldingControls
|
||||
|
@ -202,9 +208,13 @@ export class NotebookOptions {
|
|||
configuration.compactView = compactViewValue;
|
||||
}
|
||||
|
||||
if (insertToolbarAlignment) {
|
||||
configuration.insertToolbarAlignment = this._computeInsertToolbarAlignmentOption();
|
||||
}
|
||||
|
||||
if (insertToolbarPosition) {
|
||||
configuration.insertToolbarPosition = this._computeInsertToolbarPositionOption();
|
||||
const { bottomToolbarGap, bottomToolbarHeight } = this._computeBottomToolbarDimensions(configuration.compactView, configuration.insertToolbarPosition);
|
||||
const { bottomToolbarGap, bottomToolbarHeight } = this._computeBottomToolbarDimensions(configuration.compactView, configuration.insertToolbarPosition, configuration.insertToolbarAlignment);
|
||||
configuration.bottomToolbarHeight = bottomToolbarHeight;
|
||||
configuration.bottomToolbarGap = bottomToolbarGap;
|
||||
}
|
||||
|
@ -239,6 +249,7 @@ export class NotebookOptions {
|
|||
compactView,
|
||||
focusIndicator,
|
||||
insertToolbarPosition,
|
||||
insertToolbarAlignment,
|
||||
globalToolbar,
|
||||
showFoldingControls,
|
||||
consolidatedOutputButton,
|
||||
|
@ -251,6 +262,10 @@ export class NotebookOptions {
|
|||
return this.configurationService.getValue<'betweenCells' | 'notebookToolbar' | 'both' | 'hidden'>(ExperimentalInsertToolbarPosition) ?? 'both';
|
||||
}
|
||||
|
||||
private _computeInsertToolbarAlignmentOption() {
|
||||
return this.configurationService.getValue<'left' | 'center'>(ExperimentalInsertToolbarAlignment) ?? 'center';
|
||||
}
|
||||
|
||||
private _computeShowFoldingControlsOption() {
|
||||
return this.configurationService.getValue<'always' | 'mouseover'>(ExperimentalShowFoldingControls) ?? 'always';
|
||||
}
|
||||
|
@ -259,7 +274,13 @@ export class NotebookOptions {
|
|||
return this.configurationService.getValue<'border' | 'gutter'>(ExperimentalFocusIndicator) ?? 'border';
|
||||
}
|
||||
|
||||
private _computeBottomToolbarDimensions(compactView: boolean, insertToolbarPosition: 'betweenCells' | 'notebookToolbar' | 'both' | 'hidden'): { bottomToolbarGap: number, bottomToolbarHeight: number } {
|
||||
private _computeBottomToolbarDimensions(compactView: boolean, insertToolbarPosition: 'betweenCells' | 'notebookToolbar' | 'both' | 'hidden', insertToolbarAlignment: 'left' | 'center'): { bottomToolbarGap: number, bottomToolbarHeight: number } {
|
||||
if (insertToolbarAlignment === 'left') {
|
||||
return {
|
||||
bottomToolbarGap: 18,
|
||||
bottomToolbarHeight: 22
|
||||
};
|
||||
}
|
||||
if (insertToolbarPosition === 'betweenCells' || insertToolbarPosition === 'both') {
|
||||
return compactView ? {
|
||||
bottomToolbarGap: 12,
|
||||
|
|
Loading…
Reference in a new issue