Make folded markdown cell '...' clickable

Fix #141582
microsoft · Feb 5, 2022 · fdeb70b · fdeb70b
1 parent fa2b51e
commit fdeb70b
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 15 deletions.
diff --git a/src/vs/workbench/contrib/notebook/browser/media/notebook.css b/src/vs/workbench/contrib/notebook/browser/media/notebook.css
@@ -402,13 +402,32 @@
 	width: 16px;
 }
 
+.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-expand-part-button {
+	position: relative;
+	left: 0px;
+	padding: 2px;
+	border-radius: 5px;
+	vertical-align: middle;
+	margin-left: 4px;
+	height: 16px;
+	width: 16px;
+	z-index: var(--z-index-notebook-cell-expand-part-button);
+}
+
 .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .output-collapse-container .expandOutputIcon:before {
 	color: grey;
 	font-size: 12px;
 	line-height: 16px;
 	vertical-align: bottom;
 }
 
+.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-expand-part-button:before {
+	color: grey;
+	font-size: 12px;
+	line-height: 16px;
+	vertical-align: bottom;
+}
+
 .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .input-collapsed .notebook-folding-indicator {
 	display: none;
 }
@@ -855,13 +874,16 @@
 	padding: 4px 4px 4px 4px;
 }
 
-.monaco-workbench .notebookOverlay > .cell-list-container .notebook-folded-hint {
+.monaco-workbench .notebookOverlay>.cell-list-container .notebook-folded-hint {
 	position: absolute;
+	user-select: none;
+}
+
+.monaco-workbench .notebookOverlay > .cell-list-container .notebook-folded-hint-label {
 	font-size: var(--notebook-cell-output-font-size);
 	font-family: var(--monaco-monospace-font);
 	font-style: italic;
 	opacity: 0.7;
-	user-select: none;
 }
 
 /** Theming */

diff --git a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts
@@ -2961,8 +2961,9 @@ registerZIndex(ZIndex.Base, 28, 'notebook-cell-bottom-toolbar-container');
 registerZIndex(ZIndex.Base, 29, 'notebook-run-button-container');
 registerZIndex(ZIndex.Base, 29, 'notebook-input-collapse-condicon');
 registerZIndex(ZIndex.Base, 30, 'notebook-cell-output-toolbar');
-registerZIndex(ZIndex.Sash, 1, 'notebook-cell-toolbar');
-registerZIndex(ZIndex.Sash, 2, 'notebook-cell-toolbar-dropdown-active');
+registerZIndex(ZIndex.Sash, 1, 'notebook-cell-expand-part-button');
+registerZIndex(ZIndex.Sash, 2, 'notebook-cell-toolbar');
+registerZIndex(ZIndex.Sash, 3, 'notebook-cell-toolbar-dropdown-active');
 
 export const notebookCellBorder = registerColor('notebook.cellBorderColor', {
 	dark: transparent(listInactiveSelectionBackground, 1),
@@ -3265,10 +3266,9 @@ registerThemingParticipant((theme, collector) => {
 	const toolbarHoverBackgroundColor = theme.getColor(toolbarHoverBackground);
 	if (toolbarHoverBackgroundColor) {
 		collector.addRule(`
-		.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .expandInputIcon:hover {
-			background-color: ${toolbarHoverBackgroundColor};
-		}
-		.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .expandOutputIcon:hover {
+		.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .expandInputIcon:hover,
+		.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .expandOutputIcon:hover,
+		.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-expand-part-button:hover {
 			background-color: ${toolbarHoverBackgroundColor};
 		}
 	`);

diff --git a/src/vs/workbench/contrib/notebook/browser/view/cellParts/foldedCellHint.ts b/src/vs/workbench/contrib/notebook/browser/view/cellParts/foldedCellHint.ts
@@ -4,7 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as DOM from 'vs/base/browser/dom';
+import { Codicon, CSSIcon } from 'vs/base/common/codicons';
 import { localize } from 'vs/nls';
+import { FoldingController } from 'vs/workbench/contrib/notebook/browser/controller/foldingController';
 import { CellEditState, CellFoldingState, ICellViewModel, INotebookEditor } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
 import { CellViewModelStateChangeEvent } from 'vs/workbench/contrib/notebook/browser/notebookViewEvents';
 import { CellPart } from 'vs/workbench/contrib/notebook/browser/view/cellParts/cellPart';
@@ -34,7 +36,7 @@ export class FoldedCellHint extends CellPart {
 		} else if (element.foldingState === CellFoldingState.Collapsed) {
 			const idx = this._notebookEditor._getViewModel().getCellIndex(element);
 			const length = this._notebookEditor._getViewModel().getFoldedLength(idx);
-			DOM.reset(this._container, this.getHiddenCellsLabel(length));
+			DOM.reset(this._container, this.getHiddenCellsLabel(length), this.getHiddenCellHintButton(element));
 			DOM.show(this._container);
 
 			const foldHintTop = element.layoutInfo.previewHeight;
@@ -44,12 +46,26 @@ export class FoldedCellHint extends CellPart {
 		}
 	}
 
-	private getHiddenCellsLabel(num: number): string {
-		if (num === 1) {
-			return localize('hiddenCellsLabel', "1 cell hidden") + '…';
-		} else {
-			return localize('hiddenCellsLabelPlural', "{0} cells hidden", num) + '…';
-		}
+	private getHiddenCellsLabel(num: number): HTMLElement {
+		const label = num === 1 ?
+			localize('hiddenCellsLabel', "1 cell hidden") :
+			localize('hiddenCellsLabelPlural', "{0} cells hidden", num);
+
+		return DOM.$('span.notebook-folded-hint-label', undefined, label);
+	}
+
+	private getHiddenCellHintButton(element: MarkupCellViewModel): HTMLElement {
+		const expandIcon = DOM.$('span.cell-expand-part-button');
+		expandIcon.classList.add(...CSSIcon.asClassNameArray(Codicon.more));
+		this._register(DOM.addDisposableListener(expandIcon, DOM.EventType.CLICK, () => {
+			const controller = this._notebookEditor.getContribution<FoldingController>(FoldingController.id);
+			const idx = this._notebookEditor.getCellIndex(element);
+			if (typeof idx === 'number') {
+				controller.setFoldingStateDown(idx, CellFoldingState.Expanded, 1);
+			}
+		}));
+
+		return expandIcon;
 	}
 
 	prepareLayout(): void {