diff --git a/src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css b/src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css index 3d866cd443..d595340027 100644 --- a/src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css +++ b/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; } diff --git a/src/sql/base/browser/ui/taskbar/overflowActionbar.ts b/src/sql/base/browser/ui/taskbar/overflowActionbar.ts index 384b8667f1..7006108186 100644 --- a/src/sql/base/browser/ui/taskbar/overflowActionbar.ts +++ b/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'; diff --git a/src/sql/base/browser/ui/taskbar/overflowActionbarStyles.ts b/src/sql/base/browser/ui/taskbar/overflowActionbarStyles.ts deleted file mode 100644 index ad1a62075a..0000000000 --- a/src/sql/base/browser/ui/taskbar/overflowActionbarStyles.ts +++ /dev/null @@ -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} - }`); - } -}); diff --git a/src/sql/base/browser/ui/taskbar/taskbar.ts b/src/sql/base/browser/ui/taskbar/taskbar.ts index 312cded555..291f224418 100644 --- a/src/sql/base/browser/ui/taskbar/taskbar.ts +++ b/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, { diff --git a/src/sql/workbench/browser/modelComponents/propertiesContainer.component.ts b/src/sql/workbench/browser/modelComponents/propertiesContainer.component.ts index 521608d401..f3787e39e0 100644 --- a/src/sql/workbench/browser/modelComponents/propertiesContainer.component.ts +++ b/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} + }`); + } +}); diff --git a/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.ts b/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.ts index 8e9739d282..4c38484d29 100644 --- a/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.ts +++ b/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(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% - ${(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} + }`); + } +}); diff --git a/src/sql/workbench/contrib/dashboard/browser/core/dashboardPanelStyles.ts b/src/sql/workbench/contrib/dashboard/browser/core/dashboardPanelStyles.ts index 0873c78f86..166cc7a492 100644 --- a/src/sql/workbench/contrib/dashboard/browser/core/dashboardPanelStyles.ts +++ b/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} - }`); - } }); diff --git a/src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.ts b/src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.ts index be9f233900..49d985fce7 100644 --- a/src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.ts +++ b/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; @@ -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} + }`); + } +}); diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index f2be8ce23c..a283e9a498 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -651,12 +651,6 @@ export const DASHBOARD_BORDER = registerColor('dashboard.border', { hc: contrastBorder }, nls.localize('dashboardBorder', "Color for borders in dashboard")); -export const TAB_LABEL = registerColor('tab.tabLabel', { - light: '#000000', - dark: 'FFFFFF', - hc: 'FFFFFF' -}, nls.localize('tabLabel', "Color of tab label")); - export const TAB_GROUP_HEADER = registerColor('tab.tabGroupHeader', { light: '#dddddd', dark: '#dddddd', @@ -675,11 +669,17 @@ export const DASHBOARD_WIDGET_SUBTEXT = registerColor('dashboardWidget.subText', hc: '#FFFFFF' }, nls.localize('dashboardWidgetSubtext', "Color for dashboard widget subtext")); -export const DASHBOARD_PROPERTIES_NAME = registerColor('dashboardWidget.propertiesName', { +export const PROPERTIES_CONTAINER_PROPERTY_VALUE = registerColor('propertiesContainer.propertyValue', { + light: '#000000', + dark: 'FFFFFF', + hc: 'FFFFFF' +}, nls.localize('propertiesContainerPropertyValue', "Color for property values displayed in the properties container component")); + +export const PROPERTIES_CONTAINER_PROPERTY_NAME = registerColor('propertiesContainer.propertyName', { light: '#161616', dark: '#8A8886', hc: '#FFFFFF' -}, nls.localize('dashboardWidgetPropertiesName', "Color for dashboard properties widget names")); +}, nls.localize('propertiesContainerPropertyName', "Color for property names displayed in the properties container component")); export const TOOLBAR_OVERFLOW_SHADOW = registerColor('toolbar.overflowShadow', { light: new Color(new RGBA(0, 0, 0, .132)),