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 28, 2022 · 4b04548 · 4b04548
1 parent 003aeb9
commit 4b04548
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 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;
 
@@ -71,7 +75,8 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
     get onShow(): monaco.IEvent<void> { return this.controller.onShow; }
     get onHide(): monaco.IEvent<void> { return this.controller.onHide; }
 
-    constructor() {
+    @postConstruct()
+    protected init(): void {
         this.initContainer();
         this.initController();
         this.quickAccess = new QuickAccessController(this, StandaloneServices.get(IInstantiationService));
@@ -149,15 +154,9 @@ 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';
+        this.shell.mainPanel.node.appendChild(this.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
  */