Skip to content

V
vscode

掘金者说 / vscode
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
V
vscode

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

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

Make full markdown cell draggable 

Fix #104104
Large change because we can't make .monaco-list-row draggable, and really we should not be messing with that element which is owned by the List, so added a new inner container
上级 11c0b607
隐藏空白更改
内联 并排
Showing with 53 addition and 44 deletion
src/vs/base/browser/ui/toolbar/toolbar.ts
浏览文件 @ 6512fbf4
......@@ -39,6 +39,7 @@ export class ToolBar extends Disposable {
private submenuActionViewItems: DropdownMenuActionViewItem[] = [];
private hasSecondaryActions: boolean = false;
private lookupKeybindings: boolean;
private element: HTMLElement;
private _onDidChangeDropdownVisibility = this._register(new EventMultiplexer<boolean>());
readonly onDidChangeDropdownVisibility = this._onDidChangeDropdownVisibility.event;
......@@ -52,11 +53,11 @@ export class ToolBar extends Disposable {
this.toggleMenuAction = this._register(new ToggleMenuAction(() => this.toggleMenuActionViewItem?.show(), options.toggleMenuTitle));
let element = document.createElement('div');
element.className = 'monaco-toolbar';
container.appendChild(element);
this.element = document.createElement('div');
this.element.className = 'monaco-toolbar';
container.appendChild(this.element);
this.actionBar = this._register(new ActionBar(element, {
this.actionBar = this._register(new ActionBar(this.element, {
orientation: options.orientation,
ariaLabel: options.ariaLabel,
actionRunner: options.actionRunner,
......@@ -134,8 +135,8 @@ export class ToolBar extends Disposable {
}
}
getContainer(): HTMLElement {
return this.actionBar.getContainer();
getElement(): HTMLElement {
return this.element;
}
getItemsWidth(): number {
......
src/vs/workbench/contrib/notebook/browser/media/notebook.css
浏览文件 @ 6512fbf4
......@@ -75,7 +75,7 @@
display: none !important;
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-drag-image > .monaco-toolbar {
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-drag-image .cell-title-toolbar {
display: none;
}
......@@ -197,13 +197,13 @@
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .menu.mouseover,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover .menu,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-output-hover .menu {
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-output-hover .menu {
visibility: visible;
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-output-hover {
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-output-hover {
outline: none !important;
}
......@@ -223,7 +223,7 @@
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.collapsed .notebook-folding-indicator,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.collapsed > .monaco-toolbar {
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.collapsed .cell-title-toolbar {
display: none;
}
......@@ -274,7 +274,7 @@
cursor: pointer;
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > .monaco-toolbar {
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-title-toolbar {
visibility: hidden;
display: inline-block;
position: absolute;
......@@ -285,7 +285,7 @@
z-index: 30;
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > .monaco-toolbar .action-item {
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-title-toolbar .action-item {
width: 24px;
height: 24px;
display: flex;
......@@ -293,17 +293,17 @@
margin: 1px 2px;
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > .monaco-toolbar .action-item .action-label {
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-title-toolbar .action-item .action-label {
display: flex;
align-items: center;
margin: auto;
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > .monaco-toolbar .action-item .monaco-dropdown {
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-title-toolbar .action-item .monaco-dropdown {
width: 100%;
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > .monaco-toolbar .action-item .monaco-dropdown .dropdown-label {
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-title-toolbar .action-item .monaco-dropdown .dropdown-label {
display: flex;
}
......@@ -422,9 +422,9 @@
height: 2px;
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-has-toolbar-actions.focused > .monaco-toolbar,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-has-toolbar-actions.cell-output-hover > .monaco-toolbar,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-has-toolbar-actions:hover > .monaco-toolbar {
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-has-toolbar-actions.focused .cell-title-toolbar,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-has-toolbar-actions.cell-output-hover .cell-title-toolbar,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-has-toolbar-actions:hover .cell-title-toolbar {
visibility: visible;
}
......@@ -460,6 +460,10 @@
cursor: grab;
}
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row .cell-inner-container:hover {
cursor: grab;
}
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator .codicon:hover {
cursor: pointer;
}
......@@ -490,7 +494,7 @@
z-index: 10;
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list .monaco-list-row.cell-dragging {
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list .monaco-list-row .cell-dragging {
opacity: 0.5 !important;
}
......@@ -502,7 +506,6 @@
width: 100%;
opacity: 0;
transition: opacity 0.2s ease-in-out;
cursor: auto;
padding: 0;
}
......
src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts
浏览文件 @ 6512fbf4
......@@ -1795,14 +1795,14 @@ registerThemingParticipant((theme, collector) => {
const editorBackgroundColor = theme.getColor(editorBackground);
if (editorBackgroundColor) {
collector.addRule(`.notebookOverlay .cell-statusbar-container { border-top: solid 1px ${editorBackgroundColor}; }`);
collector.addRule(`.notebookOverlay .monaco-list-row > .monaco-toolbar { background-color: ${editorBackgroundColor}; }`);
collector.addRule(`.notebookOverlay .monaco-list-row .cell-title-toolbar { background-color: ${editorBackgroundColor}; }`);
collector.addRule(`.notebookOverlay .monaco-list-row.cell-drag-image { background-color: ${editorBackgroundColor}; }`);
collector.addRule(`.notebookOverlay .cell-bottom-toolbar-container .action-item { background-color: ${editorBackgroundColor} }`);
}
const cellToolbarSeperator = theme.getColor(CELL_TOOLBAR_SEPERATOR);
if (cellToolbarSeperator) {
collector.addRule(`.notebookOverlay .monaco-list-row > .monaco-toolbar { border: solid 1px ${cellToolbarSeperator}; }`);
collector.addRule(`.notebookOverlay .monaco-list-row .cell-title-toolbar { border: solid 1px ${cellToolbarSeperator}; }`);
collector.addRule(`.notebookOverlay .cell-bottom-toolbar-container .action-item { border: solid 1px ${cellToolbarSeperator} }`);
collector.addRule(`.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-collapsed-part { border-bottom: solid 1px ${cellToolbarSeperator} }`);
collector.addRule(`.notebookOverlay .monaco-action-bar .action-item.verticalSeparator { background-color: ${cellToolbarSeperator} }`);
......@@ -1834,15 +1834,15 @@ registerThemingParticipant((theme, collector) => {
const cellSymbolHighlightColor = theme.getColor(cellSymbolHighlight);
if (cellSymbolHighlightColor) {
collector.addRule(`.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.nb-symbolHighlight .cell-focus-indicator,
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.nb-symbolHighlight.markdown-cell-row {
collector.addRule(`.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row .nb-symbolHighlight .cell-focus-indicator,
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row .nb-symbolHighlight {
background-color: ${cellSymbolHighlightColor} !important;
}`);
}
const focusedEditorBorderColorColor = theme.getColor(focusedEditorBorderColor);
if (focusedEditorBorderColorColor) {
collector.addRule(`.notebookOverlay .monaco-list-row.cell-editor-focus .cell-editor-part:before { outline: solid 1px ${focusedEditorBorderColorColor}; }`);
collector.addRule(`.notebookOverlay .monaco-list-row .cell-editor-focus .cell-editor-part:before { outline: solid 1px ${focusedEditorBorderColorColor}; }`);
}
const cellBorderColor = theme.getColor(notebookCellBorder);
......@@ -1895,14 +1895,14 @@ registerThemingParticipant((theme, collector) => {
}
// Cell Margin
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > div.cell { margin: 0px ${CELL_MARGIN * 2}px 0px ${CELL_MARGIN}px; }`);
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > div.cell.code { margin-left: ${CODE_CELL_LEFT_MARGIN}px; }`);
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row { padding-top: ${CELL_TOP_MARGIN}px; }`);
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .markdown-cell-row { padding-bottom: ${CELL_BOTTOM_MARGIN}px; }`);
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row div.cell { margin: 0px ${CELL_MARGIN * 2}px 0px ${CELL_MARGIN}px; }`);
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row div.cell.code { margin-left: ${CODE_CELL_LEFT_MARGIN}px; }`);
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > .cell-inner-container { padding-top: ${CELL_TOP_MARGIN}px; }`);
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .markdown-cell-row > .cell-inner-container { padding-bottom: ${CELL_BOTTOM_MARGIN}px; }`);
collector.addRule(`.notebookOverlay .output { margin: 0px ${CELL_MARGIN}px 0px ${CODE_CELL_LEFT_MARGIN + CELL_RUN_GUTTER}px; }`);
collector.addRule(`.notebookOverlay .output { width: calc(100% - ${CODE_CELL_LEFT_MARGIN + CELL_RUN_GUTTER + (CELL_MARGIN * 2)}px); }`);
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > div.cell.markdown { padding-left: ${CELL_RUN_GUTTER}px; }`);
collector.addRule(`.notebookOverlay .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row div.cell.markdown { padding-left: ${CELL_RUN_GUTTER}px; }`);
collector.addRule(`.notebookOverlay .cell .run-button-container { width: ${CELL_RUN_GUTTER}px; }`);
collector.addRule(`.notebookOverlay .cell-drag-image .cell-editor-container > div { padding: ${EDITOR_TOP_PADDING}px 16px ${EDITOR_BOTTOM_PADDING}px 16px; }`);
collector.addRule(`.notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-top { height: ${CELL_TOP_MARGIN}px; }`);
......
src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts
浏览文件 @ 6512fbf4
......@@ -228,7 +228,7 @@ abstract class AbstractCellRenderer {
}));
}
protected createToolbar(container: HTMLElement): ToolBar {
protected createToolbar(container: HTMLElement, elementClass?: string): ToolBar {
const toolbar = new ToolBar(container, this.contextMenuService, {
getKeyBinding: action => this.keybindingService.lookupKeybinding(action.id),
actionViewItemProvider: action => {
......@@ -246,6 +246,10 @@ abstract class AbstractCellRenderer {
}
});
if (elementClass) {
toolbar.getElement().classList.add(elementClass);
}
return toolbar;
}
......@@ -263,7 +267,7 @@ abstract class AbstractCellRenderer {
const updateActions = () => {
const actions = this.getCellToolbarActions(templateData.titleMenu);
const hadFocus = DOM.isAncestor(document.activeElement, templateData.toolbar.getContainer());
const hadFocus = DOM.isAncestor(document.activeElement, templateData.toolbar.getElement());
templateData.toolbar.setActions(actions.primary, actions.secondary);
if (hadFocus) {
this.notebookEditor.focus();
......@@ -387,11 +391,12 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR
renderTemplate(container: HTMLElement): MarkdownCellRenderTemplate {
container.classList.add('markdown-cell-row');
container = DOM.append(container, DOM.$('.cell-inner-container'));
const disposables = new DisposableStore();
const contextKeyService = disposables.add(this.contextKeyServiceProvider(container));
const toolbar = disposables.add(this.createToolbar(container));
const focusIndicator = DOM.append(container, DOM.$('.cell-focus-indicator.cell-focus-indicator-side.cell-focus-indicator-left'));
focusIndicator.setAttribute('draggable', 'true');
const toolbar = disposables.add(this.createToolbar(container, 'cell-title-toolbar'));
const focusIndicatorLeft = DOM.append(container, DOM.$('.cell-focus-indicator.cell-focus-indicator-side.cell-focus-indicator-left'));
container.setAttribute('draggable', 'true');
const codeInnerContent = DOM.append(container, $('.cell.code'));
const editorPart = DOM.append(codeInnerContent, $('.cell-editor-part'));
......@@ -399,7 +404,7 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR
editorPart.style.display = 'none';
const innerContent = DOM.append(container, $('.cell.markdown'));
const foldingIndicator = DOM.append(focusIndicator, DOM.$('.notebook-folding-indicator'));
const foldingIndicator = DOM.append(focusIndicatorLeft, DOM.$('.notebook-folding-indicator'));
const { collapsedPart, expandButton } = this.setupCollapsedPart(container);
......@@ -417,7 +422,7 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR
cellContainer: innerContent,
editorPart,
editorContainer,
focusIndicatorLeft: focusIndicator,
focusIndicatorLeft,
foldingIndicator,
disposables,
elementDisposables: new DisposableStore(),
......@@ -445,7 +450,7 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR
private getMarkdownDragImage(templateData: MarkdownCellRenderTemplate): HTMLElement {
const dragImageContainer = DOM.$('.cell-drag-image.monaco-list-row.focused.markdown-cell-row');
dragImageContainer.innerHTML = templateData.container.innerHTML;
dragImageContainer.innerHTML = templateData.container.outerHTML;
// Remove all rendered content nodes after the
const markdownContent = dragImageContainer.querySelector('.cell.markdown')!;
......@@ -720,15 +725,14 @@ export class CellDragAndDropController extends Disposable {
registerDragHandle(templateData: BaseCellRenderTemplate, dragImageProvider: DragImageProvider): void {
const container = templateData.container;
const dragHandle = templateData.focusIndicatorLeft;
templateData.disposables.add(domEvent(dragHandle, DOM.EventType.DRAG_END)(() => {
templateData.disposables.add(domEvent(container, DOM.EventType.DRAG_END)(() => {
// Note, templateData may have a different element rendered into it by now
container.classList.remove(DRAGGING_CLASS);
this.dragCleanup();
}));
templateData.disposables.add(domEvent(dragHandle, DOM.EventType.DRAG_START)(event => {
templateData.disposables.add(domEvent(container, DOM.EventType.DRAG_START)(event => {
if (!event.dataTransfer) {
return;
}
......@@ -737,7 +741,7 @@ export class CellDragAndDropController extends Disposable {
this.currentDraggedCell.dragging = true;
const dragImage = dragImageProvider();
container.parentElement!.appendChild(dragImage);
container.parentElement!.parentElement!.appendChild(dragImage);
event.dataTransfer.setDragImage(dragImage, 0, 0);
setTimeout(() => container.parentElement!.removeChild(dragImage!), 0); // Comment this out to debug drag image layout
......@@ -965,11 +969,12 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
renderTemplate(container: HTMLElement): CodeCellRenderTemplate {
container.classList.add('code-cell-row');
container = DOM.append(container, DOM.$('.cell-inner-container'));
const disposables = new DisposableStore();
const contextKeyService = disposables.add(this.contextKeyServiceProvider(container));
DOM.append(container, $('.cell-focus-indicator.cell-focus-indicator-top'));
const toolbar = disposables.add(this.createToolbar(container));
const toolbar = disposables.add(this.createToolbar(container, 'cell-title-toolbar'));
const focusIndicator = DOM.append(container, DOM.$('.cell-focus-indicator.cell-focus-indicator-side.cell-focus-indicator-left'));
focusIndicator.setAttribute('draggable', 'true');
......
src/vs/workbench/contrib/preferences/browser/settingsTree.ts
浏览文件 @ 6512fbf4
......@@ -604,7 +604,7 @@ export abstract class AbstractSettingRenderer extends Disposable implements ITre
}
private fixToolbarIcon(toolbar: ToolBar): void {
const button = toolbar.getContainer().querySelector('.codicon-toolbar-more');
const button = toolbar.getElement().querySelector('.codicon-toolbar-more');
if (button) {
(<HTMLElement>button).tabIndex = -1;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或