From 0f7f6e338a4e86306474d4d01bdea9b8fe798017 Mon Sep 17 00:00:00 2001 From: Jackson Kearl Date: Tue, 26 Oct 2021 17:10:36 -0700 Subject: [PATCH] Fix #135381 --- .../gettingStarted/browser/gettingStarted.css | 17 +++++++++--- .../gettingStarted/browser/gettingStarted.ts | 26 ++++++++++++++----- 2 files changed, 32 insertions(+), 11 deletions(-) diff --git a/src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.css b/src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.css index d92e90cdc01d4..19cc2b251eb4e 100644 --- a/src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.css +++ b/src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.css @@ -717,10 +717,19 @@ text-align: center; } -.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .showOnStartup checkbox { - position: relative; - top: -2px; - left: 5px; +.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox { + color: inherit !important; + height: 18px; + width: 18px; + border: 1px solid transparent; + border-radius: 3px; + padding: 0; + margin-right: 9px; +} + + +.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox.codicon:not(.checked)::before { + opacity: 0; } .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideCategories>.gettingStartedCategoriesContainer>.footer p { diff --git a/src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.ts b/src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.ts index 7dc48dc3855f1..ef2cba6f3d9de 100644 --- a/src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.ts +++ b/src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.ts @@ -70,6 +70,8 @@ import { getTelemetryLevel } from 'vs/platform/telemetry/common/telemetryUtils'; import { WorkbenchStateContext } from 'vs/workbench/browser/contextkeys'; import { IsIOSContext } from 'vs/platform/contextkey/common/contextkeys'; import { AddRootFolderAction } from 'vs/workbench/browser/actions/workspaceActions'; +import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox'; +import { Codicon } from 'vs/base/common/codicons'; const SLIDE_TRANSITION_TIME_MS = 250; const configurationKey = 'workbench.startupEditor'; @@ -150,6 +152,7 @@ export class GettingStartedPage extends EditorPane { private layoutMarkdown: (() => void) | undefined; private webviewID = generateUuid(); + private categoriesSlideDisposables: DisposableStore; constructor( @ICommandService private readonly commandService: ICommandService, @@ -187,6 +190,8 @@ export class GettingStartedPage extends EditorPane { this.stepMediaComponent = $('.getting-started-media'); this.stepMediaComponent.id = generateUuid(); + this.categoriesSlideDisposables = this._register(new DisposableStore()); + this.contextService = this._register(contextService.createScoped(this.container)); inWelcomeContext.bindTo(this.contextService).set(true); embedderIdentifierContext.bindTo(this.contextService).set(productService.embedderIdentifier); @@ -861,10 +866,17 @@ export class GettingStartedPage extends EditorPane { } private async buildCategoriesSlide() { - const showOnStartupCheckbox = $('input.checkbox', { id: 'showOnStartup', type: 'checkbox' }) as HTMLInputElement; + this.categoriesSlideDisposables.clear(); + const showOnStartupCheckbox = new Checkbox({ + icon: Codicon.check, + actionClassName: 'getting-started-checkbox', + isChecked: this.configurationService.getValue(configurationKey) === 'welcomePage', + title: localize('checkboxTitle', "When checked, this page will be shown on startup."), + }); + showOnStartupCheckbox.domNode.id = 'showOnStartup'; - showOnStartupCheckbox.checked = this.configurationService.getValue(configurationKey) === 'welcomePage'; - this._register(addDisposableListener(showOnStartupCheckbox, 'click', () => { + this.categoriesSlideDisposables.add(showOnStartupCheckbox); + this.categoriesSlideDisposables.add(showOnStartupCheckbox.onChange(() => { if (showOnStartupCheckbox.checked) { this.telemetryService.publicLog2('gettingStarted.ActionExecuted', { command: 'showOnStartupChecked', argument: undefined }); this.configurationService.updateValue(configurationKey, 'welcomePage'); @@ -889,7 +901,7 @@ export class GettingStartedPage extends EditorPane { const footer = $('.footer', {}, $('p.showOnStartup', {}, - showOnStartupCheckbox, + showOnStartupCheckbox.domNode, $('label.caption', { for: 'showOnStartup' }, localize('welcomePage.showOnStartup', "Show welcome page on startup")) )); @@ -1638,16 +1650,16 @@ registerThemingParticipant((theme, collector) => { const checkboxBackground = theme.getColor(simpleCheckboxBackground); if (checkboxBackground) { - collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .showOnStartup .checkbox { background-color: ${checkboxBackground}; }`); + collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox { background-color: ${checkboxBackground} !important; }`); } const checkboxForeground = theme.getColor(simpleCheckboxForeground); if (checkboxForeground) { - collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .showOnStartup .checkbox { color: ${checkboxForeground}; }`); + collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox { color: ${checkboxForeground} !important; }`); } const checkboxBorder = theme.getColor(simpleCheckboxBorder); if (checkboxBorder) { - collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .showOnStartup .checkbox { border-color: ${checkboxBorder}; }`); + collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox { border-color: ${checkboxBorder} !important; }`); } });