From 1522200ac3db4c174f6240c48789d676cc5bb872 Mon Sep 17 00:00:00 2001 From: Joao Moreno Date: Mon, 12 Sep 2016 10:22:40 +0200 Subject: [PATCH] suggest: adapt font size, line height --- .../contrib/suggest/browser/suggest.css | 8 +- .../contrib/suggest/browser/suggestWidget.ts | 76 +++++++++---------- 2 files changed, 42 insertions(+), 42 deletions(-) diff --git a/src/vs/editor/contrib/suggest/browser/suggest.css b/src/vs/editor/contrib/suggest/browser/suggest.css index a96bf650bf9..450ee608628 100644 --- a/src/vs/editor/contrib/suggest/browser/suggest.css +++ b/src/vs/editor/contrib/suggest/browser/suggest.css @@ -37,18 +37,20 @@ .monaco-editor .suggest-widget .monaco-list .monaco-list-row { -mox-box-sizing: border-box; box-sizing: border-box; - line-height: 1.2em; padding: 0 10px 0 22px; background-repeat: no-repeat; background-position: 2px 2px; white-space: nowrap; } +.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .text { + height: 100%; +} + .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .text > .main { display: flex; overflow: hidden; text-overflow: ellipsis; - height: 18px; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row .docs { @@ -56,7 +58,6 @@ max-height: 3.4em; overflow: hidden; height: 24px; - line-height: 24px; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row .docs > .docs-text { @@ -202,7 +203,6 @@ box-sizing: border-box; height: 100%; width: 100%; - line-height: 1.5em; } .monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .type { diff --git a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts index d3d0013ecb4..a9680fcd2c9 100644 --- a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts +++ b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts @@ -66,7 +66,6 @@ class Renderer implements IRenderer { const data = Object.create(null); data.disposables = []; data.root = container; - data.root.style.lineHeight = `${UnfocusedHeight}px`; data.icon = append(container, $('.icon')); data.colorspan = append(data.icon, $('span.colorspan')); @@ -84,7 +83,7 @@ class Renderer implements IRenderer { const configureFont = () => { const fontInfo = this.editor.getConfiguration().fontInfo; - main.style.fontSize = `${ fontInfo.fontSize }px`; + data.root.style.fontSize = `${ fontInfo.fontSize }px`; main.style.fontFamily = fontInfo.fontFamily; }; @@ -146,28 +145,6 @@ class Renderer implements IRenderer { } } -const FocusHeight = 42; -const UnfocusedHeight = 20; - -class Delegate implements IDelegate { - - constructor(private listProvider: () => List) { } - - getHeight(element: ICompletionItem): number { - const focus = this.listProvider().getFocusedElements()[0]; - - if (element.suggestion.documentation && element === focus) { - return FocusHeight; - } - - return UnfocusedHeight; - } - - getTemplateId(element: ICompletionItem): string { - return 'suggestion'; - } -} - enum State { Hidden, Loading, @@ -278,10 +255,9 @@ class SuggestionDetails { const fontInfo = this.editor.getConfiguration().fontInfo; const fontSize = `${ fontInfo.fontSize }px`; + this.el.style.fontSize = fontSize; this.title.style.fontFamily = fontInfo.fontFamily; - this.title.style.fontSize = fontSize; this.type.style.fontFamily = fontInfo.fontFamily; - this.type.style.fontSize = fontSize; } dispose(): void { @@ -289,7 +265,7 @@ class SuggestionDetails { } } -export class SuggestWidget implements IContentWidget, IDisposable { +export class SuggestWidget implements IContentWidget, IDelegate, IDisposable { private static ID: string = 'editor.widget.suggestWidget'; @@ -309,7 +285,6 @@ export class SuggestWidget implements IContentWidget, IDisposable { private messageElement: HTMLElement; private listElement: HTMLElement; private details: SuggestionDetails; - private delegate: IDelegate; private list: List; private suggestWidgetVisible: IContextKey; @@ -343,10 +318,7 @@ export class SuggestWidget implements IContentWidget, IDisposable { let renderer: IRenderer = instantiationService.createInstance(Renderer, this, this.editor); - this.delegate = new Delegate(() => this.list); - this.list = new List(this.listElement, this.delegate, [renderer], { - useShadows: false - }); + this.list = new List(this.listElement, this, [renderer], { useShadows: false }); this.toDispose = [ editor.onDidBlurEditorText(() => this.onEditorBlur()), @@ -734,19 +706,20 @@ export class SuggestWidget implements IContentWidget, IDisposable { let height = 0; if (this.state === State.Empty || this.state === State.Loading) { - height = UnfocusedHeight; + height = this.unfocusedHeight; } else if (this.state === State.Details) { - height = 12 * UnfocusedHeight; + height = 12 * this.unfocusedHeight; } else { const focus = this.list.getFocusedElements()[0]; - const focusHeight = focus ? this.delegate.getHeight(focus) : UnfocusedHeight; + const focusHeight = focus ? this.getHeight(focus) : this.unfocusedHeight; height = focusHeight; - const suggestionCount = (this.list.contentHeight - focusHeight) / UnfocusedHeight; - height += Math.min(suggestionCount, 11) * UnfocusedHeight; + const suggestionCount = (this.list.contentHeight - focusHeight) / this.unfocusedHeight; + height += Math.min(suggestionCount, 11) * this.unfocusedHeight; } - this.element.style.height = height + 'px'; + this.element.style.lineHeight = `${this.unfocusedHeight}px`; + this.element.style.height = `${height}px`; this.list.layout(height); this.editor.layoutContentWidget(this); @@ -761,6 +734,33 @@ export class SuggestWidget implements IContentWidget, IDisposable { } } + // Heights + + private get focusHeight(): number { + return Math.round(this.unfocusedHeight * 2.1); + } + + private get unfocusedHeight(): number { + const fontInfo = this.editor.getConfiguration().fontInfo; + return fontInfo.lineHeight; + } + + // IDelegate + + getHeight(element: ICompletionItem): number { + const focus = this.list.getFocusedElements()[0]; + + if (element.suggestion.documentation && element === focus) { + return this.focusHeight; + } + + return this.unfocusedHeight; + } + + getTemplateId(element: ICompletionItem): string { + return 'suggestion'; + } + dispose(): void { this.state = null; this.suggestionSupportsAutoAccept = null;