Fix properties container and overflow actionbar styles (#10180)

* Fix styles

* Undo bold

src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css

@@ -28,14 +28,17 @@ properties-container .columnLayout.property {
 	flex-direction: column;
 }
 
-properties-container .propertyName {
+properties-container .propertyName,
+properties-container .splitter {
 	opacity: 0.6;
 	font-size: 12px;
 	flex: 0 0 auto
 }
 
 .vs-dark properties-container .propertyName,
-.hc-black properties-container .propertyName {
+.hc-black properties-container .propertyName,
+.vs-dark properties-container .splitter,
+.hc-black properties-container .splitter {
 	opacity: 1;
 }
 

src/sql/base/browser/ui/taskbar/overflowActionbar.ts

@@ -2,8 +2,6 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
-import 'sql/base/browser/ui/taskbar/overflowActionbarStyles';
-
 import { IAction } from 'vs/base/common/actions';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';

src/sql/base/browser/ui/taskbar/overflowActionbarStyles.ts

@@ -1,43 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-// eslint-disable-next-line code-import-patterns
-import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
-// eslint-disable-next-line code-import-patterns
-import { EDITOR_PANE_BACKGROUND, DASHBOARD_BORDER, TOOLBAR_OVERFLOW_SHADOW } from 'vs/workbench/common/theme';
-// eslint-disable-next-line code-import-patterns
-import { focusBorder } from 'vs/platform/theme/common/colorRegistry';
-
-registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
-	const overflowBackground = theme.getColor(EDITOR_PANE_BACKGROUND);
-	if (overflowBackground) {
-		collector.addRule(`.carbon-taskbar .overflow {
-			background-color: ${overflowBackground};
-		}`);
-	}
-
-	const overflowShadow = theme.getColor(TOOLBAR_OVERFLOW_SHADOW);
-	if (overflowShadow) {
-		collector.addRule(`.carbon-taskbar .overflow {
-			box-shadow: 0px 4px 4px ${overflowShadow};
-		}`);
-	}
-
-	const border = theme.getColor(DASHBOARD_BORDER);
-	if (border) {
-		collector.addRule(`.carbon-taskbar .overflow {
-			border: 1px solid ${border};
-		}`);
-	}
-
-	const activeOutline = theme.getColor(focusBorder);
-	if (activeOutline) {
-		collector.addRule(`.carbon-taskbar .overflow li.focused {
-			outline: 1px solid;
-			outline-offset: -3px;
-			outline-color: ${activeOutline}
-		}`);
-	}
-});

src/sql/base/browser/ui/taskbar/taskbar.ts

@@ -25,6 +25,10 @@ export interface ITaskbarContent {
 	element?: HTMLElement;
 }
 
+export interface ITaskbarOptions extends IToolBarOptions {
+	collapseOverflow?: boolean
+}
+
 /**
  * A widget that combines an action bar for actions. This class was needed because we
  * want the ability to use the custom QueryActionBar in order to display other HTML
@@ -34,14 +38,14 @@ export class Taskbar {
 	private options: IToolBarOptions;
 	private actionBar: ActionBar;
 
-	constructor(container: HTMLElement, options: IToolBarOptions = { orientation: ActionsOrientation.HORIZONTAL }, collapseOverflow: boolean = false) {
+	constructor(container: HTMLElement, options: ITaskbarOptions = { orientation: ActionsOrientation.HORIZONTAL }) {
 		this.options = options;
 
 		let element = document.createElement('div');
 		element.className = 'monaco-toolbar carbon-taskbar';
 		container.appendChild(element);
 
-		if (collapseOverflow) {
+		if (options.collapseOverflow) {
 			this.actionBar = new OverflowActionBar(
 				element,
 				{

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

@@ -13,6 +13,8 @@ import * as azdata from 'azdata';
 import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
 import { PropertiesContainer, PropertyItem } from 'sql/base/browser/ui/propertiesContainer/propertiesContainer.component';
+import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
+import { PROPERTIES_CONTAINER_PROPERTY_NAME, PROPERTIES_CONTAINER_PROPERTY_VALUE } from 'vs/workbench/common/theme';
 
 @Component({
 	selector: `modelview-properties-container`,
@@ -54,3 +56,22 @@ export default class PropertiesContainerComponent extends ComponentBase implemen
 		this._propertiesContainer.propertyItems = newValue;
 	}
 }
+
+registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
+
+	const propertyNameColor = theme.getColor(PROPERTIES_CONTAINER_PROPERTY_NAME);
+	if (propertyNameColor) {
+		collector.addRule(`
+		modelview-properties-container .propertyName,
+		modelview-properties-container .splitter {
+			color: ${propertyNameColor}
+		}`);
+	}
+
+	const propertyValueColor = theme.getColor(PROPERTIES_CONTAINER_PROPERTY_VALUE);
+	if (propertyValueColor) {
+		collector.addRule(`modelview-properties-container .propertyValue {
+			color: ${propertyValueColor}
+		}`);
+	}
+});

src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.ts

@@ -49,9 +49,10 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { NAV_SECTION } from 'sql/workbench/contrib/dashboard/browser/containers/dashboardNavSection.contribution';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
-import { DASHBOARD_BORDER } from 'vs/workbench/common/theme';
-import { IColorTheme } from 'vs/platform/theme/common/themeService';
+import { DASHBOARD_BORDER, EDITOR_PANE_BACKGROUND, TOOLBAR_OVERFLOW_SHADOW } from 'vs/workbench/common/theme';
+import { IColorTheme, registerThemingParticipant, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
 import { attachTabbedPanelStyler } from 'sql/workbench/common/styler';
+import { focusBorder } from 'vs/platform/theme/common/colorRegistry';
 
 const dashboardRegistry = Registry.as<IDashboardRegistry>(DashboardExtensions.DashboardContributions);
 const homeTabGroupId = 'home';
@@ -204,7 +205,10 @@ export abstract class DashboardPage extends AngularDisposable implements IConfig
 	private createToolbar(parentElement: HTMLElement, tabId: string): void {
 		// clear out toolbar
 		DOM.clearNode(parentElement);
-		this.toolbar = this._register(new Taskbar(parentElement, { actionViewItemProvider: action => this.createActionItemProvider(action as Action) }, true));
+		this.toolbar = this._register(new Taskbar(parentElement, {
+			actionViewItemProvider: action => this.createActionItemProvider(action as Action),
+			collapseOverflow: true
+		}));
 		let content = [];
 		content = this.getToolbarContent(tabId);
 		if (tabId === this.homeTabId) {
@@ -562,3 +566,35 @@ export abstract class DashboardPage extends AngularDisposable implements IConfig
 		return this.showToolbar ? `calc(100% - ${(<HTMLElement>this.toolbarContainer.nativeElement).clientHeight}px)` : '100%';
 	}
 }
+
+registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
+	const overflowBackground = theme.getColor(EDITOR_PANE_BACKGROUND);
+	if (overflowBackground) {
+		collector.addRule(`dashboard-page .carbon-taskbar .overflow {
+			background-color: ${overflowBackground};
+		}`);
+	}
+
+	const overflowShadow = theme.getColor(TOOLBAR_OVERFLOW_SHADOW);
+	if (overflowShadow) {
+		collector.addRule(`dashboard-page .carbon-taskbar .overflow {
+			box-shadow: 0px 4px 4px ${overflowShadow};
+		}`);
+	}
+
+	const border = theme.getColor(DASHBOARD_BORDER);
+	if (border) {
+		collector.addRule(`dashboard-page .carbon-taskbar .overflow {
+			border: 1px solid ${border};
+		}`);
+	}
+
+	const activeOutline = theme.getColor(focusBorder);
+	if (activeOutline) {
+		collector.addRule(`dashboard-page .carbon-taskbar .overflow li.focused {
+			outline: 1px solid;
+			outline-offset: -3px;
+			outline-color: ${activeOutline}
+		}`);
+	}
+});

src/sql/workbench/contrib/dashboard/browser/core/dashboardPanelStyles.ts

@@ -5,17 +5,9 @@
 
 import 'vs/css!./dashboardPanel';
 import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
-import { DASHBOARD_WIDGET_SUBTEXT, TAB_LABEL, DASHBOARD_WIDGET_TITLE, DASHBOARD_PROPERTIES_NAME } from 'vs/workbench/common/theme';
+import { DASHBOARD_WIDGET_SUBTEXT, DASHBOARD_WIDGET_TITLE } from 'vs/workbench/common/theme';
 
 registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
-	// tab label
-	const tabLabelColor = theme.getColor(TAB_LABEL);
-	if (tabLabelColor) {
-		collector.addRule(`properties-widget .propertyValue {
-			color: ${tabLabelColor}
-		}`);
-	}
-
 	// widget title
 	const widgetTitle = theme.getColor(DASHBOARD_WIDGET_TITLE);
 	if (widgetTitle) {
@@ -31,12 +23,4 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
 			color: ${subText};
 		}`);
 	}
-
-	// property name
-	const propertyName = theme.getColor(DASHBOARD_PROPERTIES_NAME);
-	if (propertyName) {
-		collector.addRule(`properties-widget .propertyName {
-			color: ${propertyName}
-		}`);
-	}
 });

src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.ts

@@ -16,6 +16,8 @@ import { Registry } from 'vs/platform/registry/common/platform';
 import { ILogService } from 'vs/platform/log/common/log';
 import { subscriptionToDisposable } from 'sql/base/browser/lifecycle';
 import { PropertiesContainer, PropertyItem } from 'sql/base/browser/ui/propertiesContainer/propertiesContainer.component';
+import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
+import { PROPERTIES_CONTAINER_PROPERTY_NAME, PROPERTIES_CONTAINER_PROPERTY_VALUE } from 'vs/workbench/common/theme';
 
 export interface PropertiesConfig {
 	properties: Array<Property>;
@@ -244,3 +246,22 @@ export class PropertiesWidgetComponent extends DashboardWidget implements IDashb
 		return val;
 	}
 }
+
+registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
+
+	const propertyNameColor = theme.getColor(PROPERTIES_CONTAINER_PROPERTY_NAME);
+	if (propertyNameColor) {
+		collector.addRule(`
+		properties-widget .propertyName,
+		properties-widget .splitter {
+			color: ${propertyNameColor}
+		}`);
+	}
+
+	const propertyValueColor = theme.getColor(PROPERTIES_CONTAINER_PROPERTY_VALUE);
+	if (propertyValueColor) {
+		collector.addRule(`properties-widget .propertyValue {
+			color: ${propertyValueColor}
+		}`);
+	}
+});