Skip to content

V
vscode

xxadev / vscode
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vscode

体验新版 GitCode，发现更多精彩内容 >>

提交 6ab3602d 编写于 作者: R Rob Lourens
浏览文件
操作

Remove notebook cell grabber

上级 4862602c
隐藏空白更改
内联 并排
Showing with 21 addition and 44 deletion
src/vs/workbench/contrib/notebook/browser/constants.ts
浏览文件 @ 6ab3602d
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
// Cell sizing related // Cell sizing related
export const CELL_MARGIN = 20; export const CELL_MARGIN = 12;
export const CELL_RUN_GUTTER = 32; // TODO should be dynamic based on execution order width, and runnable enablement export const CELL_RUN_GUTTER = 32;
export const EDITOR_TOOLBAR_HEIGHT = 0; export const EDITOR_TOOLBAR_HEIGHT = 0;
export const BOTTOM_CELL_TOOLBAR_HEIGHT = 36; export const BOTTOM_CELL_TOOLBAR_HEIGHT = 36;
......
src/vs/workbench/contrib/notebook/browser/media/notebook.css
浏览文件 @ 6ab3602d
...@@ -41,23 +41,6 @@ ...@@ -41,23 +41,6 @@
width: 100%; width: 100%;
} }
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-drag-handle {
position: absolute;
visibility: hidden;
left: 1px;
}
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.markdown-cell-row .cell-drag-handle,
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.code-cell-row .cell-drag-handle {
top: 8px;
}
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused .cell-drag-handle,
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover .cell-drag-handle,
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-output-hover .cell-drag-handle {
visibility: visible;
}
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-drag-image { .monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-drag-image {
position: absolute; position: absolute;
top: -500px; top: -500px;
...@@ -179,7 +162,7 @@ ...@@ -179,7 +162,7 @@
display: inline-block; display: inline-block;
position: absolute; position: absolute;
height: 26px; height: 26px;
right: 32px; right: 56px;
top: -16px; top: -16px;
z-index: 10; z-index: 10;
} }
...@@ -248,6 +231,7 @@ ...@@ -248,6 +231,7 @@
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell .run-button-container { .monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell .run-button-container {
position: relative; position: relative;
height: 22px;
} }
.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell .run-button-container .monaco-toolbar { .monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell .run-button-container .monaco-toolbar {
...@@ -309,13 +293,14 @@ ...@@ -309,13 +293,14 @@
display: block; display: block;
content: ' '; content: ' ';
position: absolute; position: absolute;
width: 6px; width: 32px;
box-sizing: border-box;
border-left-width: 2px; border-left-width: 2px;
border-left-style: solid; border-left-style: solid;
left: 20px;
top: 22px; top: 22px;
bottom: 36px; bottom: 36px;
visibility: hidden; visibility: hidden;
cursor: pointer;
} }
.monaco-workbench .part.editor > .content .notebook-editor .monaco-list .monaco-list-row:hover .notebook-cell-focus-indicator, .monaco-workbench .part.editor > .content .notebook-editor .monaco-list .monaco-list-row:hover .notebook-cell-focus-indicator,
......
src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts
浏览文件 @ 6ab3602d
...@@ -379,7 +379,6 @@ export interface INotebookCellList { ...@@ -379,7 +379,6 @@ export interface INotebookCellList {
export interface BaseCellRenderTemplate { export interface BaseCellRenderTemplate {
container: HTMLElement; container: HTMLElement;
cellContainer: HTMLElement; cellContainer: HTMLElement;
dragHandle: HTMLElement;
toolbar: ToolBar; toolbar: ToolBar;
focusIndicator: HTMLElement; focusIndicator: HTMLElement;
insertionIndicatorTop: HTMLElement; insertionIndicatorTop: HTMLElement;
......
src/vs/workbench/contrib/notebook/browser/notebookEditor.ts
浏览文件 @ 6ab3602d
...@@ -1108,7 +1108,7 @@ registerThemingParticipant((theme, collector) => { ...@@ -1108,7 +1108,7 @@ registerThemingParticipant((theme, collector) => {
// } // }
// Cell Margin // Cell Margin
collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > div.cell { margin: 0px ${CELL_MARGIN}px 0px ${CELL_MARGIN}px; }`); collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > div.cell { margin: 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px 0px ${CELL_MARGIN}px; }`);
collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row { padding-top: ${EDITOR_TOP_MARGIN}px; }`); collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row { padding-top: ${EDITOR_TOP_MARGIN}px; }`);
collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .output { margin: 0px ${CELL_MARGIN}px 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px }`); collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .output { margin: 0px ${CELL_MARGIN}px 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px }`);
collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-bottom-toolbar-container { width: calc(100% - ${CELL_MARGIN * 2 + CELL_RUN_GUTTER}px); margin: 0px ${CELL_MARGIN}px 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px }`); collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-bottom-toolbar-container { width: calc(100% - ${CELL_MARGIN * 2 + CELL_RUN_GUTTER}px); margin: 0px ${CELL_MARGIN}px 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px }`);
...@@ -1118,4 +1118,5 @@ registerThemingParticipant((theme, collector) => { ...@@ -1118,4 +1118,5 @@ registerThemingParticipant((theme, collector) => {
collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell .run-button-container { width: ${CELL_RUN_GUTTER}px; }`); collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell .run-button-container { width: ${CELL_RUN_GUTTER}px; }`);
collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .monaco-list .monaco-list-row .notebook-cell-insertion-indicator-top { left: ${CELL_MARGIN + CELL_RUN_GUTTER}px; right: ${CELL_MARGIN}px; }`); collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .monaco-list .monaco-list-row .notebook-cell-insertion-indicator-top { left: ${CELL_MARGIN + CELL_RUN_GUTTER}px; right: ${CELL_MARGIN}px; }`);
collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-drag-image .cell-editor-container > div { padding: ${EDITOR_TOP_PADDING}px 16px ${EDITOR_BOTTOM_PADDING}px 16px; }`); collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell-drag-image .cell-editor-container > div { padding: ${EDITOR_TOP_PADDING}px 16px ${EDITOR_BOTTOM_PADDING}px 16px; }`);
collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .monaco-list .monaco-list-row .notebook-cell-focus-indicator { left: ${CELL_MARGIN}px; }`);
}); });
src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts
浏览文件 @ 6ab3602d
...@@ -120,10 +120,10 @@ export class BackLayerWebView extends Disposable { ...@@ -120,10 +120,10 @@ export class BackLayerWebView extends Disposable {
super(); super();
this.element = document.createElement('div'); this.element = document.createElement('div');
this.element.style.width = `calc(100% - ${CELL_MARGIN * 2}px)`; this.element.style.width = `calc(100% - ${(CELL_MARGIN + CELL_RUN_GUTTER) * 2}px)`;
this.element.style.height = '1400px'; this.element.style.height = '1400px';
this.element.style.position = 'absolute'; this.element.style.position = 'absolute';
this.element.style.margin = `0px 0 0px ${CELL_MARGIN}px`; this.element.style.margin = `0px 0 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px`;
const pathsPath = getPathFromAmdModule(require, 'vs/loader.js'); const pathsPath = getPathFromAmdModule(require, 'vs/loader.js');
const loader = URI.file(pathsPath).with({ scheme: WebviewResourceScheme }); const loader = URI.file(pathsPath).with({ scheme: WebviewResourceScheme });
...@@ -500,7 +500,7 @@ ${loaderJs} ...@@ -500,7 +500,7 @@ ${loaderJs}
return { return {
id: id, id: id,
top: outputOffset, top: outputOffset,
left: CELL_RUN_GUTTER left: 0
}; };
}); });
...@@ -540,7 +540,7 @@ ${loaderJs} ...@@ -540,7 +540,7 @@ ${loaderJs}
id: cell.id, id: cell.id,
outputId: outputId, outputId: outputId,
top: initialTop, top: initialTop,
left: CELL_RUN_GUTTER left: 0
}; };
this.webview.sendMessage(message); this.webview.sendMessage(message);
......
src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts
浏览文件 @ 6ab3602d
...@@ -338,10 +338,8 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR ...@@ -338,10 +338,8 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR
container.classList.add('markdown-cell-row'); container.classList.add('markdown-cell-row');
const disposables = new DisposableStore(); const disposables = new DisposableStore();
const toolbar = disposables.add(this.createToolbar(container)); const toolbar = disposables.add(this.createToolbar(container));
const focusIndicator = DOM.append(container, DOM.$('.notebook-cell-focus-indicator'));
const dragHandle = DOM.prepend(container, $('.cell-drag-handle')); focusIndicator.setAttribute('draggable', 'true');
dragHandle.innerHTML = renderCodicons('$(gripper)');
dragHandle.setAttribute('draggable', 'true');
const codeInnerContent = DOM.append(container, $('.cell.code')); const codeInnerContent = DOM.append(container, $('.cell.code'));
const cellEditorPart = DOM.append(codeInnerContent, $('.cell-editor-part')); const cellEditorPart = DOM.append(codeInnerContent, $('.cell-editor-part'));
...@@ -350,14 +348,12 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR ...@@ -350,14 +348,12 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR
const innerContent = DOM.append(container, $('.cell.markdown')); const innerContent = DOM.append(container, $('.cell.markdown'));
const insertionIndicatorTop = DOM.append(container, DOM.$('.notebook-cell-insertion-indicator-top')); const insertionIndicatorTop = DOM.append(container, DOM.$('.notebook-cell-insertion-indicator-top'));
const focusIndicator = DOM.append(container, DOM.$('.notebook-cell-focus-indicator'));
const foldingIndicator = DOM.append(container, DOM.$('.notebook-folding-indicator')); const foldingIndicator = DOM.append(container, DOM.$('.notebook-folding-indicator'));
const bottomCellContainer = DOM.append(container, $('.cell-bottom-toolbar-container')); const bottomCellContainer = DOM.append(container, $('.cell-bottom-toolbar-container'));
const templateData: MarkdownCellRenderTemplate = { const templateData: MarkdownCellRenderTemplate = {
insertionIndicatorTop, insertionIndicatorTop,
dragHandle,
container, container,
cellContainer: innerContent, cellContainer: innerContent,
editingContainer, editingContainer,
...@@ -468,7 +464,7 @@ export class CellDragAndDropController { ...@@ -468,7 +464,7 @@ export class CellDragAndDropController {
addListeners(templateData: BaseCellRenderTemplate, dragImageProvider: DragImageProvider): void { addListeners(templateData: BaseCellRenderTemplate, dragImageProvider: DragImageProvider): void {
const container = templateData.container; const container = templateData.container;
const dragHandle = templateData.dragHandle; const dragHandle = templateData.focusIndicator;
const dragCleanup = () => { const dragCleanup = () => {
if (this.currentDraggedCell) { if (this.currentDraggedCell) {
...@@ -656,16 +652,14 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende ...@@ -656,16 +652,14 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
container.tabIndex = 0; container.tabIndex = 0;
const disposables = new DisposableStore(); const disposables = new DisposableStore();
const toolbar = disposables.add(this.createToolbar(container)); const toolbar = disposables.add(this.createToolbar(container));
const focusIndicator = DOM.append(container, DOM.$('.notebook-cell-focus-indicator'));
focusIndicator.setAttribute('draggable', 'true');
const cellContainer = DOM.append(container, $('.cell.code')); const cellContainer = DOM.append(container, $('.cell.code'));
const runButtonContainer = DOM.append(cellContainer, $('.run-button-container')); const runButtonContainer = DOM.append(cellContainer, $('.run-button-container'));
const runToolbar = this.createToolbar(runButtonContainer); const runToolbar = this.createToolbar(runButtonContainer);
disposables.add(runToolbar); disposables.add(runToolbar);
const dragHandle = DOM.prepend(container, $('.cell-drag-handle'));
dragHandle.innerHTML = renderCodicons('$(gripper)');
dragHandle.setAttribute('draggable', 'true');
const executionOrderLabel = DOM.append(runButtonContainer, $('div.execution-count-label')); const executionOrderLabel = DOM.append(runButtonContainer, $('div.execution-count-label'));
const editorPart = DOM.append(cellContainer, $('.cell-editor-part')); const editorPart = DOM.append(cellContainer, $('.cell-editor-part'));
...@@ -690,13 +684,11 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende ...@@ -690,13 +684,11 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
const cellStatusPlaceholderContainer = DOM.append(statusBarContainer, $('.cell-status-placeholder')); const cellStatusPlaceholderContainer = DOM.append(statusBarContainer, $('.cell-status-placeholder'));
const insertionIndicatorTop = DOM.append(container, DOM.$('.notebook-cell-insertion-indicator-top')); const insertionIndicatorTop = DOM.append(container, DOM.$('.notebook-cell-insertion-indicator-top'));
const focusIndicator = DOM.append(container, DOM.$('.notebook-cell-focus-indicator'));
const outputContainer = DOM.append(container, $('.output')); const outputContainer = DOM.append(container, $('.output'));
const bottomCellContainer = DOM.append(container, $('.cell-bottom-toolbar-container')); const bottomCellContainer = DOM.append(container, $('.cell-bottom-toolbar-container'));
const templateData: CodeCellRenderTemplate = { const templateData: CodeCellRenderTemplate = {
insertionIndicatorTop, insertionIndicatorTop,
dragHandle,
container, container,
cellContainer, cellContainer,
statusBarContainer, statusBarContainer,
......
src/vs/workbench/contrib/notebook/browser/viewModel/codeCellViewModel.ts
浏览文件 @ 6ab3602d
...@@ -86,7 +86,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod ...@@ -86,7 +86,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
this._layoutInfo = { this._layoutInfo = {
fontInfo: initialNotebookLayoutInfo?.fontInfo || null, fontInfo: initialNotebookLayoutInfo?.fontInfo || null,
editorHeight: 0, editorHeight: 0,
editorWidth: initialNotebookLayoutInfo ? initialNotebookLayoutInfo!.width - CELL_MARGIN * 2 - CELL_RUN_GUTTER : 0, editorWidth: initialNotebookLayoutInfo ? initialNotebookLayoutInfo!.width - (CELL_MARGIN + CELL_RUN_GUTTER) * 2 : 0,
outputContainerOffset: 0, outputContainerOffset: 0,
outputTotalHeight: 0, outputTotalHeight: 0,
totalHeight: 0, totalHeight: 0,
...@@ -103,7 +103,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod ...@@ -103,7 +103,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
const indicatorHeight = this.editorHeight + CELL_STATUSBAR_HEIGHT + outputTotalHeight; const indicatorHeight = this.editorHeight + CELL_STATUSBAR_HEIGHT + outputTotalHeight;
const outputContainerOffset = EDITOR_TOOLBAR_HEIGHT + EDITOR_TOP_MARGIN + this.editorHeight + CELL_STATUSBAR_HEIGHT; const outputContainerOffset = EDITOR_TOOLBAR_HEIGHT + EDITOR_TOP_MARGIN + this.editorHeight + CELL_STATUSBAR_HEIGHT;
const bottomToolbarOffset = totalHeight - BOTTOM_CELL_TOOLBAR_HEIGHT; const bottomToolbarOffset = totalHeight - BOTTOM_CELL_TOOLBAR_HEIGHT;
const editorWidth = state.outerWidth !== undefined ? state.outerWidth - CELL_MARGIN * 2 - CELL_RUN_GUTTER : this._layoutInfo?.editorWidth; const editorWidth = state.outerWidth !== undefined ? state.outerWidth - (CELL_MARGIN + CELL_RUN_GUTTER) * 2 : this._layoutInfo?.editorWidth;
this._layoutInfo = { this._layoutInfo = {
fontInfo: state.font || null, fontInfo: state.font || null,
editorHeight: this._editorHeight, editorHeight: this._editorHeight,
......
src/vs/workbench/contrib/notebook/browser/viewModel/markdownCellViewModel.ts
浏览文件 @ 6ab3602d
...@@ -71,7 +71,7 @@ export class MarkdownCellViewModel extends BaseCellViewModel implements ICellVie ...@@ -71,7 +71,7 @@ export class MarkdownCellViewModel extends BaseCellViewModel implements ICellVie
} }
private computeEditorWidth(outerWidth: number) { private computeEditorWidth(outerWidth: number) {
return outerWidth - CELL_MARGIN * 2 - CELL_RUN_GUTTER; return outerWidth - CELL_MARGIN * 2 - CELL_RUN_GUTTER * 2;
} }
layoutChange(state: MarkdownCellLayoutChangeEvent) { layoutChange(state: MarkdownCellLayoutChangeEvent) {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或