Cell code fit and finish (#2972)

* add the look and feel for code cell

* formatting

* adding the active cell

* formatting
This commit is contained in:
Abbie Petchtes
2018-10-23 12:22:19 -07:00
committed by GitHub
parent d2eb1488fd
commit 972f857c71
9 changed files with 96 additions and 12 deletions

View File

@@ -3,9 +3,9 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./notebook';
import './notebookStyles';
import { OnInit, Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild } from '@angular/core';
import { OnInit, Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, ViewChildren } from '@angular/core';
import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
import { AngularDisposable } from 'sql/base/common/lifecycle';
@@ -23,6 +23,7 @@ export const NOTEBOOK_SELECTOR: string = 'notebook-component';
export class NotebookComponent extends AngularDisposable implements OnInit {
@ViewChild('toolbar', { read: ElementRef }) private toolbar: ElementRef;
protected cells: Array<ICellModel> = [];
private _activeCell: ICellModel;
constructor(
@Inject(forwardRef(() => CommonServiceInterface)) private _bootstrapService: CommonServiceInterface,
@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
@@ -31,11 +32,11 @@ export class NotebookComponent extends AngularDisposable implements OnInit {
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 cell1: ICellModel = {
id: '1', language: 'sql', source: 'select * from sys.tables', cellType: CellTypes.Code, active: false
};
let cell2 : ICellModel = {
id: '2', language: 'sql', source: 'select 1', cellType: CellTypes.Code
let cell2: ICellModel = {
id: '2', language: 'sql', source: 'select 1', cellType: CellTypes.Code, active: false
};
this.cells.push(cell1, cell2);
}
@@ -49,4 +50,15 @@ export class NotebookComponent extends AngularDisposable implements OnInit {
let toolbarEl = <HTMLElement>this.toolbar.nativeElement;
toolbarEl.style.borderBottomColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
}
public selectCell(cell: ICellModel) {
if (cell !== this._activeCell) {
if (this._activeCell) {
this._activeCell.active = false;
}
this._activeCell = cell;
this._activeCell.active = true;
this._changeRef.detectChanges();
}
}
}