From 68ba0141fbd7f4b406ea09cb98cec2dac36883be Mon Sep 17 00:00:00 2001 From: rebornix Date: Tue, 25 May 2021 13:04:07 -0700 Subject: [PATCH] fixed notebook focus indicator margin --- .../notebook/browser/notebookEditorWidget.ts | 21 ++++++++++++------- .../notebook/common/notebookOptions.ts | 10 +++++++-- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts index a3e503afe98..fd4b95fa2de 100644 --- a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts +++ b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts @@ -554,6 +554,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor cellBottomMargin, codeCellLeftMargin, markdownCellGutter, + markdownCellLeftMargin, markdownCellBottomMargin, markdownCellTopMargin, bottomToolbarGap: bottomCellToolbarGap, @@ -563,7 +564,8 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor focusIndicator, insertToolbarPosition, insertToolbarAlignment, - fontSize + fontSize, + focusIndicatorLeftMargin } = this._notebookOptions.getLayoutConfiguration(); const styleSheets: string[] = []; @@ -641,12 +643,6 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor height: 100%; z-index: 10; } - - .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-left:before { - border-left: 1px solid transparent; - border-right: 1px solid transparent; - border-radius: 2px; - } `); // left and right border margins @@ -657,6 +653,15 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor .monaco-workbench .notebookOverlay .monaco-list.selection-multiple .monaco-list-row.code-cell-row.selected .cell-focus-indicator-right:before { top: 0px; height: 100%; }`); + + styleSheets.push(` + .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-left:before, + .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.selected .cell-focus-indicator-left:before { + border-left: 2px solid transparent; + border-right: 1px solid transparent; + border-radius: 2px; + margin-left: ${focusIndicatorLeftMargin}px; + }`); } // between cell insert toolbar @@ -725,7 +730,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor styleSheets.push(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .execution-count-label { left: ${codeCellLeftMargin}px; width: ${cellRunGutter}px; }`); styleSheets.push(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row div.cell.markdown { padding-left: ${cellRunGutter}px; }`); - styleSheets.push(`.monaco-workbench .notebookOverlay > .cell-list-container .notebook-folding-indicator { left: ${(markdownCellGutter - 20) / 2}px; }`); + styleSheets.push(`.monaco-workbench .notebookOverlay > .cell-list-container .notebook-folding-indicator { left: ${(markdownCellGutter - 20) / 2 + markdownCellLeftMargin}px; }`); styleSheets.push(`.notebookOverlay .monaco-list .monaco-list-row :not(.webview-backed-markdown-cell) .cell-focus-indicator-top { height: ${cellTopMargin}px; }`); styleSheets.push(`.notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-side { bottom: ${bottomCellToolbarGap}px; }`); styleSheets.push(`.notebookOverlay .monaco-list .monaco-list-row.code-cell-row .cell-focus-indicator-left, diff --git a/src/vs/workbench/contrib/notebook/common/notebookOptions.ts b/src/vs/workbench/contrib/notebook/common/notebookOptions.ts index 561f46c0356..3b395ed6a37 100644 --- a/src/vs/workbench/contrib/notebook/common/notebookOptions.ts +++ b/src/vs/workbench/contrib/notebook/common/notebookOptions.ts @@ -31,6 +31,7 @@ export interface NotebookLayoutConfiguration { cellBottomMargin: number; cellOutputPadding: number; codeCellLeftMargin: number; + markdownCellLeftMargin: number; markdownCellGutter: number; markdownCellTopMargin: number; markdownCellBottomMargin: number; @@ -56,6 +57,7 @@ export interface NotebookLayoutConfiguration { showFoldingControls: 'always' | 'mouseover'; dragAndDropEnabled: boolean; fontSize: number; + focusIndicatorLeftMargin: number; } interface NotebookOptionsChangeEvent { @@ -80,15 +82,19 @@ const defaultConfigConstants = { cellRunGutter: 32, markdownCellTopMargin: 8, markdownCellBottomMargin: 8, + markdownCellLeftMargin: 0, markdownCellGutter: 32, + focusIndicatorLeftMargin: 4 }; const compactConfigConstants = { - codeCellLeftMargin: 0, + codeCellLeftMargin: 8, cellRunGutter: 32, markdownCellTopMargin: 6, markdownCellBottomMargin: 6, + markdownCellLeftMargin: 8, markdownCellGutter: 32, + focusIndicatorLeftMargin: 4 }; export class NotebookOptions { @@ -391,7 +397,7 @@ export class NotebookOptions { outputNodePadding: this._layoutConfiguration.cellOutputPadding, outputNodeLeftPadding: this._layoutConfiguration.cellOutputPadding, previewNodePadding: this._layoutConfiguration.markdownPreviewPadding, - markdownLeftMargin: this._layoutConfiguration.markdownCellGutter, + markdownLeftMargin: this._layoutConfiguration.markdownCellGutter + this._layoutConfiguration.markdownCellLeftMargin, leftMargin: this._layoutConfiguration.codeCellLeftMargin, rightMargin: this._layoutConfiguration.cellRightMargin, runGutter: this._layoutConfiguration.cellRunGutter,