Fix #99371. Find widget animation should be inside the editor container.

microsoft · Jun 22, 2020 · 222871e · 222871e
1 parent 9d6054c
commit 222871e
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 5 deletions.
diff --git a/src/vs/workbench/contrib/notebook/browser/contrib/find/findController.ts b/src/vs/workbench/contrib/notebook/browser/contrib/find/findController.ts
@@ -3,6 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import 'vs/css!./media/notebookFind';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IContextKeyService, IContextKey, ContextKeyExpr } from 'vs/platform/contextkey/common/contextkey';
 import { KEYBINDING_CONTEXT_NOTEBOOK_FIND_WIDGET_FOCUSED, INotebookEditor, CellFindMatch, CellEditState, INotebookEditorContribution, NOTEBOOK_EDITOR_FOCUSED } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
@@ -24,6 +25,10 @@ import { ServicesAccessor } from 'vs/platform/instantiation/common/instantiation
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
 import { getActiveNotebookEditor } from 'vs/workbench/contrib/notebook/browser/contrib/coreActions';
 
+const FIND_HIDE_TRANSITION = 'find-hide-transition';
+const FIND_SHOW_TRANSITION = 'find-show-transition';
+
+
 export class NotebookFindWidget extends SimpleFindReplaceWidget implements INotebookEditorContribution {
 	static id: string = 'workbench.notebook.find';
 	protected _findWidgetFocused: IContextKey<boolean>;
@@ -32,6 +37,8 @@ export class NotebookFindWidget extends SimpleFindReplaceWidget implements INote
 	private _currentMatch: number = -1;
 	private _allMatchesDecorations: ICellModelDecorations[] = [];
 	private _currentMatchDecorations: ICellModelDecorations[] = [];
+	private _showTimeout: number | null = null;
+	private _hideTimeout: number | null = null;
 
 	constructor(
 		private readonly _notebookEditor: INotebookEditor,
@@ -136,11 +143,6 @@ export class NotebookFindWidget extends SimpleFindReplaceWidget implements INote
 		this._notebookEditor.revealRangeInCenterIfOutsideViewportAsync(this._findMatches[cellIndex].cell, this._findMatches[cellIndex].matches[matchIndex].range);
 	}
 
-	hide() {
-		super.hide();
-		this.set([]);
-	}
-
 	protected findFirst(): void { }
 
 	protected onFocusTrackerFocus() {
@@ -243,10 +245,56 @@ export class NotebookFindWidget extends SimpleFindReplaceWidget implements INote
 		});
 	}
 
+	show(initialInput?: string): void {
+		super.show(initialInput);
+
+		if (this._showTimeout === null) {
+			if (this._hideTimeout !== null) {
+				window.clearTimeout(this._hideTimeout);
+				this._hideTimeout = null;
+				this._notebookEditor.removeClassName(FIND_HIDE_TRANSITION);
+			}
+
+			this._notebookEditor.addClassName(FIND_SHOW_TRANSITION);
+			this._showTimeout = window.setTimeout(() => {
+				this._notebookEditor.removeClassName(FIND_SHOW_TRANSITION);
+				this._showTimeout = null;
+			}, 200);
+		} else {
+			// no op
+		}
+	}
+
+	hide() {
+		super.hide();
+		this.set([]);
+
+		if (this._hideTimeout === null) {
+			if (this._showTimeout !== null) {
+				window.clearTimeout(this._showTimeout);
+				this._showTimeout = null;
+				this._notebookEditor.removeClassName(FIND_SHOW_TRANSITION);
+			}
+			this._notebookEditor.addClassName(FIND_HIDE_TRANSITION);
+			this._hideTimeout = window.setTimeout(() => {
+				this._notebookEditor.removeClassName(FIND_HIDE_TRANSITION);
+			}, 200);
+		} else {
+			// no op
+		}
+	}
+
 	clear() {
 		this._currentMatch = -1;
 		this._findMatches = [];
 	}
+
+	dispose() {
+		this._notebookEditor?.removeClassName(FIND_SHOW_TRANSITION);
+		this._notebookEditor?.removeClassName(FIND_HIDE_TRANSITION);
+		super.dispose();
+	}
+
 }
 
 registerNotebookContribution(NotebookFindWidget.id, NotebookFindWidget);

diff --git a/src/vs/workbench/contrib/notebook/browser/contrib/find/media/notebookFind.css b/src/vs/workbench/contrib/notebook/browser/contrib/find/media/notebookFind.css
@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.monaco-workbench .notebookOverlay.notebook-editor.find-hide-transition {
+	overflow-y: hidden;
+}
+
+.monaco-workbench .notebookOverlay.notebook-editor.find-show-transition {
+	overflow-y: hidden;
+}
diff --git a/src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts b/src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts
@@ -272,6 +272,21 @@ export interface INotebookEditor extends IEditor {
 	 */
 	postMessage(forRendererId: string | undefined, message: any): void;
 
+	/**
+	 * Toggle class name on the notebook editor root DOM node.
+	 */
+	toggleClassName(className: string): void;
+
+	/**
+	 * Remove class name on the notebook editor root DOM node.
+	 */
+	addClassName(className: string): void;
+
+	/**
+	 * Remove class name on the notebook editor root DOM node.
+	 */
+	removeClassName(className: string): void;
+
 	/**
 	 * Trigger the editor to scroll from scroll event programmatically
 	 */

diff --git a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts
@@ -1221,6 +1221,19 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
 		}
 	}
 
+	toggleClassName(className: string) {
+		DOM.toggleClass(this._overlayContainer, className);
+	}
+
+	addClassName(className: string) {
+		DOM.addClass(this._overlayContainer, className);
+	}
+
+	removeClassName(className: string) {
+		DOM.removeClass(this._overlayContainer, className);
+	}
+
+
 	//#endregion
 
 	//#region Editor Contributions

diff --git a/src/vs/workbench/contrib/notebook/test/testNotebookEditor.ts b/src/vs/workbench/contrib/notebook/test/testNotebookEditor.ts
@@ -52,6 +52,9 @@ export class TestNotebookEditor implements INotebookEditor {
 	constructor(
 	) { }
 
+	uri?: URI | undefined;
+	textModel?: NotebookTextModel | undefined;
+
 	hasModel(): boolean {
 		return true;
 	}
@@ -114,6 +117,18 @@ export class TestNotebookEditor implements INotebookEditor {
 		throw new Error('Method not implemented.');
 	}
 
+	toggleClassName(className: string): void {
+		throw new Error('Method not implemented.');
+	}
+
+	addClassName(className: string): void {
+		throw new Error('Method not implemented.');
+	}
+
+	removeClassName(className: string): void {
+		throw new Error('Method not implemented.');
+	}
+
 	setCellSelection(cell: CellViewModel, selection: Range): void {
 		throw new Error('Method not implemented.');
 	}