Skip to content

Multiple line support in Find Widget #79329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Aug 21, 2019
Merged

Multiple line support in Find Widget #79329

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
5470be1
flexible height input boxes and fitler out arrow keys
rebornix Aug 15, 2019
60748bc
Transion for find widget fade in fade out
rebornix Aug 16, 2019
e1d5f1a
tab sequence for preserve case button
rebornix Aug 16, 2019
88c58b2
flexible height of find widget and align options always at top
rebornix Aug 16, 2019
c6a7d84
Focus toggle find selection button
rebornix Aug 16, 2019
ab62d23
toggle selection find box should align with other checkbox
rebornix Aug 16, 2019
833507b
update textarea width when find widget or editor resizes
rebornix Aug 16, 2019
1990b5a
Max height and hidden vertical scrollbar
rebornix Aug 16, 2019
45dd218
Update extra space on top of editor when find widget state changes
rebornix Aug 16, 2019
67145b2
update replace input box size when resizing and display preserve case…
rebornix Aug 20, 2019
3d4e72b
remove commented code
rebornix Aug 20, 2019
3b3490c
Sort imports
rebornix Aug 20, 2019
5bfea50
Move more inputbox keybindings to Commands
rebornix Aug 20, 2019
00ae1d5
Merge remote-tracking branch 'upstream/master' into rebornix/multiLin…
rebornix Aug 20, 2019
e563f98
animation for single line and no luck for multiple line
rebornix Aug 21, 2019
4de4433
:lipstick:
rebornix Aug 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/vs/base/browser/ui/findinput/findInput.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export interface IFindInputOptions extends IFindInputStyles {
readonly validation?: IInputValidator;
readonly label: string;
readonly flexibleHeight?: boolean;
readonly flexibleMaxHeight?: number;

readonly appendCaseSensitiveLabel?: string;
readonly appendWholeWordsLabel?: string;
Expand Down Expand Up @@ -119,6 +120,7 @@ export class FindInput extends Widget {
const appendRegexLabel = options.appendRegexLabel || '';
const history = options.history || [];
const flexibleHeight = !!options.flexibleHeight;
const flexibleMaxHeight = options.flexibleMaxHeight;

this.domNode = document.createElement('div');
dom.addClass(this.domNode, 'monaco-findInput');
Expand All @@ -142,7 +144,8 @@ export class FindInput extends Widget {
inputValidationErrorForeground: this.inputValidationErrorForeground,
inputValidationErrorBorder: this.inputValidationErrorBorder,
history,
flexibleHeight
flexibleHeight,
flexibleMaxHeight
}));

this.regex = this._register(new RegexCheckbox({
Expand Down
42 changes: 31 additions & 11 deletions src/vs/editor/contrib/find/findWidget.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,11 @@
.monaco-editor .find-widget {
position: absolute;
z-index: 10;
top: -44px; /* find input height + shadow (10px) */
height: 34px; /* find input height */
top: unset;
bottom: 10px;
overflow: hidden;
line-height: 19px;
transition: top 200ms linear;
transition: top bottom 200ms linear;
padding: 0 4px;
}

Expand All @@ -45,19 +45,15 @@
}

/* Find widget when replace is toggled on */
.monaco-editor .find-widget.replaceToggled {
top: -74px; /* find input height + replace input height + shadow (10px) */
height: 64px; /* find input height + replace input height */
}
.monaco-editor .find-widget.replaceToggled > .replace-part {
display: flex;
display: -webkit-flex;
align-items: center;
}

.monaco-editor .find-widget.visible,
.monaco-editor .find-widget.replaceToggled.visible {
top: 0;
bottom: unset;
}

.monaco-editor .find-widget .monaco-inputbox .input {
Expand All @@ -76,12 +72,11 @@
font-size: 12px;
display: flex;
display: -webkit-flex;
align-items: center;
}

.monaco-editor .find-widget > .find-part .monaco-inputbox,
.monaco-editor .find-widget > .replace-part .monaco-inputbox {
height: 25px;
min-height: 25px;
}

.monaco-editor .find-widget > .find-part .monaco-inputbox > .wrapper > .input {
Expand All @@ -94,18 +89,43 @@
}

.monaco-editor .find-widget > .find-part .monaco-inputbox > .wrapper > .input,
.monaco-editor .find-widget > .replace-part .monaco-inputbox > .wrapper > .input {
.monaco-editor .find-widget > .find-part .monaco-inputbox > .wrapper > .mirror,
.monaco-editor .find-widget > .replace-part .monaco-inputbox > .wrapper > .input,
.monaco-editor .find-widget > .replace-part .monaco-inputbox > .wrapper > .mirror {
padding-top: 2px;
padding-bottom: 2px;
}

.monaco-editor .find-widget > .find-part .find-actions {
height: 25px;
display: flex;
align-items: center;
}

.monaco-editor .find-widget > .replace-part .replace-actions {
height: 25px;
display: flex;
align-items: center;
}

.monaco-editor .find-widget .monaco-findInput {
vertical-align: middle;
display: flex;
display: -webkit-flex;
flex:1;
}

.monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element {
/* Make sure textarea inherits the width correctly */
width: 100%;
}

.monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element .scrollbar.vertical,
.monaco-editor .find-widget .replace-input .monaco-scrollable-element .scrollbar.vertical {
/* Hide vertical scrollbar */
opacity: 0;
}

.monaco-editor .find-widget .matchesCount {
display: flex;
display: -webkit-flex;
Expand Down
Loading