From f8a53d2d137cb7574661b91c761b2cf6d36acd06 Mon Sep 17 00:00:00 2001 From: FernandoAscencio Date: Tue, 24 Jan 2023 10:45:31 -0500 Subject: [PATCH] style: quick input widget size fix This commit implements quick-input-widget size change with respect to app size, as well as handling text overflow resulting from this. Signed-off-by: FernandoAscencio --- .../src/browser/monaco-quick-input-service.ts | 13 +++++++++++- packages/monaco/src/browser/style/index.css | 20 ------------------- 2 files changed, 12 insertions(+), 21 deletions(-) diff --git a/packages/monaco/src/browser/monaco-quick-input-service.ts b/packages/monaco/src/browser/monaco-quick-input-service.ts index 404da14a02c3d..9709afbc15ac6 100644 --- a/packages/monaco/src/browser/monaco-quick-input-service.ts +++ b/packages/monaco/src/browser/monaco-quick-input-service.ts @@ -95,6 +95,7 @@ export class MonacoQuickInputImplementation implements IQuickInputService { this.themeService.initialized.then(() => this.controller.applyStyles(this.getStyles())); // Hook into the theming service of Monaco to ensure that the updates are ready. StandaloneServices.get(IStandaloneThemeService).onDidColorThemeChange(() => this.controller.applyStyles(this.getStyles())); + window.addEventListener('resize',() => this.updateLayout()); } setContextKey(key: string | undefined): void { @@ -176,7 +177,17 @@ export class MonacoQuickInputImplementation implements IQuickInputService { private initController(): void { this.controller = new QuickInputController(this.getOptions()); - this.controller.layout({ width: 600, height: 1200 }, 0); + this.updateLayout(); + } + + private updateLayout(): void { + // Initialize the layout using screen dimensions as monaco computes the actual sizing. + // https://github.com/microsoft/vscode/blob/6261075646f055b99068d3688932416f2346dd3b/src/vs/base/parts/quickinput/browser/quickInput.ts#L1799 + this.controller.layout(this.getClientDimension(),0); + } + + private getClientDimension():monaco.editor.IDimension { + return {width: window.innerWidth, height: innerHeight} } private getOptions(): IQuickInputOptions { diff --git a/packages/monaco/src/browser/style/index.css b/packages/monaco/src/browser/style/index.css index bf91b1b3d143c..9aded301550bb 100644 --- a/packages/monaco/src/browser/style/index.css +++ b/packages/monaco/src/browser/style/index.css @@ -99,30 +99,10 @@ /* Monaco Quick Input */ .quick-input-widget { - width: 600px !important; - margin-left: -300px !important; background-color: var(--theia-quickInput-background) !important; color: var(--theia-foreground) !important; } -.quick-input-list - .quick-input-list-rows - > .quick-input-list-row - .monaco-icon-label, -.quick-input-list - .quick-input-list-rows - > .quick-input-list-row - .monaco-icon-label - .monaco-icon-label-container, -.quick-input-list - .quick-input-list-rows - > .quick-input-list-row - .monaco-icon-label - .monaco-icon-label-container - > .monaco-icon-name-container { - display: flex !important; -} - .quick-input-list .monaco-list-row.focused { background-color: var(--theia-quickInputList-focusBackground) !important; }