From 17e9c6339cdd6914976876494dfd5ab9316fc726 Mon Sep 17 00:00:00 2001 From: Joao Moreno Date: Tue, 8 Dec 2015 16:36:56 +0100 Subject: [PATCH] suggest: cleaned up css styles... --- .../contrib/suggest/browser/suggest.css | 42 ++++++---------- .../contrib/suggest/browser/suggestWidget.ts | 50 ++++++++++--------- 2 files changed, 42 insertions(+), 50 deletions(-) diff --git a/src/vs/editor/contrib/suggest/browser/suggest.css b/src/vs/editor/contrib/suggest/browser/suggest.css index 710b85633f1..dbc90c52992 100644 --- a/src/vs/editor/contrib/suggest/browser/suggest.css +++ b/src/vs/editor/contrib/suggest/browser/suggest.css @@ -26,43 +26,31 @@ line-height: 1.3em; } +.monaco-editor .suggest-widget > .message { + padding-left: 22px; + opacity: 0.7; +} + +.monaco-editor .suggest-widget > .tree { + height: 100%; + width: 100%; +} + .monaco-editor .suggest-widget .monaco-tree .monaco-tree-row > .content { -mox-box-sizing: border-box; box-sizing: border-box; line-height: 1.2em; - padding: 2px 10px 2px 2px; + padding: 2px 10px 2px 22px; background-repeat: no-repeat; background-position: 2px 2px; white-space: nowrap; } -.monaco-editor .suggest-widget .monaco-tree .monaco-tree-row > .content > * { - float: left; -} - -.monaco-editor .suggest-widget .monaco-tree .monaco-tree-row > .content:after { - content:""; - clear: both; - display: block; - visibility: hidden; - height: 0; -} - .monaco-editor .suggest-widget .monaco-tree .monaco-tree-row > .content .text { - width: -webkit-calc(100% - 16px); - width: -moz-calc(100% - 16px); - width: -ms-calc(100% - 16px); - width: -o-calc(100% - 16px); - width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; - padding-left: 6px; - -webkit-box-sizing: border-box; - -o-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; } + .monaco-editor .suggest-widget .monaco-tree .monaco-tree-row > .content .docs { display: none; max-height: 3.4em; @@ -95,17 +83,19 @@ color: #0035DD; } -.monaco-editor .suggest-widget .monaco-tree .monaco-tree-row.fake > .content .type-label, .monaco-editor .suggest-widget .monaco-tree .monaco-tree-row.focused > .content .type-label { display: inline; } -.monaco-editor .suggest-widget .monaco-tree .monaco-tree-row.fake > .content .docs, .monaco-editor .suggest-widget .monaco-tree .monaco-tree-row.focused > .content .docs { display: block; } .monaco-editor .suggest-widget .monaco-tree .monaco-tree-row > .content .icon { + position: absolute; + display: block; + left: 1px; + top: 2px; background-image: url('symbol-sprite.svg'); background-repeat: no-repeat; height: 16px; diff --git a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts index 78d3ab0d07d..e13a666768e 100644 --- a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts +++ b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts @@ -11,7 +11,7 @@ import { TPromise } from 'vs/base/common/winjs.base'; import { IDisposable, disposeAll } from 'vs/base/common/lifecycle'; import { assign } from 'vs/base/common/objects'; import Event, { Emitter } from 'vs/base/common/event'; -import dom = require('vs/base/browser/dom'); +import { append, addClass, removeClass, emmet as $ } from 'vs/base/browser/dom'; import Tree = require('vs/base/parts/tree/common/tree'); import TreeImpl = require('vs/base/parts/tree/browser/treeImpl'); import TreeDefaults = require('vs/base/parts/tree/browser/treeDefaults'); @@ -33,8 +33,6 @@ import { isFalsyOrEmpty } from 'vs/base/common/arrays'; import { onUnexpectedError, isPromiseCanceledError, illegalArgument } from 'vs/base/common/errors'; const DefaultCompare: ISuggestionCompare = (a, b) => a.label.localeCompare(b.label); -var $ = dom.emmet; - class CompletionItem { private static _idPool = 0; @@ -253,7 +251,7 @@ interface ISuggestionTemplateData { colorspan: HTMLElement; highlightedLabel: HighlightedLabel.HighlightedLabel; typeLabel: HTMLElement; - documentationLabel: HTMLElement; + documentation: HTMLElement; } class Renderer implements Tree.IRenderer { @@ -278,7 +276,6 @@ class Renderer implements Tree.IRenderer { if (templateId === 'message') { var span = $('span'); span.style.opacity = '0.7'; - span.style.paddingLeft = '12px'; container.appendChild(span); return { element: span }; } @@ -286,15 +283,14 @@ class Renderer implements Tree.IRenderer { var data = Object.create(null); data.root = container; - data.icon = dom.append(container, $('.icon')); - data.colorspan = dom.append(data.icon, $('span.colorspan')); + data.icon = append(container, $('.icon')); + data.colorspan = append(data.icon, $('span.colorspan')); - var text = dom.append(container, $('.text')); - var main = dom.append(text, $('.main')); + var text = append(container, $('.text')); + var main = append(text, $('.main')); data.highlightedLabel = new HighlightedLabel.HighlightedLabel(main); - data.typeLabel = dom.append(main, $('span.type-label')); - var documentation = dom.append(text, $('.docs')); - data.documentationLabel = dom.append(documentation, $('.docs-label')); + data.typeLabel = append(main, $('span.type-label')); + data.documentation = append(text, $('.docs')); return data; } @@ -320,7 +316,7 @@ class Renderer implements Tree.IRenderer { data.highlightedLabel.set(suggestion.label, ( element).highlights); data.typeLabel.textContent = suggestion.typeLabel || ''; - data.documentationLabel.textContent = suggestion.documentationLabel || ''; + data.documentation.textContent = suggestion.documentationLabel || ''; } public disposeTemplate(tree: Tree.ITree, templateId: string, templateData: any): void { @@ -380,6 +376,7 @@ export class SuggestWidget implements EditorBrowser.IContentWidget, IDisposable private telemetryTimer: Timer.ITimerEvent; private element: HTMLElement; + private messageElement: HTMLElement; private tree: Tree.ITree; private renderer: Renderer; @@ -429,8 +426,13 @@ export class SuggestWidget implements EditorBrowser.IContentWidget, IDisposable this.element.style.top = '0'; this.element.style.left = '0'; + // this.messageElement = append(this.element, $('.message')); + // this.messageElement.textContent = 'hello world'; + + const treeElement = append(this.element, $('.tree')); + if (!this.editor.getConfiguration().iconsInSuggestions) { - dom.addClass(this.element, 'no-icons'); + addClass(this.element, 'no-icons'); } const configuration = { @@ -441,7 +443,7 @@ export class SuggestWidget implements EditorBrowser.IContentWidget, IDisposable sorter: new Sorter() }; - this.tree = new TreeImpl.Tree(this.element, configuration, { + this.tree = new TreeImpl.Tree(treeElement, configuration, { twistiePixels: 0, alwaysFocused: true, verticalScrollMode: 'visible', @@ -451,7 +453,7 @@ export class SuggestWidget implements EditorBrowser.IContentWidget, IDisposable this.listenersToRemove.push(editor.addListener(EditorCommon.EventType.EditorTextBlur, () => { TPromise.timeout(150).done(() => { if (this.tree && !this.tree.isDOMFocused()) { - this.hide(); + // this.hide(); } }); })); @@ -543,7 +545,7 @@ export class SuggestWidget implements EditorBrowser.IContentWidget, IDisposable if (!this.isAuto) { this.loadingTimeout = setTimeout(() => { this.loadingTimeout = null; - dom.removeClass(this.element, 'empty'); + removeClass(this.element, 'empty'); this.tree.setInput(SuggestWidget.LOADING_MESSAGE).done(null, onUnexpectedError); this.updateWidgetHeight(); this.show(); @@ -570,7 +572,7 @@ export class SuggestWidget implements EditorBrowser.IContentWidget, IDisposable this.hide(); } else if (wasLoading) { if (this.shouldShowEmptySuggestionList) { - dom.removeClass(this.element, 'empty'); + removeClass(this.element, 'empty'); this.tree.setInput(SuggestWidget.NO_SUGGESTIONS_MESSAGE).done(null, onUnexpectedError); this.updateWidgetHeight(); this.show(); @@ -578,7 +580,7 @@ export class SuggestWidget implements EditorBrowser.IContentWidget, IDisposable this.hide(); } } else { - dom.addClass(this.element, 'empty'); + addClass(this.element, 'empty'); } if(this.telemetryTimer) { @@ -590,7 +592,7 @@ export class SuggestWidget implements EditorBrowser.IContentWidget, IDisposable return; } - dom.removeClass(this.element, 'empty'); + removeClass(this.element, 'empty'); this.telemetryData = this.telemetryData || {}; @@ -744,7 +746,7 @@ export class SuggestWidget implements EditorBrowser.IContentWidget, IDisposable this.tree.layout(); this.editor.layoutContentWidget(this); TPromise.timeout(100).done(() => { - dom.addClass(this.element, 'visible'); + addClass(this.element, 'visible'); }); } @@ -755,7 +757,7 @@ export class SuggestWidget implements EditorBrowser.IContentWidget, IDisposable public hide(): void { this._onDidVisibilityChange.fire(false); this.isActive = false; - dom.removeClass(this.element, 'visible'); + removeClass(this.element, 'visible'); this.editor.layoutContentWidget(this); } @@ -794,9 +796,9 @@ export class SuggestWidget implements EditorBrowser.IContentWidget, IDisposable var focusHeight = focus ? this.renderer.getHeight(this.tree, focus) : 19; height += focusHeight; - const suggestionCount = this.tree.getContentHeight() / 19; + const suggestionCount = (this.tree.getContentHeight() - focusHeight) / 19; const maxSuggestions = Math.floor((maxHeight - focusHeight) / 19); - height += Math.min(suggestionCount - 1, 11, maxSuggestions) * 19; + height += Math.min(suggestionCount, 11, maxSuggestions) * 19; } this.element.style.height = height + 'px'; -- GitLab