From 3cca023052b8c559aab3c5e214ab993f09c9f029 Mon Sep 17 00:00:00 2001 From: Sandeep Somavarapu Date: Mon, 6 Jun 2016 12:09:39 +0200 Subject: [PATCH] #6679 Support icon inside input box and provide filter icon for filter box --- src/vs/base/browser/ui/inputbox/inputBox.css | 11 +++++ src/vs/base/browser/ui/inputbox/inputBox.ts | 4 ++ src/vs/workbench/browser/media/workbench.css | 8 +++- .../parts/markers/browser/markersPanel.ts | 1 + .../markers/browser/markersPanelActions.ts | 41 ++++--------------- .../parts/markers/browser/media/markers.css | 16 +++++--- .../parts/markers/common/markersModel.ts | 27 +++++++++++- 7 files changed, 66 insertions(+), 42 deletions(-) diff --git a/src/vs/base/browser/ui/inputbox/inputBox.css b/src/vs/base/browser/ui/inputbox/inputBox.css index 4edda336bb28a..a15a51214e83d 100644 --- 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 index 5013288e7da5a..e06e86def7e31 100644 --- 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 = 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 index 0b9f603c85a65..468d2dc269d33 100644 --- 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 index d6ce4484250bd..46f056d896412 100644 --- 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 { + 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 index 192f39b559185..f45350963e4a4 100644 --- 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; - } } \ No newline at end of file diff --git a/src/vs/workbench/parts/markers/browser/media/markers.css b/src/vs/workbench/parts/markers/browser/media/markers.css index 84d604afcc834..3b98c20cb1e88 100644 --- 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 index cdde60243acbb..1d834ab4de6b4 100644 --- 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 {