Skip to content

Commit 761a1d3

Browse files
r3m0tr3m0t
committed
Notebook layout- hide between cells toolbar on readonly editors
1 parent 3cdb21f commit 761a1d3

File tree

10 files changed

+46
-37
lines changed

10 files changed

+46
-37
lines changed

‎src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { IWebviewElement } from 'vs/workbench/contrib/webview/browser/webview';
3030
import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
3131
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
3232
import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
33+
import { ViewContext } from 'vs/workbench/contrib/notebook/browser/viewModel/viewContext';
3334

3435
//#region Shared commands
3536
export const EXPAND_CELL_INPUT_COMMAND_ID = 'notebook.cell.expandCellInput';
@@ -708,6 +709,8 @@ export interface IBaseCellEditorOptions extends IDisposable {
708709
export interface INotebookEditorDelegate extends INotebookEditor {
709710
hasModel(): this is IActiveNotebookEditorDelegate;
710711

712+
readonly viewContext: ViewContext;
713+
711714
readonly creationOptions: INotebookEditorCreationOptions;
712715
readonly onDidChangeOptions: Event<void>;
713716
readonly onDidChangeDecorations: Event<void>;

‎src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,10 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
266266
return this._notebookOptions;
267267
}
268268

269+
get viewContext() {
270+
return this._viewContext;
271+
}
272+
269273
constructor(
270274
readonly creationOptions: INotebookEditorCreationOptions,
271275
dimension: DOM.Dimension | undefined,
@@ -297,7 +301,8 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
297301
this._viewContext = new ViewContext(
298302
this._notebookOptions,
299303
new NotebookEventDispatcher(),
300-
language => this.getBaseCellEditorOptions(language));
304+
language => this.getBaseCellEditorOptions(language),
305+
() => this._readOnly);
301306
this._register(this._viewContext.eventDispatcher.onDidChangeCellState(e => {
302307
this._onDidChangeCellState.fire(e);
303308
}));
@@ -606,7 +611,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
606611
focusIndicatorGap
607612
} = this._notebookOptions.getLayoutConfiguration();
608613

609-
const { bottomToolbarGap, bottomToolbarHeight } = this._notebookOptions.computeBottomToolbarDimensions(this.viewModel?.viewType);
614+
const { bottomToolbarGap, bottomToolbarHeight } = this._notebookOptions.computeBottomToolbarDimensions(this.viewModel?.viewType, this.viewModel?.options.isReadOnly);
610615

611616
const styleSheets: string[] = [];
612617
if (!this._fontInfo) {
@@ -755,7 +760,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
755760
}
756761

757762
// top insert toolbar
758-
const topInsertToolbarHeight = this._notebookOptions.computeTopInsertToolbarHeight(this.viewModel?.viewType);
763+
const topInsertToolbarHeight = this._notebookOptions.computeTopInsertToolbarHeight(this.viewModel?.viewType, this.viewModel?.options.isReadOnly);
759764
styleSheets.push(`.notebookOverlay .cell-list-top-cell-toolbar-container { top: -${topInsertToolbarHeight - 3}px }`);
760765
styleSheets.push(`.notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element,
761766
.notebookOverlay > .cell-list-container > .notebook-gutter > .monaco-list > .monaco-scrollable-element {
@@ -1048,12 +1053,12 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
10481053

10491054
async setModel(textModel: NotebookTextModel, viewState: INotebookEditorViewState | undefined, perf?: NotebookPerfMarks): Promise<void> {
10501055
if (this.viewModel === undefined || !this.viewModel.equal(textModel)) {
1051-
const oldTopInsertToolbarHeight = this._notebookOptions.computeTopInsertToolbarHeight(this.viewModel?.viewType);
1052-
const oldBottomToolbarDimensions = this._notebookOptions.computeBottomToolbarDimensions(this.viewModel?.viewType);
1056+
const oldTopInsertToolbarHeight = this._notebookOptions.computeTopInsertToolbarHeight(this.viewModel?.viewType, this.viewModel?.options.isReadOnly);
1057+
const oldBottomToolbarDimensions = this._notebookOptions.computeBottomToolbarDimensions(this.viewModel?.viewType, this.viewModel?.options.isReadOnly);
10531058
this._detachModel();
10541059
await this._attachModel(textModel, viewState, perf);
1055-
const newTopInsertToolbarHeight = this._notebookOptions.computeTopInsertToolbarHeight(this.viewModel?.viewType);
1056-
const newBottomToolbarDimensions = this._notebookOptions.computeBottomToolbarDimensions(this.viewModel?.viewType);
1060+
const newTopInsertToolbarHeight = this._notebookOptions.computeTopInsertToolbarHeight(this.viewModel?.viewType, this.viewModel?.options.isReadOnly);
1061+
const newBottomToolbarDimensions = this._notebookOptions.computeBottomToolbarDimensions(this.viewModel?.viewType, this.viewModel?.options.isReadOnly);
10571062

10581063
if (oldTopInsertToolbarHeight !== newTopInsertToolbarHeight
10591064
|| oldBottomToolbarDimensions.bottomToolbarGap !== newBottomToolbarDimensions.bottomToolbarGap
@@ -1467,7 +1472,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
14671472
}));
14681473

14691474
if (this._dimension) {
1470-
const topInserToolbarHeight = this._notebookOptions.computeTopInsertToolbarHeight(this.viewModel?.viewType);
1475+
const topInserToolbarHeight = this._notebookOptions.computeTopInsertToolbarHeight(this.viewModel?.viewType, this.viewModel?.options.isReadOnly);
14711476
this._list.layout(this._dimension.height - topInserToolbarHeight, this._dimension.width);
14721477
} else {
14731478
this._list.layout();
@@ -1761,7 +1766,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
17611766
const newBodyHeight = Math.max(dimension.height - (this._notebookTopToolbar?.useGlobalToolbar ? /** Toolbar height */ 26 : 0), 0);
17621767
DOM.size(this._body, dimension.width, newBodyHeight);
17631768

1764-
const topInserToolbarHeight = this._notebookOptions.computeTopInsertToolbarHeight(this.viewModel?.viewType);
1769+
const topInserToolbarHeight = this._notebookOptions.computeTopInsertToolbarHeight(this.viewModel?.viewType, this.viewModel?.options.isReadOnly);
17651770
const newCellListHeight = Math.max(newBodyHeight - topInserToolbarHeight, 0);
17661771
if (this._list.getRenderHeight() < newCellListHeight) {
17671772
// the new dimension is larger than the list viewport, update its additional height first, otherwise the list view will move down a bit (as the `scrollBottom` will move down)
@@ -2934,7 +2939,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
29342939
private _updateMarkupCellHeight(cellId: string, height: number, isInit: boolean) {
29352940
const cell = this._getCellById(cellId);
29362941
if (cell && cell instanceof MarkupCellViewModel) {
2937-
const { bottomToolbarGap } = this._notebookOptions.computeBottomToolbarDimensions(this.viewModel?.viewType);
2942+
const { bottomToolbarGap } = this._notebookOptions.computeBottomToolbarDimensions(this.viewModel?.viewType, this.viewModel?.options.isReadOnly);
29382943
this._debug('updateMarkdownCellHeight', cell.handle, height + bottomToolbarGap, isInit);
29392944
cell.renderedMarkdownHeight = height;
29402945
}

‎src/vs/workbench/contrib/notebook/browser/notebookOptions.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -513,16 +513,16 @@ export class NotebookOptions extends Disposable {
513513
return this._layoutConfiguration;
514514
}
515515

516-
computeCollapsedMarkdownCellHeight(viewType: string): number {
517-
const { bottomToolbarGap } = this.computeBottomToolbarDimensions(viewType);
516+
computeCollapsedMarkdownCellHeight(viewType: string, isReadOnly: boolean): number {
517+
const { bottomToolbarGap } = this.computeBottomToolbarDimensions(viewType, isReadOnly);
518518
return this._layoutConfiguration.markdownCellTopMargin
519519
+ this._layoutConfiguration.collapsedIndicatorHeight
520520
+ bottomToolbarGap
521521
+ this._layoutConfiguration.markdownCellBottomMargin;
522522
}
523523

524-
computeBottomToolbarOffset(totalHeight: number, viewType: string) {
525-
const { bottomToolbarGap, bottomToolbarHeight } = this.computeBottomToolbarDimensions(viewType);
524+
computeBottomToolbarOffset(totalHeight: number, viewType: string, isReadOnly: boolean) {
525+
const { bottomToolbarGap, bottomToolbarHeight } = this.computeBottomToolbarDimensions(viewType, isReadOnly);
526526

527527
return totalHeight
528528
- bottomToolbarGap
@@ -575,10 +575,10 @@ export class NotebookOptions extends Disposable {
575575
};
576576
}
577577

578-
computeBottomToolbarDimensions(viewType?: string): { bottomToolbarGap: number; bottomToolbarHeight: number } {
578+
computeBottomToolbarDimensions(viewType?: string, isReadOnly?: boolean): { bottomToolbarGap: number; bottomToolbarHeight: number } {
579579
const configuration = this._layoutConfiguration;
580580
const cellToolbarPosition = this.computeCellToolbarLocation(viewType);
581-
const { bottomToolbarGap, bottomToolbarHeight } = this._computeBottomToolbarDimensions(configuration.compactView, configuration.insertToolbarBetweenCells, configuration.insertToolbarAlignment, cellToolbarPosition);
581+
const { bottomToolbarGap, bottomToolbarHeight } = this._computeBottomToolbarDimensions(configuration.compactView, configuration.insertToolbarBetweenCells && !isReadOnly, configuration.insertToolbarAlignment, cellToolbarPosition);
582582
return {
583583
bottomToolbarGap,
584584
bottomToolbarHeight
@@ -619,8 +619,8 @@ export class NotebookOptions extends Disposable {
619619
return 'right';
620620
}
621621

622-
computeTopInsertToolbarHeight(viewType?: string): number {
623-
if (this._layoutConfiguration.insertToolbarBetweenCells) {
622+
computeTopInsertToolbarHeight(viewType?: string, isReadOnly?: boolean): number {
623+
if (this._layoutConfiguration.insertToolbarBetweenCells && !isReadOnly) {
624624
return SCROLLABLE_ELEMENT_PADDING_TOP;
625625
}
626626

@@ -700,8 +700,8 @@ export class NotebookOptions extends Disposable {
700700
};
701701
}
702702

703-
computeIndicatorPosition(totalHeight: number, foldHintHeight: number, viewType?: string) {
704-
const { bottomToolbarGap } = this.computeBottomToolbarDimensions(viewType);
703+
computeIndicatorPosition(totalHeight: number, foldHintHeight: number, viewType?: string, isReadOnly?: boolean) {
704+
const { bottomToolbarGap } = this.computeBottomToolbarDimensions(viewType, isReadOnly);
705705

706706
return {
707707
bottomIndicatorTop: totalHeight - bottomToolbarGap - this._layoutConfiguration.cellBottomMargin - foldHintHeight,

‎src/vs/workbench/contrib/notebook/browser/view/cellParts/cellDnd.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ export class CellDragAndDropController extends Disposable {
188188
}
189189

190190
private updateInsertIndicator(dropDirection: string, insertionIndicatorAbsolutePos: number) {
191-
const { bottomToolbarGap } = this.notebookEditor.notebookOptions.computeBottomToolbarDimensions(this.notebookEditor.textModel?.viewType);
191+
const { bottomToolbarGap } = this.notebookEditor.notebookOptions.computeBottomToolbarDimensions(this.notebookEditor.textModel?.viewType, this.notebookEditor.viewContext.getReadOnly());
192192
const insertionIndicatorTop = insertionIndicatorAbsolutePos - this.list.scrollTop + bottomToolbarGap / 2;
193193
if (insertionIndicatorTop >= 0) {
194194
this.listInsertionIndicator.style.top = `${insertionIndicatorTop}px`;
@@ -231,7 +231,7 @@ export class CellDragAndDropController extends Disposable {
231231
const cellTop = this.list.getAbsoluteTopOfElement(draggedOverCell);
232232
const cellHeight = this.list.elementHeight(draggedOverCell);
233233
const insertionIndicatorAbsolutePos = dropDirection === 'above' ? cellTop : cellTop + cellHeight;
234-
const { bottomToolbarGap } = this.notebookEditor.notebookOptions.computeBottomToolbarDimensions(this.notebookEditor.textModel?.viewType);
234+
const { bottomToolbarGap } = this.notebookEditor.notebookOptions.computeBottomToolbarDimensions(this.notebookEditor.textModel?.viewType, this.notebookEditor.viewContext.getReadOnly());
235235
const insertionIndicatorTop = insertionIndicatorAbsolutePos - this.list.scrollTop + bottomToolbarGap / 2;
236236
const editorHeight = this.notebookEditor.getDomNode().getBoundingClientRect().height;
237237
if (insertionIndicatorTop < 0 || insertionIndicatorTop > editorHeight) {

‎src/vs/workbench/contrib/notebook/browser/view/cellParts/cellFocusIndicator.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,15 +76,15 @@ export class CellFocusIndicator extends CellContentPart {
7676

7777
override updateInternalLayoutNow(element: ICellViewModel): void {
7878
if (element.cellKind === CellKind.Markup) {
79-
const indicatorPostion = this.notebookEditor.notebookOptions.computeIndicatorPosition(element.layoutInfo.totalHeight, (element as MarkupCellViewModel).layoutInfo.foldHintHeight, this.notebookEditor.textModel?.viewType);
79+
const indicatorPostion = this.notebookEditor.notebookOptions.computeIndicatorPosition(element.layoutInfo.totalHeight, (element as MarkupCellViewModel).layoutInfo.foldHintHeight, this.notebookEditor.textModel?.viewType, this.notebookEditor.viewContext.getReadOnly());
8080
this.bottom.domNode.style.transform = `translateY(${indicatorPostion.bottomIndicatorTop}px)`;
8181
this.left.setHeight(indicatorPostion.verticalIndicatorHeight);
8282
this.right.setHeight(indicatorPostion.verticalIndicatorHeight);
8383
this.codeFocusIndicator.setHeight(indicatorPostion.verticalIndicatorHeight - this.getIndicatorTopMargin() * 2);
8484
} else {
8585
const cell = element as CodeCellViewModel;
8686
const layoutInfo = this.notebookEditor.notebookOptions.getLayoutConfiguration();
87-
const bottomToolbarDimensions = this.notebookEditor.notebookOptions.computeBottomToolbarDimensions(this.notebookEditor.textModel?.viewType);
87+
const bottomToolbarDimensions = this.notebookEditor.notebookOptions.computeBottomToolbarDimensions(this.notebookEditor.textModel?.viewType, cell.viewContext.getReadOnly());
8888
const indicatorHeight = cell.layoutInfo.codeIndicatorHeight + cell.layoutInfo.outputIndicatorHeight + cell.layoutInfo.commentHeight;
8989
this.left.setHeight(indicatorHeight);
9090
this.right.setHeight(indicatorHeight);

‎src/vs/workbench/contrib/notebook/browser/viewModel/codeCellViewModel.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
202202
// recompute
203203
this._ensureOutputsTop();
204204
const notebookLayoutConfiguration = this.viewContext.notebookOptions.getLayoutConfiguration();
205-
const bottomToolbarDimensions = this.viewContext.notebookOptions.computeBottomToolbarDimensions();
205+
const bottomToolbarDimensions = this.viewContext.notebookOptions.computeBottomToolbarDimensions(this.viewType, this.viewContext.getReadOnly());
206206
const outputShowMoreContainerHeight = state.outputShowMoreContainerHeight ? state.outputShowMoreContainerHeight : this._layoutInfo.outputShowMoreContainerHeight;
207207
const outputTotalHeight = Math.max(this._outputMinHeight, this.isOutputCollapsed ? notebookLayoutConfiguration.collapsedIndicatorHeight : this._outputsTop!.getTotalSum());
208208
const commentHeight = state.commentHeight ? this._commentHeight : this._layoutInfo.commentHeight;
@@ -245,7 +245,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
245245
- bottomToolbarDimensions.bottomToolbarGap
246246
- bottomToolbarDimensions.bottomToolbarHeight / 2
247247
- outputShowMoreContainerHeight;
248-
const bottomToolbarOffset = this.viewContext.notebookOptions.computeBottomToolbarOffset(totalHeight, this.viewType);
248+
const bottomToolbarOffset = this.viewContext.notebookOptions.computeBottomToolbarOffset(totalHeight, this.viewType, this.viewContext.getReadOnly());
249249
const editorWidth = state.outerWidth !== undefined
250250
? this.viewContext.notebookOptions.computeCodeCellEditorWidth(state.outerWidth)
251251
: this._layoutInfo?.editorWidth;
@@ -283,7 +283,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
283283
- bottomToolbarDimensions.bottomToolbarGap
284284
- bottomToolbarDimensions.bottomToolbarHeight / 2
285285
- outputShowMoreContainerHeight;
286-
const bottomToolbarOffset = this.viewContext.notebookOptions.computeBottomToolbarOffset(totalHeight, this.viewType);
286+
const bottomToolbarOffset = this.viewContext.notebookOptions.computeBottomToolbarOffset(totalHeight, this.viewType, this.viewContext.getReadOnly());
287287
const editorWidth = state.outerWidth !== undefined
288288
? this.viewContext.notebookOptions.computeCodeCellEditorWidth(state.outerWidth)
289289
: this._layoutInfo?.editorWidth;
@@ -383,7 +383,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
383383

384384
private computeTotalHeight(editorHeight: number, outputsTotalHeight: number, outputShowMoreContainerHeight: number): number {
385385
const layoutConfiguration = this.viewContext.notebookOptions.getLayoutConfiguration();
386-
const { bottomToolbarGap } = this.viewContext.notebookOptions.computeBottomToolbarDimensions(this.viewType);
386+
const { bottomToolbarGap } = this.viewContext.notebookOptions.computeBottomToolbarDimensions(this.viewType, this.viewContext.getReadOnly());
387387
return layoutConfiguration.editorToolbarHeight
388388
+ layoutConfiguration.cellTopMargin
389389
+ editorHeight

‎src/vs/workbench/contrib/notebook/browser/viewModel/markupCellViewModel.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export class MarkupCellViewModel extends BaseCellViewModel implements ICellViewM
105105
) {
106106
super(viewType, model, UUID.generateUuid(), viewContext, configurationService, textModelService, undoRedoService, codeEditorService);
107107

108-
const { bottomToolbarGap } = this.viewContext.notebookOptions.computeBottomToolbarDimensions(this.viewType);
108+
const { bottomToolbarGap } = this.viewContext.notebookOptions.computeBottomToolbarDimensions(this.viewType, this.viewContext.getReadOnly());
109109

110110
this._layoutInfo = {
111111
editorHeight: 0,
@@ -132,7 +132,7 @@ export class MarkupCellViewModel extends BaseCellViewModel implements ICellViewM
132132

133133
private _computeTotalHeight(): number {
134134
const layoutConfiguration = this.viewContext.notebookOptions.getLayoutConfiguration();
135-
const { bottomToolbarGap } = this.viewContext.notebookOptions.computeBottomToolbarDimensions(this.viewType);
135+
const { bottomToolbarGap } = this.viewContext.notebookOptions.computeBottomToolbarDimensions(this.viewType, this.viewContext.getReadOnly());
136136
const foldHintHeight = this._computeFoldHintHeight();
137137

138138
if (this.getEditState() === CellEditState.Editing) {
@@ -201,7 +201,7 @@ export class MarkupCellViewModel extends BaseCellViewModel implements ICellViewM
201201
previewHeight,
202202
editorHeight: this._editorHeight,
203203
statusBarHeight: this._statusBarHeight,
204-
bottomToolbarOffset: this.viewContext.notebookOptions.computeBottomToolbarOffset(totalHeight, this.viewType),
204+
bottomToolbarOffset: this.viewContext.notebookOptions.computeBottomToolbarOffset(totalHeight, this.viewType, this.viewContext.getReadOnly()),
205205
totalHeight,
206206
layoutState: CellLayoutState.Measured,
207207
foldHintHeight
@@ -210,7 +210,7 @@ export class MarkupCellViewModel extends BaseCellViewModel implements ICellViewM
210210
const editorWidth = state.outerWidth !== undefined
211211
? this.viewContext.notebookOptions.computeMarkdownCellEditorWidth(state.outerWidth)
212212
: this._layoutInfo.editorWidth;
213-
const totalHeight = this.viewContext.notebookOptions.computeCollapsedMarkdownCellHeight(this.viewType);
213+
const totalHeight = this.viewContext.notebookOptions.computeCollapsedMarkdownCellHeight(this.viewType, this.viewContext.getReadOnly());
214214

215215
state.totalHeight = totalHeight;
216216

@@ -220,7 +220,7 @@ export class MarkupCellViewModel extends BaseCellViewModel implements ICellViewM
220220
editorHeight: this._editorHeight,
221221
statusBarHeight: this._statusBarHeight,
222222
previewHeight: this._previewHeight,
223-
bottomToolbarOffset: this.viewContext.notebookOptions.computeBottomToolbarOffset(totalHeight, this.viewType),
223+
bottomToolbarOffset: this.viewContext.notebookOptions.computeBottomToolbarOffset(totalHeight, this.viewType, this.viewContext.getReadOnly()),
224224
totalHeight,
225225
layoutState: CellLayoutState.Measured,
226226
foldHintHeight: 0

‎src/vs/workbench/contrib/notebook/browser/viewModel/viewContext.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ export class ViewContext {
1111
constructor(
1212
readonly notebookOptions: NotebookOptions,
1313
readonly eventDispatcher: NotebookEventDispatcher,
14-
readonly getBaseCellEditorOptions: (language: string) => IBaseCellEditorOptions
14+
readonly getBaseCellEditorOptions: (language: string) => IBaseCellEditorOptions,
15+
readonly getReadOnly: () => boolean,
1516
) {
1617
}
1718
}

0 commit comments

Comments
 (0)