From c94291af52a2fd17bf5c269ad8e4d311957b95d2 Mon Sep 17 00:00:00 2001 From: Cory Rivera Date: Tue, 3 Sep 2019 17:18:32 -0700 Subject: [PATCH] Update CSS for inline notebook cell buttons (#7033) --- .../parts/notebook/browser/notebook.css | 22 ++--- .../parts/notebook/browser/notebookStyles.ts | 83 +++++++++---------- 2 files changed, 52 insertions(+), 53 deletions(-) diff --git a/src/sql/workbench/parts/notebook/browser/notebook.css b/src/sql/workbench/parts/notebook/browser/notebook.css index b5d79d0106..67119680e7 100644 --- a/src/sql/workbench/parts/notebook/browser/notebook.css +++ b/src/sql/workbench/parts/notebook/browser/notebook.css @@ -143,16 +143,18 @@ flex-direction: row; align-items: center; justify-content: center; - width: 60%; - margin: 1px auto; + width: 100%; + padding: 0px 20px; + margin: 1px 0px; + box-sizing: border-box; } .notebookEditor .hoverButtonsContainer .containerBackground { position: absolute; - width: inherit; - height: 2px; - border-radius: 3px; - opacity: 0.4; + width: auto; + left: 20px; + right: 20px; + height: 1px; z-index: 0; visibility: hidden; } @@ -166,14 +168,12 @@ flex-direction: row; align-items: center; justify-content: center; - margin: 3px; - padding: 4px 6px; - font-size: 10px; + margin: 3px 2px; + padding: 4px 12px; + font-size: 12px; box-sizing: border-box; - border-color: transparent; border-width: 1px; border-style: solid; - border-radius: 3px; z-index: 1; visibility: hidden; } diff --git a/src/sql/workbench/parts/notebook/browser/notebookStyles.ts b/src/sql/workbench/parts/notebook/browser/notebookStyles.ts index 2f1f267259..ded4e70818 100644 --- a/src/sql/workbench/parts/notebook/browser/notebookStyles.ts +++ b/src/sql/workbench/parts/notebook/browser/notebookStyles.ts @@ -6,7 +6,7 @@ import 'vs/css!./notebook'; import { registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; import { SIDE_BAR_BACKGROUND, SIDE_BAR_SECTION_HEADER_BACKGROUND, EDITOR_GROUP_HEADER_TABS_BACKGROUND } from 'vs/workbench/common/theme'; -import { activeContrastBorder, contrastBorder, buttonBackground, textLinkForeground, textLinkActiveForeground, textPreformatForeground, textBlockQuoteBackground, textBlockQuoteBorder, buttonForeground, editorForeground } from 'vs/platform/theme/common/colorRegistry'; +import { activeContrastBorder, contrastBorder, buttonBackground, textLinkForeground, textLinkActiveForeground, textPreformatForeground, textBlockQuoteBackground, textBlockQuoteBorder, buttonForeground, editorForeground, editorBackground } from 'vs/platform/theme/common/colorRegistry'; import { editorLineHighlight, editorLineHighlightBorder } from 'vs/editor/common/view/editorColorRegistry'; import { IDisposable } from 'vs/base/common/lifecycle'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; @@ -37,32 +37,42 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf `); } - const textColor = theme.getColor(editorForeground); - if (textColor) { + if (buttonBackgroundColor) { collector.addRule(` - .notebookEditor .hoverButtonsContainer .hoverButton { - color: ${textColor}; + .notebookEditor .notebook-cell.active { + border-color: ${buttonBackgroundColor}; + border-width: 1px; + } + .notebookEditor .notebook-cell.active:hover { + border-color: ${buttonBackgroundColor}; + } + + .notebookEditor .hoverButton { + border-color: ${buttonBackgroundColor}; + } + .notebookEditor .hoverButton:active, + .notebookEditor .hoverButton:hover { + background-color: ${buttonBackgroundColor}; + } + .notebookEditor .hoverButton { + color: ${buttonBackgroundColor}; } `); } - // Active border - const activeBorder = theme.getColor(buttonBackground); - if (activeBorder) { + const backgroundColor = theme.getColor(editorBackground); + if (backgroundColor) { collector.addRule(` - .notebookEditor .notebook-cell.active { - border-color: ${activeBorder}; - border-width: 1px; + .notebookEditor .hoverButton { + background-color: ${backgroundColor}; } - `); - - collector.addRule(` - .notebookEditor .hoverButton:active { - border-color: ${activeBorder}; + .notebookEditor .hoverButton:active, + .notebookEditor .hoverButton:hover { + color: ${backgroundColor}; } - - .notebookEditor .hoverButtonsContainer .containerBackground { - background-color: ${activeBorder}; + .hc-black .notebookEditor .hoverButton:active, + .hc-black .notebookEditor .hoverButton:hover { + color: ${backgroundColor}; } `); } @@ -81,10 +91,6 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf box-shadow: 0; } - .notebookEditor .notebook-cell.active:hover { - border-color: ${activeBorder}; - } - .notebookEditor .notebook-cell:hover:not(.active) { box-shadow: ${lightBoxShadow}; } @@ -96,18 +102,6 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf .hc-black .notebookEditor .notebook-cell:hover:not(.active) { box-shadow: 0; } - - .notebookEditor .hoverButtonsContainer .hoverButton:hover { - box-shadow: ${lightBoxShadow}; - } - - .vs-dark .notebookEditor .hoverButtonsContainer .hoverButton:hover { - box-shadow: ${darkBoxShadow}; - } - - .hc-black .notebookEditor .hoverButtonsContainer .hoverButton:hover { - box-shadow: 0; - } `); const inactiveBorder = theme.getColor(SIDE_BAR_BACKGROUND); @@ -143,12 +137,6 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf background-color: ${codeBackground}; }`); - collector.addRule(` - .notebookEditor .hoverButtonsContainer .hoverButton { - background-color: ${codeBackground}; - } - `); - // Margin background will be the same (may override some styles) collector.addRule(`.notebook-cell:not(.active) code-component .monaco-editor .margin { background-color: ${codeBackground}; }`); addBorderToInactiveCodeCells = false; @@ -170,6 +158,10 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf border-color: ${inactiveBorder}; border-width: 1px; } + + .notebookEditor .hoverButtonsContainer .containerBackground { + background-color: ${inactiveBorder}; + } `); // Ensure there's always a line between editor and output @@ -228,9 +220,16 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf outline-width: 1px; outline-style: solid; } + + .hc-black .notebookEditor .hoverButton { + color: ${hcOutline}; + } .hc-black .notebookEditor .hoverButton:not(:active) { border-color: ${hcOutline}; - border-radius: 0px; + } + .hc-black .notebookEditor .hoverButton:active, + .hc-black .notebookEditor .hoverButton:hover { + background-color: ${hcOutline}; } `); }