Interactive window- don't leave space for insert toolbar

This commit is contained in:
Tomer Chachamu 2023-05-09 21:12:38 +01:00
parent a99c29b544
commit 3cdb21f85c
3 changed files with 33 additions and 29 deletions

View file

@ -148,7 +148,7 @@ export class InteractiveEditor extends EditorPane {
this.#notebookExecutionStateService = notebookExecutionStateService;
this.#extensionService = extensionService;
this.#notebookOptions = new NotebookOptions(configurationService, notebookExecutionStateService, { cellToolbarInteraction: 'hover', globalToolbar: true, dragAndDropEnabled: false });
this.#notebookOptions = new NotebookOptions(configurationService, notebookExecutionStateService, { cellToolbarInteraction: 'hover', globalToolbar: true, dragAndDropEnabled: false, insertToolbarBetweenCells: false });
this.#editorMemento = this.getEditorMemento<InteractiveEditorViewState>(editorGroupService, textResourceConfigurationService, INTERACTIVE_EDITOR_VIEW_STATE_PREFERENCE_KEY);
codeEditorService.registerDecorationType('interactive-decoration', DECORATION_KEY, {});

View file

@ -598,7 +598,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
collapsedIndicatorHeight,
compactView,
focusIndicator,
insertToolbarPosition,
insertToolbarBetweenCells,
insertToolbarAlignment,
fontSize,
outputFontSize,
@ -716,7 +716,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
}
// between cell insert toolbar
if (insertToolbarPosition === 'betweenCells' || insertToolbarPosition === 'both') {
if (insertToolbarBetweenCells) {
styleSheets.push(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container { display: flex; }`);
styleSheets.push(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .cell-list-top-cell-toolbar-container { display: flex; }`);
} else {

View file

@ -58,7 +58,7 @@ export interface NotebookLayoutConfiguration {
cellToolbarInteraction: string;
compactView: boolean;
focusIndicator: 'border' | 'gutter';
insertToolbarPosition: 'betweenCells' | 'notebookToolbar' | 'both' | 'hidden';
insertToolbarBetweenCells: boolean;
insertToolbarAlignment: 'left' | 'center';
globalToolbar: boolean;
consolidatedOutputButton: boolean;
@ -133,7 +133,7 @@ export class NotebookOptions extends Disposable {
constructor(
private readonly configurationService: IConfigurationService,
private readonly notebookExecutionStateService: INotebookExecutionStateService,
private readonly overrides?: { cellToolbarInteraction: string; globalToolbar: boolean; dragAndDropEnabled: boolean }
private readonly overrides?: { cellToolbarInteraction: string; globalToolbar: boolean; dragAndDropEnabled: boolean; insertToolbarBetweenCells?: boolean }
) {
super();
const showCellStatusBar = this.configurationService.getValue<ShowCellStatusBarType>(NotebookSetting.showCellStatusBar);
@ -145,7 +145,7 @@ export class NotebookOptions extends Disposable {
const cellToolbarInteraction = overrides?.cellToolbarInteraction ?? this.configurationService.getValue<string>(NotebookSetting.cellToolbarVisibility);
const compactView = this.configurationService.getValue<boolean | undefined>(NotebookSetting.compactView) ?? true;
const focusIndicator = this._computeFocusIndicatorOption();
const insertToolbarPosition = this._computeInsertToolbarPositionOption();
const insertToolbarBetweenCells = overrides?.insertToolbarBetweenCells ?? this._computeInsertToolbarBetweenCellsOption();
const insertToolbarAlignment = this._computeInsertToolbarAlignmentOption();
const showFoldingControls = this._computeShowFoldingControlsOption();
// const { bottomToolbarGap, bottomToolbarHeight } = this._computeBottomToolbarDimensions(compactView, insertToolbarPosition, insertToolbarAlignment);
@ -219,7 +219,7 @@ export class NotebookOptions extends Disposable {
cellToolbarInteraction,
compactView,
focusIndicator,
insertToolbarPosition,
insertToolbarBetweenCells,
insertToolbarAlignment,
showFoldingControls,
fontSize,
@ -369,7 +369,7 @@ export class NotebookOptions extends Disposable {
configuration.cellToolbarLocation = this.configurationService.getValue<string | { [key: string]: string }>(NotebookSetting.cellToolbarLocation) ?? { 'default': 'right' };
}
if (cellToolbarInteraction && !this.overrides?.cellToolbarInteraction) {
if (cellToolbarInteraction && this.overrides?.cellToolbarInteraction === undefined) {
configuration.cellToolbarInteraction = this.configurationService.getValue<string>(NotebookSetting.cellToolbarVisibility);
}
@ -389,8 +389,8 @@ export class NotebookOptions extends Disposable {
configuration.insertToolbarAlignment = this._computeInsertToolbarAlignmentOption();
}
if (insertToolbarPosition) {
configuration.insertToolbarPosition = this._computeInsertToolbarPositionOption();
if (insertToolbarPosition && this.overrides?.insertToolbarBetweenCells === undefined) {
configuration.insertToolbarBetweenCells = this._computeInsertToolbarBetweenCellsOption();
}
if (globalToolbar && this.overrides?.globalToolbar === undefined) {
@ -479,8 +479,9 @@ export class NotebookOptions extends Disposable {
});
}
private _computeInsertToolbarPositionOption() {
return this.configurationService.getValue<'betweenCells' | 'notebookToolbar' | 'both' | 'hidden'>(NotebookSetting.insertToolbarLocation) ?? 'both';
private _computeInsertToolbarBetweenCellsOption() {
const configValue = this.configurationService.getValue<'betweenCells' | 'notebookToolbar' | 'both' | 'hidden'>(NotebookSetting.insertToolbarLocation) ?? 'both';
return configValue === 'betweenCells' || configValue === 'both';
}
private _computeInsertToolbarAlignmentOption() {
@ -547,7 +548,17 @@ export class NotebookOptions extends Disposable {
return this._layoutConfiguration.cellStatusBarHeight;
}
private _computeBottomToolbarDimensions(compactView: boolean, insertToolbarPosition: 'betweenCells' | 'notebookToolbar' | 'both' | 'hidden', insertToolbarAlignment: 'left' | 'center', cellToolbar: 'right' | 'left' | 'hidden'): { bottomToolbarGap: number; bottomToolbarHeight: number } {
private _computeBottomToolbarDimensions(compactView: boolean, insertToolbarBetweenCells: boolean, insertToolbarAlignment: 'left' | 'center', cellToolbar: 'right' | 'left' | 'hidden'): { bottomToolbarGap: number; bottomToolbarHeight: number } {
if (!insertToolbarBetweenCells) {
return compactView ? {
bottomToolbarGap: 0,
bottomToolbarHeight: 0
} : {
bottomToolbarGap: 12,
bottomToolbarHeight: 12
};
}
if (insertToolbarAlignment === 'left' || cellToolbar !== 'hidden') {
return {
bottomToolbarGap: 18,
@ -555,26 +566,19 @@ export class NotebookOptions extends Disposable {
};
}
if (insertToolbarPosition === 'betweenCells' || insertToolbarPosition === 'both') {
return compactView ? {
bottomToolbarGap: 12,
bottomToolbarHeight: 20
} : {
bottomToolbarGap: 20,
bottomToolbarHeight: 20
};
} else {
return {
bottomToolbarGap: 0,
bottomToolbarHeight: 0
};
}
return compactView ? {
bottomToolbarGap: 12,
bottomToolbarHeight: 20
} : {
bottomToolbarGap: 20,
bottomToolbarHeight: 20
};
}
computeBottomToolbarDimensions(viewType?: string): { bottomToolbarGap: number; bottomToolbarHeight: number } {
const configuration = this._layoutConfiguration;
const cellToolbarPosition = this.computeCellToolbarLocation(viewType);
const { bottomToolbarGap, bottomToolbarHeight } = this._computeBottomToolbarDimensions(configuration.compactView, configuration.insertToolbarPosition, configuration.insertToolbarAlignment, cellToolbarPosition);
const { bottomToolbarGap, bottomToolbarHeight } = this._computeBottomToolbarDimensions(configuration.compactView, configuration.insertToolbarBetweenCells, configuration.insertToolbarAlignment, cellToolbarPosition);
return {
bottomToolbarGap,
bottomToolbarHeight
@ -616,7 +620,7 @@ export class NotebookOptions extends Disposable {
}
computeTopInsertToolbarHeight(viewType?: string): number {
if (this._layoutConfiguration.insertToolbarPosition === 'betweenCells' || this._layoutConfiguration.insertToolbarPosition === 'both') {
if (this._layoutConfiguration.insertToolbarBetweenCells) {
return SCROLLABLE_ELEMENT_PADDING_TOP;
}