fixed notebook focus indicator margin

This commit is contained in:
rebornix 2021-05-25 13:04:07 -07:00
parent 5926c50d6c
commit 68ba0141fb
No known key found for this signature in database
GPG key ID: 181FC90D15393C20
2 changed files with 21 additions and 10 deletions

View file

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

View file

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