hide nav buttons for non-book notebooks (#6377)

* hide nav buttons for non-book notebooks

* updated buttons for all themes

* changed foregroundColor to buttonForegroundColor

src/sql/workbench/parts/notebook/notebook.component.html

@@ -19,7 +19,7 @@
 			<placeholder-cell-component [cellModel]="cell" [model]="model">
 			</placeholder-cell-component>
 		</div>
-		<div class="book-nav" #bookNav>
+		<div class="book-nav" #bookNav [style.visibility]="navigationVisibility">
 		</div>
 	</div>
 </div>

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<void> {
 		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));

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

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