designer pane separator (#17366)

* designer pane separator

* comments

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

@@ -26,6 +26,7 @@ import { DesignerPropertiesPane, PropertiesPaneObjectContext } from 'sql/base/br
 import { Button, IButtonStyles } from 'sql/base/browser/ui/button/button';
 import { ButtonColumn } from 'sql/base/browser/ui/table/plugins/buttonColumn.plugin';
 import { Codicon } from 'vs/base/common/codicons';
+import { Color } from 'vs/base/common/color';
 
 export interface IDesignerStyle {
 	tabbedPanelStyles?: ITabbedPanelStyles;
@@ -34,6 +35,7 @@ export interface IDesignerStyle {
 	selectBoxStyles?: ISelectBoxStyles;
 	checkboxStyles?: ICheckboxStyles;
 	buttonStyles?: IButtonStyles;
+	paneSeparator?: Color;
 }
 
 export type DesignerUIComponent = InputBox | Checkbox | Table<Slick.SlickData> | SelectBox;
@@ -173,11 +175,11 @@ export class Designer extends Disposable implements IThemable {
 		});
 		this._propertiesPane.style();
 		this._verticalSplitView.style({
-			separatorBorder: styles.selectBoxStyles.selectBorder
+			separatorBorder: styles.paneSeparator
 		});
 
 		this._horizontalSplitView.style({
-			separatorBorder: styles.selectBoxStyles.selectBorder
+			separatorBorder: styles.paneSeparator
 		});
 
 		this._buttons.forEach((button) => {

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

@@ -89,3 +89,11 @@
 	padding-left: 17px;
 	background-position: 2px center;
 }
+
+.designer-component .top-content-container .components-grid {
+	padding-bottom: 10px;
+}
+
+.designer-component .content-container .tabbedPanel {
+	border-width: 0px;
+}

src/sql/platform/theme/common/colorRegistry.ts

@@ -85,3 +85,6 @@ export const calloutDialogExteriorBorder = registerColor('calloutDialog.exterior
 export const calloutDialogHeaderFooterBackground = registerColor('calloutDialog.headerFooterBackground', { light: '#FFFFFF', dark: '#1E1E1E', hc: Color.black }, nls.localize('calloutDialogHeaderFooterBackground', 'Callout dialog header and footer background.'));
 export const calloutDialogBodyBackground = registerColor('calloutDialog.bodyBackground', { light: '#FFFFFF', dark: '#1E1E1E', hc: Color.black }, nls.localize('calloutDialogBodyBackground', "Callout dialog body background."));
 export const calloutDialogShadowColor = registerColor('calloutDialog.shadow', { light: '#000000', dark: '#FFFFFF', hc: '#000000' }, nls.localize('calloutDialogShadowColor', 'Callout dialog box shadow color.'));
+
+// Designer
+export const DesignerPaneSeparator = registerColor('designer.paneSeparator', { light: '#DDDDDD', dark: '#8A8886', hc: contrastBorder }, nls.localize('designer.paneSeparator', 'The pane separator color.'));

src/sql/platform/theme/common/styler.ts

@@ -384,7 +384,8 @@ export function attachDesignerStyler(widget: any, themeService: IThemeService):
 			selectBoxStyles: selectBoxStyles,
 			tableStyles: tableStyles,
 			checkboxStyles: checkboxStyles,
-			buttonStyles: buttonStyles
+			buttonStyles: buttonStyles,
+			paneSeparator: cr.resolveColorValue(sqlcr.DesignerPaneSeparator, colorTheme)
 		});
 	}
 

src/sql/workbench/contrib/tableDesigner/browser/media/tableDesignerEditor.css

@@ -15,7 +15,6 @@
 	padding: 5px;
 	border-width: 0 0 1px 0;
 	border-style: solid;
-	border-bottom-color: rgba(128, 128, 128, 0.35);
 }
 
 .table-designer-main-container .designer-container {

src/sql/workbench/contrib/tableDesigner/browser/tableDesignerEditor.ts

@@ -19,6 +19,8 @@ import { IEditorOpenContext } from 'vs/workbench/common/editor';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { SaveTableChangesAction } from 'sql/workbench/contrib/tableDesigner/browser/actions';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { DesignerPaneSeparator } from 'sql/platform/theme/common/colorRegistry';
 
 export class TableDesignerEditor extends EditorPane {
 	public static readonly ID: string = 'workbench.editor.tableDesigner';
@@ -59,6 +61,12 @@ export class TableDesignerEditor extends EditorPane {
 		actionbar.push(this._saveChangesAction, { icon: true, label: false });
 		this._designer = new Designer(designerContainer, this._contextViewService);
 		this._register(attachDesignerStyler(this._designer, this.themeService));
+		this._register(registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
+			const border = theme.getColor(DesignerPaneSeparator);
+			if (border) {
+				collector.addRule(`.table-designer-main-container .actionbar-container { border-color: ${border};}`);
+			}
+		}));
 	}
 
 	layout(dimension: DOM.Dimension): void {