Skip to content

Commit 0ddc2d1

Browse files
lramos15Miguel Solorio
lramos15
and
Miguel Solorio
authored
Support codicons in getting started (microsoft#158173)
* Support codicons in getting started * Update codicon styles * Update close button hover state Co-authored-by: Miguel Solorio <[email protected]>
1 parent 1089169 commit 0ddc2d1

File tree

2 files changed

+65
-20
lines changed

2 files changed

+65
-20
lines changed

‎src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -972,6 +972,9 @@ export class GettingStartedPage extends EditorPane {
972972
reset(descriptionContent, ...renderLabelWithIcons(category.description));
973973
}
974974

975+
const titleContent = $('h3.category-title.max-lines-3', { 'x-category-title-for': category.id });
976+
reset(titleContent, ...renderLabelWithIcons(category.title));
977+
975978
return $('button.getting-started-category' + (category.isFeatured ? '.featured' : ''),
976979
{
977980
'x-dispatch': 'selectCategory:' + category.id,
@@ -980,7 +983,7 @@ export class GettingStartedPage extends EditorPane {
980983
featuredBadge,
981984
$('.main-content', {},
982985
this.iconWidgetFor(category),
983-
$('h3.category-title.max-lines-3', { 'x-category-title-for': category.id }, category.title,),
986+
titleContent,
984987
renderNewBadge ? newBadge : $('.no-badge'),
985988
$('a.codicon.codicon-close.hide-category-button', {
986989
'tabindex': 0,
@@ -1203,7 +1206,14 @@ export class GettingStartedPage extends EditorPane {
12031206
const p = append(container, $('p'));
12041207
for (const node of linkedText.nodes) {
12051208
if (typeof node === 'string') {
1206-
append(p, renderFormattedText(node, { inline: true, renderCodeSegments: true }));
1209+
const labelWithIcon = renderLabelWithIcons(node);
1210+
for (const element of labelWithIcon) {
1211+
if (typeof element === 'string') {
1212+
p.appendChild(renderFormattedText(element, { inline: true, renderCodeSegments: true }));
1213+
} else {
1214+
p.appendChild(element);
1215+
}
1216+
}
12071217
} else {
12081218
const link = this.instantiationService.createInstance(Link, p, node, { opener: (href) => this.runStepCommand(href) });
12091219
this.detailsPageDisposables.add(link);
@@ -1237,7 +1247,7 @@ export class GettingStartedPage extends EditorPane {
12371247
{},
12381248
this.iconWidgetFor(category),
12391249
$('.category-description-container', {},
1240-
$('h2.category-title.max-lines-3', { 'x-category-title-for': category.id }, category.title),
1250+
$('h2.category-title.max-lines-3', { 'x-category-title-for': category.id }, ...renderLabelWithIcons(category.title)),
12411251
$('.category-description.description.max-lines-3', { 'x-category-description-for': category.id }, ...renderLabelWithIcons(category.description))));
12421252

12431253
const stepListContainer = $('.step-list-container');
@@ -1286,8 +1296,11 @@ export class GettingStartedPage extends EditorPane {
12861296
const container = $('.step-description-container', { 'x-step-description-for': step.id });
12871297
this.buildStepMarkdownDescription(container, step.description);
12881298

1299+
const stepTitle = $('h3.step-title.max-lines-3', { 'x-step-title-for': step.id });
1300+
reset(stepTitle, ...renderLabelWithIcons(step.title));
1301+
12891302
const stepDescription = $('.step-container', {},
1290-
$('h3.step-title.max-lines-3', { 'x-step-title-for': step.id }, step.title),
1303+
stepTitle,
12911304
container,
12921305
);
12931306

@@ -1462,9 +1475,9 @@ registerThemingParticipant((theme, collector) => {
14621475

14631476
const iconColor = theme.getColor(textLinkForeground);
14641477
if (iconColor) {
1465-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .getting-started-category .codicon:not(.codicon-close) { color: ${iconColor} }`);
1466-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon.complete { color: ${iconColor} } `);
1467-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step.expanded .codicon { color: ${iconColor} } `);
1478+
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .icon-widget { color: ${iconColor} }`);
1479+
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon-getting-started-step-checked { color: ${iconColor} } `);
1480+
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step.expanded .codicon-getting-started-step-unchecked { color: ${iconColor} } `);
14681481
}
14691482

14701483
const buttonColor = theme.getColor(welcomePageTileBackground);
@@ -1497,7 +1510,7 @@ registerThemingParticipant((theme, collector) => {
14971510

14981511
const pendingStepColor = theme.getColor(descriptionForeground);
14991512
if (pendingStepColor) {
1500-
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon { color: ${pendingStepColor} } `);
1513+
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon-getting-started-step-unchecked { color: ${pendingStepColor} } `);
15011514
}
15021515

15031516
const emphasisButtonHoverBackground = theme.getColor(buttonHoverBackground);

‎src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css

Lines changed: 44 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,10 @@
188188
font-size: 14px;
189189
font-weight: 500;
190190
text-align: left;
191+
display: inline-block;
192+
overflow: hidden;
193+
text-overflow: ellipsis;
194+
white-space: nowrap;
191195
}
192196

193197
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideCategories .category-progress {
@@ -223,12 +227,24 @@
223227
padding-left: 1em;
224228
}
225229

226-
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideCategories .codicon {
230+
.monaco-workbench .part.editor>.content .gettingStartedContainer .icon-widget,
231+
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideCategories .icon-widget,
232+
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideCategories .featured-icon {
233+
font-size: 20px;
227234
padding-right: 8px;
228235
position: relative;
229236
top: 3px;
230237
}
231238

239+
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideCategories .codicon:not(.icon-widget, .featured-icon, .hide-category-button) {
240+
margin: 0 2px;
241+
}
242+
243+
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideCategories .codicon:first-child {
244+
margin-left: 0;
245+
}
246+
247+
232248
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideCategories .start-container img {
233249
padding-right: 8px;
234250
position: relative;
@@ -267,10 +283,6 @@
267283
overflow: hidden;
268284
}
269285

270-
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .codicon {
271-
font-size: 20px;
272-
}
273-
274286

275287
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .main-content {
276288
display: flex;
@@ -325,12 +337,9 @@
325337
}
326338

327339
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .codicon.hide-category-button {
328-
position: relative;
329-
top: 0px;
330-
align-self: start;
331-
left: 8px;
332-
font-size: 16px;
333-
margin-left: auto;
340+
position: absolute;
341+
top: 4px;
342+
right: 8px;
334343
}
335344

336345
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category.featured .icon-widget {
@@ -418,6 +427,11 @@
418427
width: inherit;
419428
}
420429

430+
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .step-title .codicon {
431+
position: relative;
432+
top: 2px;
433+
}
434+
421435
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-detail-columns .getting-started-detail-left>div {
422436
width: 100%;
423437
}
@@ -459,7 +473,8 @@
459473
display: none;
460474
}
461475

462-
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon {
476+
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon-getting-started-step-unchecked,
477+
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon-getting-started-step-checked {
463478
margin-right: 8px;
464479
}
465480

@@ -674,6 +689,10 @@
674689
margin: 0 0 4px 0;
675690
}
676691

692+
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails h2 .codicon {
693+
font-size: 20px;
694+
}
695+
677696
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails h3 {
678697
font-size: 13px;
679698
font-weight: 700;
@@ -786,3 +805,16 @@
786805
-webkit-box-orient: vertical;
787806
overflow: hidden;
788807
}
808+
809+
.monaco-workbench .part.editor>.content .gettingStartedContainer .hide-category-button {
810+
padding: 3px;
811+
border-radius: 5px;
812+
}
813+
814+
.monaco-workbench .part.editor>.content .gettingStartedContainer .hide-category-button::before {
815+
vertical-align: unset;
816+
}
817+
818+
.monaco-workbench .part.editor>.content .gettingStartedContainer .hide-category-button:hover {
819+
background-color: var(--vscode-toolbar-hoverBackground);
820+
}

0 commit comments

Comments
 (0)