SQL Operations Studio Public Preview 1 (0.23) release source code

src/sql/base/browser/ui/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,58 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import 'vs/css!sql/media/icons/common-icons';
+import 'vs/css!./media/breadcrumb';
+
+import { Component, Inject, forwardRef, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { toDisposableSubscription } from 'sql/parts/common/rxjsUtils';
+import { IBreadcrumbService, MenuItem } from './interfaces';
+
+import { IDisposable } from 'vs/base/common/lifecycle';
+
+@Component({
+	selector: 'breadcrumb',
+	template: `
+				<span style="display: flex; flex-flow: row; align-items: center; margin: 10px">
+					<ng-template ngFor let-item let-first="first" let-last="last" [ngForOf]="menuItems">
+						<span style="padding: 5px; display: flex; align-items: center">
+							<span *ngIf="item.icon" class="icon" style="display: inline-block; margin-right: 5px" [ngClass]="item.icon"></span>
+							<span *ngIf="first" style="font-weight: 200">{{item.label}}</span>
+							<span *ngIf="last" style="">{{item.label}}</span>
+							<a class="router-link" *ngIf="!last && !first" (click)="route(item.routerLink)" style=" font-weight: 200" >{{item.label}}</a>
+						</span>
+						<span *ngIf="!last" class="icon chevron-right"></span>
+					</ng-template>
+				</span>
+				`
+})
+export class BreadcrumbComponent implements OnInit, OnDestroy {
+	private menuItems: MenuItem[] = [];
+	private disposables: Array<IDisposable> = new Array();
+
+	constructor(
+		@Inject(forwardRef(() => IBreadcrumbService)) private _breadcrumbService: IBreadcrumbService,
+		@Inject(forwardRef(() => Router)) private _router: Router,
+		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef
+	) { }
+
+	ngOnInit() {
+		this.disposables.push(toDisposableSubscription(this._breadcrumbService.breadcrumbItem.subscribe((item) => this.updateCrumb(item))));
+	}
+
+	ngOnDestroy() {
+		this.disposables.forEach(item => item.dispose());
+	}
+
+	private updateCrumb(items: MenuItem[]) {
+		this.menuItems = items;
+		this._changeRef.detectChanges();
+	}
+
+	public route(link: any[]): void {
+		this._router.navigate(link);
+	}
+}

src/sql/base/browser/ui/breadcrumb/interfaces.ts

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { InjectionToken, EventEmitter } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+
+export const IBreadcrumbService = new InjectionToken<IBreadcrumbService>('breadcrumbService');
+
+export interface IBreadcrumbService {
+	breadcrumbItem: Subject<MenuItem[]>;
+	setBreadcrumbs(any): void;
+}
+
+export interface MenuItem {
+	label?: string;
+	icon?: string;
+	command?: (event?: any) => void;
+	url?: string;
+	routerLink?: any[];
+	eventEmitter?: EventEmitter<any>;
+	items?: MenuItem[];
+	expanded?: boolean;
+	disabled?: boolean;
+	visible?: boolean;
+	target?: string;
+	routerLinkActiveOptions?: any;
+}

src/sql/base/browser/ui/breadcrumb/media/breadcrumb.css

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+
+.vs .chevron-right.icon {
+	background-image: url("chevron_right.svg");
+}
+
+.vs-dark .chevron-right.icon,
+.hc-black .chevron-right.icon {
+	background-image: url("chevron_right_inverse.svg");
+}
+
+breadcrumb .icon {
+	background-size: 16px;
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	padding: 8px;
+}
+
+breadcrumb .chevron-right.icon {
+	background-size: 16px;
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	padding: 8px;
+}
+
+breadcrumb .router-link {
+	cursor: pointer;
+}

src/sql/base/browser/ui/breadcrumb/media/chevron_right.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>chevron_right</title><polygon class="cls-1" points="13.59 2.21 13.58 2.22 13.58 2.2 13.59 2.21"/><path d="M10.54,8l-7-7,1-1,8,8-8,8-1-1Z"/></svg>

src/sql/base/browser/ui/breadcrumb/media/chevron_right_inverse.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>chevron_right_inverse</title><path class="cls-1" d="M10.38,8l-7-7,1-1,8,8-8,8-1-1Z"/></svg>