Add background image to sql db projects dashboard (#14942)

* Add background image to sql db projects dashboard * Removed gradient color * Added bottom border for header * Fixed border color
2026-01-14 01:25:37 -05:00 · 2021-04-01 17:24:16 -07:00
parent ce6ea8af41
commit 30a2b76faf
6 changed files with 117 additions and 22 deletions
--- a/extensions/data-workspace/package.json
+++ b/extensions/data-workspace/package.json
@@ -127,7 +127,7 @@
      "view/item/context": [
        {
          "command": "projects.manageProject",
-          "when": "view == dataworkspace.views.main",
+          "when": "view == dataworkspace.views.main && viewItem == databaseProject.itemType.project",
          "group": "0_projectsFirst@1"
        },
        {
--- a/extensions/data-workspace/src/dataworkspace.d.ts
+++ b/extensions/data-workspace/src/dataworkspace.d.ts
@@ -81,6 +81,11 @@ declare module 'dataworkspace' {
 		 * Gets the project data to be placed in the dashboard container
 		 */
 		readonly dashboardComponents: IDashboardTable[];
+
+		/**
+		 * Gets the project image to be used as background in dashboard container
+		 */
+		 readonly image?: azdata.ThemedIconPath;
 	}

 	/**
@@ -110,7 +115,7 @@ declare module 'dataworkspace' {
 		/**
 		 * Gets the icon path of the project type
 		 */
-		readonly icon: string | vscode.Uri | { light: string | vscode.Uri, dark: string | vscode.Uri }
+		readonly icon: azdata.IconPath
 	}

 	/**
@@ -178,7 +183,7 @@ declare module 'dataworkspace' {
 	 */
 	export interface IDashboardColumnInfo {
 		displayName: string;
-		width: number;
+		width: number | string;
 		type?: IDashboardColumnType;
 	}

--- a/extensions/data-workspace/src/dialogs/projectDashboard.ts
+++ b/extensions/data-workspace/src/dialogs/projectDashboard.ts
@@ -106,8 +106,6 @@ export class ProjectDashboard {
 	}

 	private createContainer(title: string, location: string): azdata.FlexContainer {
-		const dashboardData: IDashboardTable[] = this.projectProvider!.dashboardComponents;
-
 		const rootContainer = this.modelView!.modelBuilder.flexContainer().withLayout(
 			{
 				flexFlow: 'column',
@@ -115,23 +113,78 @@ export class ProjectDashboard {
 				height: '100%'
 			}).component();

+		const headerContainer = this.createHeader(title, location);
+		const tableContainer = this.createTables();
+
+		rootContainer.addItem(headerContainer);
+		rootContainer.addItem(tableContainer);
+
+		return rootContainer;
+	}
+
+	/**
+	 * Create header with title, location and background
+	 */
+	private createHeader(title: string, location: string): azdata.Component {
+		const headerContainer = this.modelView!.modelBuilder.flexContainer().withLayout(
+			{
+				flexFlow: 'column',
+				width: '100%',
+				height: '30%'
+			}).component();
+
+		const header = this.modelView!.modelBuilder.flexContainer().withLayout(
+			{
+				flexFlow: 'column',
+				width: '100%',
+				height: '30%'
+			}).component();
+
 		const titleLabel = this.modelView!.modelBuilder.text()
 			.withProperties<azdata.TextComponentProperties>({ value: title, CSSStyles: { 'margin-block-start': '20px', 'margin-block-end': '0px' } })
 			.component();
-		rootContainer.addItem(titleLabel, { CSSStyles: { 'padding-left': '34px', 'padding-top': '15px', 'font-size': '36px', 'font-weight': '400' } });
+		header.addItem(titleLabel, { CSSStyles: { 'padding-left': '34px', 'padding-top': '15px', 'font-size': '36px', 'font-weight': '400' } });

 		const projectFolderPath = path.dirname(location);
 		const locationLabel = this.modelView!.modelBuilder.text()
 			.withProperties<azdata.TextComponentProperties>({ value: projectFolderPath, CSSStyles: { 'margin-block-start': '20px', 'margin-block-end': '0px' } })
 			.component();
-		rootContainer.addItem(locationLabel, { CSSStyles: { 'padding-left': '34px', 'padding-top': '15px', 'padding-bottom': '50px', 'font-size': '16px' } });
+		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
+		headerContainer.addItem(header, {
+			CSSStyles: {
+				'background-image': `url(${vscode.Uri.file(image!.light.toString())})`,
+				'background-repeat': 'no-repeat',
+				'background-position': '85% bottom',
+				'background-size': '10%',
+				'border-bottom': 'solid 1px #ccc',
+				'width': '100%',
+				'height': '100%'
+			}
+		});
+
+		return headerContainer;
+	}
+
+	/**
+	 * Adds all the tables to the container
+	 */
+	private createTables(): azdata.Component {
+		const dashboardData: IDashboardTable[] = this.projectProvider!.dashboardComponents;
+
+		const tableContainer = this.modelView!.modelBuilder.flexContainer().withLayout(
+			{
+				flexFlow: 'column',
+				width: '100%',
+				height: 'auto'
+			}).component();

-		// Add all the tables to the container
 		dashboardData.forEach(info => {
 			const tableNameLabel = this.modelView!.modelBuilder.text()
 				.withProperties<azdata.TextComponentProperties>({ value: info.name, CSSStyles: { 'margin-block-start': '30px', 'margin-block-end': '0px' } })
 				.component();
-			rootContainer.addItem(tableNameLabel, { CSSStyles: { 'padding-left': '25px', 'padding-bottom': '20px', ...constants.cssStyles.title } });
+			tableContainer.addItem(tableNameLabel, { CSSStyles: { 'padding-left': '25px', 'padding-bottom': '20px', ...constants.cssStyles.title } });

 			const columns: azdata.DeclarativeTableColumn[] = [];
 			info.columns.forEach((column: IDashboardColumnInfo) => {
@@ -180,9 +233,8 @@ export class ProjectDashboard {
 			const table = this.modelView!.modelBuilder.declarativeTable()
 				.withProperties<azdata.DeclarativeTableProperties>({ columns: columns, dataValues: data, ariaLabel: info.name, CSSStyles: { 'margin-left': '30px' } }).component();

-			rootContainer.addItem(table);
+			tableContainer.addItem(table);
 		});
-
-		return rootContainer;
+		return tableContainer;
 	}
 }
--- a/extensions/sql-database-projects/images/dashboardSqlProj.svg
+++ b/extensions/sql-database-projects/images/dashboardSqlProj.svg
@@ -0,0 +1,28 @@
+<svg width="159" height="100" viewBox="0 0 159 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.09375 30.6245H139.661V108.684C139.661 109.929 139.167 111.123 138.289 112.004C137.411 112.884 136.22 113.379 134.979 113.379H4.7754C3.53376 113.379 2.34296 112.884 1.46498 112.004C0.586997 111.123 0.09375 109.929 0.09375 108.684V30.6245Z" fill="url(#paint0_linear)"/>
+<path d="M4.7754 0.811035H134.988C136.229 0.811035 137.42 1.30574 138.298 2.1863C139.176 3.06687 139.669 4.26114 139.669 5.50644V30.6224H0.09375V5.42671C0.114603 4.19527 0.617039 3.02138 1.49277 2.158C2.3685 1.29457 3.54741 0.810858 4.7754 0.811035Z" fill="#0078D4"/>
+<path d="M14.018 21.0097C16.4279 21.0097 18.3816 19.0503 18.3816 16.6333C18.3816 14.2162 16.4279 12.2568 14.018 12.2568C11.608 12.2568 9.6543 14.2162 9.6543 16.6333C9.6543 19.0503 11.608 21.0097 14.018 21.0097Z" fill="#83B9F9"/>
+<path d="M30.5707 21.0097C32.9807 21.0097 34.9344 19.0503 34.9344 16.6333C34.9344 14.2162 32.9807 12.2568 30.5707 12.2568C28.1607 12.2568 26.207 14.2162 26.207 16.6333C26.207 19.0503 28.1607 21.0097 30.5707 21.0097Z" fill="#83B9F9"/>
+<path d="M47.1233 21.0097C49.5334 21.0097 51.4869 19.0503 51.4869 16.6333C51.4869 14.2162 49.5334 12.2568 47.1233 12.2568C44.7135 12.2568 42.7598 14.2162 42.7598 16.6333C42.7598 19.0503 44.7135 21.0097 47.1233 21.0097Z" fill="#83B9F9"/>
+<path d="M125.315 67.9657C106.765 67.9657 91.748 62.7122 91.748 55.7754V120.732C91.748 127.403 106.517 132.816 124.855 132.922H125.332C143.882 132.922 158.899 127.668 158.899 120.732V55.7754C158.899 62.5616 143.856 67.9657 125.315 67.9657Z" fill="url(#paint1_linear)"/>
+<path d="M158.899 55.7753C158.899 62.5615 143.882 67.9657 125.332 67.9657C106.782 67.9657 91.7656 62.7121 91.7656 55.7753C91.7656 48.8385 106.782 43.585 125.332 43.585C143.882 43.585 158.899 48.8385 158.899 55.7753Z" fill="#E8E8E8"/>
+<path d="M151.089 54.7839C151.089 59.0895 139.509 62.5623 125.314 62.5623C111.119 62.5623 99.5293 59.0895 99.5293 54.7839C99.5293 50.4783 111.11 47.0586 125.314 47.0586C139.518 47.0586 151.089 50.5226 151.089 54.7839Z" fill="#50E6FF"/>
+<path d="M125.317 56.7223C118.401 56.5482 111.506 57.5608 104.93 59.7167C111.511 61.8359 118.408 62.798 125.317 62.5606C132.236 62.7568 139.135 61.7251 145.696 59.513C139.105 57.4505 132.218 56.5075 125.317 56.7223Z" fill="#198AB3"/>
+<path d="M63.6646 64.8449V43.6978H58.082V69.3897H73.3195V64.8449H63.6646ZM19.3921 54.4618C18.2414 53.9963 17.1735 53.3473 16.2298 52.5393C15.9814 52.2722 15.7879 51.9586 15.6606 51.6167C15.5333 51.2747 15.4746 50.9106 15.4878 50.546C15.4697 50.1819 15.5456 49.8196 15.7081 49.4935C15.8706 49.1675 16.1142 48.8893 16.4153 48.6856C17.1778 48.154 18.0936 47.8891 19.0211 47.9325C21.2199 47.8293 23.3919 48.4517 25.2045 49.7044V44.3888C23.2278 43.6557 21.1271 43.3186 19.0211 43.3966C16.5882 43.265 14.1894 44.0167 12.2636 45.514C11.4229 46.1616 10.7481 47.001 10.295 47.9622C9.84185 48.9234 9.62344 49.979 9.65781 51.0421C9.65781 54.2137 11.6453 56.7032 15.8411 58.5725C17.211 59.1506 18.5022 59.9005 19.6836 60.805C19.9728 61.0504 20.206 61.3556 20.3675 61.6998C20.529 62.0436 20.6151 62.4183 20.62 62.7984C20.6198 63.1767 20.5291 63.5496 20.3554 63.8858C20.1817 64.2221 19.9301 64.5113 19.6218 64.7297C18.777 65.2236 17.8072 65.4606 16.8305 65.4119C14.3313 65.376 11.9301 64.4316 10.073 62.7541V68.5392C12.1218 69.5934 14.4052 70.1059 16.7068 70.0275C19.3071 70.1839 21.8849 69.4636 24.0296 67.981C24.7838 67.2603 25.3607 66.374 25.7149 65.3915C26.0689 64.409 26.1906 63.3574 26.0701 62.32C26.0999 60.7435 25.5567 59.2099 24.542 58.0055C23.092 56.4751 21.3374 55.268 19.3921 54.4618ZM51.881 64.3399C53.2298 62.1773 53.9449 59.6786 53.9449 57.1284C53.9449 54.5779 53.2298 52.0791 51.881 49.917C50.9159 47.9751 49.4094 46.356 47.5438 45.257C45.661 44.1802 43.5281 43.6207 41.3606 43.6358C39.0186 43.584 36.7059 44.1656 34.665 45.319C32.7477 46.3861 31.1753 47.9817 30.1335 49.917C29.04 52.1163 28.4887 54.5469 28.5258 57.0044C28.5394 59.1581 29.0471 61.2803 30.0098 63.2059C30.9597 65.1275 32.4488 66.7283 34.294 67.8127C36.1632 68.9511 38.2918 69.5916 40.4773 69.6732L45.7771 75.8746H53.2855L45.6535 69.0353C48.2275 68.2774 50.4402 66.6092 51.881 64.3399ZM45.6976 62.7895C45.1345 63.4929 44.4159 64.0559 43.599 64.4338C42.7821 64.8121 41.889 64.995 40.9896 64.9689C40.074 65.0034 39.1634 64.8178 38.3337 64.428C37.504 64.0382 36.7792 63.4548 36.2196 62.7275C34.9248 60.9313 34.2995 58.7368 34.453 56.526C34.3078 54.3156 34.9322 52.1238 36.2196 50.3245C36.8026 49.6007 37.5404 49.0182 38.3783 48.6196C39.2163 48.2209 40.1328 48.0162 41.0603 48.0211C41.9655 47.9813 42.8661 48.1717 43.6783 48.5744C44.4905 48.977 45.1884 49.579 45.7065 50.3245C46.9268 52.1522 47.5164 54.3302 47.3848 56.526C47.6043 58.7528 46.997 60.9827 45.68 62.7895H45.6976Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear" x1="69.886" y1="113.379" x2="69.886" y2="30.6245" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0078D4"/>
+<stop offset="0.446" stop-color="#5EA0EF"/>
+<stop offset="0.884" stop-color="#83B9F9"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="91.7304" y1="94.3486" x2="158.899" y2="94.3486" gradientUnits="userSpaceOnUse">
+<stop stop-color="#005BA1"/>
+<stop offset="0.07" stop-color="#0060A9"/>
+<stop offset="0.36" stop-color="#0071C8"/>
+<stop offset="0.52" stop-color="#0078D4"/>
+<stop offset="0.64" stop-color="#0074CD"/>
+<stop offset="0.82" stop-color="#006ABB"/>
+<stop offset="1" stop-color="#005BA1"/>
+</linearGradient>
+</defs>
+</svg>
--- a/extensions/sql-database-projects/src/common/iconHelper.ts
+++ b/extensions/sql-database-projects/src/common/iconHelper.ts
@@ -4,6 +4,7 @@
 *--------------------------------------------------------------------------------------------*/

 import * as vscode from 'vscode';
+import * as azdata from 'azdata';

 export interface IconPath {
 	dark: string;
@@ -39,6 +40,8 @@ export class IconPathHelper {
 	public static error: IconPath;
 	public static inProgress: IconPath;

+	public static dashboardSqlProj: azdata.ThemedIconPath;
+
 	public static setExtensionContext(extensionContext: vscode.ExtensionContext) {
 		IconPathHelper.extensionContext = extensionContext;

@@ -68,6 +71,8 @@ export class IconPathHelper {
 		IconPathHelper.success = IconPathHelper.makeIcon('success', true);
 		IconPathHelper.error = IconPathHelper.makeIcon('error', true);
 		IconPathHelper.inProgress = IconPathHelper.makeIcon('inProgress', true);
+
+		IconPathHelper.dashboardSqlProj = IconPathHelper.makeIcon('dashboardSqlProj', true);
 	}

 	private static makeIcon(name: string, sameIcon: boolean = false) {
--- a/extensions/sql-database-projects/src/projectProvider/projectProvider.ts
+++ b/extensions/sql-database-projects/src/projectProvider/projectProvider.ts
@@ -3,6 +3,7 @@
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

+import { ThemedIconPath } from 'azdata';
 import * as dataworkspace from 'dataworkspace';
 import * as sqldbproj from 'sqldbproj';
 import * as vscode from 'vscode';
@@ -130,24 +131,28 @@ export class SqlDatabaseProjectProvider implements dataworkspace.IProjectProvide
 	get dashboardComponents(): dataworkspace.IDashboardTable[] {
 		const deployInfo: dataworkspace.IDashboardTable = {
 			name: constants.Deployments,
-			columns: [{ displayName: constants.ID, width: 75 },
-			{ displayName: constants.Status, width: 180, type: 'icon' },
-			{ displayName: constants.Target, width: 180 },
-			{ displayName: constants.Time, width: 180 },
-			{ displayName: constants.Date, width: 180 }],
+			columns: [{ displayName: constants.ID, width: 100 },
+			{ displayName: constants.Status, width: 250, type: 'icon' },
+			{ displayName: constants.Target, width: 250 },
+			{ displayName: constants.Time, width: 250 },
+			{ displayName: constants.Date, width: 250 }],
 			data: this.projectController.dashboardDeployData
 		};

 		const buildInfo: dataworkspace.IDashboardTable = {
 			name: constants.Builds,
-			columns: [{ displayName: constants.ID, width: 75 },
-			{ displayName: constants.Status, width: 180, type: 'icon' },
-			{ displayName: constants.Target, width: 180 },
-			{ displayName: constants.Time, width: 180 },
-			{ displayName: constants.Date, width: 180 }],
+			columns: [{ displayName: constants.ID, width: 100 },
+			{ displayName: constants.Status, width: 250, type: 'icon' },
+			{ displayName: constants.Target, width: 250 },
+			{ displayName: constants.Time, width: 250 },
+			{ displayName: constants.Date, width: 250 }],
 			data: this.projectController.dashboardBuildData
 		};

 		return [deployInfo, buildInfo];
 	}
+
+	get image(): ThemedIconPath {
+		return IconPathHelper.dashboardSqlProj;
+	}
 }