- Adding mouse in and out styling to clickbale divs (#15956)

* - Adding mouse in and out styling to clickbale divs
-Moving dashboard card styling to outer div container from inner form container

* removing detect changes

* Localizing aria label

* moving css from template to styles

* adding themeing participant to change hover styling

* removing unused event handlers

* separating styling

extensions/sql-migration/src/constants/strings.ts

@@ -290,6 +290,7 @@ export const SUCCESSFULLY_MIGRATED_TO_AZURE_SQL = localize('sql.migration.succes
 export const MIGRATION_NOT_STARTED = localize('sql.migration.migration.not.started', "Migration not started");
 export const CHOOSE_TO_MIGRATE_TO_AZURE_SQL = localize('sql.migration.choose.to.migrate.to.azure.sql', "Choose to migrate to Azure SQL");
 export const COMING_SOON = localize('sql.migration.coming.soon', "Coming soon");
+export const SHOW_STATUS = localize('sql.migration.show.status', "Show status");
 export function MIGRATION_INPROGRESS_WARNING(count: number) {
 	switch (count) {
 		case 1:

extensions/sql-migration/src/dashboard/sqlServerDashboard.ts

@@ -270,9 +270,9 @@ export class DashboardWidget {
 			if (warningCount > 0) {
 				this._inProgressWarningMigrationButton.warningText!.value = loc.MIGRATION_INPROGRESS_WARNING(warningCount);
 				this._inProgressMigrationButton.container.display = 'none';
-				this._inProgressWarningMigrationButton.container.display = 'inline';
+				this._inProgressWarningMigrationButton.container.display = '';
 			} else {
-				this._inProgressMigrationButton.container.display = 'inline';
+				this._inProgressMigrationButton.container.display = '';
 				this._inProgressWarningMigrationButton.container.display = 'none';
 			}
 
@@ -286,8 +286,8 @@ export class DashboardWidget {
 			const failedMigrations = filterMigrations(migrations, AdsMigrationStatus.FAILED);
 			const failedCount = failedMigrations.length;
 			if (failedCount > 0) {
-				this._failedMigrationButton.container.display = 'inline';
-				this._failedMigrationButton.count.value = failedMigrations.length.toString();
+				this._failedMigrationButton.container.display = '';
+				this._failedMigrationButton.count.value = failedCount.toString();
 			} else {
 				this._failedMigrationButton.container.display = 'none';
 			}
@@ -295,7 +295,7 @@ export class DashboardWidget {
 			const completingCutoverMigrations = filterMigrations(migrations, AdsMigrationStatus.COMPLETING);
 			const cutoverCount = completingCutoverMigrations.length;
 			if (cutoverCount > 0) {
-				this._completingMigrationButton.container.display = 'inline';
+				this._completingMigrationButton.container.display = '';
 				this._completingMigrationButton.count.value = cutoverCount.toString();
 			} else {
 				this._completingMigrationButton.container.display = 'none';
@@ -327,6 +327,7 @@ export class DashboardWidget {
 				'margin-bottom': '0px',
 				'width': '300px',
 				'font-size': '14px',
+				'font-weight': 'bold'
 			}
 		}).component();
 
@@ -342,9 +343,7 @@ export class DashboardWidget {
 		const flex = this._view.modelBuilder.flexContainer().withProps({
 			CSSStyles: {
 				'width': '400px',
-				'height': '50px',
-				'margin-top': '10px',
-				'border': '1px solid',
+				'height': '50px'
 			}
 		}).component();
 
@@ -374,8 +373,14 @@ export class DashboardWidget {
 
 		const compositeButton = this._view.modelBuilder.divContainer().withItems([flex]).withProps({
 			ariaRole: 'button',
-			ariaLabel: 'show status',
-			clickable: true
+			ariaLabel: loc.SHOW_STATUS,
+			clickable: true,
+			CSSStyles: {
+				'width': '400px',
+				'border': '1px solid',
+				'margin-top': '10px',
+				'height': '50px'
+			}
 		}).component();
 		return {
 			container: compositeButton,
@@ -456,8 +461,6 @@ export class DashboardWidget {
 			CSSStyles: {
 				'width': '400px',
 				'height': '70px',
-				'margin-top': '10px',
-				'border': '1px solid'
 			}
 		}).component();
 
@@ -488,7 +491,13 @@ export class DashboardWidget {
 		const compositeButton = this._view.modelBuilder.divContainer().withItems([flex]).withProps({
 			ariaRole: 'button',
 			ariaLabel: 'show status',
-			clickable: true
+			clickable: true,
+			CSSStyles: {
+				'width': '400px',
+				'height': '70px',
+				'margin-top': '10px',
+				'border': '1px solid'
+			}
 		}).component();
 		return {
 			container: compositeButton,

src/sql/workbench/browser/modelComponents/divContainer.component.ts

@@ -18,6 +18,8 @@ import { KeyCode } from 'vs/base/common/keyCodes';
 import { IComponentDescriptor, IComponent, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
 import { convertSize } from 'sql/base/browser/dom';
 import { ILogService } from 'vs/platform/log/common/log';
+import { registerThemingParticipant, IColorTheme, IThemeService, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
+import * as colorRegistry from 'vs/platform/theme/common/colorRegistry';
 
 class DivItem {
 	constructor(public descriptor: IComponentDescriptor, public config: azdata.DivItemLayout) { }
@@ -25,7 +27,7 @@ class DivItem {
 
 @Component({
 	template: `
-		<div #divContainer *ngIf="items" class="divContainer" [ngStyle]="CSSStyles" [style.height]="height" [style.width]="width" [style.display]="display" (keyup)="onKey($event)" [attr.role]="ariaRole" [attr.aria-selected]="ariaSelected">
+		<div #divContainer *ngIf="items" [ngClass] = "{'divContainer': true, 'clickable-divContainer': clickable}" [ngStyle]="CSSStyles" [style.height]="height" [style.width]="width" [style.display]="display" (keyup)="onKey($event)" [attr.role]="ariaRole" [attr.aria-selected]="ariaSelected">
 			<div *ngFor="let item of items" [style.order]="getItemOrder(item)" [ngStyle]="getItemStyles(item)">
 				<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
 				</model-component-wrapper>
@@ -47,10 +49,22 @@ export default class DivContainer extends ContainerBase<azdata.DivItemLayout, az
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
 		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
 		@Inject(forwardRef(() => Renderer2)) private renderer: Renderer2,
-		@Inject(ILogService) logService: ILogService
+		@Inject(ILogService) logService: ILogService,
+		@Inject(IThemeService) themeService: IThemeService,
 	) {
 		super(changeRef, el, logService);
 		this._overflowY = '';	// default
+
+		registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
+			const editorHoverBackground = theme.getColor(colorRegistry.editorHoverBackground).toString();
+			if (editorHoverBackground) {
+				collector.addRule(`
+					.clickable-divContainer:hover {
+						background-color: ${editorHoverBackground};
+					}
+					`);
+			}
+		});
 	}
 
 	ngAfterViewInit(): void {
@@ -170,3 +184,5 @@ export default class DivContainer extends ContainerBase<azdata.DivItemLayout, az
 		}
 	}
 }
+
+

src/sql/workbench/browser/modelComponents/media/divContainer.css

@@ -6,4 +6,8 @@
 .divContainer {
 	display: block;
 	height: 100%;
-}
+}
+
+.divContainer:focus {
+	outline-offset: 2px
+}