From e7fe18ddf8ef6a04534161105b47afda7b421aa8 Mon Sep 17 00:00:00 2001 From: Miguel Solorio Date: Mon, 16 Nov 2020 10:49:25 -0800 Subject: [PATCH] Update default styles and polish focus treatment --- .../theme-defaults/themes/light_defaults.json | 4 +-- .../notebook/browser/media/notebook.css | 20 +++++++++----- .../notebook/browser/notebookEditorWidget.ts | 27 ++++++++++++++----- 3 files changed, 35 insertions(+), 16 deletions(-) diff --git a/extensions/theme-defaults/themes/light_defaults.json b/extensions/theme-defaults/themes/light_defaults.json index 0f82502db7d..5e7bcf84f9a 100644 --- a/extensions/theme-defaults/themes/light_defaults.json +++ b/extensions/theme-defaults/themes/light_defaults.json @@ -21,9 +21,7 @@ "sideBarSectionHeader.background": "#0000", "sideBarSectionHeader.border": "#61616130", "tab.lastPinnedBorder": "#61616130", - "notebook.focusedCellBackground": "#c8ddf150", - "notebook.cellBorderColor": "#dae3e9", - "notebook.outputContainerBackgroundColor": "#c8ddf150" + "notebook.cellBorderColor": "#E8E8E8" }, "semanticHighlighting": true } diff --git a/src/vs/workbench/contrib/notebook/browser/media/notebook.css b/src/vs/workbench/contrib/notebook/browser/media/notebook.css index 526e80d5bbf..5e521a7078d 100644 --- a/src/vs/workbench/contrib/notebook/browser/media/notebook.css +++ b/src/vs/workbench/contrib/notebook/browser/media/notebook.css @@ -433,9 +433,7 @@ } .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .run-button-container { position: relative; - height: 16px; flex-shrink: 0; - top: 9px; z-index: 27; /* Above the drag handle */ } @@ -445,8 +443,8 @@ } .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .run-button-container .monaco-toolbar .codicon { - margin: 0; - padding-right: 4px; + margin: 0 4px 0 0; + padding: 6px; } .monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .run-button-container .monaco-toolbar .actions-container { @@ -479,7 +477,7 @@ } .monaco-workbench .notebookOverlay .cell .monaco-progress-container { - top: -5px; + top: -3px; position: absolute; left: 0; @@ -491,7 +489,7 @@ height: 2px; } -.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused .cell-has-toolbar-actions .cell-title-toolbar, +.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover .cell-has-toolbar-actions .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; @@ -795,6 +793,7 @@ .monaco-workbench .notebookOverlay > .cell-list-container .notebook-folding-indicator .codicon { visibility: visible; height: 16px; + padding: 4px; } /** Theming */ @@ -847,3 +846,12 @@ position: absolute; display: flex; } + +/* TODO @misolori localize string */ +.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused .cell-statusbar-container .cell-run-status:empty::before { + content: "Ctrl + Enter to run"; + width: auto; + height: 100%; + display: block; + opacity: 0.7; +} diff --git a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts index 8bc609be1c0..fb15de742ce 100644 --- a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts +++ b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts @@ -34,7 +34,7 @@ import { ServiceCollection } from 'vs/platform/instantiation/common/serviceColle import { ILayoutService } from 'vs/platform/layout/browser/layoutService'; import { IQuickInputService, IQuickPickItem, QuickPickInput } from 'vs/platform/quickinput/common/quickInput'; import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage'; -import { contrastBorder, diffInserted, diffRemoved, editorBackground, errorForeground, focusBorder, foreground, listFocusBackground, listInactiveSelectionBackground, registerColor, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, textBlockQuoteBackground, textBlockQuoteBorder, textLinkActiveForeground, textLinkForeground, textPreformatForeground, transparent } from 'vs/platform/theme/common/colorRegistry'; +import { contrastBorder, diffInserted, diffRemoved, editorBackground, errorForeground, focusBorder, foreground, listInactiveSelectionBackground, registerColor, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, textBlockQuoteBackground, textBlockQuoteBorder, textLinkActiveForeground, textLinkForeground, textPreformatForeground, transparent } from 'vs/platform/theme/common/colorRegistry'; import { IColorTheme, IThemeService, registerThemingParticipant, ThemeColor } from 'vs/platform/theme/common/themeService'; import { EditorMemento } from 'vs/workbench/browser/parts/editor/editorPane'; import { IEditorMemento } from 'vs/workbench/common/editor'; @@ -1842,7 +1842,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor } export const notebookCellBorder = registerColor('notebook.cellBorderColor', { - dark: transparent(PANEL_BORDER, .4), + dark: transparent(listInactiveSelectionBackground, 1), light: transparent(listInactiveSelectionBackground, 1), hc: PANEL_BORDER }, nls.localize('notebook.cellBorderColor', "The border color for notebook cells.")); @@ -1873,7 +1873,7 @@ export const cellStatusIconRunning = registerColor('notebookStatusRunningIcon.fo export const notebookOutputContainerColor = registerColor('notebook.outputContainerBackgroundColor', { dark: notebookCellBorder, - light: transparent(listFocusBackground, .4), + light: notebookCellBorder, hc: null }, nls.localize('notebook.outputContainerBackgroundColor', "The Color of the notebook output container background.")); @@ -1885,8 +1885,8 @@ export const CELL_TOOLBAR_SEPERATOR = registerColor('notebook.cellToolbarSeparat }, nls.localize('notebook.cellToolbarSeparator', "The color of the separator in the cell bottom toolbar")); export const focusedCellBackground = registerColor('notebook.focusedCellBackground', { - dark: transparent(PANEL_BORDER, .4), - light: transparent(listFocusBackground, .4), + dark: null, + light: null, hc: null }, nls.localize('focusedCellBackground', "The background color of a cell when the cell is focused.")); @@ -1896,9 +1896,15 @@ export const cellHoverBackground = registerColor('notebook.cellHoverBackground', hc: null }, nls.localize('notebook.cellHoverBackground', "The background color of a cell when the cell is hovered.")); +export const selectedCellBorder = registerColor('notebook.selectedCellBorder', { + dark: notebookCellBorder, + light: notebookCellBorder, + hc: focusBorder +}, nls.localize('notebook.selectedCellBorder', "The color of the cell's top and bottom border when the cell is selected but not focusd.")); + export const focusedCellBorder = registerColor('notebook.focusedCellBorder', { - dark: Color.white.transparent(0.12), - light: Color.black.transparent(0.12), + dark: focusBorder, + light: focusBorder, hc: focusBorder }, nls.localize('notebook.focusedCellBorder', "The color of the cell's top and bottom border when the cell is focused.")); @@ -2026,6 +2032,13 @@ registerThemingParticipant((theme, collector) => { border-color: ${focusedCellBorderColor} !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 { + 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,