Skip to content

Commit 62a0b1c

Browse files
sandy081aeschli
sandy081
authored and
aeschli
committed
#6679 Support icon inside input box and provide filter icon for filter box
1 parent 3fc565d commit 62a0b1c

File tree

7 files changed

+66
-42
lines changed

7 files changed

+66
-42
lines changed

‎src/vs/base/browser/ui/inputbox/inputBox.css

+11
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,17 @@
3535
position: relative;
3636
width: 100%;
3737
height: 100%;
38+
display: flex;
39+
justify-content: flex-start;
40+
}
41+
42+
.vs-dark .monaco-inputbox > .wrapper {
43+
background-color: var(--input-bgcolor);
44+
}
45+
46+
.monaco-inputbox > .wrapper .icon {
47+
width: 16px;
48+
height: 22px;
3849
}
3950

4051
.monaco-inputbox > .wrapper > .input {

‎src/vs/base/browser/ui/inputbox/inputBox.ts

+4
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export interface IInputOptions {
2727
validationOptions?: IInputValidationOptions;
2828
flexibleHeight?: boolean;
2929
actions?: IAction[];
30+
iconClass?: string;
3031
}
3132

3233
export interface IInputValidator {
@@ -96,6 +97,9 @@ export class InputBox extends Widget {
9697
let tagName = this.options.flexibleHeight ? 'textarea' : 'input';
9798

9899
let wrapper = dom.append(this.element, $('.wrapper'));
100+
if (this.options.iconClass) {
101+
dom.append(wrapper, $('span.icon.' + this.options.iconClass));
102+
}
99103
this.input = <HTMLInputElement>dom.append(wrapper, $(tagName + '.input'));
100104
this.input.setAttribute('autocorrect', 'off');
101105
this.input.setAttribute('autocapitalize', 'off');

‎src/vs/workbench/browser/media/workbench.css

+6-2
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,11 @@
4646

4747
/* ---------- Dark Theme ---------- */
4848

49-
.vs-dark .monaco-workbench { background-color: #252526; color: #CCC; }
49+
.vs-dark .monaco-workbench {
50+
--input-bgcolor: #3C3C3C;
51+
background-color: #252526;
52+
color: #CCC;
53+
}
5054

5155
.vs-dark .monaco-workbench .monaco-scrollable-element .shadow.top { box-shadow: #000 0 6px 6px -6px inset; }
5256
.vs-dark .monaco-workbench .monaco-scrollable-element .shadow.left { box-shadow: #000 6px 0 6px -6px inset; }
@@ -58,7 +62,7 @@
5862

5963
.vs-dark .monaco-workbench input,
6064
.vs-dark .monaco-workbench textarea {
61-
background-color: #3C3C3C;
65+
background-color: var(--input-bgcolor);
6266
}
6367

6468
.vs-dark .monaco-workbench input:disabled {

‎src/vs/workbench/parts/markers/browser/markersPanel.ts

+1
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ export class MarkersPanel extends Panel {
9999
}
100100

101101
public refreshPanel(updateTitleArea: boolean= false):TPromise<any> {
102+
this.collapseAllAction.enabled= this.markersModel.hasFilteredResources();
102103
this.refreshAutoExpanded();
103104
if (updateTitleArea) {
104105
this.updateTitleArea();

‎src/vs/workbench/parts/markers/browser/markersPanelActions.ts

+7-34
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55

66
import * as DOM from 'vs/base/browser/dom';
77
import * as lifecycle from 'vs/base/common/lifecycle';
8-
import * as strings from 'vs/base/common/strings';
98
import { IAction, Action } from 'vs/base/common/actions';
109
import { BaseActionItem } from 'vs/base/browser/ui/actionbar/actionbar';
1110
import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
@@ -36,17 +35,17 @@ export class FilterInputBoxActionItem extends BaseActionItem {
3635

3736
public render(container: HTMLElement): void {
3837
DOM.addClass(container, 'markers-panel-action-filter');
39-
var filterInputBoxContainer = DOM.append(container, DOM.emmet('.input-box-container'));
40-
var filterInputBox = new InputBox(filterInputBoxContainer, this.contextViewService, {
41-
placeholder: Messages.MARKERS_PANEL_FILTER_PLACEHOLDER
38+
var filterInputBox = new InputBox(container, this.contextViewService, {
39+
placeholder: Messages.MARKERS_PANEL_FILTER_PLACEHOLDER,
40+
iconClass: 'filterIcon'
4241
});
43-
filterInputBox.value= this.markersPanel.markersModel.filterOptions.completeValue;
42+
filterInputBox.value= this.markersPanel.markersModel.filterOptions.filter;
4443
this.toDispose.push(filterInputBox.onDidChange((filter: string) => {
45-
this.markersPanel.markersModel.update(this.prepareFilterOptions(filter));
44+
this.markersPanel.markersModel.update(new FilterOptions(filter));
4645
this.markersPanel.refreshPanel();
4746
}));
48-
this.toDispose.push(DOM.addStandardDisposableListener(filterInputBoxContainer, 'keydown', this.handleKeyboardEvent));
49-
this.toDispose.push(DOM.addStandardDisposableListener(filterInputBoxContainer, 'keyup', this.handleKeyboardEvent));
47+
this.toDispose.push(DOM.addStandardDisposableListener(container, 'keydown', this.handleKeyboardEvent));
48+
this.toDispose.push(DOM.addStandardDisposableListener(container, 'keyup', this.handleKeyboardEvent));
5049
}
5150

5251
public dispose(): void {
@@ -64,30 +63,4 @@ export class FilterInputBoxActionItem extends BaseActionItem {
6463
break;
6564
}
6665
}
67-
68-
private prepareFilterOptions(filter:string): FilterOptions {
69-
let filterOptions:FilterOptions= new FilterOptions();
70-
filterOptions.completeValue= filter;
71-
72-
filter= strings.trim(filter);
73-
if (!filter) {
74-
return filterOptions;
75-
}
76-
77-
let startIndex= 0;
78-
if (strings.startsWith(filter.toLocaleLowerCase(), Messages.MARKERS_PANEL_FILTER_ERRORS)) {
79-
filterOptions.filterErrors= true;
80-
startIndex= (Messages.MARKERS_PANEL_FILTER_ERRORS).length;
81-
}
82-
if (strings.startsWith(filter.toLocaleLowerCase(), Messages.MARKERS_PANEL_FILTER_WARNINGS)) {
83-
filterOptions.filterWarnings= true;
84-
startIndex= (Messages.MARKERS_PANEL_FILTER_WARNINGS).length;
85-
}
86-
if (strings.startsWith(filter.toLocaleLowerCase(), Messages.MARKERS_PANEL_FILTER_INFOS)) {
87-
filterOptions.filterInfos= true;
88-
startIndex= (Messages.MARKERS_PANEL_FILTER_INFOS).length;
89-
}
90-
filterOptions.filterValue= filter.substr(startIndex).trim();
91-
return filterOptions;
92-
}
9366
}

‎src/vs/workbench/parts/markers/browser/media/markers.css

+11-5
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,20 @@
66
.monaco-action-bar .action-item.markers-panel-action-filter {
77
width: 400px;
88
cursor: default;
9-
margin: 5px 10px 0 0;
9+
margin: 4px 10px 0 0;
1010
}
1111

12-
.monaco-action-bar .action-item.markers-panel-action-filter .input-box-container {
13-
background: #ddd;
12+
.monaco-action-bar .action-item.markers-panel-action-filter .monaco-inputbox {
13+
border: 1px solid #ddd;
1414
}
1515

16-
.vs-dark .monaco-action-bar .action-item.markers-panel-action-filter .input-box-container {
17-
background: none;
16+
.vs-dark .monaco-action-bar .action-item.markers-panel-action-filter .monaco-inputbox {
17+
border: none;
18+
}
19+
20+
.monaco-action-bar .action-item.markers-panel-action-filter .filterIcon {
21+
margin: 2px 0 0 4px;
22+
background: url('filter.svg') center center no-repeat;
1823
}
1924

2025
.markers-panel .markers-panel-container {
@@ -32,6 +37,7 @@
3237

3338
.markers-panel .markers-panel-container .tree-container {
3439
height: 100%;
40+
margin-top: 2px;
3541
}
3642

3743
.markers-panel .markers-panel-container .tree-container .markers-panel-tree-entry {

‎src/vs/workbench/parts/markers/common/markersModel.ts

+26-1
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,36 @@ export class FilterOptions {
3333
public filterWarnings: boolean= false;
3434
public filterInfos: boolean= false;
3535
public filterValue: string= '';
36-
public completeValue: string= '';
36+
public filter: string= '';
37+
38+
constructor(filter:string='') {
39+
if (filter) {
40+
this.parse(filter);
41+
}
42+
}
3743

3844
public hasActiveFilters():boolean {
3945
return this.filterErrors || this.filterWarnings || this.filterInfos || !!this.filterValue;
4046
}
47+
48+
private parse(filter: string) {
49+
this.filter= filter;
50+
filter= strings.trim(filter);
51+
let startIndex= 0;
52+
if (strings.startsWith(filter.toLocaleLowerCase(), Messages.MARKERS_PANEL_FILTER_ERRORS)) {
53+
this.filterErrors= true;
54+
startIndex= (Messages.MARKERS_PANEL_FILTER_ERRORS).length;
55+
}
56+
if (strings.startsWith(filter.toLocaleLowerCase(), Messages.MARKERS_PANEL_FILTER_WARNINGS)) {
57+
this.filterWarnings= true;
58+
startIndex= (Messages.MARKERS_PANEL_FILTER_WARNINGS).length;
59+
}
60+
if (strings.startsWith(filter.toLocaleLowerCase(), Messages.MARKERS_PANEL_FILTER_INFOS)) {
61+
this.filterInfos= true;
62+
startIndex= (Messages.MARKERS_PANEL_FILTER_INFOS).length;
63+
}
64+
this.filterValue= filter.substr(startIndex).trim();
65+
}
4166
}
4267

4368
export class MarkersModel {

0 commit comments

Comments
 (0)