diff --git a/src/sql/workbench/api/browser/mainThreadNotebookDocumentsAndEditors.ts b/src/sql/workbench/api/browser/mainThreadNotebookDocumentsAndEditors.ts index 1f26140dc2..f404357788 100644 --- a/src/sql/workbench/api/browser/mainThreadNotebookDocumentsAndEditors.ts +++ b/src/sql/workbench/api/browser/mainThreadNotebookDocumentsAndEditors.ts @@ -693,6 +693,10 @@ export class MainThreadNotebookDocumentsAndEditors extends Disposable implements $registerNavigationProvider(providerId: string, handle: number): void { this._notebookService.registerNavigationProvider({ providerId: providerId, + hasNavigation: true, + getNavigation: async (uri) => { + return await this._proxy.$getNavigation(handle, uri); + }, onNext: async (uri) => { let result = await this._proxy.$getNavigation(handle, uri); if (result) { diff --git a/src/sql/workbench/parts/notebook/notebook.component.html b/src/sql/workbench/parts/notebook/notebook.component.html index 0bddbe2e9d..b35b74c95c 100644 --- a/src/sql/workbench/parts/notebook/notebook.component.html +++ b/src/sql/workbench/parts/notebook/notebook.component.html @@ -19,7 +19,7 @@ -
+
diff --git a/src/sql/workbench/parts/notebook/notebook.component.ts b/src/sql/workbench/parts/notebook/notebook.component.ts index f372e9552c..83604510b1 100644 --- a/src/sql/workbench/parts/notebook/notebook.component.ts +++ b/src/sql/workbench/parts/notebook/notebook.component.ts @@ -26,7 +26,7 @@ import { AngularDisposable } from 'sql/base/node/lifecycle'; import { CellTypes, CellType } from 'sql/workbench/parts/notebook/models/contracts'; import { ICellModel, IModelFactory, INotebookModel, NotebookContentChange } from 'sql/workbench/parts/notebook/models/modelInterfaces'; import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement'; -import { INotebookService, INotebookParams, INotebookManager, INotebookEditor, INotebookSection, DEFAULT_NOTEBOOK_PROVIDER, SQL_NOTEBOOK_PROVIDER } from 'sql/workbench/services/notebook/common/notebookService'; +import { INotebookService, INotebookParams, INotebookManager, INotebookEditor, INotebookSection, DEFAULT_NOTEBOOK_PROVIDER, SQL_NOTEBOOK_PROVIDER, INavigationProvider } from 'sql/workbench/services/notebook/common/notebookService'; import { IBootstrapParams } from 'sql/platform/bootstrap/node/bootstrapService'; import { NotebookModel } from 'sql/workbench/parts/notebook/models/notebookModel'; import { ModelFactory } from 'sql/workbench/parts/notebook/models/modelFactory'; @@ -55,6 +55,7 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { Button } from 'sql/base/browser/ui/button/button'; import { attachButtonStyler } from 'sql/platform/theme/common/styler'; import { isUndefinedOrNull } from 'vs/base/common/types'; +import { Color } from 'vs/base/common/color'; export const NOTEBOOK_SELECTOR: string = 'notebook-component'; @@ -81,7 +82,8 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe private _runAllCellsAction: RunAllCellsAction; private _providerRelatedActions: IAction[] = []; private _scrollTop: number; - + private _navProvider: INavigationProvider; + private navigationResult: nb.NavigationResult; constructor( @Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef, @@ -133,12 +135,9 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this)); this.updateTheme(this.themeService.getColorTheme()); this.initActionBar(); - if (this.contextKeyService.getContextKeyValue('isDevelopment') && - this.contextKeyService.getContextKeyValue('bookOpened')) { - this.initNavSection(); - } this.setScrollPosition(); this.doLoad(); + this.initNavSection(); } ngOnDestroy() { @@ -441,10 +440,30 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe } protected initNavSection(): void { - this.addButton(localize('previousButtonLabel', "Previous"), - () => this.previousPage()); - this.addButton(localize('nextButtonLabel', "Next"), - () => this.nextPage()); + this._navProvider = this.notebookService.getNavigationProvider(this._notebookParams.notebookUri); + + if (this.contextKeyService.getContextKeyValue('isDevelopment') && + this.contextKeyService.getContextKeyValue('bookOpened') && + this._navProvider) { + this.addButton(localize('previousButtonLabel', "< Previous"), + () => this.previousPage()); + this.addButton(localize('nextButtonLabel', "Next >"), + () => this.nextPage()); + + this._navProvider.getNavigation(this._notebookParams.notebookUri).then(result => { + this.navigationResult = result; + this.detectChanges(); + }, err => { + console.log(err); + }); + } + } + + public get navigationVisibility(): 'hidden' | 'visible' { + if (this.navigationResult) { + return this.navigationResult.hasNavigation ? 'visible' : 'hidden'; + } + return 'hidden'; } private addButton(label: string, onDidClick?: () => void): void { @@ -455,8 +474,6 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe if (onDidClick) { this._register(button.onDidClick(onDidClick)); } - this._register(attachButtonStyler(button, this.themeService)); - } private actionItemProvider(action: Action): IActionViewItem { @@ -612,9 +629,8 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe public async nextPage(): Promise { try { - let navProvider = this.notebookService.getNavigationProvider(this.model.notebookUri); - if (navProvider) { - navProvider.onNext(this.model.notebookUri); + if (this._navProvider) { + this._navProvider.onNext(this.model.notebookUri); } } catch (error) { this.notificationService.error(notebookUtils.getErrorMessage(error)); @@ -623,9 +639,8 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe public previousPage() { try { - let navProvider = this.notebookService.getNavigationProvider(this.model.notebookUri); - if (navProvider) { - navProvider.onPrevious(this.model.notebookUri); + if (this._navProvider) { + this._navProvider.onPrevious(this.model.notebookUri); } } catch (error) { this.notificationService.error(notebookUtils.getErrorMessage(error)); diff --git a/src/sql/workbench/parts/notebook/notebook.css b/src/sql/workbench/parts/notebook/notebook.css index 73d001ebc2..8868d3e3cb 100644 --- a/src/sql/workbench/parts/notebook/notebook.css +++ b/src/sql/workbench/parts/notebook/notebook.css @@ -129,11 +129,11 @@ .notebookEditor .book-nav { display: flex; align-items: center; - justify-content: center; - margin: 5px; + justify-content: flex-start; + margin: 25px; } .notebookEditor .book-nav .dialog-message-button { - min-width: 60px; + min-width: 100px; margin-right: 10px; } \ No newline at end of file diff --git a/src/sql/workbench/parts/notebook/notebookStyles.ts b/src/sql/workbench/parts/notebook/notebookStyles.ts index 8a96dda4d9..44d09bf56a 100644 --- a/src/sql/workbench/parts/notebook/notebookStyles.ts +++ b/src/sql/workbench/parts/notebook/notebookStyles.ts @@ -6,7 +6,7 @@ import 'vs/css!./notebook'; import { registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; import { SIDE_BAR_BACKGROUND, SIDE_BAR_SECTION_HEADER_BACKGROUND, EDITOR_GROUP_HEADER_TABS_BACKGROUND } from 'vs/workbench/common/theme'; -import { activeContrastBorder, contrastBorder, buttonBackground, textLinkForeground, textLinkActiveForeground, textPreformatForeground, textBlockQuoteBackground, textBlockQuoteBorder } from 'vs/platform/theme/common/colorRegistry'; +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 { IDisposable } from 'vs/base/common/lifecycle'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; @@ -21,6 +21,22 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf let darkBoxShadow = '0px 4px 6px 0px rgba(0, 0, 0, 1)'; let addBorderToInactiveCodeCells = true; + // Book Navigation Buttons + const buttonForegroundColor = theme.getColor(buttonForeground); + const buttonBackgroundColor = theme.getColor(buttonBackground); + + if (buttonForegroundColor && buttonBackgroundColor) { + collector.addRule(` + .notebookEditor .book-nav .dialog-message-button .monaco-text-button { + border-color: ${buttonBackgroundColor} !important; + background-color: ${buttonForegroundColor} !important; + color: ${buttonBackgroundColor} !important; + border-width: 1px; + border-style: solid; + } + `); + } + // Active border const activeBorder = theme.getColor(buttonBackground); if (activeBorder) { @@ -254,4 +270,4 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf ${getBareResultsGridInfoStyles(rawOptions)} }`); }); -} +} \ No newline at end of file diff --git a/src/sql/workbench/services/notebook/common/notebookService.ts b/src/sql/workbench/services/notebook/common/notebookService.ts index d01745b697..63a852d1eb 100644 --- a/src/sql/workbench/services/notebook/common/notebookService.ts +++ b/src/sql/workbench/services/notebook/common/notebookService.ts @@ -156,6 +156,8 @@ export interface INotebookEditor { export interface INavigationProvider { providerId: string; + hasNavigation: boolean; + getNavigation(uri: URI): Thenable; onNext(uri: URI): void; onPrevious(uri: URI): void; }