From 6cc80fea8154b3a9bc82c64588ee44b550880e4c Mon Sep 17 00:00:00 2001 From: rebornix Date: Wed, 2 Jun 2021 17:16:36 -0700 Subject: [PATCH] fix #125338. --- .../notebook/browser/media/notebook.css | 22 ++++++++- .../notebook/browser/notebookEditorWidget.ts | 45 +++++++++---------- 2 files changed, 42 insertions(+), 25 deletions(-) diff --git a/src/vs/workbench/contrib/notebook/browser/media/notebook.css b/src/vs/workbench/contrib/notebook/browser/media/notebook.css index c1f18b31ea9..655f7566eb0 100644 --- a/src/vs/workbench/contrib/notebook/browser/media/notebook.css +++ b/src/vs/workbench/contrib/notebook/browser/media/notebook.css @@ -357,7 +357,7 @@ .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .notebook-folding-indicator.mouseover .codicon { opacity: 0; - transition: opacity 0.1s; + transition: opacity 0.s; } .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .notebook-folding-indicator.mouseover:hover .codicon { @@ -605,6 +605,26 @@ right: 0px; } +/** cell border colors */ + +.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-focus-indicator-top:before, +.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-focus-indicator-bottom:before, +.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-left:before, +.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-right:before { + border-color: var(--notebook-focused-cell-border-color) !important; +} + +.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-top:before, +.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-bottom:before { + border-color: var(--notebook-inactive-focused-cell-border-color) !important; +} + +.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-editor-focus .cell-focus-indicator-top:before, +.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-editor-focus .cell-focus-indicator-bottom:before, +.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container.cell-editor-focus:before { + border-color: var(notebook-selected-cell-border-color) !important; +} + .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row .cell-drag-handle { position: absolute; top: 0px; diff --git a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts index 377b81e5bd5..bb160d0ca91 100644 --- a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts +++ b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts @@ -635,6 +635,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor top: -${cellTopMargin}px; height: calc(100% + ${cellTopMargin + cellBottomMargin}px) }`); } else { + // gutter styleSheets.push(` .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-left:before, .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row .cell-focus-indicator-right:before { @@ -662,6 +663,12 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor border-radius: 2px; margin-left: ${focusIndicatorLeftMargin}px; }`); + + // boder should always show + styleSheets.push(` + .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container .cell-focus-indicator-left:before { + border-color: var(--notebook-focused-cell-border-color) !important; + }`); } // between cell insert toolbar @@ -2710,6 +2717,20 @@ export const cellEditorBackground = registerColor('notebook.cellEditorBackground }, nls.localize('notebook.cellEditorBackground', "Cell editor background color.")); registerThemingParticipant((theme, collector) => { + // add css variable rules + + const focusedCellBorderColor = theme.getColor(focusedCellBorder); + const inactiveFocusedBorderColor = theme.getColor(inactiveFocusedCellBorder); + const selectedCellBorderColor = theme.getColor(selectedCellBorder); + collector.addRule(` + :root { + --notebook-focused-cell-border-color: ${focusedCellBorderColor}; + --notebook-inactive-focused-cell-border-color: ${inactiveFocusedBorderColor}; + --notebook-selected-cell-border-color: ${selectedCellBorderColor}; + } + `); + + const link = theme.getColor(textLinkForeground); if (link) { collector.addRule(`.notebookOverlay .cell.markdown a, @@ -2807,30 +2828,6 @@ registerThemingParticipant((theme, collector) => { .notebookOverlay .code-cell-row:not(.focused).cell-output-hover .cell-collapsed-part { background-color: ${cellHoverBackgroundColor}; }`); } - const focusedCellBorderColor = theme.getColor(focusedCellBorder); - collector.addRule(` - .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-focus-indicator-top:before, - .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-focus-indicator-bottom:before, - .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-left:before, - .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container:not(.cell-editor-focus) .cell-focus-indicator-right:before { - border-color: ${focusedCellBorderColor} !important; - }`); - - const inactiveFocusedBorderColor = theme.getColor(inactiveFocusedCellBorder); - collector.addRule(` - .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-top:before, - .monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator-bottom:before { - border-color: ${inactiveFocusedBorderColor} !important; - }`); - - const selectedCellBorderColor = theme.getColor(selectedCellBorder); - collector.addRule(` - .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-editor-focus .cell-focus-indicator-top:before, - .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-editor-focus .cell-focus-indicator-bottom:before, - .monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-inner-container.cell-editor-focus:before { - border-color: ${selectedCellBorderColor} !important; - }`); - 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,