-
+
-
-
-
Preview
- -${escape(localize('welcomePage.previewHeader', "This page is in preview"))}
-${escape(localize('welcomePage.previewBody', "Preview features introduce new functionalities that are on track to becoming a permanent part the product. They are stable, but need additional accessibility improvements. We welcome your early feedback while they are under development."))}
+
+
+
-
- Preview
+ +${escape(localize('welcomePage.previewHeader', "This page is in preview"))}
+${escape(localize('welcomePage.previewBody', "Preview features introduce new functionalities that are on track to becoming a permanent part the product. They are stable, but need additional accessibility improvements. We welcome your early feedback while they are under development."))}
-
- x
-
${escape(localize('welcomePage.previewHeader', "This page is in preview"))}
-${escape(localize('welcomePage.previewBody', "Preview features introduce new functionalities that are on track to becoming a permanent part the product. They are stable, but need additional accessibility improvements. We welcome your early feedback while they are under development."))}
+
+
-
+ x
+
${escape(localize('welcomePage.previewHeader', "This page is in preview"))}
+${escape(localize('welcomePage.previewBody', "Preview features introduce new functionalities that are on track to becoming a permanent part the product. They are stable, but need additional accessibility improvements. We welcome your early feedback while they are under development."))}
+
-
+
-
-
+
-
+
-
+
-
-
+
+
${escape(localize('welcomePage.createConnection', "Create a connection"))}
${escape(localize('welcomePage.createConnectionBody', "Connect to a database instance through the connection dialog."))}
@@ -77,9 +77,9 @@ export default () => `
-
-
+
${escape(localize('welcomePage.runQuery', "Run a query"))}
${escape(localize('welcomePage.runQueryBody', "Interact with data through a query editor."))}
@@ -87,8 +87,8 @@ export default () => `
-
-
+
+
${escape(localize('welcomePage.createNotebook', "Create a notebook"))}
${escape(localize('welcomePage.createNotebookBody', "Build a new notebook using a native notebook editor."))}
@@ -96,8 +96,8 @@ export default () => `
-
-
-
-
+
+
${escape(localize('welcomePage.resources', "Resources"))}
-
-
-
- ${escape(localize('welcomePage.name', "Name"))}
-${escape(localize('welcomePage.lastOpened', "Last Opened"))}
+
+
+
${escape(localize('welcomePage.name', "Name"))}
+${escape(localize('welcomePage.lastOpened', "Last Opened"))}
No recent folders
--
+
@@ -138,42 +138,42 @@ export default () => `
+
${escape(localize('welcomePage.usefuLinks', "Useful Links"))}
-${escape(localize('welcomePage.gettingStartedBody', "Discover the capabilities offered by Azure Data Studio and learn how to make the most of them."))}
-${escape(localize('welcomePage.documentationBody', "Visit the documentation center for quickstarts, how-to guides, and references for PowerShell, APIs, etc."))}
-
+
Videos
-
-
-
- })
+
+
+
-
- })
+
-
+
+
-
Extend your data studio
- ${escape(localize('welcomePage.showAll', "Show All"))} + ${escape(localize('welcomePage.showAll', "Show All"))}
+
-
-
-
+ class="ads-grid tile no-hover extension-pack">
+
+
+
-
-
-
+
-
+
diff --git a/src/sql/workbench/contrib/welcome/page/browser/gettingStartedTour.css b/src/sql/workbench/contrib/welcome/page/browser/gettingStartedTour.css new file mode 100644 index 0000000000..cbdb593827 --- /dev/null +++ b/src/sql/workbench/contrib/welcome/page/browser/gettingStartedTour.css @@ -0,0 +1,227 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the Source EULA. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +.ads-tour:focus { + outline: 0 none !important; +} + +.monaco-workbench>.ads-tour { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 9999; + font-size: 1em; + transition: font-size .25s; + outline: 0; +} + +#workbench\.parts\.editor { + transition: filter .25s, opacity .2s; +} + +.monaco-workbench.blur-background #workbench\.parts\.editor, +.monaco-workbench.blur-background #workbench\.parts\.panel, +.monaco-workbench.blur-background #workbench\.parts\.sidebar { + filter: blur(2px); + opacity: .4; +} + +.hc-black .monaco-workbench.blur-background #workbench\.parts\.editor, +.hc-black .monaco-workbench.blur-background #workbench\.parts\.panel, +.hc-black .monaco-workbench.blur-background #workbench\.parts\.sidebar { + opacity: .2; +} + +.guided-tour .ads-tour-hide { + display: none; +} + +.guided-tour p { + font-size: 1.2em; + font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; + font-weight: 400; +} + +.ads-tour-popup .ads-tour-popup-text-container { + padding: 20px 15px 15px 20px; +} + +.ads-tour-popup .ads-tour-popup-text-container p { + font-size: 1em; +} + +.ads-tour-popup { + position: absolute; + width: 400px; + left: 45px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} + +.ads-tour-btn-container { + display: flex; + justify-content: flex-end; + align-items: center; +} + +.ads-tour-btn-container p { + font-size: 1.5em; + margin: 0; + margin-left: 15px; +} + +.ads-tour-btn-container:first-of-type(p) { + margin-bottom: 20px; +} + +.ads-tour-popup .ads-tour-btn-exit { + background: none; + position: absolute; + top: 2px; + right: 10px; + font-size: 1.185em; + font-family: inherit; + transform: scaleX(1.4); +} + +.ads-tour-popup .ads-tour-btn-exit:hover { + cursor: pointer; +} + +.ads-tour-popup .monaco-button { + box-sizing: border-box; + width: 77px; + height: 34px; + padding-top: 1px; + font-size: 1.08em; + line-height: 29px; + border-radius: 2px; + display: flex; + align-content: center; + justify-content: center; + text-align: center; + text-decoration: none; + margin: 0; + align-self: flex-end; + cursor: pointer; +} + +.ads-tour-popup .flex.column { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; +} + +.ads-tour-popup h1, +.ads-tour-popup p { + font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; + font-weight: 400; +} + +.ads-tour-popup h1 { + margin: 0; + font-size: 20px; +} + +.ads-tour-popup.arrow-left:after { + content: " "; + position: absolute; + left: -10px; + top: 8px; + border-top: 10px solid transparent; + border-left: none; + border-bottom: 10px solid transparent; +} + +.ads-tour-popup.arrow-top:after { + content: " "; + position: absolute; + left: 0; + right: 0; + border-top: 10px solid transparent; + border-left: none; + border-bottom: 10px solid transparent; + transform: rotate(90deg); + bottom: 509px; +} + +.ads-tour-popup.arrow-bottom-left:after { + content: " "; + position: absolute; + left: -10px; + border-top: 10px solid transparent; + border-left: none; + border-bottom: 10px solid transparent; + bottom: 3px; +} + +.ads-tour-popup.arrow-center-left:after { + content: " "; + position: absolute; + left: -10px; + border-top: 10px solid transparent; + border-left: none; + border-bottom: 10px solid transparent; + bottom: 145px; +} + +.ads-tour-popup { + max-height: 361px; + display: none; + z-index: 1; +} + +.ads-tour-popup.ads-tour-show { + display: block; +} + +.tour-overlay { + width: 100%; + height: 100%; + position: absolute; + top: 30px; + right: 0; + bottom: 0; + left: 0; + opacity: .6; +} + +.ads-tour-popup .ads-tour-img { + width: 400px; + height: 178px; +} + +.ads-tour-btn-container .ads-tour-docs-link { + align-self: center; + justify-self: flex-start; + margin-right: auto; + text-decoration: underline; +} + +.ads-tour-btn { + box-sizing: border-box; + width: 100%; + height: 34px; + padding-top: 1px; + font-size: 1.08em; + line-height: 29px; + border-radius: 2px; + display: flex; + align-content: center; + justify-content: center; + text-align: center; + text-decoration: none; + margin: 10px 0; +} + +.monaco-workbench .activitybar>.content :not(.monaco-menu)>.monaco-action-bar .action-label.codicon.subject-element-focused { + z-index: 1!important; + pointer-events: none!important; +} diff --git a/src/sql/workbench/contrib/welcome/page/browser/gettingStartedTour.ts b/src/sql/workbench/contrib/welcome/page/browser/gettingStartedTour.ts new file mode 100644 index 0000000000..b901f91799 --- /dev/null +++ b/src/sql/workbench/contrib/welcome/page/browser/gettingStartedTour.ts @@ -0,0 +1,358 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the Source EULA. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import * as dom from 'vs/base/browser/dom'; +import 'vs/css!./gettingStartedTour'; +import { ILayoutService } from 'vs/platform/layout/browser/layoutService'; +import { localize } from 'vs/nls'; +import { Action } from 'vs/base/common/actions'; +import { Disposable } from 'vs/base/common/lifecycle'; +import { RawContextKey, IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; +import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; +import { registerThemingParticipant } from 'vs/platform/theme/common/themeService'; +import { buttonBackground, buttonForeground } from 'vs/platform/theme/common/colorRegistry'; +import { Color } from 'vs/base/common/color'; +import { Registry } from 'vs/platform/registry/common/platform'; +import { IWorkbenchActionRegistry, Extensions } from 'vs/workbench/common/actions'; +import { SyncActionDescriptor } from 'vs/platform/actions/common/actions'; +import { KeyCode } from 'vs/base/common/keyCodes'; +import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; +import { Button } from 'sql/base/browser/ui/button/button'; + +const $ = dom.$; +interface TourData { + key: string; + order: string; + header: string; + body: string; + step: string; + elmClass: string; + id: string; + btnId: string; + btnText: string; + docs?: string; + elementToAppendTo: string; + command?: string; + subjectImage?: string; + arrow: string; + popupImage: string; +} + +const tourData: TourData[] = [ + { key: 'connections', order: '1', header: localize('GuidedTour.connections', "Connections"), body: localize('GuidedTour.makeConnections', "Connect, query, and manage your connections from SQL Server, Azure, and more."), step: localize('GuidedTour.one', "1"), elmClass: 'overview-tour-connections', id: 'overview-tour-connections', btnId: 'overview-tour-connections-btn', btnText: localize('GuidedTour.next', "Next"), docs: 'https://aka.ms/ads-connections-quickstart', elementToAppendTo: '.action-label.dataExplorer', arrow: 'arrow-left', popupImage: './../../gettingStarted/media/connections.png' }, + { key: 'jupyer_books', order: '2', header: localize('GuidedTour.notebooks', "Notebooks"), body: localize('GuidedTour.gettingStartedNotebooks', "Get started creating your own notebook or collection of notebooks in a single place."), step: localize('GuidedTour.two', "2"), elmClass: 'overview-tour-jupyterBooks', id: 'overview-tour-jupyterBooks', btnId: 'overview-tour-jupyter-btn', btnText: localize('GuidedTour.next', "Next"), docs: 'https://aka.ms/ads-notebooks', elementToAppendTo: '.action-label.activity-workbench-view-extension-books-explorer', arrow: 'arrow-left', popupImage: './../../gettingStarted/media/notebooks.png' }, + { key: 'extensions', order: '3', header: localize('GuidedTour.extensions', "Extensions"), body: localize('GuidedTour.addExtensions', "Extend the functionality of Azure Data Studio by installing extensions developed by us/Microsoft as well as the third-party community (you!)."), step: localize('GuidedTour.three', "3"), elmClass: 'overview-tour-extensions', id: 'overview-tour-extensions', btnId: 'overview-tour-extensions-btn', btnText: localize('GuidedTour.next', "Next"), docs: 'https://aka.ms/ads-extensions', elementToAppendTo: '.action-label.codicon-extensions', arrow: 'arrow-left', popupImage: './../../gettingStarted/media/extensions.png' }, + { key: 'settings', order: '4', header: localize('GuidedTour.settings', "Settings"), body: localize('GuidedTour.makeConnesetSettings', "Customize Azure Data Studio based on your preferences. You can configure Settings like autosave and tab size, personalize your Keyboard Shortcuts, and switch to a Color Theme of your liking."), step: localize('GuidedTour.four', "4"), elmClass: 'overview-tour-settings', id: 'overview-tour-settings', btnId: 'overview-tour-settings-btn', btnText: localize('GuidedTour.next', "Next"), elementToAppendTo: '.codicon-settings-gear', arrow: 'arrow-bottom-left', popupImage: '../../gettingStarted/media/settings.png' }, + { key: 'welcome_page', order: '5', header: localize('GuidedTour.welcomePage', "Welcome Page"), body: localize('GuidedTour.discoverWelcomePage', "Discover top features, recently opened files, and recommended extensions on the Welcome page. For more information on how to get started in Azure Data Studio, check out our videos and documentation."), step: localize('GuidedTour.five', "5"), elmClass: 'overview-tour-home', id: 'overview-tour-home', btnId: 'overview-tour-home-btn', btnText: localize('GuidedTour.finish', "Finish"), elementToAppendTo: 'center', arrow: 'none', popupImage: '../../gettingStarted/media/welcome.png' }, +]; + +const IS_OVERLAY_VISIBLE = new RawContextKey('interfaceOverviewVisible', false);
+
+let guidedTour: GuidedTour;
+
+export class GuidedTourAction extends Action {
+ public static readonly ID = 'workbench.action.createGuidedTour';
+ public static readonly LABEL = localize('guidedTour', "User Welcome Tour");
+
+ constructor(
+ id: string,
+ label: string,
+ @IInstantiationService private readonly instantiationService: IInstantiationService
+ ) {
+ super(id, label);
+ }
+
+ public run(): Promise {
+ if (!guidedTour) {
+ guidedTour = this.instantiationService.createInstance(GuidedTour);
+ }
+ guidedTour.create();
+ return Promise.resolve();
+ }
+}
+
+export class HideGuidedTourAction extends Action {
+ public static readonly ID = 'workbench.action.hideGuidedTour';
+ public static readonly LABEL = localize('hideGuidedTour', "Hide Welcome Tour");
+
+ constructor(
+ id: string,
+ label: string
+ ) {
+ super(id, label);
+ }
+
+ public run(): Promise {
+ if (guidedTour) {
+ guidedTour.hide();
+ }
+ return Promise.resolve();
+ }
+}
+
+export class GuidedTour extends Disposable {
+ private _overlayVisible: IContextKey;
+ private _overlay!: HTMLElement;
+
+ constructor(
+ @ILayoutService private readonly layoutService: ILayoutService,
+ @IContextKeyService private readonly _contextKeyService: IContextKeyService,
+ ) {
+ super();
+ this._overlayVisible = IS_OVERLAY_VISIBLE.bindTo(this._contextKeyService);
+ }
+
+ public create(): void {
+ const offset = this.layoutService.offset?.top ?? 0;
+ const tourElements = [];
+ this._overlay = dom.append(this.layoutService.container, $('.ads-tour'));
+ this._overlay.style.top = `${offset}px`;
+ this._overlay.style.height = `calc(100% - ${offset}px)`;
+ this._overlay.style.display = 'none';
+ this._overlay.tabIndex = -1;
+
+ this._overlay.addEventListener('keydown', (e) => {
+ let event = new StandardKeyboardEvent(e);
+ if (event.equals(KeyCode.Escape)) {
+ this.hide();
+ }
+ });
+
+ tourData.forEach(({ key, order, header, body, step, elmClass, id, btnId, btnText, docs, elementToAppendTo, arrow, popupImage }, i): void => {
+ const container = document.createElement('div');
+ let positionVertical;
+ let positionHorizontal;
+ let subjectElement;
+ if (elementToAppendTo !== 'center') {
+ subjectElement = document.querySelector(elementToAppendTo) as HTMLElement;
+ const subjectElementPosition = subjectElement.getBoundingClientRect();
+ positionHorizontal = Math.round((subjectElementPosition.left + 70));
+ positionVertical = Math.round((subjectElementPosition.top - 22));
+ subjectElement.style.pointerEvents = 'none';
+ }
+ const flexClasses = ['flex', 'column'];
+ const btnContainer = document.createElement('div');
+ const flexContainer = document.createElement('div');
+ const headerTag = document.createElement('h1');
+ const bodyTag = document.createElement('p');
+ const stepText = document.createElement('p');
+ if (docs) {
+ const docsLink = document.createElement('a');
+ docsLink.classList.add('ads-tour-docs-link');
+ docsLink.innerText = localize('GuidedTour.readMore', "Read more");
+ docsLink.href = docs;
+ docsLink.target = '_blank';
+ btnContainer.appendChild(docsLink);
+ }
+ const textContainer = document.createElement('div');
+ headerTag.tabIndex = 2;
+ bodyTag.tabIndex = 3;
+ const exitButton = document.createElement('div');
+ exitButton.classList.add('ads-tour-btn-exit');
+ exitButton.innerText = 'x';
+ const img = document.createElement('img');
+ const gif = require.toUrl(popupImage);
+ img.src = require.toUrl(gif);
+ img.classList.add('ads-tour-img');
+ flexContainer.classList.add(...flexClasses);
+ container.classList.add('ads-tour-popup');
+ container.setAttribute('data-order', order);
+ btnContainer.classList.add('ads-tour-btn-container');
+ textContainer.classList.add('ads-tour-popup-text-container');
+ container.classList.add('ads-tour-element');
+ container.id = id;
+ if (i !== 0) {
+ container.classList.add('ads-tour-hide');
+ } else {
+ container.classList.add('ads-tour-show');
+ }
+ headerTag.innerText = header;
+ bodyTag.innerText = body;
+ stepText.innerText = `${step} of ${tourData.length}`;
+ let button = new Button(btnContainer);
+ button.icon = '';
+ button.label = btnText;
+ btnContainer.appendChild(stepText);
+ flexContainer.appendChild(img);
+ flexContainer.appendChild(textContainer);
+ textContainer.appendChild(headerTag);
+ textContainer.appendChild(bodyTag);
+ textContainer.appendChild(btnContainer);
+ container.appendChild(exitButton);
+ container.style.position = 'absolute';
+ container.appendChild(flexContainer);
+ if (key === 'settings') {
+ container.style.top = (positionVertical - 330) + 'px';
+ container.style.left = positionHorizontal + 'px';
+ }
+ else if (elementToAppendTo === 'center') {
+ container.style.margin = 'auto';
+ container.style.left = '0px';
+ container.style.right = '0px';
+ container.style.bottom = '0px';
+ container.style.top = '0px';
+ } else {
+ container.style.top = (positionVertical) + 'px';
+ container.style.left = positionHorizontal + 'px';
+ }
+ container.classList.add(arrow);
+ this._overlay.append(container, $(`.${elmClass}`));
+ tourElements.push(container);
+ });
+ this.buildInteractions();
+ }
+
+ private findWithAttr(array: TourData[], attr: string, value: string): number {
+ for (let i = 0; i < array.length; i += 1) {
+ if (array[i][attr] === value) {
+ return i;
+ }
+ }
+ return -1;
+ }
+
+ private tourEvents(popups: NodeListOf, popupsLength: number, i: number): void {
+ if (i === (popupsLength - 1)) {
+ this.hide();
+ return;
+ }
+ let next = i + 1;
+ const h1: HTMLElement = popups[next].querySelector('.ads-tour-popup-text-container h1');
+ const popupId = popups[next].getAttribute('id');
+ const popupItem = this.findWithAttr(tourData, 'id', popupId);
+ let elementClassToAppendTo = tourData[popupItem].elementToAppendTo;
+ let tourItem = document.querySelector(`#${tourData[popupItem].elmClass}`) as HTMLElement;
+ let positionVertical;
+ let positionHorizontal;
+ let subjectElement = tourItem as HTMLElement;
+ if (elementClassToAppendTo !== 'center') {
+ subjectElement = document.querySelector(elementClassToAppendTo) as HTMLElement;
+ const subjectElementPosition = subjectElement.getBoundingClientRect();
+ positionHorizontal = Math.round((subjectElementPosition.left + 70));
+ positionVertical = Math.round((subjectElementPosition.top - 22));
+ subjectElement.style.pointerEvents = 'none';
+ }
+ if (elementClassToAppendTo === '.codicon-settings-gear') {
+ tourItem.style.top = (positionVertical - 330) + 'px';
+ tourItem.style.left = positionHorizontal + 'px';
+ }
+ else if (elementClassToAppendTo === 'center') {
+ tourItem.style.margin = 'auto';
+ tourItem.style.left = '0px';
+ tourItem.style.right = '0px';
+ tourItem.style.bottom = '0px';
+ tourItem.style.top = '0px';
+ } else {
+ tourItem.style.top = (positionVertical) + 'px';
+ tourItem.style.left = positionHorizontal + 'px';
+ }
+ popups[i].classList.add('ads-tour-hide');
+ popups[i].classList.remove('ads-tour-show');
+ popups[next].classList.add('ads-tour-show');
+ popups[next].classList.remove('ads-tour-hide');
+ h1.focus();
+ }
+
+
+ private buildInteractions(): void {
+ const popups = document.querySelectorAll('.ads-tour-popup') as NodeListOf;
+ const menuBarItems = document.querySelectorAll('.menubar-menu-button') as NodeListOf;
+ const context = this;
+ menuBarItems.forEach((elm) => {
+ elm.style.pointerEvents = 'none';
+ });
+ popups.forEach(function (elm, i) {
+ const btn = elm.querySelector('.ads-tour-popup-text-container .monaco-button') as HTMLElement;
+ btn.tabIndex = 4;
+ btn.focus();
+ const exitButton = elm.querySelector('.ads-tour-btn-exit');
+ const popupsLength = popups.length;
+ exitButton.addEventListener('click', function () {
+ context.hide();
+ return;
+ });
+ btn.id = 'ads-tour-btn-' + popups[i];
+ btn.addEventListener('keydown', (e: KeyboardEvent) => {
+ context.tourEvents(popups, popupsLength, i);
+ });
+ btn.addEventListener('click', function () {
+ context.tourEvents(popups, popupsLength, i);
+ });
+ });
+ this.show();
+ }
+
+ public show(): void {
+ if (this._overlay.style.display !== 'block') {
+ const firstTourElement = document.querySelector('.ads-tour-element');
+ firstTourElement.classList.add('ads-tour-show');
+ this._overlay.style.display = 'block';
+ const workbench = document.querySelector('.monaco-workbench') as HTMLElement;
+ dom.addClass(workbench, 'blur-background');
+ this._overlayVisible.set(true);
+ this._overlay.focus();
+ }
+ }
+
+ public hide(): void {
+ const menuBarItems = document.querySelectorAll('.menubar-menu-button') as NodeListOf;
+ menuBarItems.forEach(function (elm) {
+ elm.style.pointerEvents = 'auto';
+ });
+ tourData.forEach(function ({ id }) {
+ document.querySelector(`#${id}`).remove();
+ });
+ if (this._overlay.style.display !== 'none') {
+ this._overlay.style.display = 'none';
+ const workbench = document.querySelector('.monaco-workbench') as HTMLElement;
+ dom.removeClass(workbench, 'blur-background');
+ this._overlayVisible.reset();
+ }
+ }
+}
+
+Registry.as(Extensions.WorkbenchActions)
+ .registerWorkbenchAction(SyncActionDescriptor.create(GuidedTourAction, GuidedTourAction.ID, GuidedTourAction.LABEL), 'Help: Getting Started Guided Tour', localize('help', "Help"));
+
+Registry.as(Extensions.WorkbenchActions)
+ .registerWorkbenchAction(SyncActionDescriptor.create(HideGuidedTourAction, HideGuidedTourAction.ID, HideGuidedTourAction.LABEL, { primary: KeyCode.Escape }, IS_OVERLAY_VISIBLE), 'Help: Hide Getting Started Guided Tour', localize('help', "Help"));
+
+// theming
+registerThemingParticipant((theme, collector) => {
+ const bodyTag = theme.getColor(buttonForeground);
+ if (bodyTag) {
+ collector.addRule(`.monaco-workbench > .ads-tour p { color: ${bodyTag}; }`);
+ collector.addRule(`.monaco-workbench > .ads-tour .ads-tour-popup .ads-tour-btn { color: ${bodyTag}; }`);
+ collector.addRule(`.monaco-workbench > .ads-tour .ads-tour-popup p, .monaco-workbench > .ads-tour .ads-tour-popup h1 { color: ${bodyTag}; }`);
+ collector.addRule(`.monaco-workbench > .ads-tour .ads-tour-popup .ads-tour-btn-container .ads-tour-docs-link { color: ${bodyTag}; }`);
+ collector.addRule(`.monaco-workbench > .ads-tour .ads-tour-popup .ads-tour-btn-container .ads-tour-btn-primary-inverse { background: ${bodyTag}; }`);
+ collector.addRule(`.monaco-workbench .activitybar>.content :not(.monaco-menu)>.monaco-action-bar .action-label.activity-workbench-view-extension-books-explorer.subject-element-focused, .monaco-workbench .activitybar>.content :not(.monaco-menu)>.monaco-action-bar .action-label.codicon.dataExplorer.subject-element-focused { background: ${bodyTag}; }`);
+ collector.addRule(`.monaco-workbench .activitybar>.content :not(.monaco-menu)>.monaco-action-bar .action-label.codicon.subject-element-focused { color: ${bodyTag} !important; }`);
+ collector.addRule(`.monaco-workbench .welcomePage .btn-remove-tour { color: ${bodyTag} !important; }`);
+ collector.addRule(`.monaco-workbench .welcomePage .guided-tour-banner p { color: ${bodyTag}; }`);
+ collector.addRule(`.monaco-workbench .welcomePage .guided-tour-banner .ads-tour-btn-start { border: 1px solid ${bodyTag}; }`);
+ collector.addRule(`.monaco-workbench .welcomePage .guided-tour-banner .ads-tour-btn-start { background: ${bodyTag}; }`);
+ collector.addRule(`.monaco-workbench .welcomePage .guided-tour-banner .diamond-icon { background: ${bodyTag}; }`);
+ collector.addRule(`.monaco-workbench .welcomePage .modal-content { color: ${bodyTag}; }`);
+ }
+ const popupBackground = theme.getColor(buttonBackground);
+ if (popupBackground) {
+ collector.addRule(`.monaco-workbench > .ads-tour .ads-tour-popup .ads-tour-btn-container .ads-tour-btn-primary-inverse { color: ${popupBackground}; }`);
+ collector.addRule(`.monaco-workbench > .ads-tour .ads-tour-popup { background: ${popupBackground}; }`);
+ collector.addRule(`.monaco-workbench > .ads-tour .ads-tour-popup { color: ${popupBackground}; }`);
+ collector.addRule(`.monaco-workbench > .ads-tour .ads-tour-popup.arrow-left:after { border-right: 10px solid ${popupBackground}; }`);
+ collector.addRule(`.monaco-workbench > .ads-tour .ads-tour-popup.arrow-bottom-left:after { border-right: 10px solid ${popupBackground}; }`);
+ collector.addRule(`.monaco-workbench > .ads-tour .ads-tour-popup.arrow-center-left:after { border-right: 10px solid ${popupBackground}; }`);
+ collector.addRule(`.monaco-workbench > .ads-tour .ads-tour-popup.arrow-top:after { border-right: 10px solid ${popupBackground}; }`);
+ collector.addRule(`.monaco-workbench > .ads-tour .ads-tour-popup.arrow-right:after { border-right: 10px solid ${popupBackground}; }`);
+ collector.addRule(`.monaco-workbench > .ads-tour .ads-tour-popup.arrow-bottom:after { border-right: 10px solid ${popupBackground}; }`);
+ collector.addRule(`.monaco-workbench .welcomePage .guided-tour-banner { background: ${popupBackground}; }`);
+ collector.addRule(`.monaco-workbench .welcomePage .guided-tour-banner .ads-tour-btn-start { color: ${popupBackground} !important; }`);
+ }
+ const backgroundColor = Color.fromHex(theme.type === 'light' ? '#FFFFFF85' : '#00000085');
+ if (backgroundColor) {
+ collector.addRule(`.monaco-workbench > .welcomeOverlay { background: ${backgroundColor}; }`);
+ }
+});
diff --git a/src/sql/workbench/contrib/welcome/page/browser/media/connections.png b/src/sql/workbench/contrib/welcome/page/browser/media/connections.png
new file mode 100644
index 0000000000..35648c9986
Binary files /dev/null and b/src/sql/workbench/contrib/welcome/page/browser/media/connections.png differ
diff --git a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css
index 0263293232..e01e54342b 100644
--- a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css
+++ b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css
@@ -3,153 +3,153 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
-.ads_homepage .xs {
+.ads-homepage .xs {
display: block
}
-.SM.ads_homepage .xs {
+.SM.ads-homepage .xs {
display: none
}
-.ads_homepage .sm {
+.ads-homepage .sm {
display: none
}
-.SM.ads_homepage .sm {
+.SM.ads-homepage .sm {
display: block
}
-.ads_homepage .ads_grid {
+.ads-homepage .ads-grid {
display: grid;
grid-gap: 16px;
grid-row-gap: 16px
}
-.ads_homepage .ads_grid.grip_gap_50 {
+.ads-homepage .ads-grid.grip-gap-50 {
grid-gap: 50px
}
-.ads_homepage {
+.ads-homepage {
font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif
}
-.ads_homepage h1, .ads_homepage h2, .ads_homepage h3, .ads_homepage h4, .ads_homepage h5, .ads_homepage p {
+.ads-homepage h1, .ads-homepage h2, .ads-homepage h3, .ads-homepage h4, .ads-homepage h5, .ads-homepage p {
margin: 0
}
-.ads_homepage h1 {
+.ads-homepage h1 {
font-size: 3em;
line-height: 1em;
font-weight: 400
}
-.ads_homepage h2 {
+.ads-homepage h2 {
font-size: 1.5em;
font-weight: 600
}
-.ads_homepage h3 {
+.ads-homepage h3 {
font-size: 1.16em;
font-weight: 600
}
-.ads_homepage h4 {
+.ads-homepage h4 {
font-weight: 600
}
-.ads_homepage p {
+.ads-homepage p {
font-size: 1em
}
-.ads_homepage a {
+.ads-homepage a {
text-decoration: none
}
-.ads_homepage .content:not(.extensions) {
+.ads-homepage .content:not(.extensions) {
margin: 8px 0
}
-.ads_homepage .flex {
+.ads-homepage .flex {
display: flex
}
-.ads_homepage .flex.flex_d_column {
+.ads-homepage .flex.flex-d-column {
flex-direction: column
}
-.ads_homepage .flex.flex_d_row {
+.ads-homepage .flex.flex-d-row {
flex-direction: row
}
-.ads_homepage .flex.flex_wrap {
+.ads-homepage .flex.flex-wrap {
flex-wrap: wrap
}
-.ads_homepage .flex.flex_j_center {
+.ads-homepage .flex.flex-j-center {
justify-content: center
}
-.ads_homepage .flex.flex_j_evenly {
+.ads-homepage .flex.flex-j-evenly {
justify-content: space-evenly
}
-.ads_homepage .flex.flex_j_end {
+.ads-homepage .flex.flex-j-end {
justify-content: flex-end
}
-.ads_homepage .flex.flex_a_center {
+.ads-homepage .flex.flex-a-center {
align-items: center
}
-.ads_homepage .flex.flex_a_start {
+.ads-homepage .flex.flex-a-start {
align-items: flex-start
}
-.ads_homepage .flex.flex_j_between {
+.ads-homepage .flex.flex-j-between {
justify-content: space-between
}
-.ads_homepage .a_self_end {
+.ads-homepage .a-self-end {
align-self: flex-end
}
-.ads_homepage.XS .caption_container {
+.ads-homepage.XS .caption-container {
display: flex;
align-items: center;
justify-content: flex-start
}
-.ads_homepage.XS:not(.SM) .caption {
+.ads-homepage.XS:not(.SM) .caption {
font-size: 2.7em;
line-height: 1em;
margin-bottom: 0
}
-.ads_homepage.XS .title {
+.ads-homepage.XS .title {
width: auto
}
-.ads_homepage.XS:not(.SM) .title {
+.ads-homepage.XS:not(.SM) .title {
width: 100%
}
-.ads_homepage .btn_container {
+.ads-homepage .btn-container {
display: flex;
flex-direction: column;
justify-content: space-between
}
-.ads_homepage.SM .btn_container {
+.ads-homepage.SM .btn-container {
flex-direction: row;
justify-content: flex-start
}
-.ads_homepage.XS:not(.SM) .btn_container div {
+.ads-homepage.XS:not(.SM) .btn-container div {
width: 100%;
width: 100%;
}
-.ads_homepage.XS:not(.SM) .btn {
+.ads-homepage.XS:not(.SM) .btn {
box-sizing: border-box;
width: 100%;
height: 34px;
@@ -165,7 +165,7 @@
margin: 10px 0
}
-.ads_homepage.SM .btn {
+.ads-homepage.SM .btn {
box-sizing: border-box;
width: 100%;
height: 34px;
@@ -181,46 +181,46 @@
margin: 10px 0
}
-.ads_homepage .btn span {
+.ads-homepage .btn span {
display: block
}
-.ads_homepage.XS .btn {
+.ads-homepage.XS .btn {
line-height: 27px
}
-.ads_homepage.XS .btn {
+.ads-homepage.XS .btn {
margin: 0 8px 0 0;
width: 77px;
height: 25px;
line-height: 18px
}
-.mac .ads_homepage.XS .dropdown.btn {
+.mac .ads-homepage.XS .dropdown.btn {
line-height: 1.6em
}
-.ads_homepage .btn_primary {
+.ads-homepage .btn-primary {
border: 1px solid
}
-.ads_homepage .btn_primary:hover {
+.ads-homepage .btn-primary:hover {
cursor: pointer
}
-.ads_homepage .btn_secondary:hover {
+.ads-homepage .btn-secondary:hover {
cursor: pointer
}
-.ads_homepage .btn_secondary {
+.ads-homepage .btn-secondary {
line-height: 1.6em
}
-.ads_homepage #dropdown_btn:focus {
+.ads-homepage #dropdown-btn:focus {
outline: 1px solid
}
-.ads_homepage .dropdown-content {
+.ads-homepage .dropdown-content {
z-index: 9;
position: absolute;
display: none;
@@ -232,11 +232,11 @@
position: absolute
}
-.ads_homepage .dropdown-content li a {
+.ads-homepage .dropdown-content li a {
font-size: 1.1em
}
-.ads_homepage .dropdown-content li a {
+.ads-homepage .dropdown-content li a {
display: block;
width: 69%;
height: 100%;
@@ -248,11 +248,11 @@
display: block
}
-.ads_homepage .btn.dropdown ul li ul:hover, .ads_homepage .btn.dropdown ul li:hover>ul {
+.ads-homepage .btn.dropdown ul li ul:hover, .ads-homepage .btn.dropdown ul li:hover>ul {
z-index: 9
}
-.ads_homepage .btn.dropdown ul li ul li a {
+.ads-homepage .btn.dropdown ul li ul li a {
width: 78%;
padding: 1em 1em 1em 1.5em;
clear: both;
@@ -261,40 +261,40 @@
border: 1px solid
}
-.ads_homepage .dropdown_nav {
+.ads-homepage .dropdown-nav {
position: relative
}
-.ads_homepage .btn.dropdown ul li ul a {
+.ads-homepage .btn.dropdown ul li ul a {
text-decoration: none
}
-.ads_homepage .dropdown-content li a {
+.ads-homepage .dropdown-content li a {
width: 86%;
padding: 6px 0 6px 28px;
display: block
}
-.ads_homepage .btn:disabled {
+.ads-homepage .btn:disabled {
width: auto;
height: 24px;
padding: 4px 16px;
border: 0!important
}
-.ads_homepage .btn:disabled:hover {
+.ads-homepage .btn:disabled:hover {
cursor: default
}
-.ads_homepage .preview_link {
+.ads-homepage .preview-link {
padding: 4px
}
-.ads_homepage .preview_link i {
+.ads-homepage .preview-link i {
margin-right: 4px
}
-.ads_homepage .preview_text {
+.ads-homepage .preview-text {
display: flex;
justify-content: flex-end;
align-items: center;
@@ -303,30 +303,30 @@
margin-right: 15px
}
-.ads_homepage #tool_tip_container_wide {
+.ads-homepage #tool-tip-container-wide {
display: none
}
-.ads_homepage #tool_tip_container_narrow {
+.ads-homepage #tool-tip-container-narrow {
display: block;
bottom: 13px;
position: relative;
cursor: pointer
}
-.ads_homepage.XL .preview_text {
+.ads-homepage.XL .preview-text {
margin-right: 0
}
-.ads_homepage.XL #tool_tip_container_wide {
+.ads-homepage.XL #tool-tip-container-wide {
display: block
}
-.ads_homepage.XL #tool_tip_container_narrow {
+.ads-homepage.XL #tool-tip-container-narrow {
display: none
}
-.ads_homepage .tool_tip .tool_tip_text {
+.ads-homepage .tool-tip .tool-tip-text {
max-width: 400px;
visibility: hidden;
padding: 10px 15px;
@@ -339,11 +339,11 @@
border-radius: 2px
}
-.ads_homepage .tool_tip {
+.ads-homepage .tool-tip {
position: relative
}
-.ads_homepage .tool_tip .tool_tip_text:after {
+.ads-homepage .tool-tip .tool-tip-text:after {
content: "";
position: absolute;
bottom: 100%;
@@ -354,15 +354,15 @@
border-style: solid
}
-.ads_homepage #tool_tip_container_wide .tool_tip_text.show {
+.ads-homepage #tool-tip-container-wide .tool-tip-text.show {
visibility: visible
}
-.ads_homepage .tool_tip .tool_tip_text h3 {
+.ads-homepage .tool-tip .tool-tip-text h3 {
margin-bottom: 10px
}
-.ads_homepage .modal {
+.ads-homepage .modal {
display: none;
position: fixed;
z-index: 1;
@@ -374,11 +374,11 @@
overflow: auto
}
-.ads_homepage .modal.show {
+.ads-homepage .modal.show {
display: block
}
-.ads_homepage .modal_content {
+.ads-homepage .modal-content {
margin: auto;
padding: 20px;
width: 80%;
@@ -392,30 +392,30 @@
border: 1px solid
}
-.ads_homepage .modal_content h3 {
+.ads-homepage .modal-content h3 {
margin-bottom: 8px
}
-.ads_homepage .close_icon {
+.ads-homepage .close-icon {
position: absolute;
right: 13px;
top: 4px;
font-size: 1.33em
}
-.ads_homepage .close_icon:focus, .ads_homepage .close_icon:hover {
+.ads-homepage .close-icon:focus, .ads-homepage .close-icon:hover {
text-decoration: none;
cursor: pointer
}
-.ads_homepage .preview_text p {
+.ads-homepage .preview-text p {
position: relative;
display: inline-block;
font-size: 1.08em;
bottom: 2px
}
-.ads_homepage .icon_info {
+.ads-homepage .icon-info {
display: inline-block;
width: 12px;
height: 12px;
@@ -426,14 +426,14 @@
mask-size: 12px 12px
}
-.ads_homepage .icon_arrow_down {
+.ads-homepage .icon-arrow-down {
position: relative;
height: 20px;
width: 18px;
display: inline-block
}
-.ads_homepage .icon_arrow_down:before {
+.ads-homepage .icon-arrow-down:before {
position: absolute;
font: normal normal normal 16px/1 codicon;
text-decoration: none;
@@ -450,14 +450,14 @@
margin: auto
}
-.ads_homepage .icon_arrow_right {
+.ads-homepage .icon-arrow-right {
position: relative;
height: 16px;
width: 16px;
display: inline-block
}
-.ads_homepage .icon_arrow_right:before {
+.ads-homepage .icon-arrow-right:before {
position: absolute;
font: normal normal normal 14px/1 codicon;
text-decoration: none;
@@ -474,7 +474,7 @@
left: 5px
}
-.ads_homepage .icon_link {
+.ads-homepage .icon-link {
display: inline-block;
width: 11px;
height: 11px;
@@ -487,14 +487,14 @@
width: 11px
}
-.ads_homepage .icon_arrow_down_dark {
+.ads-homepage .icon-arrow-down-dark {
position: relative;
height: 20px;
width: 22px;
display: inline-block
}
-.ads_homepage .icon_arrow_down_dark:before {
+.ads-homepage .icon-arrow-down-dark:before {
position: absolute;
font: normal normal normal 14px/1 codicon;
text-decoration: none;
@@ -512,11 +512,11 @@
left: 8px
}
-.ads_homepage .dropdown_navigation {
+.ads-homepage .dropdown-navigation {
position: relative
}
-.ads_homepage .dropdown_text {
+.ads-homepage .dropdown-text {
display: flex;
justify-content: center;
align-items: center;
@@ -524,132 +524,132 @@
padding-top: 1px
}
-.ads_homepage .showOnStartup {
+.ads-homepage .showOnStartup {
margin-top: 10px
}
-.ads_homepage .showOnStartup label {
+.ads-homepage .showOnStartup label {
position: relative;
bottom: 3px
}
-.ads_homepage .showOnStartup input {
+.ads-homepage .showOnStartup input {
width: 15px;
height: 15px
}
-.ads_homepage .link {
+.ads-homepage .link {
text-decoration: none
}
-.ads_homepage .link_learn_more {
+.ads-homepage .link-learn-more {
line-height: 27px
}
-.ads_homepage .link:hover {
+.ads-homepage .link:hover {
text-decoration: underline;
cursor: pointer
}
-.ads_homepage.LG .extension_pack_container {
+.ads-homepage.LG .extension-pack-container {
grid-template-columns: repeat(2, 1fr)
}
-.ads_homepage.XS.SM.MD.LG.XL .extension_pack_container {
+.ads-homepage.XS.SM.MD.LG.XL .extension-pack-container {
grid-template-columns: repeat(8, 1fr)
}
-.ads_homepage .extension_pack {
+.ads-homepage .extension-pack {
grid-column: 1/span 2
}
-.ads_homepage.LG .extension_pack {
+.ads-homepage.LG .extension-pack {
grid-template-columns: repeat(2, 1fr)
}
-.ads_homepage.XS.SM.MD.LG.XL .extension_pack {
+.ads-homepage.XS.SM.MD.LG.XL .extension-pack {
grid-column: 1/span 4;
grid-row: 1/span 4
}
-.ads_homepage .tile:not(.extension):not(.extension_pack) {
+.ads-homepage .tile:not(.extension):not(.extension-pack) {
border: 1px solid;
border-radius: 4px
}
-.ads_homepage .tile.extension_pack {
+.ads-homepage .tile.extension-pack {
border: 1px solid;
border-radius: 4px
}
-.ads_homepage .extension_list {
+.ads-homepage .extension-list {
grid-column: 1/span 2
}
-.ads_homepage.XS.SM.MD.LG.XL .extension_list {
+.ads-homepage.XS.SM.MD.LG.XL .extension-list {
grid-column: 5/span 4;
grid-row: 1/span 4
}
-.ads_homepage .extension_header, .ads_homepage .extension_pack_extension_list_header {
+.ads-homepage .extension-header, .ads-homepage .extension-pack-extension-list-header {
font-weight: 600;
font-size: 1.33em
}
-.ads_homepage .tile {
+.ads-homepage .tile {
transition: all .5s ease;
border-radius: 4px
}
-.ads_homepage .tile:hover:not(.no_hover) {
+.ads-homepage .tile:hover:not(.no-hover) {
cursor: pointer
}
-.ads_homepage .link:active {
+.ads-homepage .link:active {
text-decoration: underline
}
-.ads_homepage .content {
+.ads-homepage .content {
padding: 25px 2% 0
}
-.ads_homepage.MD .content {
+.ads-homepage.MD .content {
padding: 25px 4% 0
}
-.ads_homepage.LG .content {
+.ads-homepage.LG .content {
padding: 25px 6% 0
}
-.ads_homepage.XL .content {
+.ads-homepage.XL .content {
padding: 25px 8% 0
}
-.ads_homepage .text_container {
+.ads-homepage .text-container {
padding: 15px 15px
}
-.ads_homepage .gradient {
+.ads-homepage .gradient {
background-size: cover
}
-.ads_homepage.MD .gradient {
+.ads-homepage.MD .gradient {
padding: 25px 4% 0
}
-.ads_homepage.LG .gradient {
+.ads-homepage.LG .gradient {
padding: 25px 6% 0
}
-.ads_homepage.XL .gradient {
+.ads-homepage.XL .gradient {
padding: 0 8% 0
}
-.ads_homepage_section h2 {
+.ads-homepage-section h2 {
margin-bottom: 16px
}
-.ads_homepage_section.hero {
+.ads-homepage-section.hero {
background-size: 1128px 467px;
background-repeat: no-repeat;
background-image: url(../../media/homeBanner_icon.svg);
@@ -659,7 +659,7 @@
background-repeat: no-repeat
}
-.hc-black .ads_homepage_section.hero, .vs-dark .ads_homepage_section.hero {
+.hc-black .ads-homepage-section.hero, .vs-dark .ads-homepage-section.hero {
background-size: 1128px 467px;
background-repeat: no-repeat;
background-image: url(../../media/homeBanner_icon_dark.svg);
@@ -669,46 +669,46 @@
background-repeat: no-repeat
}
-.ads_homepage.LG .ads_homepage_section.hero {
+.ads-homepage.LG .ads-homepage-section.hero {
background-size: contain;
background-repeat: no-repeat;
background-image: url(../../media/homeBanner_icon.svg);
background-position: 94% -54px
}
-.ads_homepage.XL .ads_homepage_section.hero {
+.ads-homepage.XL .ads-homepage-section.hero {
background-size: 597px;
background-repeat: no-repeat;
background-image: url(../../media/homeBanner_icon.svg);
background-position: 94% -54px
}
-.hc-black .ads_homepage.LG .ads_homepage_section.hero, .vs-dark .ads_homepage.LG .ads_homepage_section.hero {
+.hc-black .ads-homepage.LG .ads-homepage-section.hero, .vs-dark .ads-homepage.LG .ads-homepage-section.hero {
background-size: 597px;
background-repeat: no-repeat;
background-image: url(../../media/homeBanner_icon_dark.svg);
background-position: 94% 0
}
-.ads_homepage .resources_container {
+.ads-homepage .resources-container {
grid-column: 1/span 1
}
-.ads_homepage.XL .resources_container {
+.ads-homepage.XL .resources-container {
grid-column: 1/span 7
}
-.ads_homepage .resources_container .tabs {
+.ads-homepage .resources-container .tabs {
display: flex;
flex-wrap: wrap
}
-.ads_homepage .resources_container .input {
+.ads-homepage .resources-container .input {
position: absolute;
opacity: 0
}
-.ads_homepage .resources_container .label {
+.ads-homepage .resources-container .label {
width: 100%;
padding: 10px;
cursor: pointer;
@@ -717,43 +717,43 @@
transition: background .1s, color .1s
}
-.ads_homepage .getting_started_container {
+.ads-homepage .getting-started-container {
grid-column: 1/span 1
}
-.ads_homepage.XL .getting_started_container {
+.ads-homepage.XL .getting-started-container {
grid-column: 9/span 6
}
-.ads_homepage .header {
+.ads-homepage .header {
padding: 0 10px 20px
}
-.ads_homepage .header_top_nav {
+.ads-homepage .header-top-nav {
margin: 0 0 30px;
padding-top: 30px
}
-.ads_homepage .header_top_nav .flex {
+.ads-homepage .header-top-nav .flex {
align-items: center;
justify-content: flex-start
}
-.ads_homepage.XS.SM.MD.LG.XL .header_top_nav {
+.ads-homepage.XS.SM.MD.LG.XL .header-top-nav {
margin-bottom: 117px;
padding-top: 69px
}
-.ads_homepage .header_top_nav h1 {
+.ads-homepage .header-top-nav h1 {
margin: 0 0 20px
}
-.ads_homepage.XS:not(.SM) .header_top_nav h1 {
+.ads-homepage.XS:not(.SM) .header-top-nav h1 {
font-size: 2.6em;
line-height: 1em
}
-.ads_homepage .header_top_nav .icon {
+.ads-homepage .header-top-nav .icon {
width: 92px;
height: 92px;
background-image: url(../../media/dataStudioIcon.svg);
@@ -762,7 +762,7 @@
background-repeat: no-repeat
}
-.ads_homepage.XS:not(.SM) .header_top_nav .icon {
+.ads-homepage.XS:not(.SM) .header-top-nav .icon {
background-image: url(../../media/dataStudioIcon.svg);
background-size: contain;
background-repeat: no-repeat;
@@ -774,23 +774,23 @@
margin-right: 10px
}
-.ads_homepage .header_bottom_nav {
+.ads-homepage .header-bottom-nav {
margin-top: 35px
}
-.ads_homepage .header_bottom_nav_tiles {
+.ads-homepage .header-bottom-nav-tiles {
grid-template-columns: repeat(2, 1fr)
}
-.ads_homepage.XS.SM.MD.LG.XL .header_bottom_nav_tiles {
+.ads-homepage.XS.SM.MD.LG.XL .header-bottom-nav-tiles {
grid-template-columns: repeat(4, 1fr)
}
-.ads_homepage.XL .header_bottom_nav {
+.ads-homepage.XL .header-bottom-nav {
margin-top: 112px
}
-.ads_homepage .header_bottom_nav_tile {
+.ads-homepage .header-bottom-nav-tile {
position: relative;
height: 160px;
padding: 10px 10px 10px 10px;
@@ -805,24 +805,24 @@
margin: 0
}
-.hc-black .ads_homepage .header_bottom_nav_tile, .vs-dark .ads_homepage .header_bottom_nav_tile {
+.hc-black .ads-homepage .header-bottom-nav-tile, .vs-dark .ads-homepage .header-bottom-nav-tile {
border: 1px solid;
border-radius: 4px
}
-.ads_homepage.XS .header_bottom_nav_tile {
+.ads-homepage.XS .header-bottom-nav-tile {
height: 200px
}
-.ads_homepage.SM .header_bottom_nav_tile {
+.ads-homepage.SM .header-bottom-nav-tile {
height: 145px
}
-.ads_homepage.LG .header_bottom_nav_tile {
+.ads-homepage.LG .header-bottom-nav-tile {
padding: 10px 20px 10px 10px
}
-.ads_homepage.LG .header_bottom_nav_tile {
+.ads-homepage.LG .header-bottom-nav-tile {
height: 100px;
padding-left: 25%;
text-align: left;
@@ -830,24 +830,24 @@
align-items: baseline
}
-.ads_homepage .header_bottom_nav_tile h3 {
+.ads-homepage .header-bottom-nav-tile h3 {
margin: 16px 0 4px
}
-.ads_homepage.LG .header_bottom_nav_tile h3 {
+.ads-homepage.LG .header-bottom-nav-tile h3 {
margin: 0
}
-.ads_homepage a.link_show_all {
+.ads-homepage a.link-show-all {
font-size: 1.16em;
padding-top: 7px
}
-.monaco-workbench .part.editor>.content .ads_homepage a.header_bottom_nav_tile_link {
+.monaco-workbench .part.editor>.content .ads-homepage a.header-bottom-nav-tile-link {
text-decoration: none
}
-.ads_homepage .header_bottom_nav_tile .icon {
+.ads-homepage .header-bottom-nav-tile .icon {
width: 42px;
height: 42px;
position: absolute;
@@ -857,99 +857,99 @@
margin: auto
}
-.ads_homepage.LG .header_bottom_nav_tile .icon {
+.ads-homepage.LG .header-bottom-nav-tile .icon {
position: absolute;
right: 75%;
bottom: 0;
top: 0
}
-.ads_homepage .header_bottom_nav_tile .icon.connection {
+.ads-homepage .header-bottom-nav-tile .icon.connection {
background-image: url(../../media/createConnectionIcon.svg);
background-size: contain;
background-repeat: no-repeat
}
-.ads_homepage .header_bottom_nav_tile .icon.query {
+.ads-homepage .header-bottom-nav-tile .icon.query {
background-image: url(../../media/databaseIcon.svg);
background-size: contain;
background-repeat: no-repeat
}
-.ads_homepage .header_bottom_nav_tile .icon.notebook {
+.ads-homepage .header-bottom-nav-tile .icon.notebook {
background-image: url(../../media/notebookIcon.svg);
background-size: contain;
background-repeat: no-repeat
}
-.ads_homepage .header_bottom_nav_tile .icon.server {
+.ads-homepage .header-bottom-nav-tile .icon.server {
background-image: url(../../media/serverIcon.svg);
background-size: contain;
background-repeat: no-repeat
}
-.ads_homepage .middle_section {
+.ads-homepage .middle-section {
grid-template-columns: 1fr
}
-.ads_homepage.XL .middle_section {
+.ads-homepage.XL .middle-section {
grid-template-columns: repeat(12, 1fr)
}
-.ads_homepage .resources_container .input:focus+.label {
+.ads-homepage .resources-container .input:focus+.label {
z-index: 1
}
-.ads_homepage .resources_container .input:checked+.label {
+.ads-homepage .resources-container .input:checked+.label {
border-bottom: 3px solid
}
-.hc-black .ads_homepage .resources_container .input:checked+.label, .vs-dark .ads_homepage .resources_container .input:checked+.label {
+.hc-black .ads-homepage .resources-container .input:checked+.label, .vs-dark .ads-homepage .resources-container .input:checked+.label {
border-bottom: 3px solid
}
-.ads_homepage .resources_container .label {
+.ads-homepage .resources-container .label {
font-weight: 600
}
-.ads_homepage.LG .resources_container .label {
+.ads-homepage.LG .resources-container .label {
width: auto
}
-.ads_homepage.XS:not(.SM) .resources_container .panel {
+.ads-homepage.XS:not(.SM) .resources-container .panel {
padding-top: 0
}
-.ads_homepage .resources_container .panel {
+.ads-homepage .resources-container .panel {
display: none;
padding: 20px 20px 20px 0
}
-.ads_homepage.LG .resources_container .panel {
+.ads-homepage.LG .resources-container .panel {
order: 99
}
-.ads_homepage .resources_container .input:checked+.label+.panel {
+.ads-homepage .resources-container .input:checked+.label+.panel {
display: block;
width: 100%
}
-.ads_homepage .ads_homepage_section .history .list, .ads_homepage .ads_homepage_section .pinned .list {
+.ads-homepage .ads-homepage-section .history .list, .ads-homepage .ads-homepage-section .pinned .list {
list-style-type: none;
padding: 0;
margin-top: 0
}
-.ads_homepage .ads_homepage_section .history .list_header, .ads_homepage .ads_homepage_section .pinned .list_header {
+.ads-homepage .ads-homepage-section .history .list-header, .ads-homepage .ads-homepage-section .pinned .list-header {
padding: 0 0 2px 11px
}
-.ads_homepage.XS:not(.SM) .ads_homepage_section .pinned .list_header, .ads_homepage.XS:not(.SM) .ads_homepage_section .history .list_header {
+.ads-homepage.XS:not(.SM) .ads-homepage-section .pinned .list-header, .ads-homepage.XS:not(.SM) .ads-homepage-section .history .list-header {
padding: 0 0 2px 41px;
line-height: 1em
}
-.ads_homepage .ads_homepage_section .history .list li:not(.moreRecent), .ads_homepage .ads_homepage_section .history .list_header_container, .ads_homepage .ads_homepage_section .pinned .list li:not(.moreRecent), .ads_homepage .ads_homepage_section .pinned .list_header_container {
+.ads-homepage .ads-homepage-section .history .list li:not(.moreRecent), .ads-homepage .ads-homepage-section .history .list-header-container, .ads-homepage .ads-homepage-section .pinned .list li:not(.moreRecent), .ads-homepage .ads-homepage-section .pinned .list-header-container {
height: 33px;
list-style: none;
border-bottom: 1px solid;
@@ -962,40 +962,40 @@
text-decoration: none
}
-.ads_homepage.XS:not(.SM) .ads_homepage_section .history .list_header_container {
+.ads-homepage.XS:not(.SM) .ads-homepage-section .history .list-header-container {
display: flex;
flex-direction: column;
padding: 15px;
align-items: flex-start
}
-.ads_homepage .ads_homepage_section .history .list_header_container .list_header_last_opened {
+.ads-homepage .ads-homepage-section .history .list-header-container .list-header-last-opened {
margin-left: auto
}
-.ads_homepage.XS:not(.SM) .ads_homepage_section .history .list_header_container .list_header_last_opened {
+.ads-homepage.XS:not(.SM) .ads-homepage-section .history .list-header-container .list-header-last-opened {
margin-left: 0;
padding: 0 0 2px 41px
}
-.ads_homepage .ads_homepage_section .history .detail {
+.ads-homepage .ads-homepage-section .history .detail {
margin-left: auto
}
-.ads_homepage.XS:not(.SM) .ads_homepage_section .history .detail {
+.ads-homepage.XS:not(.SM) .ads-homepage-section .history .detail {
margin-left: 0;
padding: 0 0 2px 41px
}
-.ads_homepage .ads_homepage_section .history .list li:not(.moreRecent) a, .ads_homepage .ads_homepage_section .pinned .list li:not(.moreRecent) a {
+.ads-homepage .ads-homepage-section .history .list li:not(.moreRecent) a, .ads-homepage .ads-homepage-section .pinned .list li:not(.moreRecent) a {
padding: 0 0 2px 11px
}
-.ads_homepage .ads_homepage_section .pinned .list li:not(.moreRecent) a, .ads_homepage.XS:not(.SM) .ads_homepage_section .history .list li:not(.moreRecent) a {
+.ads-homepage .ads-homepage-section .pinned .list li:not(.moreRecent) a, .ads-homepage.XS:not(.SM) .ads-homepage-section .history .list li:not(.moreRecent) a {
padding: 0 0 2px 41px
}
-.ads_homepage .ads_homepage_section .history .list li:not(.moreRecent) i, .ads_homepage .ads_homepage_section .pinned .list li i, .ads_homepage .icon_document {
+.ads-homepage .ads-homepage-section .history .list li:not(.moreRecent) i, .ads-homepage .ads-homepage-section .pinned .list li i, .ads-homepage .icon-document {
-webkit-mask: url(../../media/icon_file_document.svg) no-repeat;
-webkit-mask-size: 13px 16px;
mask: url(../../media/icon_file_document.svg) no-repeat;
@@ -1004,7 +1004,7 @@
width: 16px
}
-.ads_homepage .ads_homepage_section .history .list li:not(.moreRecent) i[title$=".ipynb"], .ads_homepage .ads_homepage_section .pinned .list li:not(.moreRecent) i[title$=".ipynb"] {
+.ads-homepage .ads-homepage-section .history .list li:not(.moreRecent) i[title$=".ipynb"], .ads-homepage .ads-homepage-section .pinned .list li:not(.moreRecent) i[title$=".ipynb"] {
-webkit-mask: url(../../media/icon_file_ipynb.svg) no-repeat;
-webkit-mask-size: 13px 16px;
mask: url(../../media/icon_file_ipynb.svg) no-repeat;
@@ -1013,7 +1013,7 @@
width: 16px
}
-.ads_homepage .ads_homepage_section .history .list li:not(.moreRecent) i[title$=".sql"], .ads_homepage .ads_homepage_section .pinned .list li:not(.moreRecent) i[title$=".sql"] {
+.ads-homepage .ads-homepage-section .history .list li:not(.moreRecent) i[title$=".sql"], .ads-homepage .ads-homepage-section .pinned .list li:not(.moreRecent) i[title$=".sql"] {
-webkit-mask: url(../../media/icon_file_sql.svg) no-repeat;
-webkit-mask-size: 13px 16px;
mask: url(../../media/icon_file_sql.svg) no-repeat;
@@ -1022,7 +1022,7 @@
width: 16px
}
-.ads_homepage .ads_homepage_section .history .list li:not(.moreRecent) i[title$=".csv"], .ads_homepage .ads_homepage_section .pinned .list li:not(.moreRecent) a[title$=".csv"] {
+.ads-homepage .ads-homepage-section .history .list li:not(.moreRecent) i[title$=".csv"], .ads-homepage .ads-homepage-section .pinned .list li:not(.moreRecent) a[title$=".csv"] {
-webkit-mask: url(../../media/icon_file_csv.svg) no-repeat;
-webkit-mask-size: 13px 16px;
mask: url(../../media/icon_file_csv.svg) no-repeat;
@@ -1031,7 +1031,7 @@
width: 16px
}
-.ads_homepage.XS:not(.SM) .ads_homepage_section .history .list li:not(.moreRecent) i, .ads_homepage.XS:not(.SM) .ads_homepage_section .pinned .list li i, .ads_homepage.XS:not(.SM) .icon_document {
+.ads-homepage.XS:not(.SM) .ads-homepage-section .history .list li:not(.moreRecent) i, .ads-homepage.XS:not(.SM) .ads-homepage-section .pinned .list li i, .ads-homepage.XS:not(.SM) .icon-document {
-webkit-mask: url(../../media/icon_file_document.svg) no-repeat;
-webkit-mask-size: 20px 23px;
mask: url(../../media/icon_file_document.svg) no-repeat;
@@ -1045,7 +1045,7 @@
margin: auto
}
-.ads_homepage.XS:not(.SM) .ads_homepage_section .history .list li:not(.moreRecent) i[title$=".ipynb"], .ads_homepage.XS:not(.SM) .ads_homepage_section .pinned .list li:not(.moreRecent) i[title$=".ipynb"] {
+.ads-homepage.XS:not(.SM) .ads-homepage-section .history .list li:not(.moreRecent) i[title$=".ipynb"], .ads-homepage.XS:not(.SM) .ads-homepage-section .pinned .list li:not(.moreRecent) i[title$=".ipynb"] {
-webkit-mask: url(../../media/icon_file_ipynb.svg) no-repeat;
-webkit-mask-size: 20px 23px;
mask: url(../../media/icon_file_ipynb.svg) no-repeat;
@@ -1059,7 +1059,7 @@
margin: auto
}
-.ads_homepage.XS:not(.SM) .ads_homepage_section .history .list li:not(.moreRecent) i[title$=".sql"], .ads_homepage.XS:not(.SM) .ads_homepage_section .pinned .list li:not(.moreRecent) i[title$=".sql"] {
+.ads-homepage.XS:not(.SM) .ads-homepage-section .history .list li:not(.moreRecent) i[title$=".sql"], .ads-homepage.XS:not(.SM) .ads-homepage-section .pinned .list li:not(.moreRecent) i[title$=".sql"] {
-webkit-mask: url(../../media/icon_file_sql.svg) no-repeat;
-webkit-mask-size: 20px 23px;
mask: url(../../media/icon_file_sql.svg) no-repeat;
@@ -1073,7 +1073,7 @@
margin: auto
}
-.ads_homepage.XS:not(.SM) .ads_homepage_section .history .list li:not(.moreRecent) i[title$=".csv"], .ads_homepage.XS:not(.SM) .ads_homepage_section .pinned .list li:not(.moreRecent) a[title$=".csv"] {
+.ads-homepage.XS:not(.SM) .ads-homepage-section .history .list li:not(.moreRecent) i[title$=".csv"], .ads-homepage.XS:not(.SM) .ads-homepage-section .pinned .list li:not(.moreRecent) a[title$=".csv"] {
-webkit-mask: url(../../media/icon_file_csv.svg) no-repeat;
-webkit-mask-size: 20px 23px;
mask: url(../../media/icon_file_csv.svg) no-repeat;
@@ -1087,7 +1087,7 @@
margin: auto
}
-.ads_homepage.XS:not(.SM) .ads_homepage_section .history .list li {
+.ads-homepage.XS:not(.SM) .ads-homepage-section .history .list li {
display: flex;
flex-direction: column;
justify-content: flex-start;
@@ -1096,66 +1096,66 @@
padding-top: 10px
}
-.ads_homepage .ads_homepage_section .history .moreRecent_list {
+.ads-homepage .ads-homepage-section .history .moreRecent-list {
list-style-type: none;
padding: 0;
margin: 0
}
-.ads_homepage .ads_homepage_section .history .moreRecent_list li.moreRecent {
+.ads-homepage .ads-homepage-section .history .moreRecent-list li.moreRecent {
display: flex;
align-items: center;
margin-top: 10px
}
-.ads_homepage .ads_homepage_section .history .moreRecent_list li.moreRecent a {
+.ads-homepage .ads-homepage-section .history .moreRecent-list li.moreRecent a {
text-decoration: none
}
-.ads_homepage .ads_homepage_section .links .link_header {
+.ads-homepage .ads-homepage-section .links .link-header {
font-size: 1.16em;
margin-bottom: 4px
}
-.ads_homepage .ads_homepage_section .links p {
+.ads-homepage .ads-homepage-section .links p {
margin-bottom: 16px
}
-.ads_homepage.XS .ads_homepage_section .links .flex_container_video {
+.ads-homepage.XS .ads-homepage-section .links .flex-container-video {
display: flex;
flex-direction: column
}
-.ads_homepage.SM .ads_homepage_section .links .flex_container_video {
+.ads-homepage.SM .ads-homepage-section .links .flex-container-video {
display: flex;
flex-direction: row
}
-.ads_homepage .ads_homepage_section .links .videos_container {
+.ads-homepage .ads-homepage-section .links .videos-container {
margin-bottom: 20px;
display: flex;
flex-direction: column
}
-.ads_homepage .ads_homepage_section .links .videos_container_video {
+.ads-homepage .ads-homepage-section .links .videos-container-video {
margin-right: 16px
}
-.ads_homepage .ads_homepage_section .links .videos_container .video {
+.ads-homepage .ads-homepage-section .links .videos-container .video {
display: block;
width: 100%;
height: 100%
}
-.ads_homepage .ads_homepage_section .links .videos_container .video img {
+.ads-homepage .ads-homepage-section .links .videos-container .video img {
max-width: 100%
}
-.ads_homepage .extensions .row {
+.ads-homepage .extensions .row {
padding-bottom: 35px
}
-.ads_homepage .extension {
+.ads-homepage .extension {
display: flex;
height: 100%;
justify-content: flex-start;
@@ -1163,38 +1163,38 @@
background: 0 0
}
-.ads_homepage .extension .extension_inner {
+.ads-homepage .extension .extension-inner {
padding: 15px
}
-.ads_homepage .extension_pack_header {
+.ads-homepage .extension-pack-header {
font-weight: 600;
font-size: 2.33em;
z-index: 9;
margin-bottom: 10px
}
-.ads_homepage .extension_pack_body {
+.ads-homepage .extension-pack-body {
line-height: 1.5em;
font-size: 1.33em;
z-index: 9
}
-.ads_homepage.LG .extension_pack_body {
+.ads-homepage.LG .extension-pack-body {
font-size: 1.5em;
line-height: 1.2em
}
-.ads_homepage .extension_pack {
+.ads-homepage .extension-pack {
grid-gap: 0
}
-.ads_homepage .extension_pack_btn_container {
+.ads-homepage .extension-pack-btn-container {
padding: 17px 0 23px;
width: 100%
}
-.ads_homepage .extension_pack_description {
+.ads-homepage .extension-pack-description {
background: url(../../media/extension_pack_img.svg);
background-size: cover;
background-position: center;
@@ -1209,11 +1209,11 @@
border-bottom-left-radius: 5px
}
-.ads_homepage .extension_pack {
+.ads-homepage .extension-pack {
border-radius: 5px
}
-.ads_homepage .extension_pack_description:before {
+.ads-homepage .extension-pack-description:before {
content: "";
position: absolute;
top: 0;
@@ -1224,67 +1224,158 @@
border-bottom-left-radius: 5px
}
-.ads_homepage .extension_pack_description_grid_container {
+.ads-homepage .extension-pack-description-grid-container {
height: 100%
}
-.ads_homepage .extension_pack_description .text_container {
+.ads-homepage .extension-pack-description .text-container {
text-align: center;
padding: 20px
}
-.ads_homepage .extension_pack .text_container .icon {
+.ads-homepage .extension-pack .text-container .icon {
margin-bottom: 10px
}
-.ads_homepage .extension_pack .text_container h2 {
+.ads-homepage .extension-pack .text-container h2 {
margin-bottom: 10px
}
-.ads_homepage .extension .img_container {
+.ads-homepage .extension .img-container {
margin-right: 22px
}
-.ads_homepage .extension .icon, .ads_homepage .extensions .img_container .icon {
+.ads-homepage .extension .icon, .ads-homepage .extensions .img-container .icon {
width: 50px;
margin: auto
}
-.ads_homepage .extension_pack .extension_pack_extensions {
+.ads-homepage .extension-pack .extension-pack-extensions {
padding: 0 25px 0 35px;
background: 0 0
}
-.ads_homepage .extension_pack .extension_pack_extensions .btn_secondary {
+.ads-homepage .extension-pack .extension-pack-extensions .btn-secondary {
display: flex;
justify-content: center;
align-items: center;
line-height: 1.25em
}
-.ads_homepage .extension_pack .extension_pack_extension_container {
+.ads-homepage .extension-pack .extension-pack-extension-container {
padding: 8px 0
}
-.ads_homepage .extension_pack .extension_pack_extension_container:first-of-type {
+.ads-homepage .extension-pack .extension-pack-extension-container:first-of-type {
padding: 24px 0 8px
}
-.ads_homepage .extension_pack .extension_pack_extension_container .description h4 {
+.ads-homepage .extension-pack .extension-pack-extension-container .description h4 {
font-size: 1.33em
}
-.ads_homepage .extension_pack .extension_pack_extension_container .icon {
+.ads-homepage .extension-pack .extension-pack-extension-container .icon {
width: 36px;
height: 36px;
margin-right: 14px
}
-.monaco-workbench .part.editor>.content .ads_homepage .extensions .extensions_tile_link {
+.welcomePage {
+ position: relative;
+}
+
+.ads-homepage .guided-tour-banner .diamond-icon {
+ display: inline-block;
+ min-width: 24px;
+ height: 24px;
+ margin-left: 6px;
+ margin-right: 20px;
+ -webkit-mask: url('../../gettingStarted/media/diamondIcon.svg') no-repeat;
+ -webkit-mask-size: 24px 24px;
+ mask: url('../../gettingStarted/media/diamondIcon.svg') no-repeat;
+ mask-size: 24px 24px;
+ margin: 0 17px 0 20px;
+}
+
+.ads-homepage .btn-remove-tour {
+ display: inline-block;
+ margin: 0 17px 0 20px;
+ width: 20px;
+ height: 20px;
+}
+
+.ads-homepage .btn-remove-tour:hover {
+ cursor: pointer;
+}
+
+.ads-homepage .guided-tour-banner {
+ opacity: 0;
+ position: relative;
+ top: 0;
+ transform: translateY(-100%);
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.6, 1), opacity 0s 0.3s;
+ width: 100%;
+ -ms-flex-align: center;
+ align-items: center;
+ box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
+ display: -ms-flexbox;
+ display: flex;
+ overflow: hidden;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 0;
+ overflow: hidden;
+ padding: 0 14px 0 20px;
+ width: 99%;
+}
+
+.ads-homepage #guidedTourBanner.show {
+ opacity: 1;
+ min-height: 60px;
+ height: auto;
+ transform: translateY(0);
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, opacity 0s 0.3s, height 0s 0.3s;
+}
+
+.ads-homepage .guided-tour-banner p {
+ font-size: 1.16em;
+ font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
+ font-weight: normal;
+ padding: 10px 0 10px;
+}
+
+.ads-homepage .guided-tour-banner b {
+ font-weight: 600;
+}
+
+.ads-homepage .guided-tour-banner .monaco-button {
+ line-height: 1.9em !important;
+ font-weight: 600 !important;
+ height: 26px !important;
+ font-weight: 600 !important;
+ font-size: 14px !important;
+ width: 125px !important;
+ height: 32px !important;
+}
+
+.ads-homepage .guided-tour-banner .ads-tour-btn-container {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+}
+
+.ads-homepage .guided-tour-banner .tour-btn-container p {
+ font-size: 1.3em;
+ margin: 0;
+ margin-right: 15px;
+}
+
+.monaco-workbench .part.editor>.content .ads-homepage .extensions .extensions-tile-link {
text-decoration: none
}
-.monaco-workbench .part.editor>.content .welcomePage .ads_homepage a {
+.monaco-workbench .part.editor>.content .welcomePage .ads-homepage a {
text-decoration: none;
font-weight: 400
}
@@ -1319,24 +1410,24 @@
display: none
}
-.file-icons-enabled .show-file-icons .az_data_welcome_page-name-file-icon.file-icon::before {
+.file-icons-enabled .show-file-icons .az-data-welcome-page-name-file-icon.file-icon::before {
content: " ";
background-image: url('../../../../../../vs/workbench/browser/media/code-icon.svg');
}
-.monaco-workbench .part.editor>.content .welcomePage .linux_only, .monaco-workbench .part.editor>.content .welcomePage .mac_only, .monaco-workbench .part.editor>.content .welcomePage .windows_only {
+.monaco-workbench .part.editor>.content .welcomePage .linux-only, .monaco-workbench .part.editor>.content .welcomePage .mac-only, .monaco-workbench .part.editor>.content .welcomePage .windows-only {
display: none
}
-.monaco-workbench.mac .part.editor>.content .welcomePage .mac_only {
+.monaco-workbench.mac .part.editor>.content .welcomePage .mac-only {
display: block
}
-.monaco-workbench.windows .part.editor>.content .welcomePage .windows_only {
+.monaco-workbench.windows .part.editor>.content .welcomePage .windows-only {
display: block
}
-.monaco-workbench.linux .part.editor>.content .welcomePage .linux_only {
+.monaco-workbench.linux .part.editor>.content .welcomePage .linux-only {
display: block
}
@@ -1344,11 +1435,11 @@
display: list-item
}
-.monaco-workbench.windows .part.editor>.content .welcomePage li.windows_only {
+.monaco-workbench.windows .part.editor>.content .welcomePage li.windows-only {
display: list-item
}
-.monaco-workbench.linux .part.editor>.content .welcomePage li.linux_only {
+.monaco-workbench.linux .part.editor>.content .welcomePage li.linux-only {
display: list-item
}
diff --git a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts
index b44e3a3e16..5713fb8e2b 100644
--- a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts
+++ b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts
@@ -47,13 +47,19 @@ import { KeyCode } from 'vs/base/common/keyCodes';
import { joinPath } from 'vs/base/common/resources';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { addStandardDisposableListener, EventHelper } from 'vs/base/browser/dom';
+import { GuidedTour } from 'sql/workbench/contrib/welcome/page/browser/gettingStartedTour';
+import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
+import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
+import { Button } from 'sql/base/browser/ui/button/button';
const configurationKey = 'workbench.startupEditor';
const oldConfigurationKey = 'workbench.welcome.enabled';
const telemetryFrom = 'welcomePage';
export class WelcomePageContribution implements IWorkbenchContribution {
+
constructor(
+
@IInstantiationService private readonly instantiationService: IInstantiationService,
@IConfigurationService private readonly configurationService: IConfigurationService,
@IEditorService private readonly editorService: IEditorService,
@@ -62,12 +68,14 @@ export class WelcomePageContribution implements IWorkbenchContribution {
@IWorkspaceContextService private readonly contextService: IWorkspaceContextService,
@ILifecycleService private readonly lifecycleService: ILifecycleService,
@ICommandService private readonly commandService: ICommandService,
+ @IWorkbenchLayoutService protected layoutService: IWorkbenchLayoutService,
) {
this.enableWelcomePage().catch(onUnexpectedError);
}
private async enableWelcomePage(): Promise {
const enabled = isWelcomePageEnabled(this.configurationService, this.contextService);
- if (enabled && this.lifecycleService.startupKind !== StartupKind.ReloadedWindow) {
+ const guidedTourEnabled = isGuidedTourEnabled(this.configurationService);
+ if (enabled && this.lifecycleService.startupKind !== StartupKind.ReloadedWindow || guidedTourEnabled) {
const hasBackups: boolean = await this.backupFileService.hasBackups();
const activeEditor = this.editorService.activeEditor;
if (!activeEditor && !hasBackups) {
@@ -93,8 +101,7 @@ export class WelcomePageContribution implements IWorkbenchContribution {
const isMarkDown = (readme: URI) => strings.endsWith(readme.path.toLowerCase(), '.md');
await Promise.all([
this.commandService.executeCommand('markdown.showPreview', null, readmes.filter(isMarkDown), { locked: true }),
- this.editorService.openEditors(readmes.filter(readme => !isMarkDown(readme))
- .map(readme => ({ resource: readme }))),
+ this.editorService.openEditors(readmes.filter(readme => !isMarkDown(readme)).map(readme => ({ resource: readme }))),
]);
} else {
await this.instantiationService.createInstance(WelcomePage).openEditor();
@@ -108,6 +115,7 @@ export class WelcomePageContribution implements IWorkbenchContribution {
}
}
+
function isWelcomePageEnabled(configurationService: IConfigurationService, contextService: IWorkspaceContextService) {
const startupEditor = configurationService.inspect(configurationKey);
if (!startupEditor.userValue && !startupEditor.workspaceValue) {
@@ -119,6 +127,14 @@ function isWelcomePageEnabled(configurationService: IConfigurationService, conte
return startupEditor.value === 'welcomePage' || startupEditor.value === 'readme' || startupEditor.value === 'welcomePageInEmptyWorkbench' && contextService.getWorkbenchState() === WorkbenchState.EMPTY;
}
+function isGuidedTourEnabled(configurationService: IConfigurationService): boolean {
+ const tourEnabled = configurationService.inspect(configurationKey);
+ if (tourEnabled.value === 'welcomePageWithTour') {
+ return true;
+ }
+ return false;
+}
+
export class WelcomePageAction extends Action {
public static readonly ID = 'workbench.action.showWelcomePage';
@@ -151,7 +167,6 @@ interface ExtensionSuggestion {
link?: string;
}
-
interface ExtensionPackExtensions {
name: string;
icon: string;
@@ -193,6 +208,7 @@ const extensionPackStrings = {
const welcomeInputTypeId = 'workbench.editors.welcomePageInput';
class WelcomePage extends Disposable {
+
readonly editorInput: WalkThroughInput;
constructor(
@IEditorService private readonly editorService: IEditorService,
@@ -212,7 +228,7 @@ class WelcomePage extends Disposable {
@IHostService private readonly hostService: IHostService,
@IFileService fileService: IFileService,
@IProductService private readonly productService: IProductService,
- ) {
+ @IWorkbenchLayoutService protected layoutService: IWorkbenchLayoutService) {
super();
this._register(lifecycleService.onShutdown(() => this.dispose()));
const recentlyOpened = this.workspacesService.getRecentlyOpened();
@@ -227,30 +243,33 @@ class WelcomePage extends Disposable {
name: localize('welcome.title', "Welcome"),
resource,
telemetryFrom,
- onReady: (container: HTMLElement) => this.onReady(container, recentlyOpened, installedExtensions, fileService)
+ onReady: (container: HTMLElement) => this.onReady(container, recentlyOpened, installedExtensions, fileService, layoutService)
});
}
public openEditor() {
return this.editorService.openEditor(this.editorInput, { pinned: false });
}
- private onReady(container: HTMLElement, recentlyOpened: Promise, installedExtensions: Promise, fileService: IFileService): void {
+ private onReady(container: HTMLElement, recentlyOpened: Promise, installedExtensions: Promise, fileService: IFileService, layoutService: ILayoutService): void {
const enabled = isWelcomePageEnabled(this.configurationService, this.contextService);
const showOnStartup = container.querySelector('#showOnStartup');
- if (enabled) {
+ const guidedTourEnabled = isGuidedTourEnabled(this.configurationService);
+ if (enabled || guidedTourEnabled) {
showOnStartup.setAttribute('checked', 'checked');
}
+ if (guidedTourEnabled) {
+ this.enableGuidedTour();
+ }
+
showOnStartup.addEventListener('click', e => {
- this.configurationService.updateValue(configurationKey, showOnStartup.checked ? 'welcomePage' : 'newUntitledFile', ConfigurationTarget.USER);
+ this.configurationService.updateValue(configurationKey, showOnStartup.checked ? 'welcomePageWithTour' : 'newUntitledFile', ConfigurationTarget.USER);
});
const prodName = container.querySelector('.welcomePage .title .caption') as HTMLElement;
if (prodName) {
prodName.innerHTML = this.productService.nameLong;
}
-
const welcomeContainerContainer = document.querySelector('.welcomePageContainer').parentElement as HTMLElement;
- const adsHomepage = document.querySelector('.ads_homepage') as HTMLElement;
+ const adsHomepage = document.querySelector('.ads-homepage') as HTMLElement;
adsHomepage.classList.add('responsive-container');
-
const observer = new MutationObserver(parseMutations);
observer.observe(welcomeContainerContainer, {
attributes: true,
@@ -268,8 +287,7 @@ class WelcomePage extends Disposable {
adsHomepage.classList.remove(breakpoint);
}
});
-
- function parseMutations() {
+ function parseMutations(): void {
const width = parseInt(welcomeContainerContainer.style.width);
Object.keys(defaultBreakpoints).forEach(function (breakpoint) {
let minWidth = defaultBreakpoints[breakpoint];
@@ -304,7 +322,7 @@ class WelcomePage extends Disposable {
await updateEntries();
this._register(this.labelService.onDidChangeFormatters(updateEntries));
}).then(undefined, onUnexpectedError);
- this.addExtensionList(container, '.extension_list');
+ this.addExtensionList(container, '.extension-list');
this.addExtensionPack(container, '.extensionPack');
this.updateInstalledExtensions(container, installedExtensions);
this._register(this.instantiationService.invokeFunction(onExtensionChanged)(ids => {
@@ -321,12 +339,61 @@ class WelcomePage extends Disposable {
this.createPreviewModal();
}
- private createWidePreviewToolTip() {
- const previewLink = document.querySelector('#tool_tip_container_wide') as HTMLElement;
- const tooltip = document.querySelector('#tooltip_text_wide') as HTMLElement;
- const previewModalBody = document.querySelector('.preview_tooltip_body') as HTMLElement;
- const previewModalHeader = document.querySelector('.preview_tooltip_header') as HTMLElement;
+ private enableGuidedTour(): void {
+ const guidedTour = this.instantiationService.createInstance(GuidedTour);
+ const adsHomepage = document.querySelector('.ads-homepage');
+ const guidedTourNotificationContainer = document.createElement('div');
+ const p = document.createElement('p');
+ const b = document.createElement('b');
+ const icon = document.createElement('div');
+ const containerLeft = document.createElement('div');
+ const containerRight = document.createElement('div');
+ let startTourBtn = new Button(containerRight);
+ startTourBtn.label = localize('welcomePage.startTour', "Start Tour");
+ const removeTourBtn = document.createElement('a');
+ const removeBtnClasses = ['btn-remove-tour', 'codicon', 'codicon-close'];
+ const flexClassesLeft = ['flex', 'flex-a-center'];
+ const flexClassesRight = ['flex', 'flex-a-start'];
+ guidedTourNotificationContainer.id = 'guidedTourBanner';
+ guidedTourNotificationContainer.classList.add('guided-tour-banner');
+ containerLeft.classList.add(...flexClassesLeft);
+ containerRight.classList.add(...flexClassesRight);
+ icon.classList.add('diamond-icon');
+ removeTourBtn.classList.add(...removeBtnClasses);
+ p.appendChild(b);
+ p.innerText = localize('WelcomePage.TakeATour', "Would you like to take a quick tour of Azure Data Studio?");
+ b.innerText = localize('WelcomePage.welcome', "Welcome!");
+ containerLeft.appendChild(icon);
+ containerLeft.appendChild(p);
+ containerRight.appendChild(removeTourBtn);
+ guidedTourNotificationContainer.appendChild(containerLeft);
+ guidedTourNotificationContainer.appendChild(containerRight);
+ startTourBtn.onDidClick((e) => {
+ this.configurationService.updateValue(configurationKey, 'welcomePageWithTour', ConfigurationTarget.USER);
+ this.layoutService.setSideBarHidden(true);
+ guidedTour.create();
+ });
+
+ removeTourBtn.addEventListener('click', (e: MouseEvent) => {
+ this.configurationService.updateValue(configurationKey, 'welcomePage', ConfigurationTarget.USER);
+ guidedTourNotificationContainer.classList.add('hide');
+ guidedTourNotificationContainer.classList.remove('show');
+ });
+
+ adsHomepage.prepend(guidedTourNotificationContainer);
+
+ setTimeout(function () {
+ guidedTourNotificationContainer.classList.add('show');
+
+ }, 3000);
+ }
+
+ private createWidePreviewToolTip(): void {
+ const previewLink = document.querySelector('#tool-tip-container-wide') as HTMLElement;
+ const tooltip = document.querySelector('#tooltip-text-wide') as HTMLElement;
+ const previewModalBody = document.querySelector('.preview-tooltip-body') as HTMLElement;
+ const previewModalHeader = document.querySelector('.preview-tooltip-header') as HTMLElement;
addStandardDisposableListener(previewLink, 'mouseover', () => {
tooltip.setAttribute('aria-hidden', 'true');
tooltip.classList.toggle('show');
@@ -335,7 +402,6 @@ class WelcomePage extends Disposable {
tooltip.setAttribute('aria-hidden', 'false');
tooltip.classList.remove('show');
});
-
addStandardDisposableListener(previewLink, 'keydown', event => {
if (event.equals(KeyCode.Escape)) {
if (tooltip.classList.contains('show')) {
@@ -349,7 +415,6 @@ class WelcomePage extends Disposable {
previewModalHeader.focus();
}
});
-
addStandardDisposableListener(tooltip, 'keydown', event => {
if (event.equals(KeyCode.Escape)) {
if (tooltip.classList.contains('show')) {
@@ -366,7 +431,6 @@ class WelcomePage extends Disposable {
}
}
});
-
window.addEventListener('click', (event) => {
const target = event.target as HTMLTextAreaElement;
if (!target.matches('.tooltip')) {
@@ -377,14 +441,12 @@ class WelcomePage extends Disposable {
});
}
- private createDropDown() {
- const dropdownBtn = document.querySelector('#dropdown_btn') as HTMLElement;
+ private createDropDown(): void {
+ const dropdownBtn = document.querySelector('#dropdown-btn') as HTMLElement;
const dropdown = document.querySelector('#dropdown') as HTMLInputElement;
-
addStandardDisposableListener(dropdownBtn, 'click', () => {
dropdown.classList.toggle('show');
});
-
addStandardDisposableListener(dropdownBtn, 'keydown', event => {
if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
const dropdownFirstElement = document.querySelector('#dropdown').firstElementChild.children[0] as HTMLInputElement;
@@ -392,7 +454,6 @@ class WelcomePage extends Disposable {
dropdownFirstElement.focus();
}
});
-
addStandardDisposableListener(dropdown, 'keydown', event => {
if (event.equals(KeyCode.Escape)) {
if (dropdown.classList.contains('show')) {
@@ -404,15 +465,13 @@ class WelcomePage extends Disposable {
});
const body = document.querySelector('body');
-
if (body.classList.contains('windows') || body.classList.contains('linux')) {
- const macOnly = document.querySelector('#dropdown_mac_only');
+ const macOnly = document.querySelector('#dropdown-mac-only');
macOnly.remove();
} else if (body.classList.contains('mac')) {
- const windowsLinuxOnly = document.querySelector('#dropdown_windows_linux_only');
+ const windowsLinuxOnly = document.querySelector('#dropdown-windows-linux-only');
windowsLinuxOnly.remove();
}
-
window.addEventListener('click', (event) => {
const target = event.target as HTMLTextAreaElement;
if (!target.matches('.dropdown')) {
@@ -448,31 +507,24 @@ class WelcomePage extends Disposable {
});
}
- private createPreviewModal() {
- const modal = document.querySelector('#preview_modal') as HTMLElement;
- const btn = document.querySelector('#tool_tip_container_narrow') as HTMLElement;
- const span = document.querySelector('.close_icon') as HTMLElement;
- const previewModalHeader = document.querySelector('.preview_modal_header') as HTMLElement;
-
-
-
+ private createPreviewModal(): void {
+ const modal = document.querySelector('#preview-modal') as HTMLElement;
+ const btn = document.querySelector('#tool-tip-container-narrow') as HTMLElement;
+ const span = document.querySelector('.close-icon') as HTMLElement;
+ const previewModalHeader = document.querySelector('.preview-modal-header') as HTMLElement;
btn.addEventListener('click', function () {
modal.classList.toggle('show');
});
-
span.addEventListener('click', function () {
modal.classList.remove('show');
});
-
window.addEventListener('click', (e: MouseEvent) => {
if (e.target === modal && modal.classList.contains('show')) {
modal.classList.remove('show');
}
});
-
btn.addEventListener('keydown', (e: KeyboardEvent) => {
let event = new StandardKeyboardEvent(e);
-
if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
modal.classList.toggle('show');
modal.setAttribute('aria-hidden', 'false');
@@ -498,8 +550,8 @@ class WelcomePage extends Disposable {
});
modal.addEventListener('keydown', function (e: KeyboardEvent) {
- const previewModalBody = document.querySelector('.preview_modal_body') as HTMLElement;
- const previewModalHeader = document.querySelector('.preview_modal_header') as HTMLElement;
+ const previewModalBody = document.querySelector('.preview-modal-body') as HTMLElement;
+ const previewModalHeader = document.querySelector('.preview-modal-header') as HTMLElement;
let event = new StandardKeyboardEvent(e);
if (event.equals(KeyCode.Tab)) {
@@ -527,7 +579,6 @@ class WelcomePage extends Disposable {
const a = document.createElement('a');
const span = document.createElement('span');
const ul = document.querySelector('.recent ul');
-
icon.title = relativePath;
a.innerText = name;
a.title = relativePath;
@@ -542,7 +593,7 @@ class WelcomePage extends Disposable {
e.preventDefault();
e.stopPropagation();
});
- icon.classList.add('themed_icon');
+ icon.classList.add('themed-icon');
li.appendChild(icon);
li.appendChild(a);
span.classList.add('path');
@@ -576,11 +627,11 @@ class WelcomePage extends Disposable {
return result;
}
- private addExtensionList(container: HTMLElement, listSelector: string) {
+ private addExtensionList(container: HTMLElement, listSelector: string): void {
const list = container.querySelector(listSelector);
if (list) {
extensions.forEach((extension, i) => {
- const flexDivContainerClasses = ['flex', 'flex_a_center', 'extension_inner'];
+ const flexDivContainerClasses = ['flex', 'flex-a-center', 'extension-inner'];
const outerAnchorContainerElm = document.createElement('a');
const flexDivContainerElm = document.createElement('div');
const descriptionContainerElm = document.createElement('div');
@@ -588,18 +639,15 @@ class WelcomePage extends Disposable {
const iconElm = document.createElement('img');
const pElm = document.createElement('p');
const bodyElm = document.createElement('p');
-
outerAnchorContainerElm.classList.add('extension');
outerAnchorContainerElm.classList.add('tile');
outerAnchorContainerElm.href = extension.link;
flexDivContainerElm.classList.add(...flexDivContainerClasses);
descriptionContainerElm.classList.add('description');
- imgContainerElm.classList.add('img_container');
+ imgContainerElm.classList.add('img-container');
iconElm.classList.add('icon');
- pElm.classList.add('extension_header');
-
+ pElm.classList.add('extension-header');
iconElm.src = extension.icon;
-
imgContainerElm.appendChild(iconElm);
flexDivContainerElm.appendChild(imgContainerElm);
flexDivContainerElm.appendChild(descriptionContainerElm);
@@ -613,16 +661,15 @@ class WelcomePage extends Disposable {
}
}
- private addExtensionPack(container: HTMLElement, anchorSelector: string) {
+ private addExtensionPack(container: HTMLElement, anchorSelector: string): void {
const btnContainer = container.querySelector(anchorSelector);
if (btnContainer) {
extensionPacks.forEach((extension, i) => {
const a = document.createElement('a');
- const classes = ['btn', 'btn_secondary', 'a_self_end', 'flex', 'flex_a_center', 'flex_j_center'];
+ const classes = ['btn', 'btn-secondary', 'a-self-end', 'flex', 'flex-a-center', 'flex-j-center'];
const btn = document.createElement('button');
- const description = document.querySelector('.extension_pack_body');
- const header = document.querySelector('.extension_pack_header');
-
+ const description = document.querySelector('.extension-pack-body');
+ const header = document.querySelector('.extension-pack-header');
a.classList.add(...classes);
a.innerText = localize('welcomePage.install', "Install");
a.title = extension.title || (extension.isKeymap ? localize('welcomePage.installKeymap', "Install {0} keymap", extension.name) : localize('welcomePage.installExtensionPack', "Install additional support for {0}", extension.name));
@@ -642,16 +689,14 @@ class WelcomePage extends Disposable {
btn.setAttribute('disabled', 'true');
btn.setAttribute('data-extension', extension.id);
btnContainer.appendChild(btn);
-
description.innerHTML = extension.description;
header.innerHTML = extension.name;
-
- this.addExtensionPackList(container, '.extension_pack_extension_list');
+ this.addExtensionPackList(container, '.extension-pack-extension-list');
});
}
}
- private addExtensionPackList(container: HTMLElement, listSelector: string) {
+ private addExtensionPackList(container: HTMLElement, listSelector: string): void {
const list = container.querySelector(listSelector);
if (list) {
extensionPackExtensions.forEach((j) => {
@@ -661,27 +706,21 @@ class WelcomePage extends Disposable {
const descriptionContainerElem = document.createElement('div');
const pElem = document.createElement('p');
const anchorElem = document.createElement('a');
-
- const outerContainerClasses = ['extension_pack_extension_container', 'flex', 'flex_j_center'];
- const flexContainerClasses = ['flex', 'flex_a_center'];
-
+ const outerContainerClasses = ['extension-pack-extension-container', 'flex', 'flex-j-center'];
+ const flexContainerClasses = ['flex', 'flex-a-center'];
anchorElem.href = j.link;
-
outerContainerElem.classList.add(...outerContainerClasses);
flexContainerElem.classList.add(...flexContainerClasses);
iconContainerElem.classList.add('icon');
- pElem.classList.add('extension_pack_extension_list_header');
+ pElem.classList.add('extension-pack-extension-list-header');
descriptionContainerElem.classList.add('description');
-
outerContainerElem.appendChild(flexContainerElem);
flexContainerElem.appendChild(iconContainerElem);
flexContainerElem.appendChild(descriptionContainerElem);
descriptionContainerElem.appendChild(anchorElem);
anchorElem.appendChild(pElem);
-
pElem.innerText = j.name;
iconContainerElem.src = j.icon;
-
list.appendChild(outerContainerElem);
});
}
@@ -876,107 +915,105 @@ export class WelcomeInputFactory implements IEditorInputFactory {
// theming
export const welcomePageBackground = registerColor('welcomePage.background', { light: null, dark: null, hc: null }, localize('welcomePage.background', 'Background color for the Welcome page.'));
-
registerThemingParticipant((theme, collector) => {
-
const backgroundColor = theme.getColor(welcomePageBackground);
if (backgroundColor) {
collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer { background-color: ${backgroundColor}; }`);
}
const tileBackgroundColor = theme.getColor(inputBackground);
if (tileBackgroundColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tile:not(.extension):not(.extension_pack) { background-color: ${tileBackgroundColor}; }`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tool_tip .tool_tip_text { background-color: ${tileBackgroundColor}; }`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .modal_content { background-color: ${tileBackgroundColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tile:not(.extension):not(.extension-pack) { background-color: ${tileBackgroundColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tool-tip .tool-tip-text { background-color: ${tileBackgroundColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .modal-content { background-color: ${tileBackgroundColor}; }`);
}
const tileBorderColor = theme.getColor(tileBorder);
if (tileBorderColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tile:not(.extension):not(.extension_pack) { border-color: ${tileBorderColor}; }`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tool_tip .tool_tip_text:after { border-color: transparent transparent ${tileBorderColor}; transparent }`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tool_tip .tool_tip_text { border: 1px solid ${tileBorderColor}; }`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .modal_content { border: 1px solid ${tileBorderColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tile:not(.extension):not(.extension-pack) { border-color: ${tileBorderColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tool-tip .tool-tip-text:after { border-color: transparent transparent ${tileBorderColor}; transparent }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tool-tip .tool-tip-text { border: 1px solid ${tileBorderColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .modal-content { border: 1px solid ${tileBorderColor}; }`);
}
const tileBoxShadowColor = theme.getColor(tileBoxShadow);
if (tileBoxShadowColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .tile:not(.extension):not(.extension_pack) { box-shadow: 0px 1px 4px ${tileBoxShadowColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .tile:not(.extension):not(.extension-pack) { box-shadow: 0px 1px 4px ${tileBoxShadowColor}; }`);
}
const buttonPrimaryBackgroundColor = theme.getColor(buttonBackground);
if (buttonPrimaryBackgroundColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn_primary { background-color: ${buttonPrimaryBackgroundColor};}`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn_primary { border-color: ${buttonPrimaryBackgroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary { background-color: ${buttonPrimaryBackgroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary { border-color: ${buttonPrimaryBackgroundColor};}`);
}
const buttonForegroundColor = theme.getColor(buttonForeground);
if (buttonForegroundColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn_primary { color: ${buttonForegroundColor};}`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .icon_arrow_down:before { color: ${buttonForegroundColor};}`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .extension_pack_body { color: ${buttonForegroundColor};}`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .extension_pack_header { color: ${buttonForegroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary { color: ${buttonForegroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .icon-arrow-down:before { color: ${buttonForegroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .extension-pack-body { color: ${buttonForegroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .extension-pack-header { color: ${buttonForegroundColor};}`);
}
const buttonHoverBackgroundColor = theme.getColor(buttonHoverBackground);
if (buttonHoverBackgroundColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn_primary:hover { background: ${buttonHoverBackgroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary:hover { background: ${buttonHoverBackgroundColor};}`);
}
const buttonSecondaryBackgroundColor = theme.getColor(buttonSecondaryBackground);
if (buttonSecondaryBackgroundColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn_secondary { background-color: ${buttonSecondaryBackgroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary { background-color: ${buttonSecondaryBackgroundColor};}`);
}
const buttonSecondaryBorderColor = theme.getColor(buttonSecondaryBorder);
if (buttonSecondaryBorderColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn_secondary { border: 1px solid ${buttonSecondaryBorderColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary { border: 1px solid ${buttonSecondaryBorderColor};}`);
}
const buttonSecondaryColor = theme.getColor(buttonSecondary);
if (buttonSecondaryColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn_secondary { color: ${buttonSecondaryColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary { color: ${buttonSecondaryColor};}`);
}
const buttonSecondaryHover = theme.getColor(buttonSecondaryHoverColor);
if (buttonSecondaryColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn_secondary:hover { color: ${buttonSecondaryHover}; border: 1px solid ${buttonSecondaryHover};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary:hover { color: ${buttonSecondaryHover}; border: 1px solid ${buttonSecondaryHover};}`);
}
const selectBackgroundColor = theme.getColor(selectBackground);
if (selectBackgroundColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .dropdown-content { background: ${selectBackgroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content { background: ${selectBackgroundColor};}`);
}
const menuForegroundColor = theme.getColor(menuForeground);
if (menuForegroundColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .dropdown-content a { color: ${menuForegroundColor};}`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .icon_arrow_down_dark:before { color: ${menuForegroundColor};}`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .ads_homepage_section .history .moreRecent_list li.moreRecent a { color: ${menuForegroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a { color: ${menuForegroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .icon-arrow-down-dark:before { color: ${menuForegroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .ads-homepage-section .history .moreRecent-list li.moreRecent a { color: ${menuForegroundColor};}`);
}
const hoverShadowColor = theme.getColor(hoverShadow);
if (hoverShadowColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .tile:hover:not(.no_hover) { box-shadow: 0px 3px 8px ${hoverShadowColor}; }`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .dropdown-content { box-shadow: 0px 4px 4px ${hoverShadowColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .tile:hover:not(.no-hover) { box-shadow: 0px 3px 8px ${hoverShadowColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content { box-shadow: 0px 4px 4px ${hoverShadowColor};}`);
}
const menuBorderColor = theme.getColor(menuBorder);
if (menuBorderColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .dropdown-content a { border-color: ${menuBorderColor};}`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .ads_homepage .dropdown-content { border-color: ${menuBorderColor};}`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn_primary { border-color: ${menuBorderColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a { border-color: ${menuBorderColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .ads-homepage .dropdown-content { border-color: ${menuBorderColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary { border-color: ${menuBorderColor};}`);
}
const buttonDropdownBackgroundHoverColor = theme.getColor(buttonDropdownBackgroundHover);
if (buttonDropdownBackgroundHoverColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .dropdown-content a:hover, .monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .dropdown-content a:focus { background: ${buttonDropdownBackgroundHoverColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:hover, .monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:focus { background: ${buttonDropdownBackgroundHoverColor};}`);
}
const buttonDropdownHoverColor = theme.getColor(menuSelectionForeground);
if (buttonDropdownHoverColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .dropdown-content a:hover, .monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .dropdown-content a:focus { color: ${buttonDropdownHoverColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:hover, .monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:focus { color: ${buttonDropdownHoverColor};}`);
}
const editorWidgetBorderColor = theme.getColor(editorWidgetBorder);
if (editorWidgetBorderColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .tile.extension_pack { border-color: ${editorWidgetBorderColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .tile.extension-pack { border-color: ${editorWidgetBorderColor};}`);
}
const extensionPackHeaderTextShadow = theme.getColor(extensionPackHeaderShadow);
if (extensionPackHeaderTextShadow) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .extension_pack_header { text-shadow: 0px 4px 4px ${extensionPackHeaderTextShadow};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .extension-pack-header { text-shadow: 0px 4px 4px ${extensionPackHeaderTextShadow};}`);
}
const extensionPackGradientColorOne = theme.getColor(extensionPackGradientColorOneColor);
const extensionPackGradientColorTwo = theme.getColor(extensionPackGradientColorTwoColor);
if (extensionPackGradientColorOne && extensionPackGradientColorTwo) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .extension_pack_description:before { background-image: linear-gradient(0.49deg, ${extensionPackGradientColorOne} 82.75%, ${extensionPackGradientColorTwo});}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .extension-pack-description:before { background-image: linear-gradient(0.49deg, ${extensionPackGradientColorOne} 82.75%, ${extensionPackGradientColorTwo});}`);
}
const selectBorderColor = theme.getColor(selectBorder);
if (selectBorderColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .ads_homepage_section .history .list li:not(.moreRecent), .monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .ads_homepage_section .history .list_header_container, .monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .ads_homepage_section .pinned .list li:not(.moreRecent), .monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .ads_homepage_section .pinned .list_header_container { border-color: ${selectBorderColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .ads-homepage-section .history .list li:not(.moreRecent), .monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .ads-homepage-section .history .list-header-container, .monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .ads-homepage-section .pinned .list li:not(.moreRecent), .monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .ads-homepage-section .pinned .list-header-container { border-color: ${selectBorderColor};}`);
}
const descriptionColor = theme.getColor(descriptionForeground);
if (descriptionColor) {
@@ -993,11 +1030,10 @@ registerThemingParticipant((theme, collector) => {
const foregroundColor = theme.getColor(foreground);
if (foregroundColor) {
collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage h1, h2, h3, h4, h5, h6, h7, p { color: ${foregroundColor}; }`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .ads_homepage .resources .label { color: ${foregroundColor}; }`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .ads_homepage_section .history .list li a { color: ${foregroundColor};}`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .ads_homepage .resources .label { color: ${foregroundColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .ads-homepage .resources .label { color: ${foregroundColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .ads-homepage-section .history .list li a { color: ${foregroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .ads-homepage .resources .label { color: ${foregroundColor}; }`);
}
-
const link = theme.getColor(textLinkForeground);
if (link) {
collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage a { color: ${link}; }`);
@@ -1005,7 +1041,7 @@ registerThemingParticipant((theme, collector) => {
const activeLink = theme.getColor(textLinkActiveForeground);
if (activeLink) {
collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage a:hover, .monaco-workbench .part.editor > .content .welcomePage a:active { color: ${activeLink}; }`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .ads_homepage .themed_icon_alt { background-color: ${activeLink}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .ads-homepage .themed-icon-alt { background-color: ${activeLink}; }`);
}
const focusColor = theme.getColor(focusBorder);
if (focusColor) {
@@ -1017,17 +1053,17 @@ registerThemingParticipant((theme, collector) => {
}
const focusBorderColor = theme.getColor(focusBorder);
if (focusBorderColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .ads_homepage #dropdown_btn:focus { outline-color: ${focusBorderColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .ads-homepage #dropdown-btn:focus { outline-color: ${focusBorderColor}; }`);
}
const iconForegroundColor = theme.getColor(iconForeground);
if (iconForegroundColor) {
collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .entity { color: ${iconForegroundColor}; }`);
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .ads_homepage .themed_icon { background-color: ${iconForegroundColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .ads-homepage .themed-icon { background-color: ${iconForegroundColor}; }`);
}
const gradientOneColor = theme.getColor(gradientOne);
const gradientTwoColor = theme.getColor(gradientTwo);
const gradientBackgroundColor = theme.getColor(gradientBackground);
if (gradientTwoColor && gradientOneColor) {
- collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .gradient { background-image: linear-gradient(0deg, ${gradientOneColor} 0%, ${gradientTwoColor} 100%); background-color: ${gradientBackgroundColor}}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .gradient { background-image: linear-gradient(0deg, ${gradientOneColor} 0%, ${gradientTwoColor} 100%); background-color: ${gradientBackgroundColor}}`);
}
});
diff --git a/src/vs/workbench/contrib/welcome/page/browser/welcomePage.contribution.ts b/src/vs/workbench/contrib/welcome/page/browser/welcomePage.contribution.ts
index f41461e5e1..0b35f951c0 100644
--- a/src/vs/workbench/contrib/welcome/page/browser/welcomePage.contribution.ts
+++ b/src/vs/workbench/contrib/welcome/page/browser/welcomePage.contribution.ts
@@ -23,15 +23,16 @@ Registry.as(ConfigurationExtensions.Configuration)
'workbench.startupEditor': {
'scope': ConfigurationScope.APPLICATION, // Make sure repositories cannot trigger opening a README for tracking.
'type': 'string',
- 'enum': ['none', 'welcomePage', 'readme', 'newUntitledFile', 'welcomePageInEmptyWorkbench'],
+ 'enum': ['none', 'welcomePage', 'welcomePageWithTour', 'readme', 'newUntitledFile', 'welcomePageInEmptyWorkbench'],
'enumDescriptions': [
localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'workbench.startupEditor.none' }, "Start without an editor."),
- localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'workbench.startupEditor.welcomePage' }, "Open the Welcome page (default)."),
+ localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'workbench.startupEditor.welcomePageWithTur' }, "Open the welcome page with Getting Started Tour (default)"),
+ localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'workbench.startupEditor.welcomePage' }, "Open the Welcome page"),
localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'workbench.startupEditor.readme' }, "Open the README when opening a folder that contains one, fallback to 'welcomePage' otherwise."),
localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'workbench.startupEditor.newUntitledFile' }, "Open a new untitled file (only applies when opening an empty workspace)."),
localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'workbench.startupEditor.welcomePageInEmptyWorkbench' }, "Open the Welcome page when opening an empty workbench."),
],
- 'default': 'welcomePage',
+ 'default': 'welcomePageWithTour',
'description': localize('workbench.startupEditor', "Controls which editor is shown at startup, if none are restored from the previous session.")
},
}
diff --git a/src/sql/workbench/contrib/welcome/page/browser/gettingStartedTour.css b/src/sql/workbench/contrib/welcome/page/browser/gettingStartedTour.css new file mode 100644 index 0000000000..cbdb593827 --- /dev/null +++ b/src/sql/workbench/contrib/welcome/page/browser/gettingStartedTour.css @@ -0,0 +1,227 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the Source EULA. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +.ads-tour:focus { + outline: 0 none !important; +} + +.monaco-workbench>.ads-tour { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 9999; + font-size: 1em; + transition: font-size .25s; + outline: 0; +} + +#workbench\.parts\.editor { + transition: filter .25s, opacity .2s; +} + +.monaco-workbench.blur-background #workbench\.parts\.editor, +.monaco-workbench.blur-background #workbench\.parts\.panel, +.monaco-workbench.blur-background #workbench\.parts\.sidebar { + filter: blur(2px); + opacity: .4; +} + +.hc-black .monaco-workbench.blur-background #workbench\.parts\.editor, +.hc-black .monaco-workbench.blur-background #workbench\.parts\.panel, +.hc-black .monaco-workbench.blur-background #workbench\.parts\.sidebar { + opacity: .2; +} + +.guided-tour .ads-tour-hide { + display: none; +} + +.guided-tour p { + font-size: 1.2em; + font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; + font-weight: 400; +} + +.ads-tour-popup .ads-tour-popup-text-container { + padding: 20px 15px 15px 20px; +} + +.ads-tour-popup .ads-tour-popup-text-container p { + font-size: 1em; +} + +.ads-tour-popup { + position: absolute; + width: 400px; + left: 45px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} + +.ads-tour-btn-container { + display: flex; + justify-content: flex-end; + align-items: center; +} + +.ads-tour-btn-container p { + font-size: 1.5em; + margin: 0; + margin-left: 15px; +} + +.ads-tour-btn-container:first-of-type(p) { + margin-bottom: 20px; +} + +.ads-tour-popup .ads-tour-btn-exit { + background: none; + position: absolute; + top: 2px; + right: 10px; + font-size: 1.185em; + font-family: inherit; + transform: scaleX(1.4); +} + +.ads-tour-popup .ads-tour-btn-exit:hover { + cursor: pointer; +} + +.ads-tour-popup .monaco-button { + box-sizing: border-box; + width: 77px; + height: 34px; + padding-top: 1px; + font-size: 1.08em; + line-height: 29px; + border-radius: 2px; + display: flex; + align-content: center; + justify-content: center; + text-align: center; + text-decoration: none; + margin: 0; + align-self: flex-end; + cursor: pointer; +} + +.ads-tour-popup .flex.column { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; +} + +.ads-tour-popup h1, +.ads-tour-popup p { + font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; + font-weight: 400; +} + +.ads-tour-popup h1 { + margin: 0; + font-size: 20px; +} + +.ads-tour-popup.arrow-left:after { + content: " "; + position: absolute; + left: -10px; + top: 8px; + border-top: 10px solid transparent; + border-left: none; + border-bottom: 10px solid transparent; +} + +.ads-tour-popup.arrow-top:after { + content: " "; + position: absolute; + left: 0; + right: 0; + border-top: 10px solid transparent; + border-left: none; + border-bottom: 10px solid transparent; + transform: rotate(90deg); + bottom: 509px; +} + +.ads-tour-popup.arrow-bottom-left:after { + content: " "; + position: absolute; + left: -10px; + border-top: 10px solid transparent; + border-left: none; + border-bottom: 10px solid transparent; + bottom: 3px; +} + +.ads-tour-popup.arrow-center-left:after { + content: " "; + position: absolute; + left: -10px; + border-top: 10px solid transparent; + border-left: none; + border-bottom: 10px solid transparent; + bottom: 145px; +} + +.ads-tour-popup { + max-height: 361px; + display: none; + z-index: 1; +} + +.ads-tour-popup.ads-tour-show { + display: block; +} + +.tour-overlay { + width: 100%; + height: 100%; + position: absolute; + top: 30px; + right: 0; + bottom: 0; + left: 0; + opacity: .6; +} + +.ads-tour-popup .ads-tour-img { + width: 400px; + height: 178px; +} + +.ads-tour-btn-container .ads-tour-docs-link { + align-self: center; + justify-self: flex-start; + margin-right: auto; + text-decoration: underline; +} + +.ads-tour-btn { + box-sizing: border-box; + width: 100%; + height: 34px; + padding-top: 1px; + font-size: 1.08em; + line-height: 29px; + border-radius: 2px; + display: flex; + align-content: center; + justify-content: center; + text-align: center; + text-decoration: none; + margin: 10px 0; +} + +.monaco-workbench .activitybar>.content :not(.monaco-menu)>.monaco-action-bar .action-label.codicon.subject-element-focused { + z-index: 1!important; + pointer-events: none!important; +} diff --git a/src/sql/workbench/contrib/welcome/page/browser/gettingStartedTour.ts b/src/sql/workbench/contrib/welcome/page/browser/gettingStartedTour.ts new file mode 100644 index 0000000000..b901f91799 --- /dev/null +++ b/src/sql/workbench/contrib/welcome/page/browser/gettingStartedTour.ts @@ -0,0 +1,358 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the Source EULA. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import * as dom from 'vs/base/browser/dom'; +import 'vs/css!./gettingStartedTour'; +import { ILayoutService } from 'vs/platform/layout/browser/layoutService'; +import { localize } from 'vs/nls'; +import { Action } from 'vs/base/common/actions'; +import { Disposable } from 'vs/base/common/lifecycle'; +import { RawContextKey, IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; +import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; +import { registerThemingParticipant } from 'vs/platform/theme/common/themeService'; +import { buttonBackground, buttonForeground } from 'vs/platform/theme/common/colorRegistry'; +import { Color } from 'vs/base/common/color'; +import { Registry } from 'vs/platform/registry/common/platform'; +import { IWorkbenchActionRegistry, Extensions } from 'vs/workbench/common/actions'; +import { SyncActionDescriptor } from 'vs/platform/actions/common/actions'; +import { KeyCode } from 'vs/base/common/keyCodes'; +import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; +import { Button } from 'sql/base/browser/ui/button/button'; + +const $ = dom.$; +interface TourData { + key: string; + order: string; + header: string; + body: string; + step: string; + elmClass: string; + id: string; + btnId: string; + btnText: string; + docs?: string; + elementToAppendTo: string; + command?: string; + subjectImage?: string; + arrow: string; + popupImage: string; +} + +const tourData: TourData[] = [ + { key: 'connections', order: '1', header: localize('GuidedTour.connections', "Connections"), body: localize('GuidedTour.makeConnections', "Connect, query, and manage your connections from SQL Server, Azure, and more."), step: localize('GuidedTour.one', "1"), elmClass: 'overview-tour-connections', id: 'overview-tour-connections', btnId: 'overview-tour-connections-btn', btnText: localize('GuidedTour.next', "Next"), docs: 'https://aka.ms/ads-connections-quickstart', elementToAppendTo: '.action-label.dataExplorer', arrow: 'arrow-left', popupImage: './../../gettingStarted/media/connections.png' }, + { key: 'jupyer_books', order: '2', header: localize('GuidedTour.notebooks', "Notebooks"), body: localize('GuidedTour.gettingStartedNotebooks', "Get started creating your own notebook or collection of notebooks in a single place."), step: localize('GuidedTour.two', "2"), elmClass: 'overview-tour-jupyterBooks', id: 'overview-tour-jupyterBooks', btnId: 'overview-tour-jupyter-btn', btnText: localize('GuidedTour.next', "Next"), docs: 'https://aka.ms/ads-notebooks', elementToAppendTo: '.action-label.activity-workbench-view-extension-books-explorer', arrow: 'arrow-left', popupImage: './../../gettingStarted/media/notebooks.png' }, + { key: 'extensions', order: '3', header: localize('GuidedTour.extensions', "Extensions"), body: localize('GuidedTour.addExtensions', "Extend the functionality of Azure Data Studio by installing extensions developed by us/Microsoft as well as the third-party community (you!)."), step: localize('GuidedTour.three', "3"), elmClass: 'overview-tour-extensions', id: 'overview-tour-extensions', btnId: 'overview-tour-extensions-btn', btnText: localize('GuidedTour.next', "Next"), docs: 'https://aka.ms/ads-extensions', elementToAppendTo: '.action-label.codicon-extensions', arrow: 'arrow-left', popupImage: './../../gettingStarted/media/extensions.png' }, + { key: 'settings', order: '4', header: localize('GuidedTour.settings', "Settings"), body: localize('GuidedTour.makeConnesetSettings', "Customize Azure Data Studio based on your preferences. You can configure Settings like autosave and tab size, personalize your Keyboard Shortcuts, and switch to a Color Theme of your liking."), step: localize('GuidedTour.four', "4"), elmClass: 'overview-tour-settings', id: 'overview-tour-settings', btnId: 'overview-tour-settings-btn', btnText: localize('GuidedTour.next', "Next"), elementToAppendTo: '.codicon-settings-gear', arrow: 'arrow-bottom-left', popupImage: '../../gettingStarted/media/settings.png' }, + { key: 'welcome_page', order: '5', header: localize('GuidedTour.welcomePage', "Welcome Page"), body: localize('GuidedTour.discoverWelcomePage', "Discover top features, recently opened files, and recommended extensions on the Welcome page. For more information on how to get started in Azure Data Studio, check out our videos and documentation."), step: localize('GuidedTour.five', "5"), elmClass: 'overview-tour-home', id: 'overview-tour-home', btnId: 'overview-tour-home-btn', btnText: localize('GuidedTour.finish', "Finish"), elementToAppendTo: 'center', arrow: 'none', popupImage: '../../gettingStarted/media/welcome.png' }, +]; + +const IS_OVERLAY_VISIBLE = new RawContextKey