From 9a944b614d6fcd8794c916396f7909292015d59e Mon Sep 17 00:00:00 2001 From: Charles Gagnon Date: Fri, 4 Mar 2022 11:03:13 -0800 Subject: [PATCH] Fix some more images not loading (#18632) --- extensions/data-workspace/src/dialogs/projectDashboard.ts | 6 ++++-- .../machine-learning/src/views/widgets/dashboardWidget.ts | 7 +++++-- .../sql-migration/src/dashboard/sqlServerDashboard.ts | 4 +++- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/extensions/data-workspace/src/dialogs/projectDashboard.ts b/extensions/data-workspace/src/dialogs/projectDashboard.ts index d26e2762fb..c0f0e48d5f 100644 --- a/extensions/data-workspace/src/dialogs/projectDashboard.ts +++ b/extensions/data-workspace/src/dialogs/projectDashboard.ts @@ -169,10 +169,12 @@ export class ProjectDashboard { .component(); header.addItem(locationLabel, { CSSStyles: { 'padding-left': '34px', 'padding-top': '15px', 'padding-bottom': '50px', 'font-size': '16px' } }); - const image = this.projectProvider!.image; // background image added at the bottom right of the header + const backgroundImage = this.projectProvider!.image; // background image added at the bottom right of the header + // Files need to have the vscode-file scheme to be loaded by ADS + const backgroundUri = vscode.Uri.file(backgroundImage!.light.toString()).with({ scheme: 'vscode-file' }); headerContainer.addItem(header, { CSSStyles: { - 'background-image': `url(${vscode.Uri.file(image!.light.toString())})`, + 'background-image': `url(${backgroundUri})`, 'background-repeat': 'no-repeat', 'background-position': '85% bottom', 'background-size': '10%', diff --git a/extensions/machine-learning/src/views/widgets/dashboardWidget.ts b/extensions/machine-learning/src/views/widgets/dashboardWidget.ts index 46997b7c22..8b07feddaa 100644 --- a/extensions/machine-learning/src/views/widgets/dashboardWidget.ts +++ b/extensions/machine-learning/src/views/widgets/dashboardWidget.ts @@ -38,10 +38,11 @@ export class DashboardWidget { }).component(); const header = await this.createHeader(view); const footerContainer = this.createFooter(view); + const backgroundImageUri = vscode.Uri.file(this.asAbsolutePath('images/background.svg')).with({ scheme: 'vscode-file' }); container.addItem(header, { CSSStyles: { 'background-image': ` - url(${vscode.Uri.file(this.asAbsolutePath('images/background.svg'))}), + url(${backgroundImageUri}), linear-gradient(0deg, rgba(0,0,0,0.09) 0%, rgba(0,0,0,0) 100%) `, 'background-repeat': 'no-repeat', @@ -300,9 +301,11 @@ export class DashboardWidget { await this._apiWrapper.openExternal(vscode.Uri.parse(linkMetaData.link)); } }); + // Files need to have the vscode-file scheme to be loaded by ADS + const imageUri = vscode.Uri.file(this.asAbsolutePath(linkMetaData.iconPath?.light as string || '')).with({ scheme: 'vscode-file' }); videosContainer.addItem(video1Container, { CSSStyles: { - 'background-image': `url(${vscode.Uri.file(this.asAbsolutePath(linkMetaData.iconPath?.light as string || ''))})`, + 'background-image': `url(${imageUri})`, 'background-repeat': 'no-repeat', 'background-position': 'top', 'width': `${maxWidth}px`, diff --git a/extensions/sql-migration/src/dashboard/sqlServerDashboard.ts b/extensions/sql-migration/src/dashboard/sqlServerDashboard.ts index 1e6b68cb45..70758528a3 100644 --- a/extensions/sql-migration/src/dashboard/sqlServerDashboard.ts +++ b/extensions/sql-migration/src/dashboard/sqlServerDashboard.ts @@ -81,10 +81,12 @@ export class DashboardWidget { }).component(); const header = this.createHeader(view); + // Files need to have the vscode-file scheme to be loaded by ADS + const watermarkUri = vscode.Uri.file(IconPathHelper.migrationDashboardHeaderBackground.light).with({ scheme: 'vscode-file' }); container.addItem(header, { CSSStyles: { 'background-image': ` - url(${vscode.Uri.file(IconPathHelper.migrationDashboardHeaderBackground.light)}), + url(${watermarkUri}), linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%) `, 'background-repeat': 'no-repeat',