SelectBox

src/vs/base/browser/ui/actionbar/actionbar.ts

@@ -10,6 +10,7 @@ import nls = require('vs/nls');
 import lifecycle = require('vs/base/common/lifecycle');
 import {Promise} from 'vs/base/common/winjs.base';
 import {Builder, $} from 'vs/base/browser/builder';
+import {SelectBox} from 'vs/base/browser/ui/selectBox/selectBox';
 import platform = require('vs/base/common/platform');
 import {IAction, IActionRunner, Action, IActionChangeEvent, ActionRunner} from 'vs/base/common/actions';
 import DOM = require('vs/base/browser/dom');
@@ -661,39 +662,25 @@ export class ActionBar extends EventEmitter implements IActionRunner {
 }
 
 export class SelectActionItem extends BaseActionItem {
-	private select: HTMLSelectElement;
+	private selectBox: SelectBox;
-	private options: string[];
-	private selected: number;
 	protected toDispose: lifecycle.IDisposable[];
 
 	constructor(ctx: any, action: IAction, options: string[], selected: number) {
 		super(ctx, action);
-
+		this.selectBox = new SelectBox(options, selected);
-		this.select = document.createElement('select');
-		this.select.className = 'action-bar-select';
-
-		this.options = options;
-		this.selected = selected;
 
 		this.toDispose = [];
-
+		this.toDispose.push(this.selectBox);
 		this.registerListeners();
 	}
 
 	public setOptions(options: string[], selected: number): void {
-		this.options = options;
+		this.selectBox.setOptions(options, selected);
-		if (selected >= 0) {
-			this.selected = selected;
-		} else if (this.selected < 0 || this.selected > this.options.length) {
-			this.selected = 0;
-		}
-
-		this.doSetOptions();
 	}
 
 	private registerListeners(): void {
-		this.toDispose.push(DOM.addStandardDisposableListener(this.select, 'change', (e) => {
+		this.toDispose.push(this.selectBox.onDidSelect(selected => {
-			this.actionRunner.run(this._action, this.getActionContext(e.target.value)).done();
+			this.actionRunner.run(this._action, this.getActionContext(selected)).done();
 		}));
 	}
 
@@ -702,50 +689,27 @@ export class SelectActionItem extends BaseActionItem {
 	}
 
 	public focus(): void {
-		if (this.select) {
+		if (this.selectBox) {
-			this.select.focus();
+			this.selectBox.focus();
 		}
 	}
 
 	public set enabled(value: boolean) {
-		this.select.disabled = !value;
+		this.selectBox.enabled = value;
 	}
 
 	public blur(): void {
-		if (this.select) {
+		if (this.selectBox) {
-			this.select.blur();
+			this.selectBox.blur();
 		}
 	}
 
 	public render(container: HTMLElement): void {
-		DOM.addClass(container, 'select-container');
+		this.selectBox.render(container);
-		container.appendChild(this.select);
-		this.doSetOptions();
 	}
 
 	protected getSelected(): string {
-		return this.options && this.selected >= 0 && this.selected < this.options.length ? this.options[this.selected] : null;
+		return this.selectBox.getSelected();
-	}
-
-	private doSetOptions(): void {
-		this.select.options.length = 0;
-
-		this.options.forEach((option) => {
-			this.select.add(this.createOption(option));
-		});
-
-		if (this.selected >= 0) {
-			this.select.selectedIndex = this.selected;
-			this.select.title = this.options[this.selected];
-		}
-	}
-
-	private createOption(value: string): HTMLOptionElement {
-		let option = document.createElement('option');
-		option.value = value;
-		option.text = value;
-
-		return option;
 	}
 
 	public dispose(): void {

src/vs/base/browser/ui/selectBox/selectBox.css

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.monaco-workbench .select-box {
+	width: 100%;
+	height: 20px;
+}
+
+.vs .monaco-workbench .select-box {
+	background-color: white;
+	border-color: #CECECE;
+}
+
+.vs-dark .monaco-workbench .select-box {
+	background-color: #3C3C3C;
+	border-color: #3C3C3C;
+	color: rgb(204, 204, 204);
+}
+
+.hc-black .monaco-workbench .select-box {
+	background-color: #3C3C3C;
+	border-color: #3C3C3C;
+	color: white;
+}

src/vs/base/browser/ui/selectBox/selectBox.ts

@@ -0,0 +1,103 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import 'vs/css!./selectBox';
+
+import {IDisposable, dispose} from 'vs/base/common/lifecycle';
+import Event, {Emitter} from 'vs/base/common/event';
+import {Widget} from 'vs/base/browser/ui/widget';
+import * as dom from 'vs/base/browser/dom';
+
+export class SelectBox extends Widget {
+
+	private select: HTMLSelectElement;
+	private options: string[];
+	private selected: number;
+	private _onDidSelect: Emitter<string>;
+	private toDispose: IDisposable[];
+
+	constructor(options: string[], selected: number) {
+		super();
+
+		this.select = document.createElement('select');
+		this.select.className = 'select-box';
+
+		this.options = options;
+		this.selected = selected;
+		this.toDispose = [];
+		this._onDidSelect = new Emitter<string>();
+
+		this.toDispose.push(dom.addStandardDisposableListener(this.select, 'change', (e) => {
+			this._onDidSelect.fire(e.target.value);
+		}));
+	}
+
+	public get onDidSelect(): Event<string> {
+		return this._onDidSelect.event;
+	}
+
+	public setOptions(options: string[], selected: number): void {
+		this.options = options;
+		if (selected >= 0) {
+			this.selected = selected;
+		} else if (this.selected < 0 || this.selected > this.options.length) {
+			this.selected = 0;
+		}
+
+		this.doSetOptions();
+	}
+
+	public focus(): void {
+		if (this.select) {
+			this.select.focus();
+		}
+	}
+
+	public set enabled(value: boolean) {
+		this.select.disabled = !value;
+	}
+
+	public blur(): void {
+		if (this.select) {
+			this.select.blur();
+		}
+	}
+
+	public render(container: HTMLElement): void {
+		dom.addClass(container, 'select-container');
+		container.appendChild(this.select);
+		this.doSetOptions();
+	}
+
+	public getSelected(): string {
+		return this.options && this.selected >= 0 && this.selected < this.options.length ? this.options[this.selected] : null;
+	}
+
+	private doSetOptions(): void {
+		this.select.options.length = 0;
+
+		this.options.forEach((option) => {
+			this.select.add(this.createOption(option));
+		});
+
+		if (this.selected >= 0) {
+			this.select.selectedIndex = this.selected;
+			this.select.title = this.options[this.selected];
+		}
+	}
+
+	private createOption(value: string): HTMLOptionElement {
+		let option = document.createElement('option');
+		option.value = value;
+		option.text = value;
+
+		return option;
+	}
+
+	public dispose(): void {
+		this.toDispose = dispose(this.toDispose);
+		super.dispose();
+	}
+}

src/vs/workbench/electron-browser/media/workbench.css

@@ -29,13 +29,11 @@
 	box-sizing:	border-box;
 }
 
-.monaco-workbench .action-bar-select {
+.monaco-workbench .monaco-action-bar .select-box {
-	width: 100%;
-	height: 20px;
 	margin-top: 8px; /* Center the select box */
 }
 
-.monaco-workbench.windows .action-bar-select {
+.monaco-workbench.windows .monaco-action-bar .select-box {
 	margin-top: 7px; /* Center the select box */
 }
 
@@ -76,11 +74,6 @@
 	background-color: #E1E1E1;
 }
 
-.vs .monaco-workbench .action-bar-select {
-	background-color: white;
-	border-color: #CECECE;
-}
-
 /* ---------- Dark Theme ---------- */
 
 .vs-dark .monaco-workbench {
@@ -111,12 +104,6 @@
 .vs-dark .monaco-workbench .stacked-view .action-label		{ color: inherit; }
 .vs-dark .monaco-workbench .stacked-view .action-label:hover { color: #3399FF; }
 
-.vs-dark .monaco-workbench .action-bar-select {
-	background-color: #3C3C3C;
-	border-color: #3C3C3C;
-	color: rgb(204, 204, 204);
-}
-
 /* ---------- HC Theme ---------- */
 
 .hc-black .monaco-workbench { color: #FFF; background-color: #000; }
@@ -136,9 +123,3 @@
 .hc-black .monaco-workbench .monaco-action-bar .action-item.disabled .action-label.disabled {
 	opacity: .4;
 }
-
-.hc-black .monaco-workbench .action-bar-select {
-	background-color: #3C3C3C;
-	border-color: #3C3C3C;
-	color: white;
-}