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

src/sql/base/browser/ui/checkbox/checkbox.ts

@@ -0,0 +1,54 @@
+/*---------------------------------------------------------------------------------------------
+ *  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/base/browser/ui/checkbox/media/checkbox';
+import { Checkbox as vsCheckbox, ICheckboxOpts, ICheckboxStyles } from 'vs/base/browser/ui/checkbox/checkbox';
+import { Color } from 'vs/base/common/color';
+
+const defaultOpts = {
+	inputActiveOptionBorder: Color.fromHex('#007ACC'),
+	actionClassName: ' sql-checkbox'
+};
+
+/**
+ * Extends Checkbox to include Carbon checkbox icon and styling.
+ */
+export class Checkbox extends vsCheckbox {
+	private _inputActiveOptionBorder: Color;
+
+	constructor(opts: ICheckboxOpts) {
+		super({
+			actionClassName: opts.actionClassName + defaultOpts.actionClassName,
+			title: opts.title,
+			isChecked: opts.isChecked,
+			onChange: opts.onChange,
+			onKeyDown: opts.onKeyDown,
+			inputActiveOptionBorder: opts.inputActiveOptionBorder
+		});
+		this._inputActiveOptionBorder = opts.inputActiveOptionBorder ? opts.inputActiveOptionBorder : defaultOpts.inputActiveOptionBorder;
+	}
+
+	public enable(): void {
+		super.enable();
+		this.domNode.classList.remove('disabled');
+	}
+
+	public disable(): void {
+		super.disable();
+		this.domNode.classList.add('disabled');
+	}
+
+	public style(styles: ICheckboxStyles): void {
+		if (styles.inputActiveOptionBorder) {
+			this._inputActiveOptionBorder = styles.inputActiveOptionBorder;
+		}
+		this.applyStyles();
+	}
+
+	protected applyStyles(): void {
+		if (this.domNode) {
+			this.domNode.style.borderColor = this._inputActiveOptionBorder ? this._inputActiveOptionBorder.toString(): defaultOpts.inputActiveOptionBorder.toString();
+		}
+	}
+}

src/sql/base/browser/ui/checkbox/defaultCheckbox.ts

@@ -0,0 +1,71 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import Event, { Emitter } from 'vs/base/common/event';
+import * as DOM from 'vs/base/browser/dom';
+import { Disposable } from 'vs/base/common/lifecycle';
+import { KeyCode } from 'vs/base/common/keyCodes';
+import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
+
+export interface ICheckboxOptions {
+	label: string;
+	enabled?: boolean;
+	checked?: boolean;
+}
+
+export class Checkbox extends Disposable {
+	private _el: HTMLInputElement;
+	private _label: HTMLSpanElement;
+
+	private _onChange = new Emitter<boolean>();
+	public readonly onChange: Event<boolean> = this._onChange.event;
+
+	constructor(container: HTMLElement, opts: ICheckboxOptions) {
+		super();
+
+		this._el = document.createElement('input');
+		this._el.type = 'checkbox';
+
+		this._register(DOM.addDisposableListener(this._el, DOM.EventType.CHANGE, e => {
+			this._onChange.fire(e);
+		}));
+
+		this._register(DOM.addStandardDisposableListener(this._el, DOM.EventType.KEY_DOWN, (e: StandardKeyboardEvent) => {
+			if (e.equals(KeyCode.Enter)) {
+				this.checked = !this.checked;
+				e.stopPropagation();
+			}
+		}));
+
+		this._label = document.createElement('span');
+
+		this.label = opts.label;
+		this.enabled = opts.enabled;
+		this.checked = opts.checked;
+
+		container.appendChild(this._el);
+		container.appendChild(this._label);
+	}
+
+	public set label(val: string) {
+		this._label.innerText = val;
+	}
+
+	public set enabled(val: boolean) {
+		this._el.disabled = !val;
+	}
+
+	public get enabled(): boolean {
+		return !this._el.disabled;
+	}
+
+	public set checked(val: boolean) {
+		this._el.checked = val;
+	}
+
+	public get checked(): boolean {
+		return this._el.checked;
+	}
+}

src/sql/base/browser/ui/checkbox/media/check.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>check_16x16</title><path d="M16,3.16,5.48,13.69,0,8.2l.89-.89,4.6,4.59,9.63-9.62Z"/></svg>

src/sql/base/browser/ui/checkbox/media/check_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>check_inverse_16x16</title><path class="cls-1" d="M16,3.16,5.48,13.69,0,8.2l.89-.89,4.6,4.59,9.63-9.62Z"/></svg>

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

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+ .custom-checkbox.sql-checkbox {
+	margin-right: 5px;
+	margin-top: 2px;
+	width: 12px;
+	height: 12px;
+}
+
+.custom-checkbox.sql-checkbox.checked {
+	background: url('check.svg') center center no-repeat;
+}
+
+.vs-dark.monaco-shell .custom-checkbox.sql-checkbox.checked {
+	background: url('check_inverse.svg') center center no-repeat;
+}
+
+.custom-checkbox.sql-checkbox.disabled {
+	pointer-events: none;
+	opacity: 0.3;
+}