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

Fix #115316: Getting started back button looks unstyled

Browse source
This commit is contained in:
Jackson Kearl 2021-02-03 15:45:35 -08:00 committed by Sandeep Somavarapu
parent 9ddea6f385
commit 55d04df641
3 changed files with 33 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -238,10 +238,11 @@
outline-style: solid;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .prev-button {
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .prev-button.button-link {
position: absolute;
left: -2px;
top: -10px;
left: 40px;
top: 5px;
padding: 0 2px 2px;
margin: 10px;
z-index: 1;
}
@ -252,7 +253,8 @@
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .prev-button .codicon {
position: relative;
top: 2px;
top: 3px;
left: -4px;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide .skip {

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

@ -294,8 +294,11 @@ export class GettingStartedPage extends Disposable {
}
this.buildCategorySlide(container, this.editorInput.selectedCategory, this.editorInput.selectedTask);
categoriesSlide.classList.add('prev');
this.setButtonEnablement(container, 'details');
} else {
tasksSlide.classList.add('next');
this.focusFirstUncompletedCategory(container);
this.setButtonEnablement(container, 'categories');
}
setTimeout(() => assertIsDefined(container.querySelector('.gettingStartedContainer')).classList.add('animationReady'), 0);
}
@ -339,6 +342,7 @@ export class GettingStartedPage extends Disposable {
this.buildCategorySlide(container, categoryID);
slides[currentSlide].classList.add('prev');
slides[currentSlide + 1].classList.remove('next');
this.setButtonEnablement(container, 'details');
}
});
}
@ -418,9 +422,30 @@ export class GettingStartedPage extends Disposable {
if (currentSlide > 0) {
slides[currentSlide].classList.add('next');
assertIsDefined(slides[currentSlide - 1]).classList.remove('prev');
this.setButtonEnablement(container, 'categories');
}
this.focusFirstUncompletedCategory(container);
});
}
private focusFirstUncompletedCategory(container: HTMLElement) {
let toFocus!: HTMLElement;
container.querySelectorAll('.category-progress').forEach(progress => {
const progressAmount = assertIsDefined(progress.querySelector('.progress-bar-inner') as HTMLDivElement).style.width;
if (!toFocus && progressAmount !== '100%') { toFocus = assertIsDefined(progress.parentElement?.parentElement); }
});
(toFocus ?? assertIsDefined(container.querySelector('button.skip')) as HTMLButtonElement).focus();
}
private setButtonEnablement(container: HTMLElement, toEnable: 'details' | 'categories') {
if (toEnable === 'categories') {
container.querySelector('.gettingStartedSlideDetails')!.querySelectorAll('button').forEach(button => button.disabled = true);
container.querySelector('.gettingStartedSlideCategory')!.querySelectorAll('button').forEach(button => button.disabled = false);
} else {
container.querySelector('.gettingStartedSlideDetails')!.querySelectorAll('button').forEach(button => button.disabled = false);
container.querySelector('.gettingStartedSlideCategory')!.querySelectorAll('button').forEach(button => button.disabled = true);
}
}
}
export class GettingStartedInputFactory implements IEditorInputFactory {
@ -503,6 +528,7 @@ registerThemingParticipant((theme, collector) => {
if (link) {
collector.addRule(`.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer a { color: ${link}; }`);
collector.addRule(`.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .button-link { color: ${link}; }`);
collector.addRule(`.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .button-link * { color: ${link}; }`);
}
const activeLink = theme.getColor(textLinkActiveForeground);
if (activeLink) {

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

@ -17,7 +17,7 @@ export default () => `
</div>
</div>
<div class="gettingStartedSlideDetails gettingStartedSlide detail">
<a class="prev-button" x-dispatch="scrollPrev"><span class="scroll-button codicon codicon-chevron-left"></span>Back</a>
<button class="prev-button button-link" x-dispatch="scrollPrev"><span class="scroll-button codicon codicon-chevron-left"></span>Back</a>
<div class="gettingStartedDetailsContent">
<div class="gap"></div>
<div class="getting-started-detail-columns">