Skip to content

Commit f286806

Browse files
joaomorenojoaomoreno
committed
Merge commit 'refs/pull/72171/head' of github.com:microsoft/vscode into pr/72171
2 parents 2a829f9 + a9a0379 commit f286806

2 files changed

Lines changed: 56 additions & 4 deletions

File tree

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ export class InputBox extends Widget {
9595
private validation?: IInputValidator;
9696
private state: 'idle' | 'open' | 'closed' = 'idle';
9797
private cachedHeight: number | null;
98+
private cachedScrollTop: number | null;
9899

99100
private inputBackground?: Color;
100101
private inputForeground?: Color;
@@ -116,6 +117,9 @@ export class InputBox extends Widget {
116117
private _onDidHeightChange = this._register(new Emitter<number>());
117118
public readonly onDidHeightChange: Event<number> = this._onDidHeightChange.event;
118119

120+
private _onDidScrollTopChange = this._register(new Emitter<number>());
121+
public readonly onDidScrollTopChange: Event<number> = this._onDidScrollTopChange.event;
122+
119123
constructor(container: HTMLElement, contextViewProvider: IContextViewProvider | undefined, options?: IInputOptions) {
120124
super();
121125

@@ -177,6 +181,7 @@ export class InputBox extends Widget {
177181
this.oninput(this.input, () => this.onValueChange());
178182
this.onblur(this.input, () => this.onBlur());
179183
this.onfocus(this.input, () => this.onFocus());
184+
this.onkeydown(this.input, () => this.checkScrollTop());
180185

181186
// Add placeholder shim for IE because IE decides to hide the placeholder on focus (we dont want that!)
182187
if (this.placeholder && Bal.isIE) {
@@ -211,6 +216,14 @@ export class InputBox extends Widget {
211216
this._showMessage();
212217
}
213218

219+
private checkScrollTop(): void {
220+
const scrollTop = this.element.scrollTop;
221+
if (scrollTop !== this.cachedScrollTop) {
222+
this.cachedScrollTop = scrollTop;
223+
this._onDidScrollTopChange.fire(this.cachedScrollTop);
224+
}
225+
}
226+
214227
public setPlaceHolder(placeHolder: string): void {
215228
if (this.input) {
216229
this.input.setAttribute('placeholder', placeHolder);
@@ -301,6 +314,10 @@ export class InputBox extends Widget {
301314
}
302315
}
303316

317+
public get scrollTop(): number {
318+
return this.cachedScrollTop === null ? this.element.scrollTop : this.cachedScrollTop;
319+
}
320+
304321
public showMessage(message: IMessage, force?: boolean): void {
305322
this.message = message;
306323

@@ -516,6 +533,12 @@ export class InputBox extends Widget {
516533
if (previousHeight !== this.cachedHeight) {
517534
this.input.style.height = this.cachedHeight + 'px';
518535
this._onDidHeightChange.fire(this.cachedHeight);
536+
537+
if (previousHeight) {
538+
const scrollTop = this.cachedHeight - previousHeight + this.scrollTop;
539+
this.cachedScrollTop = scrollTop;
540+
this._onDidScrollTopChange.fire(this.cachedScrollTop);
541+
}
519542
}
520543
}
521544

‎src/vs/workbench/contrib/scm/browser/scmViewlet.ts‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ import { IExtensionService } from 'vs/workbench/services/extensions/common/exten
4949
import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace';
5050
import { IViewsRegistry, IViewDescriptor, Extensions } from 'vs/workbench/common/views';
5151
import { Registry } from 'vs/platform/registry/common/platform';
52+
import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
53+
import { ScrollbarVisibility } from 'vs/base/common/scrollable';
5254

5355
export interface ISpliceEvent<T> {
5456
index: number;
@@ -711,6 +713,7 @@ export class RepositoryPanel extends ViewletPanel {
711713
private cachedScrollTop: number | undefined = undefined;
712714
private inputBoxContainer: HTMLElement;
713715
private inputBox: InputBox;
716+
private scrollableElement: ScrollableElement;
714717
private listContainer: HTMLElement;
715718
private list: List<ISCMResourceGroup | ISCMResource>;
716719
private listLabels: ResourceLabels;
@@ -804,6 +807,31 @@ export class RepositoryPanel extends ViewletPanel {
804807

805808
this._register(this.inputBox.onDidChange(triggerValidation, null));
806809

810+
this.scrollableElement = new ScrollableElement(this.inputBox.element, {
811+
vertical: ScrollbarVisibility.Visible
812+
});
813+
814+
this.disposables.push(this.scrollableElement);
815+
816+
this.scrollableElement.onScroll((e) => {
817+
this.scrollInput(e.scrollTop);
818+
});
819+
820+
append(this.inputBoxContainer, this.scrollableElement.getDomNode());
821+
822+
const updateScrollDimensions = () => {
823+
const scrollHeight = this.inputBox.height;
824+
const height = scrollHeight > 134 ? 134 : scrollHeight;
825+
const scrollTop = this.inputBox.scrollTop;
826+
827+
this.scrollableElement.setScrollDimensions({ scrollHeight: scrollHeight, height: height });
828+
this.scrollableElement.setScrollPosition({ scrollTop: scrollTop });
829+
};
830+
831+
this.inputBox.element.style.maxHeight = '134px';
832+
this.inputBox.onDidHeightChange(updateScrollDimensions, null, this.disposables);
833+
this.inputBox.onDidScrollTopChange(updateScrollDimensions, null, this.disposables);
834+
807835
const onKeyUp = domEvent(this.inputBox.inputElement, 'keyup');
808836
const onMouseUp = domEvent(this.inputBox.inputElement, 'mouseup');
809837
this._register(Event.any<any>(onKeyUp, onMouseUp)(triggerValidation, null));
@@ -871,6 +899,10 @@ export class RepositoryPanel extends ViewletPanel {
871899
this.onDidChangeBodyVisibility(visible => this.inputBox.setEnabled(visible));
872900
}
873901

902+
private scrollInput(scrollTop: number): void {
903+
this.inputBox.element.scrollTop = scrollTop;
904+
}
905+
874906
private onDidChangeVisibility(visible: boolean): void {
875907
if (visible) {
876908
const listSplicer = new ResourceGroupSplicer(this.repository.provider.groups, this.list);
@@ -892,15 +924,12 @@ export class RepositoryPanel extends ViewletPanel {
892924
removeClass(this.inputBoxContainer, 'hidden');
893925
this.inputBox.layout();
894926

895-
const editorHeight = this.inputBox.height;
927+
const editorHeight = this.inputBox.height > 134 ? 134 : this.inputBox.height;
896928
const listHeight = height - (editorHeight + 12 /* margin */);
897929
this.listContainer.style.height = `${listHeight}px`;
898930
this.list.layout(listHeight, width);
899-
900-
toggleClass(this.inputBoxContainer, 'scroll', editorHeight >= 134);
901931
} else {
902932
addClass(this.inputBoxContainer, 'hidden');
903-
removeClass(this.inputBoxContainer, 'scroll');
904933

905934
this.listContainer.style.height = `${height}px`;
906935
this.list.layout(height, width);

0 commit comments

Comments
 (0)