Add code cell (#2909)

* initial work for addig code and code cell type

* add cell model and create editor for each cell

* formatting

* fix resizing issue

* small changes

* address comment
This commit is contained in:
Abbie Petchtes
2018-10-16 16:28:15 -07:00
committed by GitHub
parent 668e43f57c
commit 906c4c7f39
11 changed files with 277 additions and 19 deletions

View File

@@ -12,6 +12,7 @@ import { AngularDisposable } from 'sql/base/common/lifecycle';
import { IColorTheme, IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import * as themeColors from 'vs/workbench/common/theme';
import { ICellModel, CellTypes } from 'sql/parts/notebook/cellViews/interfaces';
export const NOTEBOOK_SELECTOR: string = 'notebook-component';
@@ -20,13 +21,23 @@ export const NOTEBOOK_SELECTOR: string = 'notebook-component';
templateUrl: decodeURI(require.toUrl('./notebook.component.html'))
})
export class NotebookComponent extends AngularDisposable implements OnInit {
@ViewChild('header', { read: ElementRef }) private header: ElementRef;
@ViewChild('toolbar', { read: ElementRef }) private toolbar: ElementRef;
protected cells: Array<ICellModel> = [];
constructor(
@Inject(forwardRef(() => CommonServiceInterface)) private _bootstrapService: CommonServiceInterface,
@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
) {
super();
// Todo: This is mock data for cells. Will remove this code when we have a service
let cell1 : ICellModel = {
id: '1', language: 'sql', source: 'select * from sys.tables', cellType: CellTypes.Code
};
let cell2 : ICellModel = {
id: '2', language: 'sql', source: 'select 1', cellType: CellTypes.Code
};
this.cells.push(cell1, cell2);
}
ngOnInit() {
@@ -35,9 +46,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit {
}
private updateTheme(theme: IColorTheme): void {
let headerEl = <HTMLElement>this.header.nativeElement;
headerEl.style.borderBottomColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
headerEl.style.borderBottomWidth = '1px';
headerEl.style.borderBottomStyle = 'solid';
let toolbarEl = <HTMLElement>this.toolbar.nativeElement;
toolbarEl.style.borderBottomColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
}
}