mirror of
https://github.com/Microsoft/vscode
synced 2024-09-21 03:30:00 +00:00
#6679 Support icon inside input box and provide filter icon for filter box
This commit is contained in:
parent
2d33d752cd
commit
3cca023052
|
@ -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 {
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue