ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-23 17:23:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

UI Component for Parameterized Notebook (#13021)

Browse Source 
* Backend work for  Parameterization + Tests

* address comments

* Add Parameters Tag upon state change

* Edit CSS Styling for accessibility

* more generic tag names
This commit is contained in:
Vasu Bhog
2020-10-23 19:51:03 -05:00
committed by GitHub
parent 4c4d2d4463
commit bf9fd5a3b8
6 changed files with 32 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/sql/workbench/contrib/notebook/browser/cellViews/code.component.html
View File

@@ -13,5 +13,8 @@
</div>
</div>
<collapse-component *ngIf="cellModel.cellType === 'code' && cellModel.source && cellModel.source.length > 1" [cellModel]="cellModel" [activeCellId]="activeCellId"></collapse-component>
<div #parameter class="parameter" *ngIf="cellModel.cellType === 'code' && cellModel.isParameter">
<span>{{parametersText}}</span>
</div>
</div>
</div>

5
src/sql/workbench/contrib/notebook/browser/cellViews/code.component.ts
View File

@@ -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();

13
src/sql/workbench/contrib/notebook/browser/cellViews/code.css
View File

@@ -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;
}

3
src/sql/workbench/contrib/notebook/browser/cellViews/codeCell.component.ts
View File

@@ -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();
}));

7
src/sql/workbench/contrib/notebook/browser/notebookStyles.ts
View File

@@ -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}`);
}
});
}