ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-17 11:01:37 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix welcome page (#14701) (#14706)

Browse Source
This commit is contained in:
Charles Gagnon
2021-03-14 22:27:42 -07:00
committed by GitHub
parent 26156b4e61
commit 3368af9371
4 changed files with 49 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts
View File

@@ -16,7 +16,7 @@ export default () => `
<div class="content-container"> <div class="content-container">
<div class="ads-homepage-section tool-tip"> <div class="ads-homepage-section tool-tip">
<div class="tool-tip-container" id="tool-tip-container-wide"> <div class="tool-tip-container" id="tool-tip-container-wide">
<a role="img" tabindex=0 class="ads-welcome-page-link" aria-label="${previewImgDescription}" title="${previewImgDescription}" id="preview-link-wide" class="preview-link" tabindex="0" name="preview"><p>${escape(localize('welcomePage.preview', "Preview"))}</p><i class="icon-info themed-icon"></i></a> <a role="img" tabindex=0 class="ads-welcome-page-link preview-link" aria-label="${previewImgDescription}" title="${previewImgDescription}" id="preview-link-wide" tabindex="0" name="preview"><p>${escape(localize('welcomePage.preview', "Preview"))}</p><i class="icon-info themed-icon"></i></a>
</div> </div>
</div> </div>
<div class="ads-homepage-section section header hero"> <div class="ads-homepage-section section header hero">
@@ -111,37 +111,34 @@ export default () => `
<div class="links"> <div class="links">
<h2>${escape(localize('welcomePage.usefuLinks', "Useful Links"))}</h2> <h2>${escape(localize('welcomePage.usefuLinks', "Useful Links"))}</h2>
<div class="link-header"> <div class="link-header">
<a class="link ads-welcome-page-link" <a class="link ads-welcome-page-link" href="https://aka.ms/get-started-azdata">
href="https://aka.ms/get-started-azdata">${escape(localize('welcomePage.gettingStarted', ${escape(localize('welcomePage.gettingStarted', "Getting Started"))}<span class="icon-link themed-icon-alt"></span>
"Getting Started"))}<span class="icon-link themed-icon-alt"></a> </a>
</div> </div>
<p> <p>
${escape(localize('welcomePage.gettingStartedBody', ${escape(localize('welcomePage.gettingStartedBody', "Discover the capabilities offered by Azure Data Studio and learn how to make the most of them."))}
"Discover the capabilities offered by Azure Data Studio and learn how to make the most of them."))}
</p> </p>
<div class="link-header"> <div class="link-header">
<a class="link ads-welcome-page-link" <a class="link ads-welcome-page-link" href="command:workbench.action.openDocumentationUrl">
href="command:workbench.action.openDocumentationUrl">${escape(localize('welcomePage.documentation', ${escape(localize('welcomePage.documentation', "Documentation"))}<span class="icon-link themed-icon-alt"></span>
"Documentation"))}<span class="icon-link themed-icon-alt"</a></a> </a>
</div> </div>
<p>${escape(localize('welcomePage.documentationBody', <p>
"Visit the documentation center for quickstarts, how-to guides, and references for PowerShell, APIs, etc."))} ${escape(localize('welcomePage.documentationBody', "Visit the documentation center for quickstarts, how-to guides, and references for PowerShell, APIs, etc."))}
</p> </p>
<div class="videos-container row"> <div class="videos-container row">
<h2>Videos</h2> <h2>${escape(localize('welcomePage.videos', "Videos"))}</h2>
<div class="flex flex-container-video"> <div class="flex flex-container-video">
<div class="videos-container-video"> <div class="videos-container-video">
<a href="https://www.youtube.com/watch?v=Orv7fptVoUA" class="video overview ads-welcome-page-link"> <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" /> <img src="${require.toUrl('./../../media/video_overview.png')}" class="video-overview" id="video-overview" />
<h4>${escape(localize('welcomePage.videoDescriptionOverview', <h4>${escape(localize('welcomePage.videoDescriptionOverview', "Overview of Azure Data Studio"))}</h4>
"Overview of Azure Data Studio"))}</h4>
</a> </a>
</div> </div>
<div class="videos-container-video"> <div class="videos-container-video">
<a href="https://www.youtube.com/watch?v=Nt4kIHQ0IOc" class="video overview ads-welcome-page-link"> <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" /> <img src="${require.toUrl('./../../media/video_introduction.png')}" class="video-introduction" id="video-introduction" />
<h4>${escape(localize('welcomePage.videoDescriptionIntroduction', <h4>${escape(localize('welcomePage.videoDescriptionIntroduction', "Introduction to Azure Data Studio Notebooks | Data Exposed"))}</h4>
"Introduction to Azure Data Studio Notebooks | Data Exposed"))}</h4>
</a> </a>
</div> </div>
</div> </div>
@@ -152,30 +149,34 @@ export default () => `
<div class="ads-homepage-section content extensions content-container"> <div class="ads-homepage-section content extensions content-container">
<div class="flex flex-j-between"> <div class="flex flex-j-between">
<h2>${escape(localize('welcomePage.extensions', "Extensions"))}</h2> <h2>${escape(localize('welcomePage.extensions', "Extensions"))}</h2>
<a role="button" class="link-show-all flex ads-welcome-page-link" href="command:workbench.view.extensions">${escape(localize('welcomePage.showAll', "Show All"))} <span class="icon-arrow-right"></span></a> <a role="button" class="link-show-all flex ads-welcome-page-link" href="command:workbench.view.extensions">
${escape(localize('welcomePage.showAll', "Show All"))}<span class="icon-arrow-right"></span>
</a>
</div> </div>
<div class="row ads-grid grip-gap-50"> <div class="row ads-grid grip-gap-50">
<div <div class="ads-grid tile no-hover extension-pack">
class="ads-grid tile no-hover extension-pack">
<div class="extension-pack-description"> <div class="extension-pack-description">
<h3 class="extension-pack-header"></h3> <h3 class="extension-pack-header"></h3>
<p class="extension-pack-body"></p> <p class="extension-pack-body"></p>
</div> </div>
<div class="extension-pack-extensions flex flex-d-column flex-j-evenly flex-a-start"> <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="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="flex flex-j-end extension-pack-btn-container flex flex-j-between flex-a-center">
<div class="extensionPack" href="#"></div> <div class="extensionPack"></div>
<a role="button" 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', <a role="button" 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">
"Learn more "))}<span class="icon-arrow-right"></span></a> ${escape(localize('welcomePage.learnMore', "Learn more "))}<span class="icon-arrow-right"></span>
</a>
</div> </div>
</div> </div>
</div> </div>
<div class="extension-list flex flex-d-column"> <div class="extension-list flex flex-d-column">
<!-- Dynamically populated --> <!-- Dynamically populated -->
</div> </div>
</div>
<br /><br /><br /> <br /><br /><br />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
`; `;

20
src/sql/workbench/contrib/welcome/page/browser/welcomePage.css
View File

@@ -291,12 +291,8 @@
display: none; display: none;
} }
.ads-homepage #tool-tip-container-wide .ads-welcome-page-link{ .ads-homepage #tool-tip-container-wide .ads-welcome-page-link,
display: flex; .ads-homepage #tool-tip-container-narrow .ads-welcome-page-link {
align-items: center;
}
.ads-homepage #tool-tip-container-narrow .ads-welcome-page-link{
display: flex; display: flex;
align-items: center; align-items: center;
} }
@@ -885,18 +881,24 @@
border-top: 1px solid; border-top: 1px solid;
} }
.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 {
min-height: 170px; /* 5 (max # of items displayed in list) x list item height */
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
margin-top: 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 padding: 0 0 2px 11px
} }
.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; height: 33px;
list-style: none; list-style: none;
border-bottom: 1px solid; border-bottom: 1px solid;

12
src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts
View File

@@ -186,10 +186,10 @@ const extensionPacks: ExtensionSuggestion[] = [
]; ];
const extensionPackExtensions: ExtensionPackExtensions[] = [ const extensionPackExtensions: ExtensionPackExtensions[] = [
{ name: 'SQL Server Agent', icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.agent"}` }, { name: localize('welcomePage.sqlServerAgent', "SQL Server Agent"), icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.agent"}` },
{ name: 'SQL Server Profiler', icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.profiler"}` }, { name: localize('welcomePage.sqlServerProfiler', "SQL Server Profiler"), icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.profiler"}` },
{ name: 'SQL Server Import', icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.import"}` }, { name: localize('welcomePage.sqlServerImport', "SQL Server Import"), icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.import"}` },
{ name: 'SQL Server Dacpac', icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.dacpac"}` } { name: localize('welcomePage.sqlServerDacpac', "SQL Server Dacpac"), icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.dacpac"}` }
]; ];
const extensions: ExtensionSuggestion[] = [ const extensions: ExtensionSuggestion[] = [
@@ -343,7 +343,7 @@ class WelcomePage extends Disposable {
const workspacesToShow = workspaces.slice(0, 5); const workspacesToShow = workspaces.slice(0, 5);
clearNode(ul); clearNode(ul);
await this.mapListEntries(workspacesToShow, container, ul); await this.mapListEntries(workspacesToShow, container);
}).then(undefined, onUnexpectedError); }).then(undefined, onUnexpectedError);
this.addExtensionList(container, '.extension-list'); this.addExtensionList(container, '.extension-list');
this.addExtensionPack(container, '.extensionPack'); this.addExtensionPack(container, '.extensionPack');
@@ -514,7 +514,7 @@ class WelcomePage extends Disposable {
return result; return result;
} }
private async mapListEntries(recents: (IRecentWorkspace | IRecentFolder)[], container: HTMLElement, ul: HTMLElement): Promise<HTMLElement[]> { private async mapListEntries(recents: (IRecentWorkspace | IRecentFolder)[], container: HTMLElement): Promise<HTMLElement[]> {
const result: HTMLElement[] = []; const result: HTMLElement[] = [];
for (let i = 0; i < recents.length; i++) { for (let i = 0; i < recents.length; i++) {
const recent = recents[i]; const recent = recents[i];

5
src/vs/base/browser/dom.ts
View File

@@ -1441,17 +1441,18 @@ const _ttpSafeInnerHtml = window.trustedTypes?.createPolicy('safeInnerHtml', {
export function safeInnerHtml(node: HTMLElement, value: string): void { export function safeInnerHtml(node: HTMLElement, value: string): void {
const options = _extInsaneOptions({ const options = _extInsaneOptions({
allowedTags: ['a', 'button', 'blockquote', 'code', 'div', 'h1', 'h2', 'h3', 'input', 'label', 'li', 'p', 'pre', 'select', 'small', 'span', 'strong', 'textarea', 'ul', 'ol'], allowedTags: ['a', 'button', 'blockquote', 'code', 'div', 'h1', 'h2', 'h3', 'h4', 'i', 'img', 'input', 'label', 'li', 'p', 'pre', 'select', 'small', 'span', 'strong', 'textarea', 'ul', 'ol'], // {{SQL CARBON EDIT}} Add tags for welcome page support
allowedAttributes: { allowedAttributes: {
'a': ['href', 'x-dispatch'], 'a': ['href', 'x-dispatch'],
'button': ['data-href', 'x-dispatch'], 'button': ['data-href', 'x-dispatch'],
'input': ['type', 'placeholder', 'checked', 'required'], 'input': ['type', 'placeholder', 'checked', 'required'],
'img': ['src', 'alt', 'title', 'aria-label'], // {{SQL CARBON EDIT}} Add img for welcome page support
'label': ['for'], 'label': ['for'],
'select': ['required'], 'select': ['required'],
'span': ['data-command', 'role'], 'span': ['data-command', 'role'],
'textarea': ['name', 'placeholder', 'required'], 'textarea': ['name', 'placeholder', 'required'],
}, },
allowedSchemes: ['http', 'https', 'command'] allowedSchemes: ['http', 'https', 'command', 'file'] // {{SQL CARBON EDIT}} Add allowed schema for welcome page support
}, ['class', 'id', 'role', 'tabindex']); }, ['class', 'id', 'role', 'tabindex']);
const html = _ttpSafeInnerHtml?.createHTML(value, options) ?? insane(value, options); const html = _ttpSafeInnerHtml?.createHTML(value, options) ?? insane(value, options);