From bf9fd5a3b8fbd35697fe8a90262997c8548f1f94 Mon Sep 17 00:00:00 2001 From: Vasu Bhog Date: Fri, 23 Oct 2020 19:51:03 -0500 Subject: [PATCH] UI Component for Parameterized Notebook (#13021) * Backend work for Parameterization + Tests * address comments * Add Parameters Tag upon state change * Edit CSS Styling for accessibility * more generic tag names --- src/sql/platform/theme/common/colorRegistry.ts | 2 ++ .../notebook/browser/cellViews/code.component.html | 3 +++ .../notebook/browser/cellViews/code.component.ts | 5 +++++ .../contrib/notebook/browser/cellViews/code.css | 13 +++++++++++++ .../browser/cellViews/codeCell.component.ts | 3 +++ .../contrib/notebook/browser/notebookStyles.ts | 7 ++++++- 6 files changed, 32 insertions(+), 1 deletion(-) diff --git a/src/sql/platform/theme/common/colorRegistry.ts b/src/sql/platform/theme/common/colorRegistry.ts index db9310b059..1e1c3b4e43 100644 --- a/src/sql/platform/theme/common/colorRegistry.ts +++ b/src/sql/platform/theme/common/colorRegistry.ts @@ -66,3 +66,5 @@ export const codeEditorLineNumber = registerColor('notebook.codeEditorLineNumber export const codeEditorToolbarIcon = registerColor('notebook.codeEditorToolbarIcon', { light: '#999999', dark: '#A19F9D', hc: '#FFFFFF' }, nls.localize('notebook.codeEditorToolbarIcon', "Notebook: Code editor toolbar icons")); export const codeEditorToolbarBackground = registerColor('notebook.codeEditorToolbarBackground', { light: '#EEEEEE', dark: '#333333', hc: '#000000' }, nls.localize('notebook.codeEditorToolbarBackground', "Notebook: Code editor toolbar background")); export const codeEditorToolbarBorder = registerColor('notebook.codeEditorToolbarBorder', { light: '#C8C6C4', dark: '#333333', hc: '#000000' }, nls.localize('notebook.codeEditorToolbarBorder', "Notebook: Code editor toolbar right border")); +export const notebookCellTagBackground = registerColor('notebook.notebookCellTagBackground', { light: '#0078D4', dark: '#0078D4', hc: '#0078D4' }, nls.localize('notebook.notebookCellTagBackground', "Tag background color.")); +export const notebookCellTagForeground = registerColor('notebook.notebookCellTagForeground', { light: '#FFFFFF', dark: '#FFFFFF', hc: '#FFFFFF' }, nls.localize('notebook.notebookCellTagForeground', "Tag foreground color.")); diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/code.component.html b/src/sql/workbench/contrib/notebook/browser/cellViews/code.component.html index e8fe42d025..de9fc75439 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/code.component.html +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/code.component.html @@ -13,5 +13,8 @@ +
+ {{parametersText}} +
diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/code.component.ts b/src/sql/workbench/contrib/notebook/browser/cellViews/code.component.ts index 9bee458f99..e5c2d49953 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/code.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/code.component.ts @@ -35,6 +35,7 @@ import { SimpleProgressIndicator } from 'sql/workbench/services/progress/browser import { notebookConstants } from 'sql/workbench/services/notebook/browser/interfaces'; import { tryMatchCellMagic } from 'sql/workbench/services/notebook/browser/utils'; import { IColorTheme } from 'vs/platform/theme/common/themeService'; +import { localize } from 'vs/nls'; export const CODE_SELECTOR: string = 'code-component'; const MARKDOWN_CLASS = 'markdown'; @@ -144,6 +145,10 @@ export class CodeComponent extends CellView implements OnInit, OnChanges { return this.cellModel.cellGuid; } + get parametersText(): string { + return localize('parametersText', "Parameters"); + } + private updateConnectionState(shouldConnect: boolean) { if (this.isSqlCodeCell()) { let cellUri = this.cellModel.cellUri.toString(); diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/code.css b/src/sql/workbench/contrib/notebook/browser/cellViews/code.css index 2c88334453..67f98aec08 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/code.css +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/code.css @@ -108,3 +108,16 @@ code-component .hide-component-button { background-position: center; background-color: transparent; } + +code-component .parameter { + bottom: 0; + margin-right: 15px; + position: absolute; + right: 0; +} + +code-component .parameter span { + display: inline-block; + padding: 3px 7px; + text-align: center; +} diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/codeCell.component.ts b/src/sql/workbench/contrib/notebook/browser/cellViews/codeCell.component.ts index 55a5b398ab..543c8a2f14 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/codeCell.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/codeCell.component.ts @@ -55,6 +55,9 @@ export class CodeCellComponent extends CellView implements OnInit, OnChanges { this._register(this.cellModel.onCollapseStateChanged((state) => { this._changeRef.detectChanges(); })); + this._register(this.cellModel.onParameterStateChanged((state) => { + this._changeRef.detectChanges(); + })); this._register(this.cellModel.onOutputsChanged(() => { this._changeRef.detectChanges(); })); diff --git a/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts b/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts index 87c7bc339c..2644fddec0 100644 --- a/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts +++ b/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts @@ -8,7 +8,7 @@ import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/ import { SIDE_BAR_BACKGROUND, EDITOR_GROUP_HEADER_TABS_BACKGROUND } from 'vs/workbench/common/theme'; import { activeContrastBorder, contrastBorder, buttonBackground, textLinkForeground, textLinkActiveForeground, textPreformatForeground, textBlockQuoteBackground, textBlockQuoteBorder, buttonForeground } from 'vs/platform/theme/common/colorRegistry'; import { editorLineHighlight, editorLineHighlightBorder } from 'vs/editor/common/view/editorColorRegistry'; -import { cellBorder, notebookToolbarIcon, notebookToolbarLines, buttonMenuArrow, dropdownArrow, markdownEditorBackground, codeEditorBackground, codeEditorBackgroundActive, codeEditorLineNumber, codeEditorToolbarIcon, codeEditorToolbarBackground, codeEditorToolbarBorder, toolbarBackground, toolbarIcon, toolbarBottomBorder, notebookToolbarSelectBackground, splitBorder } from 'sql/platform/theme/common/colorRegistry'; +import { cellBorder, notebookToolbarIcon, notebookToolbarLines, buttonMenuArrow, dropdownArrow, markdownEditorBackground, codeEditorBackground, codeEditorBackgroundActive, codeEditorLineNumber, codeEditorToolbarIcon, codeEditorToolbarBackground, codeEditorToolbarBorder, toolbarBackground, toolbarIcon, toolbarBottomBorder, notebookToolbarSelectBackground, splitBorder, notebookCellTagBackground, notebookCellTagForeground } from 'sql/platform/theme/common/colorRegistry'; import { IDisposable } from 'vs/base/common/lifecycle'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { BareResultsGridInfo, getBareResultsGridInfoStyles } from 'sql/workbench/contrib/query/browser/queryResultsEditor'; @@ -237,5 +237,10 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf if (codeEditorToolbarBorderColor) { collector.addRule(`.notebook-cell.active code-cell-component code-component .toolbar { border-right-color: ${codeEditorToolbarBorderColor}!important;}`); } + const notebookCellTagBackgroundColor = theme.getColor(notebookCellTagBackground); + const notebookCellTagForegroundColor = theme.getColor(notebookCellTagForeground); + if (notebookCellTagBackgroundColor && notebookCellTagForegroundColor) { + collector.addRule(`code-component .parameter span { background-color: ${notebookCellTagBackgroundColor}; color: ${notebookCellTagForegroundColor}`); + } }); }