maxmustermann/vscode
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Close #119722

Browse source
This commit is contained in:
Jackson Kearl 2021-05-21 18:27:34 -07:00
parent d6b5df5e19
commit 8f11975c47
No known key found for this signature in database
GPG key ID: DA09A59C409FC400
4 changed files with 70 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.css
View file

@ -556,6 +556,17 @@
left: -4px;
}
.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link .codicon-arrow-small-right {
position: relative;
top: 3px;
left: 2px;
}
.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link .codicon-check-all {
position: relative;
top: 3px;
}
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlide .skip {
display: block;
margin: 2px auto;
@ -605,6 +616,11 @@
max-width: 100%;
}
.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link.next {
position: absolute;
right: 0;
}
.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link:hover {
background: transparent;
}

55
src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.ts
View file

@ -290,10 +290,7 @@ export class GettingStartedPage extends EditorPane {
break;
}
case 'hideCategory': {
const selectedCategory = this.gettingStartedCategories.find(category => category.id === argument);
if (!selectedCategory) { throw Error('Could not find category with ID ' + argument); }
this.setHiddenCategories([...this.getHiddenCategories().add(argument)]);
this.gettingStartedList?.rerender();
this.hideCategory(argument);
break;
}
// Use selectTask over selectStep to keep telemetry consistant:https://github.com/microsoft/vscode/issues/122256
@ -305,6 +302,19 @@ export class GettingStartedPage extends EditorPane {
this.toggleStepCompletion(argument);
break;
}
case 'allDone': {
this.markAllStepsComplete();
break;
}
case 'nextSection': {
const next = this.currentCategory?.next;
if (next) {
this.scrollToCategory(next);
} else {
console.error('Error scrolling to next section of', this.currentCategory);
}
break;
}
default: {
console.error('Dispatch to', command, argument, 'not defined');
break;
@ -317,6 +327,27 @@ export class GettingStartedPage extends EditorPane {
});
}
private hideCategory(categoryId: string) {
const selectedCategory = this.gettingStartedCategories.find(category => category.id === categoryId);
if (!selectedCategory) { throw Error('Could not find category with ID ' + categoryId); }
this.setHiddenCategories([...this.getHiddenCategories().add(categoryId)]);
this.gettingStartedList?.rerender();
}
private markAllStepsComplete() {
if (!this.currentCategory || this.currentCategory.content.type !== 'steps') {
throw Error('cannot run step action for category of non steps type' + this.currentCategory?.id);
}
this.currentCategory.content.steps.forEach(step => {
if (!step.done) {
this.gettingStartedService.progressStep(step.id);
}
});
this.hideCategory(this.currentCategory.id);
this.scrollPrev();
}
private toggleStepCompletion(argument: string) {
if (!this.currentCategory || this.currentCategory.content.type !== 'steps') {
throw Error('cannot run step action for category of non steps type' + this.currentCategory?.id);
@ -989,7 +1020,19 @@ export class GettingStartedPage extends EditorPane {
stepDescription);
});
const stepsContainer = $('.getting-started-detail-container', { 'role': 'list' }, ...categoryElements);
const showNextCategory =
this.gettingStartedCategories.find(_category => _category.id === category.next && _category.content.type === 'steps' && !_category.content.done);
const stepsContainer = $(
'.getting-started-detail-container', { 'role': 'list' },
...categoryElements,
$('.done-next-container', {},
$('button.button-link.all-done', { 'x-dispatch': 'allDone' }, $('span.codicon.codicon-check-all'), localize('allDone', "Mark Done")),
...(showNextCategory
? [$('button.button-link.next', { 'x-dispatch': 'nextSection' }, localize('nextOne', "Next Section"), $('span.codicon.codicon-arrow-small-right'))]
: []),
)
);
this.detailsScrollbar = this._register(new DomScrollableElement(stepsContainer, { className: 'steps-container' }));
const stepListComponent = this.detailsScrollbar.getDomNode();
@ -1249,7 +1292,7 @@ registerThemingParticipant((theme, collector) => {
if (link) {
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.codicon-close) { color: ${link}; }`);
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link { color: ${link}; }`);
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link .scroll-button { color: ${link}; }`);
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link .codicon { color: ${link}; }`);
}
const activeLink = theme.getColor(textLinkActiveForeground);
if (activeLink) {

2
src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStartedService.ts
View file

@ -62,6 +62,7 @@ export interface IGettingStartedWalkthroughDescriptor {
title: string
description: string
order: number
next?: string
icon:
| { type: 'icon', icon: ThemeIcon }
| { type: 'image', path: string }
@ -88,6 +89,7 @@ export interface IGettingStartedCategory {
title: string
description: string
order: number
next?: string
icon:
| { type: 'icon', icon: ThemeIcon }
| { type: 'image', path: string }

3
src/vs/workbench/contrib/welcome/gettingStarted/common/gettingStartedContent.ts
View file

@ -30,6 +30,7 @@ export type BuiltinGettingStartedCategory = {
id: string
title: string,
description: string,
next?: string,
icon: ThemeIcon,
when?: string,
content:
@ -172,6 +173,7 @@ export const walkthroughs: GettingStartedWalkthroughContent = [
title: localize('gettingStarted.setup.title', "Customize your Setup"),
description: localize('gettingStarted.setup.description', "Extend and customize VS Code to make it yours."),
icon: setupIcon,
next: 'Beginner',
when: 'remoteName != codespaces',
content: {
type: 'steps',
@ -267,6 +269,7 @@ export const walkthroughs: GettingStartedWalkthroughContent = [
id: 'Beginner',
title: localize('gettingStarted.beginner.title', "Learn the Fundamentals"),
icon: beginnerIcon,
next: 'Intermediate',
description: localize('gettingStarted.beginner.description', "Jump right into VS Code and get an overview of the must-have features."),
content: {
type: 'steps',