From 5b7432f85f712eb3550cac63e0c3c924e3c2de47 Mon Sep 17 00:00:00 2001 From: Joao Moreno Date: Tue, 3 May 2016 16:12:02 +0200 Subject: [PATCH] make sugest widget adopt editor's font in code html elements --- .../contrib/suggest/browser/suggest.css | 15 ----- .../contrib/suggest/browser/suggestWidget.ts | 64 +++++++++++++++---- 2 files changed, 52 insertions(+), 27 deletions(-) diff --git a/src/vs/editor/contrib/suggest/browser/suggest.css b/src/vs/editor/contrib/suggest/browser/suggest.css index ab17e45fa6f..7042caf8a7a 100644 --- a/src/vs/editor/contrib/suggest/browser/suggest.css +++ b/src/vs/editor/contrib/suggest/browser/suggest.css @@ -36,10 +36,6 @@ width: 100%; } -.monaco-editor .suggest-widget > .tree { - font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback"; -} - .monaco-editor .suggest-widget .monaco-list .monaco-list-row { -mox-box-sizing: border-box; box-sizing: border-box; @@ -89,17 +85,6 @@ color: #A21B1B; } -.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .docs, -.monaco-editor .suggest-widget .monaco-list .monaco-list-row .docs { font-family: "Segoe UI", "SFUIText-Regular", "HelveticaNeue", sans-serif, "Droid Sans Fallback"; } -.monaco-editor:lang(zh-Hans) .suggest-widget .details > .monaco-scrollable-element > .body > .docs, -.monaco-editor:lang(zh-Hans) .suggest-widget .monaco-list .monaco-list-row .docs { font-family: "Segoe UI", "SFUIText-Regular", "HelveticaNeue", "Noto Sans", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", sans-serif; } -.monaco-editor:lang(zh-Hant) .suggest-widget .details > .monaco-scrollable-element > .body > .docs, -.monaco-editor:lang(zh-Hant) .suggest-widget .monaco-list .monaco-list-row .docs { font-family: "Segoe UI", "SFUIText-Regular", "HelveticaNeue", "Noto Sans", "Microsoft Jhenghei", "PingFang TC", "Source Han Sans TC", "Source Han Sans", "Source Han Sans TW", sans-serif; } -.monaco-editor:lang(ja) .suggest-widget .details > .monaco-scrollable-element > .body > .docs, -.monaco-editor:lang(ja) .suggest-widget .monaco-list .monaco-list-row .docs { font-family: "Segoe UI", "SFUIText-Regular", "HelveticaNeue", "Noto Sans", "Meiryo", "Hiragino Kaku Gothic Pro", "Source Han Sans J", "Source Han Sans JP", "Source Han Sans", "Sazanami Gothic", "IPA Gothic", sans-serif; } -.monaco-editor:lang(ko) .suggest-widget .details > .monaco-scrollable-element > .body > .docs, -.monaco-editor:lang(ko) .suggest-widget .monaco-list .monaco-list-row .docs { font-family: "Segoe UI", "SFUIText-Regular", "HelveticaNeue", "Noto Sans", "Malgun Gothic", "Nanum Gothic", "Dotom", "Apple SD Gothic Neo", "AppleGothic", "Source Han Sans K", "Source Han Sans JR", "Source Han Sans", "UnDotum", "FBaekmuk Gulim", sans-serif; } - .monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-highlighted-label > span { opacity: 1; } diff --git a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts index 321797549f7..68caa774df9 100644 --- a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts +++ b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts @@ -10,7 +10,7 @@ import * as nls from 'vs/nls'; import * as strings from 'vs/base/common/strings'; import {isPromiseCanceledError, onUnexpectedError} from 'vs/base/common/errors'; import Event, { Emitter } from 'vs/base/common/event'; -import {IDisposable, dispose} from 'vs/base/common/lifecycle'; +import {IDisposable, dispose, toDisposable} from 'vs/base/common/lifecycle'; import * as timer from 'vs/base/common/timer'; import {TPromise} from 'vs/base/common/winjs.base'; import {addClass, append, emmet as $, hide, removeClass, show, toggleClass} from 'vs/base/browser/dom'; @@ -21,7 +21,7 @@ import {DomScrollableElement} from 'vs/base/browser/ui/scrollbar/scrollableEleme import {IInstantiationService} from 'vs/platform/instantiation/common/instantiation'; import {IKeybindingContextKey, IKeybindingService} from 'vs/platform/keybinding/common/keybindingService'; import {ITelemetryService} from 'vs/platform/telemetry/common/telemetry'; -import {EventType, IModeSupportChangedEvent} from 'vs/editor/common/editorCommon'; +import {EventType, IModeSupportChangedEvent, IConfigurationChangedEvent} from 'vs/editor/common/editorCommon'; import {SuggestRegistry} from 'vs/editor/common/modes'; import {ContentWidgetPositionPreference, ICodeEditor, IContentWidget, IContentWidgetPosition} from 'vs/editor/browser/editorBrowser'; import {CONTEXT_SUGGESTION_SUPPORTS_ACCEPT_ON_KEY} from '../common/suggest'; @@ -37,6 +37,7 @@ interface ISuggestionTemplateData { typeLabel: HTMLElement; documentationDetails: HTMLElement; documentation: HTMLElement; + disposables: IDisposable[]; } class Renderer implements IRenderer { @@ -45,6 +46,7 @@ class Renderer implements IRenderer { constructor( private widget: SuggestWidget, + private editor: ICodeEditor, @IKeybindingService keybindingService: IKeybindingService ) { const keybindings = keybindingService.lookupKeybindings('editor.action.triggerSuggest'); @@ -57,20 +59,35 @@ class Renderer implements IRenderer { renderTemplate(container: HTMLElement): ISuggestionTemplateData { const data = Object.create(null); + data.disposables = []; data.root = container; - data.icon = append(container, $('.icon')); data.colorspan = append(data.icon, $('span.colorspan')); const text = append(container, $('.text')); const main = append(text, $('.main')); data.highlightedLabel = new HighlightedLabel(main); + data.disposables.push(data.highlightedLabel); data.typeLabel = append(main, $('span.type-label')); + const docs = append(text, $('.docs')); data.documentation = append(docs, $('span.docs-text')); data.documentationDetails = append(docs, $('span.docs-details.octicon.octicon-info')); data.documentationDetails.title = nls.localize('readMore', "Read More...{0}", this.triggerKeybindingLabel); + const configureFont = () => { + const fontInfo = this.editor.getConfiguration().fontInfo; + main.style.fontFamily = fontInfo.fontFamily; + }; + + configureFont(); + + data.disposables.push(this.editor.addListener2(EventType.ConfigurationChanged, (e: IConfigurationChangedEvent) => { + if (e.fontInfo) { + configureFont(); + } + })); + return data; } @@ -116,6 +133,7 @@ class Renderer implements IRenderer { disposeTemplate(templateData: ISuggestionTemplateData): void { templateData.highlightedLabel.dispose(); + templateData.disposables = dispose(templateData.disposables); } } @@ -185,21 +203,40 @@ class SuggestionDetails { private body: HTMLElement; private type: HTMLElement; private docs: HTMLElement; - private ariaLabel:string; + private ariaLabel: string; + private disposables: IDisposable[]; + + constructor( + container: HTMLElement, + private widget: SuggestWidget, + private editor: ICodeEditor + ) { + this.disposables = []; - constructor(container: HTMLElement, private widget: SuggestWidget) { this.el = append(container, $('.details')); + this.disposables.push(toDisposable(() => container.removeChild(this.el))); + const header = append(this.el, $('.header')); this.title = append(header, $('span.title')); this.back = append(header, $('span.go-back.octicon.octicon-mail-reply')); this.back.title = nls.localize('goback', "Go back"); this.body = $('.body'); + this.scrollbar = new DomScrollableElement(this.body, {}); append(this.el, this.scrollbar.getDomNode()); + this.disposables.push(this.scrollbar); + this.type = append(this.body, $('p.type')); this.docs = append(this.body, $('p.docs')); - this.ariaLabel = null; + + this.configureFont(); + + this.disposables.push(this.editor.addListener2(EventType.ConfigurationChanged, (e: IConfigurationChangedEvent) => { + if (e.fontInfo) { + this.configureFont(); + } + })); } get element() { @@ -253,11 +290,14 @@ class SuggestionDetails { this.scrollUp(80); } - dispose(): void { - this.scrollbar.dispose(); + private configureFont() { + const fontInfo = this.editor.getConfiguration().fontInfo; + this.title.style.fontFamily = fontInfo.fontFamily; + this.type.style.fontFamily = fontInfo.fontFamily; + } - this.el.parentElement.removeChild(this.el); - this.el = null; + dispose(): void { + this.disposables = dispose(this.disposables); } } @@ -323,9 +363,9 @@ export class SuggestWidget implements IContentWidget, IDisposable { this.messageElement = append(this.element, $('.message')); this.listElement = append(this.element, $('.tree')); - this.details = new SuggestionDetails(this.element, this); + this.details = new SuggestionDetails(this.element, this, this.editor); - let renderer: IRenderer = instantiationService.createInstance(Renderer, this); + let renderer: IRenderer = instantiationService.createInstance(Renderer, this, this.editor); this.delegate = new Delegate(() => this.list); this.list = new List(this.listElement, this.delegate, [renderer]); -- GitLab