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

re #119776.

Browse source
This commit is contained in:
rebornix 2021-07-16 11:56:31 -07:00
parent ad5970666d
commit d0c212ce1e
4 changed files with 64 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/vs/workbench/contrib/notebook/browser/media/notebook.css
View file

@ -345,9 +345,27 @@
box-sizing: border-box;
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part .cell-collapse-preview {
padding: 0px 8px;
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part .cell-collapse-preview .monaco-tokenized-source {
font-size: var(--notebook-cell-input-preview-font-size);
font-family: var(--notebook-cell-input-preview-font-family);
cursor: pointer;
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part .cell-collapse-preview .monaco-tokenized-source:after {
color: grey;
margin: 0.1em 0.2em 0 0.2em;
content: "⋯";
display: inline;
line-height: 1em;
cursor: pointer;
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part .codicon {
position: absolute;
padding: 2px 6px;
padding: 4px 6px;
left: -30px;
bottom: 0;
cursor: pointer;

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

@ -588,10 +588,13 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
const { bottomToolbarGap, bottomToolbarHeight } = this._notebookOptions.computeBottomToolbarDimensions(this.viewModel?.viewType);
const styleSheets: string[] = [];
const fontFamily = this._fontInfo?.fontFamily ?? `"SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace`;
styleSheets.push(`
:root {
--notebook-cell-output-font-size: ${fontSize}px;
--notebook-cell-input-preview-font-size: ${fontSize}px;
--notebook-cell-input-preview-font-family: ${fontFamily};
}
`);
@ -771,7 +774,12 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
styleSheets.push(`.notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-bottom { height: ${cellBottomMargin}px; }`);
styleSheets.push(`.notebookOverlay .monaco-list .monaco-list-row .cell-shadow-container-bottom { top: ${cellBottomMargin}px; }`);
styleSheets.push(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part { margin-left: ${codeCellLeftMargin + cellRunGutter}px; height: ${collapsedIndicatorHeight}px; }`);
styleSheets.push(`
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part { margin-left: ${codeCellLeftMargin + cellRunGutter}px; height: ${collapsedIndicatorHeight}px; }
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part .cell-collapse-preview {
line-height: ${collapsedIndicatorHeight}px;
}
`);
styleSheets.push(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container { height: ${bottomToolbarHeight}px }`);
styleSheets.push(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .cell-list-top-cell-toolbar-container { height: ${bottomToolbarHeight}px }`);

37
src/vs/workbench/contrib/notebook/browser/view/renderers/codeCell.ts
View file

@ -8,6 +8,9 @@ import { raceCancellation } from 'vs/base/common/async';
import { CancellationTokenSource } from 'vs/base/common/cancellation';
import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
import { IDimension } from 'vs/editor/common/editorCommon';
import { IReadonlyTextBuffer } from 'vs/editor/common/model';
import { TokenizationRegistry } from 'vs/editor/common/modes';
import { tokenizeToString } from 'vs/editor/common/modes/textToHtmlTokenizer';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { IOpenerService } from 'vs/platform/opener/common/opener';
import { CellFocusMode, CodeCellRenderTemplate, IActiveNotebookEditor } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
@ -241,6 +244,34 @@ export class CodeCell extends Disposable {
return true;
}
private getRichText(buffer: IReadonlyTextBuffer, language: string) {
return tokenizeToString(buffer.getLineContent(1), TokenizationRegistry.get(language)!);
}
private removeInputCollapsePreview() {
const children = this.templateData.collapsedPart.children;
let collapsePreviewElements = [];
for (let i = 0; i < children.length; i++) {
if (children[i].classList.contains('cell-collapse-preview')) {
collapsePreviewElements.push(children[i]);
}
}
collapsePreviewElements.forEach(element => {
element.parentElement?.removeChild(element);
});
}
private updateInputCollaseElement(): void {
this.removeInputCollapsePreview();
const richEditorText = this.getRichText(this.viewCell.textBuffer, this.viewCell.language);
const element = DOM.$('div');
element.classList.add('cell-collapse-preview');
DOM.safeInnerHtml(element, richEditorText);
this.templateData.collapsedPart.appendChild(element);
}
private viewUpdateInputCollapsed(): void {
DOM.hide(this.templateData.cellContainer);
DOM.hide(this.templateData.runButtonContainer);
@ -248,6 +279,7 @@ export class CodeCell extends Disposable {
DOM.show(this.templateData.outputContainer);
this.templateData.container.classList.toggle('collapsed', true);
this._outputContainerRenderer.viewUpdateShowOutputs();
this.updateInputCollaseElement();
this.relayoutCell();
}
@ -257,9 +289,8 @@ export class CodeCell extends Disposable {
DOM.show(this.templateData.runButtonContainer);
DOM.show(this.templateData.collapsedPart);
DOM.hide(this.templateData.outputContainer);
this.removeInputCollapsePreview();
this._outputContainerRenderer.viewUpdateHideOuputs();
this.templateData.container.classList.toggle('collapsed', false);
this.templateData.container.classList.toggle('output-collapsed', true);
@ -274,6 +305,7 @@ export class CodeCell extends Disposable {
this.templateData.container.classList.toggle('collapsed', true);
this.templateData.container.classList.toggle('output-collapsed', true);
this._outputContainerRenderer.viewUpdateHideOuputs();
this.updateInputCollaseElement();
this.relayoutCell();
}
@ -281,6 +313,7 @@ export class CodeCell extends Disposable {
DOM.show(this.templateData.cellContainer);
DOM.show(this.templateData.runButtonContainer);
DOM.hide(this.templateData.collapsedPart);
this.removeInputCollapsePreview();
DOM.show(this.templateData.outputContainer);
this.templateData.container.classList.toggle('collapsed', false);
this.templateData.container.classList.toggle('output-collapsed', false);

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

@ -138,7 +138,7 @@ export class NotebookOptions {
editorTopPadding: EDITOR_TOP_PADDING,
editorBottomPadding: 4,
editorBottomPaddingWithoutStatusBar: 12,
collapsedIndicatorHeight: 24,
collapsedIndicatorHeight: 28,
showCellStatusBar,
globalToolbar,
consolidatedOutputButton,