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

Update renderings of getting started items based on overrides

Browse source
This commit is contained in:
Jackson Kearl 2021-04-16 17:22:23 -07:00
parent d7f5575367
commit 34bdd983e2
No known key found for this signature in database
GPG key ID: DA09A59C409FC400
1 changed files with 90 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -158,7 +158,9 @@ export class GettingStartedPage extends EditorPane {
ourTask.title = task.title;
ourTask.description = task.description;
ourTask.media.path = task.media.path;
// TODO: JacksonKearl, update the actual rendering if not much time has passed
this.container.querySelectorAll<HTMLDivElement>(`[x-task-title-for="${task.id}"]`).forEach(item => (item as HTMLDivElement).innerText = task.title);
this.container.querySelectorAll<HTMLDivElement>(`[x-task-description-for="${task.id}"]`).forEach(item => this.buildTaskMarkdownDescription((item), task.description));
}));
this._register(this.gettingStartedService.onDidChangeCategory(category => {
@ -167,7 +169,9 @@ export class GettingStartedPage extends EditorPane {
ourCategory.title = category.title;
ourCategory.description = category.description;
// TODO: JacksonKearl, update the actual rendering if not much time has passed
this.container.querySelectorAll<HTMLDivElement>(`[x-category-title-for="${category.id}"]`).forEach(item => (item as HTMLDivElement).innerText = ourCategory.title);
this.container.querySelectorAll<HTMLDivElement>(`[x-category-description-for="${category.id}"]`).forEach(item => (item as HTMLDivElement).innerText = ourCategory.description);
}));
this._register(this.gettingStartedService.onDidProgressTask(task => {
@ -618,7 +622,7 @@ export class GettingStartedPage extends EditorPane {
'x-dispatch': 'hideCategory:' + category.id,
'title': localize('close', "Hide"),
}),
$('h3.category-title', {}, category.title),
$('h3.category-title', { 'x-category-title-for': category.id }, category.title),
$('.category-progress', { 'x-data-category-id': category.id, },
$('.progress-bar-outer', { 'role': 'progressbar' },
$('.progress-bar-inner'))));
@ -703,86 +707,87 @@ export class GettingStartedPage extends EditorPane {
return category.icon.type === 'icon' ? $(ThemeIcon.asCSSSelector(category.icon.icon)) : $('img.category-icon', { src: category.icon.path });
}
private buildTaskMarkdownDescription(container: HTMLElement, text: LinkedText[]) {
while (container.firstChild) { container.removeChild(container.firstChild); }
for (const linkedText of text) {
if (linkedText.nodes.length === 1 && typeof linkedText.nodes[0] !== 'string') {
const node = linkedText.nodes[0];
const buttonContainer = append(container, $('.button-container'));
const button = new Button(buttonContainer, { title: node.title, supportIcons: true });
const isCommand = node.href.startsWith('command:');
const toSide = node.href.startsWith('command:toSide:');
const command = node.href.replace(/command:(toSide:)?/, 'command:');
button.label = node.label;
button.onDidClick(async e => {
e.stopPropagation();
e.preventDefault();
this.telemetryService.publicLog2<GettingStartedActionEvent, GettingStartedActionClassification>('gettingStarted.ActionExecuted', { command: 'runTaskAction', argument: node.href });
const fullSize = this.groupsService.contentDimension;
if (toSide && fullSize.width > 700) {
if (this.groupsService.count === 1) {
this.groupsService.addGroup(this.groupsService.groups[0], GroupDirection.LEFT, { activate: true });
let gettingStartedSize: number;
if (fullSize.width > 1600) {
gettingStartedSize = 800;
} else if (fullSize.width > 800) {
gettingStartedSize = 400;
} else {
gettingStartedSize = 350;
}
const gettingStartedGroup = this.groupsService.getGroups(GroupsOrder.MOST_RECENTLY_ACTIVE).find(group => (group.activeEditor instanceof GettingStartedInput));
this.groupsService.setSize(assertIsDefined(gettingStartedGroup), { width: gettingStartedSize, height: fullSize.height });
}
const nonGettingStartedGroup = this.groupsService.getGroups(GroupsOrder.MOST_RECENTLY_ACTIVE).find(group => !(group.activeEditor instanceof GettingStartedInput));
if (nonGettingStartedGroup) {
this.groupsService.activateGroup(nonGettingStartedGroup);
(document.querySelector('div.editor-group-container.active') as any)?.focus?.();
}
}
this.openerService.open(command, { allowCommands: true });
}, null, this.detailsPageDisposables);
if (isCommand) {
const keybindingLabel = this.getKeybindingLabel(command);
if (keybindingLabel) {
container.appendChild($('span.shortcut-message', {}, 'Tip: Use keyboard shortcut ', $('span.keybinding', {}, keybindingLabel)));
}
}
this.detailsPageDisposables.add(button);
this.detailsPageDisposables.add(attachButtonStyler(button, this.themeService));
} else {
const p = append(container, $('p'));
for (const node of linkedText.nodes) {
if (typeof node === 'string') {
append(p, renderFormattedText(node, { inline: true, renderCodeSegements: true }));
} else {
const link = this.instantiationService.createInstance(Link, node);
append(p, link.el);
this.detailsPageDisposables.add(link);
this.detailsPageDisposables.add(attachLinkStyler(link, this.themeService));
}
}
}
}
return container;
}
private buildCategorySlide(categoryID: string, selectedItem?: string) {
if (this.detailsScrollbar) { this.detailsScrollbar.dispose(); }
this.detailsPageDisposables.clear();
const renderMarkdownDescription = (text: LinkedText[]): HTMLElement => {
const container = $('.task-description-container');
for (const linkedText of text) {
if (linkedText.nodes.length === 1 && typeof linkedText.nodes[0] !== 'string') {
const node = linkedText.nodes[0];
const buttonContainer = append(container, $('.button-container'));
const button = new Button(buttonContainer, { title: node.title, supportIcons: true });
const isCommand = node.href.startsWith('command:');
const toSide = node.href.startsWith('command:toSide:');
const command = node.href.replace(/command:(toSide:)?/, 'command:');
button.label = node.label;
button.onDidClick(async e => {
e.stopPropagation();
e.preventDefault();
this.telemetryService.publicLog2<GettingStartedActionEvent, GettingStartedActionClassification>('gettingStarted.ActionExecuted', { command: 'runTaskAction', argument: node.href });
const fullSize = this.groupsService.contentDimension;
if (toSide && fullSize.width > 700) {
if (this.groupsService.count === 1) {
this.groupsService.addGroup(this.groupsService.groups[0], GroupDirection.LEFT, { activate: true });
let gettingStartedSize: number;
if (fullSize.width > 1600) {
gettingStartedSize = 800;
} else if (fullSize.width > 800) {
gettingStartedSize = 400;
} else {
gettingStartedSize = 350;
}
const gettingStartedGroup = this.groupsService.getGroups(GroupsOrder.MOST_RECENTLY_ACTIVE).find(group => (group.activeEditor instanceof GettingStartedInput));
this.groupsService.setSize(assertIsDefined(gettingStartedGroup), { width: gettingStartedSize, height: fullSize.height });
}
const nonGettingStartedGroup = this.groupsService.getGroups(GroupsOrder.MOST_RECENTLY_ACTIVE).find(group => !(group.activeEditor instanceof GettingStartedInput));
if (nonGettingStartedGroup) {
this.groupsService.activateGroup(nonGettingStartedGroup);
(document.querySelector('div.editor-group-container.active') as any)?.focus?.();
}
}
this.openerService.open(command, { allowCommands: true });
}, null, this.detailsPageDisposables);
if (isCommand) {
const keybindingLabel = this.getKeybindingLabel(command);
if (keybindingLabel) {
container.appendChild($('span.shortcut-message', {}, 'Tip: Use keyboard shortcut ', $('span.keybinding', {}, keybindingLabel)));
}
}
this.detailsPageDisposables.add(button);
this.detailsPageDisposables.add(attachButtonStyler(button, this.themeService));
} else {
const p = append(container, $('p'));
for (const node of linkedText.nodes) {
if (typeof node === 'string') {
append(p, renderFormattedText(node, { inline: true, renderCodeSegements: true }));
} else {
const link = this.instantiationService.createInstance(Link, node);
append(p, link.el);
this.detailsPageDisposables.add(link);
this.detailsPageDisposables.add(attachLinkStyler(link, this.themeService));
}
}
}
}
return container;
};
const category = this.gettingStartedCategories.find(category => category.id === categoryID);
if (!category) { throw Error('could not find category with ID ' + categoryID); }
@ -793,8 +798,8 @@ export class GettingStartedPage extends EditorPane {
{},
this.iconWidgetFor(category),
$('.category-description-container', {},
$('h2.category-title', {}, category.title),
$('.category-description.description', {}, category.description)));
$('h2.category-title', { 'x-category-title-for': category.id }, category.title),
$('.category-description.description', { 'x-category-description-for': category.id }, category.description)));
const categoryElements = category.content.items.map(
(task, i, arr) => {
@ -804,9 +809,12 @@ export class GettingStartedPage extends EditorPane {
'x-dispatch': 'toggleTaskCompletion:' + task.id,
});
const container = $('.task-description-container', { 'x-task-description-for': task.id });
this.buildTaskMarkdownDescription(container, task.description);
const taskDescription = $('.task-container', {},
$('h3.task-title', {}, task.title),
renderMarkdownDescription(task.description),
$('h3.task-title', { 'x-task-title-for': task.id }, task.title),
container,
$('.image-description', { 'aria-label': localize('imageShowing', "Image showing {0}", task.media.altText) }),
);