Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-02 14:31:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Extract find input checkboxes to separate file

Browse Source
This commit is contained in:
Alex Dima
2017-01-21 13:40:49 +01:00
parent 3357ae8f54
commit c7586fce1d
4 changed files with 96 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/vs/base/browser/ui/findinput/findInput.css
View File

@@ -50,18 +50,6 @@
background: #ddd;
}
.vs .monaco-findInput > .controls > .custom-checkbox.case-sensitive {
background: url('case-sensitive.svg') center center no-repeat;
}
.vs .monaco-findInput > .controls > .custom-checkbox.whole-word {
background: url('whole-word.svg') center center no-repeat;
}
.vs .monaco-findInput > .controls > .custom-checkbox.regex {
background: url('regex.svg') center center no-repeat;
}
.vs .monaco-findInput.disabled {
background-color: #E1E1E1;
}
@@ -75,22 +63,6 @@
background: #555;
}
.hc-black .monaco-findInput > .controls > .custom-checkbox.case-sensitive,
.vs-dark .monaco-findInput > .controls > .custom-checkbox.case-sensitive {
background: url('case-sensitive-dark.svg') center center no-repeat;
}
.hc-black .monaco-findInput > .controls > .custom-checkbox.whole-word,
.vs-dark .monaco-findInput > .controls > .custom-checkbox.whole-word {
background: url('whole-word-dark.svg') center center no-repeat;
}
.hc-black .monaco-findInput > .controls > .custom-checkbox.regex,
.vs-dark .monaco-findInput > .controls > .custom-checkbox.regex {
background: url('regex-dark.svg') center center no-repeat;
}
/* Highlighting */
.monaco-findInput.highlight-0 .controls {
animation: monaco-findInput-highlight-0 100ms linear 0s;

26
src/vs/base/browser/ui/findinput/findInput.ts
View File

@@ -9,12 +9,12 @@ import 'vs/css!./findInput';
import * as nls from 'vs/nls';
import * as dom from 'vs/base/browser/dom';
import { IMessage as InputBoxMessage, IInputValidator, InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox';
import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
import { Widget } from 'vs/base/browser/ui/widget';
import Event, { Emitter } from 'vs/base/common/event';
import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
import { CaseSensitiveCheckbox, WholeWordsCheckbox, RegexCheckbox } from 'vs/base/browser/ui/findinput/findInputCheckboxes';
export interface IFindInputOptions {
placeholder?: string;
@@ -27,9 +27,6 @@ export interface IFindInputOptions {
appendRegexLabel?: string;
}
const NLS_REGEX_CHECKBOX_LABEL = nls.localize('regexDescription', "Use Regular Expression");
const NLS_WHOLE_WORD_CHECKBOX_LABEL = nls.localize('wordsDescription', "Match Whole Word");
const NLS_CASE_SENSITIVE_CHECKBOX_LABEL = nls.localize('caseDescription', "Match Case");
const NLS_DEFAULT_LABEL = nls.localize('defaultLabel', "input");
export class FindInput extends Widget {
@@ -42,9 +39,9 @@ export class FindInput extends Widget {
private validation: IInputValidator;
private label: string;
private regex: Checkbox;
private wholeWords: Checkbox;
private caseSensitive: Checkbox;
private regex: RegexCheckbox;
private wholeWords: WholeWordsCheckbox;
private caseSensitive: CaseSensitiveCheckbox;
public domNode: HTMLElement;
public inputBox: InputBox;
@@ -200,9 +197,8 @@ export class FindInput extends Widget {
}
}));
this.regex = this._register(new Checkbox({
actionClassName: 'regex',
title: NLS_REGEX_CHECKBOX_LABEL + appendRegexLabel,
this.regex = this._register(new RegexCheckbox({
appendTitle: appendRegexLabel,
isChecked: false,
onChange: (viaKeyboard) => {
this._onDidOptionChange.fire(viaKeyboard);
@@ -213,9 +209,8 @@ export class FindInput extends Widget {
this.validate();
}
}));
this.wholeWords = this._register(new Checkbox({
actionClassName: 'whole-word',
title: NLS_WHOLE_WORD_CHECKBOX_LABEL + appendWholeWordsLabel,
this.wholeWords = this._register(new WholeWordsCheckbox({
appendTitle: appendWholeWordsLabel,
isChecked: false,
onChange: (viaKeyboard) => {
this._onDidOptionChange.fire(viaKeyboard);
@@ -226,9 +221,8 @@ export class FindInput extends Widget {
this.validate();
}
}));
this.caseSensitive = this._register(new Checkbox({
actionClassName: 'case-sensitive',
title: NLS_CASE_SENSITIVE_CHECKBOX_LABEL + appendCaseSensitiveLabel,
this.caseSensitive = this._register(new CaseSensitiveCheckbox({
appendTitle: appendCaseSensitiveLabel,
isChecked: false,
onChange: (viaKeyboard) => {
this._onDidOptionChange.fire(viaKeyboard);

28
src/vs/base/browser/ui/findinput/findInputCheckboxes.css Normal file
View File

@@ -0,0 +1,28 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.vs .monaco-case-sensitive {
background: url('case-sensitive.svg') center center no-repeat;
}
.hc-black .monaco-case-sensitive,
.vs-dark .monaco-case-sensitive {
background: url('case-sensitive-dark.svg') center center no-repeat;
}
.vs .monaco-whole-word {
background: url('whole-word.svg') center center no-repeat;
}
.hc-black .monaco-whole-word,
.vs-dark .monaco-whole-word {
background: url('whole-word-dark.svg') center center no-repeat;
}
.vs .monaco-regex {
background: url('regex.svg') center center no-repeat;
}
.hc-black .monaco-regex,
.vs-dark .monaco-regex {
background: url('regex-dark.svg') center center no-repeat;
}

58
src/vs/base/browser/ui/findinput/findInputCheckboxes.ts Normal file
View File

@@ -0,0 +1,58 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import 'vs/css!./findInputCheckboxes';
import * as nls from 'vs/nls';
import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox';
import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
export interface IFindInputCheckboxOpts {
appendTitle: string;
isChecked: boolean;
onChange: (viaKeyboard: boolean) => void;
onKeyDown?: (e: IKeyboardEvent) => void;
}
const NLS_CASE_SENSITIVE_CHECKBOX_LABEL = nls.localize('caseDescription', "Match Case");
const NLS_WHOLE_WORD_CHECKBOX_LABEL = nls.localize('wordsDescription', "Match Whole Word");
const NLS_REGEX_CHECKBOX_LABEL = nls.localize('regexDescription', "Use Regular Expression");
export class CaseSensitiveCheckbox extends Checkbox {
constructor(opts: IFindInputCheckboxOpts) {
super({
actionClassName: 'monaco-case-sensitive',
title: NLS_CASE_SENSITIVE_CHECKBOX_LABEL + opts.appendTitle,
isChecked: opts.isChecked,
onChange: opts.onChange,
onKeyDown: opts.onKeyDown
});
}
}
export class WholeWordsCheckbox extends Checkbox {
constructor(opts: IFindInputCheckboxOpts) {
super({
actionClassName: 'monaco-whole-word',
title: NLS_WHOLE_WORD_CHECKBOX_LABEL + opts.appendTitle,
isChecked: opts.isChecked,
onChange: opts.onChange,
onKeyDown: opts.onKeyDown
});
}
}
export class RegexCheckbox extends Checkbox {
constructor(opts: IFindInputCheckboxOpts) {
super({
actionClassName: 'monaco-regex',
title: NLS_REGEX_CHECKBOX_LABEL + opts.appendTitle,
isChecked: opts.isChecked,
onChange: opts.onChange,
onKeyDown: opts.onKeyDown
});
}
}