#6679 Support icon inside input box and provide filter icon for filte…

…r box
microsoft · Jun 6, 2016 · 3cca023 · 3cca023
1 parent 2d33d75
commit 3cca023
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 42 deletions.
diff --git a/src/vs/base/browser/ui/inputbox/inputBox.css b/src/vs/base/browser/ui/inputbox/inputBox.css
@@ -35,6 +35,17 @@
 	position: relative;
 	width: 100%;
 	height: 100%;
+	display: flex;
+	justify-content: flex-start;
+}
+
+.vs-dark .monaco-inputbox > .wrapper {
+	background-color: var(--input-bgcolor);
+}
+
+.monaco-inputbox > .wrapper .icon {
+	width: 16px;
+	height: 22px;
 }
 
 .monaco-inputbox > .wrapper > .input {

diff --git a/src/vs/base/browser/ui/inputbox/inputBox.ts b/src/vs/base/browser/ui/inputbox/inputBox.ts
@@ -27,6 +27,7 @@ export interface IInputOptions {
 	validationOptions?: IInputValidationOptions;
 	flexibleHeight?: boolean;
 	actions?: IAction[];
+	iconClass?: string;
 }
 
 export interface IInputValidator {
@@ -96,6 +97,9 @@ export class InputBox extends Widget {
 		let tagName = this.options.flexibleHeight ? 'textarea' : 'input';
 
 		let wrapper = dom.append(this.element, $('.wrapper'));
+		if (this.options.iconClass) {
+			dom.append(wrapper, $('span.icon.' + this.options.iconClass));
+		}
 		this.input = <HTMLInputElement>dom.append(wrapper, $(tagName + '.input'));
 		this.input.setAttribute('autocorrect', 'off');
 		this.input.setAttribute('autocapitalize', 'off');

diff --git a/src/vs/workbench/browser/media/workbench.css b/src/vs/workbench/browser/media/workbench.css
@@ -46,7 +46,11 @@
 
 /* ---------- Dark Theme ---------- */
 
-.vs-dark .monaco-workbench { background-color: #252526; color: #CCC; }
+.vs-dark .monaco-workbench {
+	--input-bgcolor: #3C3C3C;
+	background-color: #252526;
+	color: #CCC;
+}
 
 .vs-dark .monaco-workbench .monaco-scrollable-element .shadow.top {	box-shadow: #000 0 6px 6px -6px inset; }
 .vs-dark .monaco-workbench .monaco-scrollable-element .shadow.left { box-shadow: #000 6px 0 6px -6px inset; }
@@ -58,7 +62,7 @@
 
 .vs-dark .monaco-workbench input,
 .vs-dark .monaco-workbench textarea {
-	background-color: #3C3C3C;
+	background-color: var(--input-bgcolor);
 }
 
 .vs-dark .monaco-workbench input:disabled {

diff --git a/src/vs/workbench/parts/markers/browser/markersPanel.ts b/src/vs/workbench/parts/markers/browser/markersPanel.ts
@@ -99,6 +99,7 @@ export class MarkersPanel extends Panel {
 	}
 
 	public refreshPanel(updateTitleArea: boolean= false):TPromise<any> {
+		this.collapseAllAction.enabled= this.markersModel.hasFilteredResources();
 		this.refreshAutoExpanded();
 		if (updateTitleArea) {
 			this.updateTitleArea();

diff --git a/src/vs/workbench/parts/markers/browser/markersPanelActions.ts b/src/vs/workbench/parts/markers/browser/markersPanelActions.ts
@@ -5,7 +5,6 @@
 
 import * as DOM from 'vs/base/browser/dom';
 import * as lifecycle from 'vs/base/common/lifecycle';
-import * as strings from 'vs/base/common/strings';
 import { IAction, Action } from 'vs/base/common/actions';
 import { BaseActionItem } from 'vs/base/browser/ui/actionbar/actionbar';
 import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
@@ -36,17 +35,17 @@ export class FilterInputBoxActionItem extends BaseActionItem {
 
 	public render(container: HTMLElement): void {
 		DOM.addClass(container, 'markers-panel-action-filter');
-		var filterInputBoxContainer = DOM.append(container, DOM.emmet('.input-box-container'));
-		var filterInputBox = new InputBox(filterInputBoxContainer, this.contextViewService, {
-			placeholder: Messages.MARKERS_PANEL_FILTER_PLACEHOLDER
+		var filterInputBox = new InputBox(container, this.contextViewService, {
+			placeholder: Messages.MARKERS_PANEL_FILTER_PLACEHOLDER,
+			iconClass: 'filterIcon'
 		});
-		filterInputBox.value= this.markersPanel.markersModel.filterOptions.completeValue;
+		filterInputBox.value= this.markersPanel.markersModel.filterOptions.filter;
 		this.toDispose.push(filterInputBox.onDidChange((filter: string) => {
-			this.markersPanel.markersModel.update(this.prepareFilterOptions(filter));
+			this.markersPanel.markersModel.update(new FilterOptions(filter));
 			this.markersPanel.refreshPanel();
 		}));
-		this.toDispose.push(DOM.addStandardDisposableListener(filterInputBoxContainer, 'keydown', this.handleKeyboardEvent));
-		this.toDispose.push(DOM.addStandardDisposableListener(filterInputBoxContainer, 'keyup', this.handleKeyboardEvent));
+		this.toDispose.push(DOM.addStandardDisposableListener(container, 'keydown', this.handleKeyboardEvent));
+		this.toDispose.push(DOM.addStandardDisposableListener(container, 'keyup', this.handleKeyboardEvent));
 	}
 
 	public dispose(): void {
@@ -64,30 +63,4 @@ export class FilterInputBoxActionItem extends BaseActionItem {
 				break;
 		}
 	}
-
-	private prepareFilterOptions(filter:string): FilterOptions {
-		let filterOptions:FilterOptions= new FilterOptions();
-		filterOptions.completeValue= filter;
-
-		filter= strings.trim(filter);
-		if (!filter) {
-			return filterOptions;
-		}
-
-		let startIndex= 0;
-		if (strings.startsWith(filter.toLocaleLowerCase(), Messages.MARKERS_PANEL_FILTER_ERRORS)) {
-			filterOptions.filterErrors= true;
-			startIndex= (Messages.MARKERS_PANEL_FILTER_ERRORS).length;
-		}
-		if (strings.startsWith(filter.toLocaleLowerCase(), Messages.MARKERS_PANEL_FILTER_WARNINGS)) {
-			filterOptions.filterWarnings= true;
-			startIndex= (Messages.MARKERS_PANEL_FILTER_WARNINGS).length;
-		}
-		if (strings.startsWith(filter.toLocaleLowerCase(), Messages.MARKERS_PANEL_FILTER_INFOS)) {
-			filterOptions.filterInfos= true;
-			startIndex= (Messages.MARKERS_PANEL_FILTER_INFOS).length;
-		}
-		filterOptions.filterValue= filter.substr(startIndex).trim();
-		return filterOptions;
-	}
 }
diff --git a/src/vs/workbench/parts/markers/browser/media/markers.css b/src/vs/workbench/parts/markers/browser/media/markers.css
@@ -6,15 +6,20 @@
 .monaco-action-bar .action-item.markers-panel-action-filter {
 	width: 400px;
 	cursor: default;
-	margin: 5px 10px 0 0;
+	margin: 4px 10px 0 0;
 }
 
-.monaco-action-bar .action-item.markers-panel-action-filter .input-box-container {
-	background: #ddd;
+.monaco-action-bar .action-item.markers-panel-action-filter .monaco-inputbox {
+	border: 1px solid #ddd;
 }
 
-.vs-dark .monaco-action-bar .action-item.markers-panel-action-filter .input-box-container {
-	background: none;
+.vs-dark .monaco-action-bar .action-item.markers-panel-action-filter .monaco-inputbox {
+	border: none;
+}
+
+.monaco-action-bar .action-item.markers-panel-action-filter .filterIcon {
+	margin: 2px 0 0 4px;
+	background: url('filter.svg') center center no-repeat;
 }
 
 .markers-panel .markers-panel-container {
@@ -32,6 +37,7 @@
 
 .markers-panel .markers-panel-container .tree-container {
 	height: 100%;
+	margin-top: 2px;
 }
 
 .markers-panel .markers-panel-container .tree-container .markers-panel-tree-entry {

diff --git a/src/vs/workbench/parts/markers/common/markersModel.ts b/src/vs/workbench/parts/markers/common/markersModel.ts
@@ -33,11 +33,36 @@ export class FilterOptions {
 	public filterWarnings: boolean= false;
 	public filterInfos: boolean= false;
 	public filterValue: string= '';
-	public completeValue: string= '';
+	public filter: string= '';
+
+	constructor(filter:string='') {
+		if (filter) {
+			this.parse(filter);
+		}
+	}
 
 	public hasActiveFilters():boolean {
 		return this.filterErrors || this.filterWarnings || this.filterInfos || !!this.filterValue;
 	}
+
+	private parse(filter: string) {
+		this.filter= filter;
+		filter= strings.trim(filter);
+		let startIndex= 0;
+		if (strings.startsWith(filter.toLocaleLowerCase(), Messages.MARKERS_PANEL_FILTER_ERRORS)) {
+			this.filterErrors= true;
+			startIndex= (Messages.MARKERS_PANEL_FILTER_ERRORS).length;
+		}
+		if (strings.startsWith(filter.toLocaleLowerCase(), Messages.MARKERS_PANEL_FILTER_WARNINGS)) {
+			this.filterWarnings= true;
+			startIndex= (Messages.MARKERS_PANEL_FILTER_WARNINGS).length;
+		}
+		if (strings.startsWith(filter.toLocaleLowerCase(), Messages.MARKERS_PANEL_FILTER_INFOS)) {
+			this.filterInfos= true;
+			startIndex= (Messages.MARKERS_PANEL_FILTER_INFOS).length;
+		}
+		this.filterValue= filter.substr(startIndex).trim();
+	}
 }
 
 export class MarkersModel {