ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 18:46:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update CSS for inline notebook cell buttons (#7033)

Browse Source
This commit is contained in:
Cory Rivera
2019-09-03 17:18:32 -07:00
committed by GitHub
parent 1d6f48806e
commit c94291af52
2 changed files with 52 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/sql/workbench/parts/notebook/browser/notebook.css
View File

@@ -143,16 +143,18 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 60%; width: 100%;
margin: 1px auto; padding: 0px 20px;
margin: 1px 0px;
box-sizing: border-box;
} }
.notebookEditor .hoverButtonsContainer .containerBackground { .notebookEditor .hoverButtonsContainer .containerBackground {
position: absolute; position: absolute;
width: inherit; width: auto;
height: 2px; left: 20px;
border-radius: 3px; right: 20px;
opacity: 0.4; height: 1px;
z-index: 0; z-index: 0;
visibility: hidden; visibility: hidden;
} }
@@ -166,14 +168,12 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 3px; margin: 3px 2px;
padding: 4px 6px; padding: 4px 12px;
font-size: 10px; font-size: 12px;
box-sizing: border-box; box-sizing: border-box;
border-color: transparent;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-radius: 3px;
z-index: 1; z-index: 1;
visibility: hidden; visibility: hidden;
} }

83
src/sql/workbench/parts/notebook/browser/notebookStyles.ts
View File

@@ -6,7 +6,7 @@ import 'vs/css!./notebook';
import { registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; 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 { 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 { editorLineHighlight, editorLineHighlightBorder } from 'vs/editor/common/view/editorColorRegistry';
import { IDisposable } from 'vs/base/common/lifecycle'; import { IDisposable } from 'vs/base/common/lifecycle';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
@@ -37,32 +37,42 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
`); `);
} }
const textColor = theme.getColor(editorForeground); if (buttonBackgroundColor) {
if (textColor) {
collector.addRule(` collector.addRule(`
.notebookEditor .hoverButtonsContainer .hoverButton { .notebookEditor .notebook-cell.active {
color: ${textColor}; 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 backgroundColor = theme.getColor(editorBackground);
const activeBorder = theme.getColor(buttonBackground); if (backgroundColor) {
if (activeBorder) {
collector.addRule(` collector.addRule(`
.notebookEditor .notebook-cell.active { .notebookEditor .hoverButton {
border-color: ${activeBorder}; background-color: ${backgroundColor};
border-width: 1px;
} }
`); .notebookEditor .hoverButton:active,
.notebookEditor .hoverButton:hover {
collector.addRule(` color: ${backgroundColor};
.notebookEditor .hoverButton:active {
border-color: ${activeBorder};
} }
.hc-black .notebookEditor .hoverButton:active,
.notebookEditor .hoverButtonsContainer .containerBackground { .hc-black .notebookEditor .hoverButton:hover {
background-color: ${activeBorder}; color: ${backgroundColor};
} }
`); `);
} }
@@ -81,10 +91,6 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
box-shadow: 0; box-shadow: 0;
} }
.notebookEditor .notebook-cell.active:hover {
border-color: ${activeBorder};
}
.notebookEditor .notebook-cell:hover:not(.active) { .notebookEditor .notebook-cell:hover:not(.active) {
box-shadow: ${lightBoxShadow}; box-shadow: ${lightBoxShadow};
} }
@@ -96,18 +102,6 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
.hc-black .notebookEditor .notebook-cell:hover:not(.active) { .hc-black .notebookEditor .notebook-cell:hover:not(.active) {
box-shadow: 0; 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); const inactiveBorder = theme.getColor(SIDE_BAR_BACKGROUND);
@@ -143,12 +137,6 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
background-color: ${codeBackground}; background-color: ${codeBackground};
}`); }`);
collector.addRule(`
.notebookEditor .hoverButtonsContainer .hoverButton {
background-color: ${codeBackground};
}
`);
// Margin background will be the same (may override some styles) // Margin background will be the same (may override some styles)
collector.addRule(`.notebook-cell:not(.active) code-component .monaco-editor .margin { background-color: ${codeBackground}; }`); collector.addRule(`.notebook-cell:not(.active) code-component .monaco-editor .margin { background-color: ${codeBackground}; }`);
addBorderToInactiveCodeCells = false; addBorderToInactiveCodeCells = false;
@@ -170,6 +158,10 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
border-color: ${inactiveBorder}; border-color: ${inactiveBorder};
border-width: 1px; border-width: 1px;
} }
.notebookEditor .hoverButtonsContainer .containerBackground {
background-color: ${inactiveBorder};
}
`); `);
// Ensure there's always a line between editor and output // Ensure there's always a line between editor and output
@@ -228,9 +220,16 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
outline-width: 1px; outline-width: 1px;
outline-style: solid; outline-style: solid;
} }
.hc-black .notebookEditor .hoverButton {
color: ${hcOutline};
}
.hc-black .notebookEditor .hoverButton:not(:active) { .hc-black .notebookEditor .hoverButton:not(:active) {
border-color: ${hcOutline}; border-color: ${hcOutline};
border-radius: 0px; }
.hc-black .notebookEditor .hoverButton:active,
.hc-black .notebookEditor .hoverButton:hover {
background-color: ${hcOutline};
} }
`); `);
} }