maxmustermann/vscode
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

suggest: adapt font size, line height

Browse source
This commit is contained in:
Joao Moreno 2016-09-12 10:22:40 +02:00
parent abcac58357
commit 1522200ac3
2 changed files with 42 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/vs/editor/contrib/suggest/browser/suggest.css
View file

@ -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 {

76
src/vs/editor/contrib/suggest/browser/suggestWidget.ts
View file

@ -66,7 +66,6 @@ class Renderer implements IRenderer<ICompletionItem, ISuggestionTemplateData> {
const data = <ISuggestionTemplateData>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<ICompletionItem, ISuggestionTemplateData> {
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<ICompletionItem, ISuggestionTemplateData> {
}
}
const FocusHeight = 42;
const UnfocusedHeight = 20;
class Delegate implements IDelegate<ICompletionItem> {
constructor(private listProvider: () => List<ICompletionItem>) { }
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<ICompletionItem>, 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<ICompletionItem>;
private list: List<ICompletionItem>;
private suggestWidgetVisible: IContextKey<boolean>;
@ -343,10 +318,7 @@ export class SuggestWidget implements IContentWidget, IDisposable {
let renderer: IRenderer<ICompletionItem, any> = 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;