mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-06 01:25:38 -05:00
builds getting started tour (#10546)
* builds getting started tour * reorganizes ts according to amirs comments * Fix hygiene issues * updates class names * adds description to new configuration value * uses core components * PR fixes based on Charles comments * formats css * updates guided tour based on charles comments * updates css formatting * fixes read more link * formats gettingStartedTour.ts * updates copy * Add CodeQL Analysis workflow (#10195) * Add CodeQL Analysis workflow * Fix path * updates pr based on pr comments * removes unused decleration * formatting * reformats css document * updates file path * updates images Co-authored-by: Amir Omidi <amomidi@microsoft.com> Co-authored-by: Justin Hutchings <jhutchings1@users.noreply.github.com>
This commit is contained in:
v-bbrady
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,4 @@
|
||||
|
||||
<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.5938 6.71484L11 19.7578L0.40625 6.71484L6.69922 0H15.3008L21.5938 6.71484ZM13.7891 6L12.1016 1.5H9.89844L8.21094 6H13.7891ZM8.12891 7.5L11 17.5547L13.8711 7.5H8.12891ZM7.03906 1.5L2.83203 6H6.85156L8.53906 1.5H7.03906ZM2.67969 7.5L9.03125 15.3164L6.79297 7.5H2.67969ZM12.9688 15.3164L19.3203 7.5H15.207L12.9688 15.3164ZM19.168 6L14.9609 1.5H13.4609L15.1484 6H19.168Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 500 B |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -0,0 +1,10 @@
|
||||
<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.2" d="M51.4626 50.948L34.9701 42.2208L12.7969 55.7359L28.8007 64.7662L51.4626 50.948Z" fill="#1F1D21"/>
|
||||
<path d="M28.2509 23.3723L28.6174 63.0087L13.1634 54.4026L12.7969 14.7662L28.2509 23.3723Z" fill="#137AD1"/>
|
||||
<path d="M28.251 23.3723L51.5848 9.37229V49.0693L28.6175 63.0087L28.251 23.3723Z" fill="#1D4A79"/>
|
||||
<path d="M12.7969 14.7662L35.7642 0.76622L51.5848 9.37228L28.2509 23.3723L12.7969 14.7662Z" fill="#2195DC"/>
|
||||
<path d="M22.7534 26.1602V27.6147L15.9121 23.7965V22.342L22.7534 26.1602Z" fill="#CDCDD0"/>
|
||||
<path d="M24.5248 27.1905V28.5844L23.3643 27.9177V26.5238L24.5248 27.1905Z" fill="#EBEBEB"/>
|
||||
<path d="M22.8145 29.0693V30.4632L15.9731 26.645V25.2511L22.8145 29.0693Z" fill="#CDCDD0"/>
|
||||
<path d="M24.5248 30.039L24.5859 31.4935L23.4253 30.8268L23.3643 29.3723L24.5248 30.039Z" fill="#EBEBEB"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 925 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@@ -9,67 +9,67 @@ import { localize } from 'vs/nls';
|
||||
export default () => `
|
||||
<div class="welcomePageContainer">
|
||||
<div class="welcomePage">
|
||||
<div class="ads_homepage splash">
|
||||
<div class="ads-homepage splash">
|
||||
<div class="gradient">
|
||||
<div class="preview_text tool_tip">
|
||||
<div class="tool_tip_container" id="tool_tip_container_wide">
|
||||
<a aria-describedby="tooltip_text_wide" id="preview_link_wide" class="preview_link" tabindex="0" name="preview"><p>Preview</p><i class="icon_info themed_icon"></i></a>
|
||||
<span role="tooltip" id="tooltip_text_wide" class="tool_tip_text" aria-hidden="true">
|
||||
<h3 tabindex="0" class="preview_tooltip_header">${escape(localize('welcomePage.previewHeader', "This page is in preview"))}</h3>
|
||||
<p tabindex="0" class="preview_tooltip_body">${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."))}</p>
|
||||
<div class="preview-text tool-tip">
|
||||
<div class="tool-tip-container" id="tool-tip-container-wide">
|
||||
<a class="ads-welcome-page-link" aria-describedby="tooltip-text-wide" id="preview-link-wide" class="preview-link" tabindex="0" name="preview"><p>Preview</p><i class="icon-info themed-icon"></i></a>
|
||||
<span role="tooltip" id="tooltip-text-wide" class="tool-tip-text" aria-hidden="true">
|
||||
<h3 tabindex="0" class="preview-tooltip-header">${escape(localize('welcomePage.previewHeader', "This page is in preview"))}</h3>
|
||||
<p tabindex="0" class="preview-tooltip-body">${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."))}</p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="tool_tip_container" id="tool_tip_container_narrow">
|
||||
<a aria-haspopup="true" class="preview_link" tabindex="0" id="preview_link_narrow" name="previewNarrow"><p>Preview</p><i class="icon_info themed_icon"></i></a>
|
||||
<div class="tool-tip-container" id="tool-tip-container-narrow">
|
||||
<a class="ads-welcome-page-link" aria-haspopup="true" class="preview-link" tabindex="0" id="preview-link-narrow" name="previewNarrow"><p>Preview</p><i class="icon-info themed-icon"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="preview_modal" class="modal" aria-modal="true" aria-hidden="true">
|
||||
<div class="modal_content">
|
||||
<span class="close_icon">x</span>
|
||||
<h3 tabindex="0" class="preview_modal_header">${escape(localize('welcomePage.previewHeader', "This page is in preview"))}</h3>
|
||||
<p tabindex="0" class="preview_modal_body">${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."))}</p>
|
||||
<div id="preview-modal" class="modal" aria-modal="true" aria-hidden="true">
|
||||
<div class="modal-content">
|
||||
<span class="close-icon">x</span>
|
||||
<h3 tabindex="0" class="preview-modal-header">${escape(localize('welcomePage.previewHeader', "This page is in preview"))}</h3>
|
||||
<p tabindex="0" class="preview-modal-body">${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."))}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ads_homepage_section section header hero">
|
||||
<div class="ads-homepage-section section header hero">
|
||||
<div class="row start">
|
||||
<div class="header_top_nav">
|
||||
<div class="header-top-nav">
|
||||
<div class="flex">
|
||||
<div class="icon sm"></div>
|
||||
<div class="title">
|
||||
<div class="caption_container">
|
||||
<div class="caption-container">
|
||||
<span class="icon xs"></span><h1 class="caption"></h1>
|
||||
</div>
|
||||
<div class="flex btn_container">
|
||||
<div class="flex btn-container">
|
||||
<div>
|
||||
<button id="dropdown_btn" class="btn btn_primary dropdown" role="navigation" aria-haspopup="true" aria-controls="dropdown">
|
||||
<div class="dropdown_text" style="pointer-events: none;">
|
||||
<span>${escape(localize('welcomePage.new', "New"))}</span><i class="icon_arrow_down"></i>
|
||||
<button id="dropdown-btn" class="btn btn-primary dropdown" role="navigation" aria-haspopup="true" aria-controls="dropdown">
|
||||
<div class="dropdown-text" style="pointer-events: none;">
|
||||
<span>${escape(localize('welcomePage.new', "New"))}</span><i class="icon-arrow-down"></i>
|
||||
</div>
|
||||
</button>
|
||||
<nav role="navigation" class="dropdown_nav">
|
||||
<ul id="dropdown" class="dropdown-content" aria-hidden="true" aria-label="submenu" role="menu" aria-labelledby="dropdown_btn">
|
||||
<li role="none"><a role="menuitem" tabIndex="-1" class="move" href="command:registeredServers.addConnection">${escape(localize('welcomePage.newConnection', "New connection"))}</a></li>
|
||||
<li role="none"><a role="menuitem" tabIndex="-1" class="move" href="command:workbench.action.files.newUntitledFile">${escape(localize('welcomePage.newQuery', "New query"))}</a></li>
|
||||
<li role="none"><a role="menuitem" tabIndex="-1" class="move" href="command:notebook.command.new">${escape(localize('welcomePage.newNotebook', "New notebook"))}</a></li>
|
||||
<li role="none" id="dropdown_mac_only"><a role="menuitem" tabIndex="-1" class="move mac_only" href="command:workbench.action.files.openLocalFileFolder">${escape(localize('welcomePage.openFileMac', "Open file"))}</a></li>
|
||||
<li role="none" id="dropdown_windows_linux_only"><a role="menuitem" tabIndex="-1" class="move windows_only linux_only" href="command:workbench.action.files.openFile">${escape(localize('welcomePage.openFileLinuxPC', "Open file"))}</a></li>
|
||||
<nav role="navigation" class="dropdown-nav">
|
||||
<ul id="dropdown" class="dropdown-content" aria-hidden="true" aria-label="submenu" role="menu" aria-labelledby="dropdown-btn">
|
||||
<li role="none"><a class="ads-welcome-page-link" role="menuitem" tabIndex="-1" class="move" href="command:registeredServers.addConnection">${escape(localize('welcomePage.newConnection', "New connection"))}</a></li>
|
||||
<li role="none"><a class="ads-welcome-page-link" role="menuitem" tabIndex="-1" class="move" href="command:workbench.action.files.newUntitledFile">${escape(localize('welcomePage.newQuery', "New query"))}</a></li>
|
||||
<li role="none"><a class="ads-welcome-page-link" role="menuitem" tabIndex="-1" class="move" href="command:notebook.command.new">${escape(localize('welcomePage.newNotebook', "New notebook"))}</a></li>
|
||||
<li role="none" id="dropdown-mac-only"><a class="ads-welcome-page-link" role="menuitem" tabIndex="-1" class="move mac-only" href="command:workbench.action.files.openLocalFileFolder">${escape(localize('welcomePage.openFileMac', "Open file"))}</a></li>
|
||||
<li role="none" id="dropdown-windows-linux-only"><a class="ads-welcome-page-link" role="menuitem" tabIndex="-1" class="move windows-only linux-only" href="command:workbench.action.files.openFile">${escape(localize('welcomePage.openFileLinuxPC', "Open file"))}</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<a class="windows_only linux_only btn btn_secondary"
|
||||
<a class="windows-only linux-only btn btn-secondary"
|
||||
href="command:workbench.action.files.openFile">
|
||||
${escape(localize('welcomePage.openFileLinuxPC', "Open file"))}
|
||||
</a>
|
||||
<a class="mac_only btn btn_secondary" href="command:workbench.action.files.openLocalFileFolder">${escape(localize('welcomePage.openFileMac', "Open file"))}</a>
|
||||
<a class="mac-only btn btn-secondary" href="command:workbench.action.files.openLocalFileFolder">${escape(localize('welcomePage.openFileMac', "Open file"))}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row header_bottom_nav_tiles ads_grid">
|
||||
<div class="row header-bottom-nav-tiles ads-grid">
|
||||
<div class="col">
|
||||
<a class="header_bottom_nav_tile_link" href="command:registeredServers.addConnection">
|
||||
<div class="header_bottom_nav_tile tile tile_connection">
|
||||
<a class="header-bottom-nav-tile-link ads-welcome-page-link" href="command:registeredServers.addConnection">
|
||||
<div class="header-bottom-nav-tile tile tile-connection">
|
||||
<h3>${escape(localize('welcomePage.createConnection', "Create a connection"))}</h3>
|
||||
<p>${escape(localize('welcomePage.createConnectionBody', "Connect to a database instance through the connection dialog."))}</p>
|
||||
<div class="icon connection"></div>
|
||||
@@ -77,9 +77,9 @@ export default () => `
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a class="header_bottom_nav_tile_link"
|
||||
<a class="header-bottom-nav-tile-link ads-welcome-page-link"
|
||||
href="command:workbench.action.files.newUntitledFile">
|
||||
<div class="header_bottom_nav_tile tile tile_query">
|
||||
<div class="header-bottom-nav-tile tile tile-query">
|
||||
<h3>${escape(localize('welcomePage.runQuery', "Run a query"))}</h3>
|
||||
<p>${escape(localize('welcomePage.runQueryBody', "Interact with data through a query editor."))}</p>
|
||||
<div class="icon query"></div>
|
||||
@@ -87,8 +87,8 @@ export default () => `
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a class="header_bottom_nav_tile_link" href="command:notebook.command.new">
|
||||
<div class="header_bottom_nav_tile tile tile_notebook">
|
||||
<a class="header-bottom-nav-tile-link ads-welcome-page-link" href="command:notebook.command.new">
|
||||
<div class="header-bottom-nav-tile tile tile-notebook">
|
||||
<h3>${escape(localize('welcomePage.createNotebook', "Create a notebook"))}</h3>
|
||||
<p>${escape(localize('welcomePage.createNotebookBody', "Build a new notebook using a native notebook editor."))}</p>
|
||||
<div class="icon notebook"></div>
|
||||
@@ -96,8 +96,8 @@ export default () => `
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a class="header_bottom_nav_tile_link" href="command:azdata.resource.deploy">
|
||||
<div class="header_bottom_nav_tile tile tile_server">
|
||||
<a class="header-bottom-nav-tile-link ads-welcome-page-link" href="command:azdata.resource.deploy">
|
||||
<div class="header-bottom-nav-tile tile tile-server">
|
||||
<h3>${escape(localize('welcomePage.deployServer', "Deploy a server"))}</h3>
|
||||
<p>${escape(localize('welcomePage.deployServerBody', "Create a new instance of SQL Server on the platform of your choice."))}</p>
|
||||
<div class="icon server"></div>
|
||||
@@ -107,27 +107,27 @@ export default () => `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ads_homepage_section middle_section content row ads_grid">
|
||||
<div class="resources_container">
|
||||
<div class="ads-homepage-section middle-section content row ads-grid">
|
||||
<div class="resources-container">
|
||||
<h2>${escape(localize('welcomePage.resources', "Resources"))}</h2>
|
||||
<div class="tabs">
|
||||
<input class="input" name="tabs" type="radio" id="tab-1" checked="checked" />
|
||||
<label class="label" for="tab-1" tabIndex="0">${escape(localize('welcomePage.history', "History"))}</label>
|
||||
<div class="panel">
|
||||
<div class="recent history">
|
||||
<div class="flex list_header_container">
|
||||
<i class="icon_document themed_icon"></i>
|
||||
<h4 class="list_header">${escape(localize('welcomePage.name', "Name"))}</h4>
|
||||
<h4 class="list_header_last_opened">${escape(localize('welcomePage.lastOpened', "Last Opened"))}</h4>
|
||||
<div class="flex list-header-container">
|
||||
<i class="icon-document themed-icon"></i>
|
||||
<h4 class="list-header">${escape(localize('welcomePage.name', "Name"))}</h4>
|
||||
<h4 class="list-header-last-opened">${escape(localize('welcomePage.lastOpened', "Last Opened"))}</h4>
|
||||
</div>
|
||||
<ul class="list">
|
||||
<!-- Filled programmatically -->
|
||||
</ul>
|
||||
<p class="none detail">No recent folders</p>
|
||||
<ul class="moreRecent_list">
|
||||
<ul class="moreRecent-list">
|
||||
<li class="moreRecent">
|
||||
<a href="command:workbench.action.openRecent">${escape(localize('welcomePage.moreRecent', "Show more"))}
|
||||
<i class="icon_arrow_down_dark"></i>
|
||||
<a class="ads-welcome-page-link" href="command:workbench.action.openRecent">${escape(localize('welcomePage.moreRecent', "Show more"))}
|
||||
<i class="icon-arrow-down-dark"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -138,42 +138,42 @@ export default () => `
|
||||
<label for="showOnStartup">${escape(localize('welcomePage.showOnStartup', "Show welcome page on startup"))}</label>
|
||||
</p>
|
||||
</div>
|
||||
<div class="getting_started_container">
|
||||
<div class="getting-started-container">
|
||||
<div class="links">
|
||||
<h2>${escape(localize('welcomePage.usefuLinks', "Useful Links"))}</h2>
|
||||
<div class="link_header">
|
||||
<a class="link"
|
||||
<div class="link-header">
|
||||
<a class="link ads-welcome-page-link"
|
||||
href="https://aka.ms/get-started-azdata">${escape(localize('welcomePage.gettingStarted',
|
||||
"Getting Started"))}<span class="icon_link themed_icon_alt"></a>
|
||||
"Getting Started"))}<span class="icon-link themed-icon-alt"></a>
|
||||
</div>
|
||||
<p>
|
||||
${escape(localize('welcomePage.gettingStartedBody',
|
||||
"Discover the capabilities offered by Azure Data Studio and learn how to make the most of them."))}
|
||||
</p>
|
||||
<div class="link_header">
|
||||
<a class="link"
|
||||
<div class="link-header">
|
||||
<a class="link ads-welcome-page-link"
|
||||
href="command:workbench.action.openDocumentationUrl">${escape(localize('welcomePage.documentation',
|
||||
"Documentation"))}<span class="icon_link themed_icon_alt"</a></a>
|
||||
"Documentation"))}<span class="icon-link themed-icon-alt"</a></a>
|
||||
</div>
|
||||
<p>${escape(localize('welcomePage.documentationBody',
|
||||
"Visit the documentation center for quickstarts, how-to guides, and references for PowerShell, APIs, etc."))}
|
||||
</p>
|
||||
|
||||
|
||||
<div class="videos_container row">
|
||||
<div class="videos-container row">
|
||||
<h2>Videos</h2>
|
||||
<div class="flex flex_container_video">
|
||||
<div class="videos_container_video">
|
||||
<a href="https://www.youtube.com/watch?v=Orv7fptVoUA" class="video overview">
|
||||
<img src="${require.toUrl('./../../media/video_overview.png')}" class="video_overview" id="video_overview" />
|
||||
<div class="flex flex-container-video">
|
||||
<div class="videos-container-video">
|
||||
<a href="https://www.youtube.com/watch?v=Orv7fptVoUA" class="video overview ads-welcome-page-link">
|
||||
<img src="${require.toUrl('./../../media/video_overview.png')}" class="video-overview" id="video-overview" />
|
||||
<h4>${escape(localize('welcomePage.videoDescriptionOverview',
|
||||
"Overview of Azure Data Studio"))}</h4>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="videos_container_video">
|
||||
<a href="https://www.youtube.com/watch?v=Nt4kIHQ0IOc" class="video overview">
|
||||
<img src="${require.toUrl('./../../media/video_introduction.png')}" class="video_introduction" id="video_introduction" />
|
||||
<div class="videos-container-video">
|
||||
<a href="https://www.youtube.com/watch?v=Nt4kIHQ0IOc" class="video overview ads-welcome-page-link">
|
||||
<img src="${require.toUrl('./../../media/video_introduction.png')}" class="video-introduction" id="video-introduction" />
|
||||
<h4>${escape(localize('welcomePage.videoDescriptionIntroduction',
|
||||
"Introduction to Azure Data Studio Notebooks | Data Exposed"))}</h4>
|
||||
</a>
|
||||
@@ -183,28 +183,28 @@ export default () => `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ads_homepage_section content extensions">
|
||||
<div class="flex flex_j_between">
|
||||
<div class="ads-homepage-section content extensions">
|
||||
<div class="flex flex-j-between">
|
||||
<h2>Extend your data studio</h2>
|
||||
<a class="link_show_all flex" href="command:extensions.listView.focus">${escape(localize('welcomePage.showAll', "Show All"))} <span class="icon_arrow_right"></span></a>
|
||||
<a class="link-show-all flex ads-welcome-page-link" href="command:extensions.listView.focus">${escape(localize('welcomePage.showAll', "Show All"))} <span class="icon-arrow-right"></span></a>
|
||||
</div>
|
||||
<div class="row ads_grid grip_gap_50">
|
||||
<div class="row ads-grid grip-gap-50">
|
||||
<div
|
||||
class="ads_grid tile no_hover extension_pack">
|
||||
<div class="extension_pack_description">
|
||||
<div class="extension_pack_header"></div>
|
||||
<p class="extension_pack_body"></p>
|
||||
class="ads-grid tile no-hover extension-pack">
|
||||
<div class="extension-pack-description">
|
||||
<div class="extension-pack-header"></div>
|
||||
<p class="extension-pack-body"></p>
|
||||
</div>
|
||||
<div class="extension_pack_extensions flex flex_d_column flex_j_evenly flex_a_start">
|
||||
<div class="extension_pack_extension_list flex flex_d_column flex_j_evenly flex_a_start"></div>
|
||||
<div class="flex flex_j_end extension_pack_btn_container flex flex_j_between flex_a_center"">
|
||||
<div class="extension-pack-extensions flex flex-d-column flex-j-evenly flex-a-start">
|
||||
<div class="extension-pack-extension-list flex flex-d-column flex-j-evenly flex-a-start"></div>
|
||||
<div class="flex flex-j-end extension-pack-btn-container flex flex-j-between flex-a-center"">
|
||||
<div class="extensionPack" href="#"></div>
|
||||
<a class="a_self_end link_learn_more flex flex_a_center" href="command:azdata.extension.open?%7B%22id%22%3A%22microsoft.admin-pack%22%7D">${escape(localize('welcomePage.learnMore',
|
||||
"Learn more "))}<span class="icon_arrow_right"></span></a>
|
||||
<a class="a-self-end link-learn-more flex flex-a-center ads-welcome-page-link" href="command:azdata.extension.open?%7B%22id%22%3A%22microsoft.admin-pack%22%7D">${escape(localize('welcomePage.learnMore',
|
||||
"Learn more "))}<span class="icon-arrow-right"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="extension_list flex flex_d_column">
|
||||
<div class="extension-list flex flex-d-column">
|
||||
<!-- Dynamically populated -->
|
||||
</div>
|
||||
<br /><br /><br />
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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<boolean>('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<void> {
|
||||
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<void> {
|
||||
if (guidedTour) {
|
||||
guidedTour.hide();
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
|
||||
export class GuidedTour extends Disposable {
|
||||
private _overlayVisible: IContextKey<boolean>;
|
||||
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<Element>, 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<Element>;
|
||||
const menuBarItems = document.querySelectorAll('.menubar-menu-button') as NodeListOf<HTMLElement>;
|
||||
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<HTMLElement>;
|
||||
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<IWorkbenchActionRegistry>(Extensions.WorkbenchActions)
|
||||
.registerWorkbenchAction(SyncActionDescriptor.create(GuidedTourAction, GuidedTourAction.ID, GuidedTourAction.LABEL), 'Help: Getting Started Guided Tour', localize('help', "Help"));
|
||||
|
||||
Registry.as<IWorkbenchActionRegistry>(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}; }`);
|
||||
}
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
File diff suppressed because it is too large
Load Diff
@@ -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<void> {
|
||||
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<IRecentlyOpened>, installedExtensions: Promise<IExtensionStatus[]>, fileService: IFileService): void {
|
||||
private onReady(container: HTMLElement, recentlyOpened: Promise<IRecentlyOpened>, installedExtensions: Promise<IExtensionStatus[]>, fileService: IFileService, layoutService: ILayoutService): void {
|
||||
const enabled = isWelcomePageEnabled(this.configurationService, this.contextService);
|
||||
const showOnStartup = <HTMLInputElement>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}}`);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user