maxmustermann/vscode
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

insert toolbar on the left.

Browse source
This commit is contained in:
rebornix 2021-05-24 10:33:24 -07:00
parent 18296326a9
commit 2b6564c101
No known key found for this signature in database
GPG key ID: 181FC90D15393C20
5 changed files with 118 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/vs/workbench/contrib/notebook/browser/contrib/coreActions.ts
View file

@ -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 {

32
src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts
View file

@ -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 }`);

21
src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts
View file

@ -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));

1
src/vs/workbench/contrib/notebook/common/notebookCommon.ts
View file

@ -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';

29
src/vs/workbench/contrib/notebook/common/notebookOptions.ts
View file

@ -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,