This commit is contained in:
Sandeep Somavarapu 2016-08-05 11:36:09 +02:00
parent fe974d08cb
commit 3e3dd8cec1
2 changed files with 40 additions and 18 deletions

View file

@ -25,7 +25,8 @@
cursor: pointer;
}
.search-viewlet .search-widget .input-box {
.search-viewlet .search-widget .search-container,
.search-viewlet .search-widget .replace-container {
margin-left: 17px;
}
@ -38,14 +39,30 @@
vertical-align: middle;
}
.search-viewlet .search-widget .replace-box {
.search-viewlet .search-widget .replace-container {
margin-top: 6px;
position: relative;
}
.search-viewlet .search-widget .replace-box.disabled {
.search-viewlet .search-widget .replace-container.disabled {
display: none;
}
.search-viewlet .search-widget .replace-container > * {
display: inline-block;
}
.search-viewlet .search-widget .replace-container .monaco-action-bar {
position: absolute;
margin-left: 3px;
}
.search-viewlet .search-widget .replace-container .monaco-action-bar .action-item .icon {
background-repeat: no-repeat;
width: 20px;
height: 25px;
}
.search-viewlet .query-clear {
width: 20px;
height: 20px;
@ -63,7 +80,7 @@
.search-viewlet .query-details .more {
position: absolute;
margin-right: 0.5em;
margin-right: 0.3em;
right: 0;
cursor: pointer;
width: 16px;
@ -193,7 +210,7 @@
}
.search-viewlet .action-replace-all {
background-image: url('replace-all.svg');
background: url('replace-all.svg') center center no-repeat;
}
.hc-black .search-viewlet .action-replace,
@ -203,7 +220,7 @@
.hc-black .search-viewlet .action-replace-all,
.vs-dark .search-viewlet .action-replace-all {
background-image: url('replace-all-inverse.svg');
background: url('replace-all-inverse.svg') center center no-repeat;
}
.search-viewlet .label {

View file

@ -9,6 +9,7 @@ import dom = require('vs/base/browser/dom');
import { TPromise } from 'vs/base/common/winjs.base';
import { Widget } from 'vs/base/browser/ui/widget';
import { Action } from 'vs/base/common/actions';
import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
import { FindInput, IFindInputOptions } from 'vs/base/browser/ui/findinput/findInput';
import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
import { Button } from 'vs/base/browser/ui/button/button';
@ -74,10 +75,11 @@ export class SearchWidget extends Widget {
public searchInput: FindInput;
private replaceInput: InputBox;
private replaceInputContainer: HTMLElement;
private replaceContainer: HTMLElement;
private toggleReplaceButton: Button;
private replaceAllAction: ReplaceAllAction;
private replaceActive: IKeybindingContextKey<boolean>;
private replaceActionBar: ActionBar;
private _onSearchSubmit = this._register(new Emitter<boolean>());
public onSearchSubmit: Event<boolean> = this._onSearchSubmit.event;
@ -138,7 +140,7 @@ export class SearchWidget extends Widget {
}
public isReplaceShown(): boolean {
return !dom.hasClass(this.replaceInputContainer, 'disabled');
return !dom.hasClass(this.replaceContainer, 'disabled');
}
public getReplaceValue():string {
@ -173,7 +175,7 @@ export class SearchWidget extends Widget {
placeholder: nls.localize('search.placeHolder', "Search")
};
let searchInputContainer= dom.append(parent, dom.emmet('.search-box.input-box'));
let searchInputContainer= dom.append(parent, dom.emmet('.search-container.input-box'));
this.searchInput = this._register(new FindInput(searchInputContainer, this.contextViewService, inputOptions));
this.searchInput.onKeyUp((keyboardEvent: IKeyboardEvent) => this.onSearchInputKeyUp(keyboardEvent));
this.searchInput.onKeyDown((keyboardEvent: IKeyboardEvent) => this.onSearchInputKeyDown(keyboardEvent));
@ -184,19 +186,22 @@ export class SearchWidget extends Widget {
}
private renderReplaceInput(parent: HTMLElement): void {
this.replaceAllAction = ReplaceAllAction.INSTANCE;
this.replaceAllAction.searchWidget= this;
this.replaceAllAction.label= SearchWidget.REPLACE_ALL_DISABLED_LABEL;
this.replaceInputContainer= dom.append(parent, dom.emmet('.replace-box.input-box.disabled'));
this.replaceInput = this._register(new InputBox(this.replaceInputContainer, this.contextViewService, {
this.replaceContainer = dom.append(parent, dom.emmet('.replace-container.disabled'));
let replaceBox= dom.append(this.replaceContainer, dom.emmet('.input-box'));
this.replaceInput = this._register(new InputBox(replaceBox, this.contextViewService, {
ariaLabel: nls.localize('label.Replace', 'Replace: Type replace term and press Enter to preview or Escape to cancel'),
placeholder: nls.localize('search.replace.placeHolder', "Replace"),
actions: [this.replaceAllAction]
placeholder: nls.localize('search.replace.placeHolder', "Replace")
}));
this.onkeydown(this.replaceInput.inputElement, (keyboardEvent) => this.onReplaceInputKeyDown(keyboardEvent));
this.onkeyup(this.replaceInput.inputElement, (keyboardEvent) => this.onReplaceInputKeyUp(keyboardEvent));
this.replaceInput.onDidChange(() => this._onReplaceValueChanged.fire());
this.searchInput.inputBox.onDidChange(() => this.onSearchInputChanged());
this.replaceAllAction = ReplaceAllAction.INSTANCE;
this.replaceAllAction.searchWidget= this;
this.replaceAllAction.label = SearchWidget.REPLACE_ALL_DISABLED_LABEL;
this.replaceActionBar = this._register(new ActionBar(this.replaceContainer));
this.replaceActionBar.push([this.replaceAllAction], { icon: true, label: false });
}
triggerReplaceAll(): TPromise<any> {
@ -205,7 +210,7 @@ export class SearchWidget extends Widget {
}
private onToggleReplaceButton():void {
dom.toggleClass(this.replaceInputContainer, 'disabled');
dom.toggleClass(this.replaceContainer, 'disabled');
dom.toggleClass(this.toggleReplaceButton.getElement(), 'collapse');
dom.toggleClass(this.toggleReplaceButton.getElement(), 'expand');
this.updateReplaceActiveState();
@ -325,7 +330,7 @@ export class SearchWidget extends Widget {
public dispose(): void {
this.setReplaceAllActionState(false);
this.replaceAllAction.searchWidget= null;
this.replaceActionBar = null;
super.dispose();
}
}