From 7ea09d3d177904c02c02e7e789409b186b897f34 Mon Sep 17 00:00:00 2001 From: Charles Gagnon Date: Fri, 12 Mar 2021 11:17:19 -0800 Subject: [PATCH] Fix welcome page (#14701) --- .../page/browser/az_data_welcome_page.ts | 57 ++++++++++--------- .../welcome/page/browser/welcomePage.css | 20 ++++--- .../welcome/page/browser/welcomePage.ts | 12 ++-- src/vs/base/browser/dom.ts | 5 +- 4 files changed, 49 insertions(+), 45 deletions(-) diff --git a/src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts b/src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts index ca581c50ec..66ef70f570 100644 --- a/src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts +++ b/src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts @@ -16,7 +16,7 @@ export default () => `
@@ -111,37 +111,34 @@ export default () => `

${escape(localize('welcomePage.usefuLinks', "Useful Links"))}

- ${escape(localize('welcomePage.gettingStarted', - "Getting Started"))} + + ${escape(localize('welcomePage.gettingStarted', "Getting Started"))} +

- ${escape(localize('welcomePage.gettingStartedBody', - "Discover the capabilities offered by Azure Data Studio and learn how to make the most of them."))} + ${escape(localize('welcomePage.gettingStartedBody', "Discover the capabilities offered by Azure Data Studio and learn how to make the most of them."))}

- ${escape(localize('welcomePage.documentation', - "Documentation"))} + + ${escape(localize('welcomePage.documentation', "Documentation"))} +
-

${escape(localize('welcomePage.documentationBody', - "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."))}

-

Videos

+

${escape(localize('welcomePage.videos', "Videos"))}

- -

${escape(localize('welcomePage.videoDescriptionOverview', - "Overview of Azure Data Studio"))}

+ +

${escape(localize('welcomePage.videoDescriptionOverview', "Overview of Azure Data Studio"))}
- -

${escape(localize('welcomePage.videoDescriptionIntroduction', - "Introduction to Azure Data Studio Notebooks | Data Exposed"))}

+ +

${escape(localize('welcomePage.videoDescriptionIntroduction', "Introduction to Azure Data Studio Notebooks | Data Exposed"))}
@@ -152,26 +149,29 @@ export default () => `

${escape(localize('welcomePage.extensions', "Extensions"))}

- ${escape(localize('welcomePage.showAll', "Show All"))} + + ${escape(localize('welcomePage.showAll', "Show All"))} +
-
+

-
-
- ${escape(localize('welcomePage.learnMore', - "Learn more "))} +
+
+ + ${escape(localize('welcomePage.learnMore', "Learn more "))} + +
-
-
- +
+ +



@@ -179,3 +179,4 @@ export default () => `
`; + diff --git a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css index f8bed7f0aa..cbcd9c1141 100644 --- a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css +++ b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css @@ -291,12 +291,8 @@ display: none; } -.ads-homepage #tool-tip-container-wide .ads-welcome-page-link{ - display: flex; - align-items: center; -} - -.ads-homepage #tool-tip-container-narrow .ads-welcome-page-link{ +.ads-homepage #tool-tip-container-wide .ads-welcome-page-link, +.ads-homepage #tool-tip-container-narrow .ads-welcome-page-link { display: flex; align-items: center; } @@ -885,18 +881,24 @@ 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; padding: 0; margin-top: 0 } -.ads-homepage .ads-homepage-section .history .list-header, .ads-homepage .ads-homepage-section .pinned .list-header { +.ads-homepage .ads-homepage-section .history .list-header, +.ads-homepage .ads-homepage-section .pinned .list-header { padding: 0 0 2px 11px } -.ads-homepage .ads-homepage-section .history .list li:not(.moreRecent), .ads-homepage .ads-homepage-section .history .list-header-container, .ads-homepage .ads-homepage-section .pinned .list li:not(.moreRecent), .ads-homepage .ads-homepage-section .pinned .list-header-container { +.ads-homepage .ads-homepage-section .history .list li:not(.moreRecent), +.ads-homepage .ads-homepage-section .history .list-header-container, +.ads-homepage .ads-homepage-section .pinned .list li:not(.moreRecent), +.ads-homepage .ads-homepage-section .pinned .list-header-container { height: 33px; list-style: none; border-bottom: 1px solid; diff --git a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts index df2458f338..b0eb746193 100644 --- a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts +++ b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts @@ -186,10 +186,10 @@ const extensionPacks: ExtensionSuggestion[] = [ ]; const extensionPackExtensions: ExtensionPackExtensions[] = [ - { name: '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: '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.sqlServerAgent', "SQL Server Agent"), icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.agent"}` }, + { name: localize('welcomePage.sqlServerProfiler', "SQL Server Profiler"), icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.profiler"}` }, + { name: localize('welcomePage.sqlServerImport', "SQL Server Import"), icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.import"}` }, + { name: localize('welcomePage.sqlServerDacpac', "SQL Server Dacpac"), icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.dacpac"}` } ]; const extensions: ExtensionSuggestion[] = [ @@ -343,7 +343,7 @@ class WelcomePage extends Disposable { const workspacesToShow = workspaces.slice(0, 5); clearNode(ul); - await this.mapListEntries(workspacesToShow, container, ul); + await this.mapListEntries(workspacesToShow, container); }).then(undefined, onUnexpectedError); this.addExtensionList(container, '.extension-list'); this.addExtensionPack(container, '.extensionPack'); @@ -514,7 +514,7 @@ class WelcomePage extends Disposable { return result; } - private async mapListEntries(recents: (IRecentWorkspace | IRecentFolder)[], container: HTMLElement, ul: HTMLElement): Promise { + private async mapListEntries(recents: (IRecentWorkspace | IRecentFolder)[], container: HTMLElement): Promise { const result: HTMLElement[] = []; for (let i = 0; i < recents.length; i++) { const recent = recents[i]; diff --git a/src/vs/base/browser/dom.ts b/src/vs/base/browser/dom.ts index e3299e2efe..f2f19b5ea9 100644 --- a/src/vs/base/browser/dom.ts +++ b/src/vs/base/browser/dom.ts @@ -1441,17 +1441,18 @@ const _ttpSafeInnerHtml = window.trustedTypes?.createPolicy('safeInnerHtml', { export function safeInnerHtml(node: HTMLElement, value: string): void { 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: { 'a': ['href', 'x-dispatch'], 'button': ['data-href', 'x-dispatch'], 'input': ['type', 'placeholder', 'checked', 'required'], + 'img': ['src', 'alt', 'title', 'aria-label'], // {{SQL CARBON EDIT}} Add img for welcome page support 'label': ['for'], 'select': ['required'], 'span': ['data-command', 'role'], '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']); const html = _ttpSafeInnerHtml?.createHTML(value, options) ?? insane(value, options);