monaco: adjust where the monaco menu appears

The commit adjusts the monaco menu (quick-input) to appear after the main-menu and not overlay it. Signed-off-by: vince-fugnitto <[email protected]>
eclipse-theia · Mar 24, 2022 · 71ab91c · 71ab91c
1 parent 4ade592
commit 71ab91c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/packages/monaco/src/browser/monaco-quick-input-service.ts b/packages/monaco/src/browser/monaco-quick-input-service.ts
@@ -15,11 +15,12 @@
 // *****************************************************************************
 
 import {
+    ApplicationShell,
     InputBox, InputOptions, KeybindingRegistry, PickOptions,
     QuickInputButton, QuickInputHideReason, QuickInputService, QuickPick, QuickPickItem,
     QuickPickItemButtonEvent, QuickPickItemHighlights, QuickPickOptions, QuickPickSeparator
 } from '@theia/core/lib/browser';
-import { injectable, inject } from '@theia/core/shared/inversify';
+import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
 import {
     IInputBox, IInputOptions, IKeyMods, IPickOptions, IQuickInput, IQuickInputButton,
     IQuickInputService, IQuickNavigateConfiguration, IQuickPick, IQuickPickItem, IQuickPickItemButtonEvent, IQuickPickSeparator, QuickPickInput
@@ -61,6 +62,9 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
     controller: QuickInputController;
     quickAccess: IQuickAccessController;
 
+    @inject(ApplicationShell)
+    protected readonly shell: ApplicationShell;
+
     @inject(VSCodeContextKeyService)
     protected readonly contextKeyService: VSCodeContextKeyService;
 
@@ -77,6 +81,11 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
         this.quickAccess = new QuickAccessController(this, StandaloneServices.get(IInstantiationService));
     }
 
+    @postConstruct()
+    protected init(): void {
+        this.shell.mainPanel.node.appendChild(this.container);
+    }
+
     setContextKey(key: string | undefined): void {
         if (key) {
             this.contextKeyService.createKey<string>(key, undefined);
@@ -149,15 +158,8 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
     }
 
     private initContainer(): void {
-        const overlayWidgets = document.createElement('div');
-        overlayWidgets.classList.add('quick-input-overlay');
-        document.body.appendChild(overlayWidgets);
-        const container = this.container = document.createElement('quick-input-container');
-        container.style.position = 'absolute';
-        container.style.top = '0px';
-        container.style.right = '50%';
-        container.style.zIndex = '1000000';
-        overlayWidgets.appendChild(container);
+        const container = this.container = document.createElement('div');
+        container.id = 'quick-input-container';
     }
 
     private initController(): void {

diff --git a/packages/monaco/src/browser/style/index.css b/packages/monaco/src/browser/style/index.css
@@ -4,6 +4,12 @@
   font-size: inherit !important;
 }
 
+#quick-input-container {
+  position: fixed;
+  right: 50%;
+  z-index: 1000000;
+}
+
 /*
  * set z-index to 0, so tabs are not above overlay widgets
  */