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 @@
1" [cellModel]="cellModel" [activeCellId]="activeCellId">
+
+ {{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}`);
+ }
});
}