Skip to content

Commit e0a8ca5

Browse files
ramya-rao-aramya-rao-a
committed
Re-ordering css for better readability
1 parent 0b48b8c commit e0a8ca5

2 files changed

Lines changed: 49 additions & 41 deletions

File tree

‎src/vs/editor/contrib/suggest/browser/media/suggest.css‎

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,13 @@
66
/* Suggest */
77
.monaco-editor .suggest-widget {
88
z-index: 40;
9+
width: 430px;
910
}
1011

1112
.monaco-editor .suggest-widget.docs-expanded {
1213
width: 660px;
1314
}
1415

15-
.monaco-editor .suggest-widget.docs-expanded > .tree {
16-
width: 330px;
17-
}
18-
19-
.monaco-editor .suggest-widget > .details {
20-
/* .details does not use border-box, so subtract the border height here (2px). This is the case
21-
because the height of .details is set prorammatically based on .header and .docs, we don't want
22-
our JS to care about the size of the border (which changes based on theme type). */
23-
width: 328px;
24-
}
25-
26-
.monaco-editor .suggest-widget > .details,
27-
.monaco-editor .suggest-widget > .tree {
28-
border-style: solid;
29-
border-width: 1px;
30-
}
31-
32-
.monaco-editor .suggest-widget,
33-
.monaco-editor .suggest-widget > .tree,
34-
.monaco-editor .suggest-widget.small.docs-expanded > .tree,
35-
.monaco-editor .suggest-widget.small > .details {
36-
width: 430px;
37-
}
38-
3916
.monaco-editor .suggest-widget.visible {
4017
-webkit-transition: left .05s ease-in-out;
4118
-moz-transition: left .05s ease-in-out;
@@ -49,10 +26,14 @@
4926
border-width: 1px;
5027
}
5128

29+
/** Styles for the list element **/
5230
.monaco-editor .suggest-widget > .tree {
5331
height: 100%;
32+
width: 430px;
5433
float: left;
5534
box-sizing: border-box;
35+
border-style: solid;
36+
border-width: 1px;
5637
}
5738

5839
.monaco-editor .suggest-widget.list-right > .tree {
@@ -63,6 +44,16 @@
6344
float: none;
6445
}
6546

47+
.monaco-editor .suggest-widget.docs-expanded > .tree {
48+
width: 330px;
49+
}
50+
51+
.monaco-editor .suggest-widget.small.docs-expanded > .tree {
52+
width: 430px;
53+
}
54+
55+
/** Styles for each row in the list element **/
56+
6657
.monaco-editor .suggest-widget .monaco-list .monaco-list-row {
6758
display: flex;
6859
-mox-box-sizing: border-box;
@@ -90,8 +81,10 @@
9081
font-weight: bold;
9182
}
9283

84+
/** Icon styles **/
85+
9386
.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .close,
94-
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .docs-details {
87+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore {
9588
opacity: 0.6;
9689
background-position: center center;
9790
background-repeat: no-repeat;
@@ -104,15 +97,17 @@
10497
float: right;
10598
}
10699

107-
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .docs-details {
100+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore {
108101
background-image: url('./info.svg');
109102
}
110103

111104
.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .close:hover,
112-
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .docs-details:hover {
105+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore:hover {
113106
opacity: 1;
114107
}
115108

109+
/** Type Info and icon next to the label in the focused completion item **/
110+
116111
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .type-label {
117112
margin-left: 0.8em;
118113
flex: 1;
@@ -126,19 +121,21 @@
126121
display: inline;
127122
}
128123

129-
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .docs-details,
124+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore,
130125
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .type-label,
131-
.monaco-editor .suggest-widget.docs-expanded .monaco-list .monaco-list-row.focused > .contents > .main > .docs-details,
126+
.monaco-editor .suggest-widget.docs-expanded .monaco-list .monaco-list-row.focused > .contents > .main > .readMore,
132127
.monaco-editor .suggest-widget.docs-expanded .monaco-list .monaco-list-row.focused > .contents > .main > .type-label {
133128
display: none;
134129
}
135130

136-
.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .docs-details,
131+
.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .readMore,
137132
.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .type-label,
138133
.monaco-editor .suggest-widget.docs-expanded.small .monaco-list .monaco-list-row.focused > .contents > .main > .type-label {
139134
display: inline;
140135
}
141136

137+
/** Styles for each row in the list **/
138+
142139
.monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon {
143140
display: block;
144141
height: 16px;
@@ -184,11 +181,22 @@
184181
display: inline-block;
185182
}
186183

184+
/** Styles for the docs of the completion item in focus **/
187185
.monaco-editor .suggest-widget .details {
188186
max-height: 216px;
189187
display: flex;
190188
flex-direction: column;
191189
cursor: default;
190+
/* .details does not use border-box, so subtract the border height here (2px). This is the case
191+
because the height of .details is set prorammatically based on .header and .docs, we don't want
192+
our JS to care about the size of the border (which changes based on theme type). */
193+
width: 328px;
194+
border-style: solid;
195+
border-width: 1px;
196+
}
197+
198+
.monaco-editor .suggest-widget.small > .details {
199+
width: 430px;
192200
}
193201

194202
.monaco-editor .suggest-widget .details.no-docs {

‎src/vs/editor/contrib/suggest/browser/suggestWidget.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ interface ISuggestionTemplateData {
4040
colorspan: HTMLElement;
4141
highlightedLabel: HighlightedLabel;
4242
typeLabel: HTMLElement;
43-
documentationDetails: HTMLElement;
43+
readMore: HTMLElement;
4444
disposables: IDisposable[];
4545
}
4646

@@ -95,8 +95,8 @@ class Renderer implements IRenderer<ICompletionItem, ISuggestionTemplateData> {
9595
data.disposables.push(data.highlightedLabel);
9696
data.typeLabel = append(main, $('span.type-label'));
9797

98-
data.documentationDetails = append(main, $('span.docs-details'));
99-
data.documentationDetails.title = nls.localize('readMore', "Read More...{0}", this.triggerKeybindingLabel);
98+
data.readMore = append(main, $('span.readMore'));
99+
data.readMore.title = nls.localize('readMore', "Read More...{0}", this.triggerKeybindingLabel);
100100

101101
const configureFont = () => {
102102
const configuration = this.editor.getConfiguration();
@@ -111,8 +111,8 @@ class Renderer implements IRenderer<ICompletionItem, ISuggestionTemplateData> {
111111
main.style.lineHeight = lineHeightPx;
112112
data.icon.style.height = lineHeightPx;
113113
data.icon.style.width = lineHeightPx;
114-
data.documentationDetails.style.height = lineHeightPx;
115-
data.documentationDetails.style.width = lineHeightPx;
114+
data.readMore.style.height = lineHeightPx;
115+
data.readMore.style.width = lineHeightPx;
116116
};
117117

118118
configureFont();
@@ -149,20 +149,20 @@ class Renderer implements IRenderer<ICompletionItem, ISuggestionTemplateData> {
149149
data.typeLabel.textContent = (suggestion.detail || '').replace(/\n.*$/m, '');
150150

151151
if (canExpandCompletionItem(element)) {
152-
show(data.documentationDetails);
153-
data.documentationDetails.onmousedown = e => {
152+
show(data.readMore);
153+
data.readMore.onmousedown = e => {
154154
e.stopPropagation();
155155
e.preventDefault();
156156
};
157-
data.documentationDetails.onclick = e => {
157+
data.readMore.onclick = e => {
158158
e.stopPropagation();
159159
e.preventDefault();
160160
this.widget.toggleDetails();
161161
};
162162
} else {
163-
hide(data.documentationDetails);
164-
data.documentationDetails.onmousedown = null;
165-
data.documentationDetails.onclick = null;
163+
hide(data.readMore);
164+
data.readMore.onmousedown = null;
165+
data.readMore.onclick = null;
166166
}
167167

168168
}

0 commit comments

Comments
 (0)