From e0a8ca570dbe19290dc4d6f3b5499fdcd52d6f26 Mon Sep 17 00:00:00 2001 From: Ramya Achutha Rao Date: Wed, 17 May 2017 17:40:08 -0700 Subject: [PATCH] Re-ordering css for better readability --- .../contrib/suggest/browser/media/suggest.css | 68 +++++++++++-------- .../contrib/suggest/browser/suggestWidget.ts | 22 +++--- 2 files changed, 49 insertions(+), 41 deletions(-) diff --git a/src/vs/editor/contrib/suggest/browser/media/suggest.css b/src/vs/editor/contrib/suggest/browser/media/suggest.css index ac6e53ec7a0..d5e20221956 100644 --- a/src/vs/editor/contrib/suggest/browser/media/suggest.css +++ b/src/vs/editor/contrib/suggest/browser/media/suggest.css @@ -6,36 +6,13 @@ /* Suggest */ .monaco-editor .suggest-widget { z-index: 40; + width: 430px; } .monaco-editor .suggest-widget.docs-expanded { width: 660px; } -.monaco-editor .suggest-widget.docs-expanded > .tree { - width: 330px; -} - -.monaco-editor .suggest-widget > .details { - /* .details does not use border-box, so subtract the border height here (2px). This is the case - because the height of .details is set prorammatically based on .header and .docs, we don't want - our JS to care about the size of the border (which changes based on theme type). */ - width: 328px; -} - -.monaco-editor .suggest-widget > .details, -.monaco-editor .suggest-widget > .tree { - border-style: solid; - border-width: 1px; -} - -.monaco-editor .suggest-widget, -.monaco-editor .suggest-widget > .tree, -.monaco-editor .suggest-widget.small.docs-expanded > .tree, -.monaco-editor .suggest-widget.small > .details { - width: 430px; -} - .monaco-editor .suggest-widget.visible { -webkit-transition: left .05s ease-in-out; -moz-transition: left .05s ease-in-out; @@ -49,10 +26,14 @@ border-width: 1px; } +/** Styles for the list element **/ .monaco-editor .suggest-widget > .tree { height: 100%; + width: 430px; float: left; box-sizing: border-box; + border-style: solid; + border-width: 1px; } .monaco-editor .suggest-widget.list-right > .tree { @@ -63,6 +44,16 @@ float: none; } +.monaco-editor .suggest-widget.docs-expanded > .tree { + width: 330px; +} + +.monaco-editor .suggest-widget.small.docs-expanded > .tree { + width: 430px; +} + +/** Styles for each row in the list element **/ + .monaco-editor .suggest-widget .monaco-list .monaco-list-row { display: flex; -mox-box-sizing: border-box; @@ -90,8 +81,10 @@ font-weight: bold; } +/** Icon styles **/ + .monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .close, -.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .docs-details { +.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore { opacity: 0.6; background-position: center center; background-repeat: no-repeat; @@ -104,15 +97,17 @@ float: right; } -.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .docs-details { +.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore { background-image: url('./info.svg'); } .monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .close:hover, -.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .docs-details:hover { +.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore:hover { opacity: 1; } +/** Type Info and icon next to the label in the focused completion item **/ + .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .type-label { margin-left: 0.8em; flex: 1; @@ -126,19 +121,21 @@ display: inline; } -.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .docs-details, +.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore, .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .type-label, -.monaco-editor .suggest-widget.docs-expanded .monaco-list .monaco-list-row.focused > .contents > .main > .docs-details, +.monaco-editor .suggest-widget.docs-expanded .monaco-list .monaco-list-row.focused > .contents > .main > .readMore, .monaco-editor .suggest-widget.docs-expanded .monaco-list .monaco-list-row.focused > .contents > .main > .type-label { display: none; } -.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .docs-details, +.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .readMore, .monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .type-label, .monaco-editor .suggest-widget.docs-expanded.small .monaco-list .monaco-list-row.focused > .contents > .main > .type-label { display: inline; } +/** Styles for each row in the list **/ + .monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon { display: block; height: 16px; @@ -184,11 +181,22 @@ display: inline-block; } +/** Styles for the docs of the completion item in focus **/ .monaco-editor .suggest-widget .details { max-height: 216px; display: flex; flex-direction: column; cursor: default; + /* .details does not use border-box, so subtract the border height here (2px). This is the case + because the height of .details is set prorammatically based on .header and .docs, we don't want + our JS to care about the size of the border (which changes based on theme type). */ + width: 328px; + border-style: solid; + border-width: 1px; +} + +.monaco-editor .suggest-widget.small > .details { + width: 430px; } .monaco-editor .suggest-widget .details.no-docs { diff --git a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts index 9836f775845..2c11eb765de 100644 --- a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts +++ b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts @@ -40,7 +40,7 @@ interface ISuggestionTemplateData { colorspan: HTMLElement; highlightedLabel: HighlightedLabel; typeLabel: HTMLElement; - documentationDetails: HTMLElement; + readMore: HTMLElement; disposables: IDisposable[]; } @@ -95,8 +95,8 @@ class Renderer implements IRenderer { data.disposables.push(data.highlightedLabel); data.typeLabel = append(main, $('span.type-label')); - data.documentationDetails = append(main, $('span.docs-details')); - data.documentationDetails.title = nls.localize('readMore', "Read More...{0}", this.triggerKeybindingLabel); + data.readMore = append(main, $('span.readMore')); + data.readMore.title = nls.localize('readMore', "Read More...{0}", this.triggerKeybindingLabel); const configureFont = () => { const configuration = this.editor.getConfiguration(); @@ -111,8 +111,8 @@ class Renderer implements IRenderer { main.style.lineHeight = lineHeightPx; data.icon.style.height = lineHeightPx; data.icon.style.width = lineHeightPx; - data.documentationDetails.style.height = lineHeightPx; - data.documentationDetails.style.width = lineHeightPx; + data.readMore.style.height = lineHeightPx; + data.readMore.style.width = lineHeightPx; }; configureFont(); @@ -149,20 +149,20 @@ class Renderer implements IRenderer { data.typeLabel.textContent = (suggestion.detail || '').replace(/\n.*$/m, ''); if (canExpandCompletionItem(element)) { - show(data.documentationDetails); - data.documentationDetails.onmousedown = e => { + show(data.readMore); + data.readMore.onmousedown = e => { e.stopPropagation(); e.preventDefault(); }; - data.documentationDetails.onclick = e => { + data.readMore.onclick = e => { e.stopPropagation(); e.preventDefault(); this.widget.toggleDetails(); }; } else { - hide(data.documentationDetails); - data.documentationDetails.onmousedown = null; - data.documentationDetails.onclick = null; + hide(data.readMore); + data.readMore.onmousedown = null; + data.readMore.onclick = null; } } -- GitLab