From 238acb14688e0fa48cea8448230f639ba4e2231a Mon Sep 17 00:00:00 2001 From: Kim Santiago <31145923+kisantia@users.noreply.github.com> Date: Wed, 8 Apr 2020 18:15:23 -0700 Subject: [PATCH] Dashboard style updates to match mockups (#9857) * widget formatting * tab panel style * breadcrumb padding * dark theme colors * Addressing comments * move colors to theme.ts * update properties widget colors * update color names --- .../ui/breadcrumb/breadcrumb.component.ts | 2 +- .../ui/breadcrumb/media/breadcrumb.css | 8 +++ src/sql/base/browser/ui/panel/media/panel.css | 11 ++-- .../contents/dashboardWidgetWrapper.css | 3 ++ .../browser/core/dashboardPanelStyles.ts | 54 ++++++++++++++++--- .../insights/insightsWidget.component.ts | 3 +- .../widgets/insights/insightsWidget.css | 9 ++++ .../propertiesWidget.component.html | 4 +- src/vs/workbench/common/theme.ts | 34 +++++++++++- 9 files changed, 111 insertions(+), 17 deletions(-) create mode 100644 src/sql/workbench/contrib/dashboard/browser/widgets/insights/insightsWidget.css diff --git a/src/sql/base/browser/ui/breadcrumb/breadcrumb.component.ts b/src/sql/base/browser/ui/breadcrumb/breadcrumb.component.ts index 43d002d202..ea2d8cb667 100644 --- a/src/sql/base/browser/ui/breadcrumb/breadcrumb.component.ts +++ b/src/sql/base/browser/ui/breadcrumb/breadcrumb.component.ts @@ -16,7 +16,7 @@ import { subscriptionToDisposable } from 'sql/base/browser/lifecycle'; @Component({ selector: 'breadcrumb', template: ` - + diff --git a/src/sql/base/browser/ui/breadcrumb/media/breadcrumb.css b/src/sql/base/browser/ui/breadcrumb/media/breadcrumb.css index 26ebc9deb8..d2608a912d 100644 --- a/src/sql/base/browser/ui/breadcrumb/media/breadcrumb.css +++ b/src/sql/base/browser/ui/breadcrumb/media/breadcrumb.css @@ -30,3 +30,11 @@ breadcrumb .chevron-right.codicon { breadcrumb .router-link { cursor: pointer; } + +breadcrumb .breadcrumb-container { + display: flex; + flex-flow: row; + align-items: center; + margin: 10px; + margin-left: 19px +} diff --git a/src/sql/base/browser/ui/panel/media/panel.css b/src/sql/base/browser/ui/panel/media/panel.css index fe2215f198..ee425c35b9 100644 --- a/src/sql/base/browser/ui/panel/media/panel.css +++ b/src/sql/base/browser/ui/panel/media/panel.css @@ -58,7 +58,7 @@ panel { } .tabbedPanel.vertical .tabList .tab .tabLabel { - font-size: 12px; + font-size: 13px; padding-bottom: 0px; font-weight: normal; } @@ -80,6 +80,7 @@ panel { display: block; min-width: 150px; line-height: 35px; + padding-left: 22px; } .tabbedPanel .tabList .tab .tabIcon.codicon { @@ -152,13 +153,13 @@ panel { } .tabbedPanel .tab-group-header { - font-weight: bold; - margin: 15px 5px 3px 5px; - line-height: 35px; + font-weight: 600; + font-size: 14px; + margin: 15px 24px 3px 24px; + line-height: 20px; height: 35px; border-style: solid; border-width: 0 0 1px 0; - border-color: rgb(214, 214, 214); } .tabbedPanel .vertical-tab-action-container { diff --git a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css b/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css index 4898f4e36e..d5081ce968 100644 --- a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css +++ b/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css @@ -19,6 +19,9 @@ dashboard-widget-wrapper .widgetHeader { display: flex; flex: 0 0; padding: 3px 0 3px 0; + font-weight: 600; + font-size: 14px; + line-height: 20px; } dashboard-widget-wrapper .icon { diff --git a/src/sql/workbench/contrib/dashboard/browser/core/dashboardPanelStyles.ts b/src/sql/workbench/contrib/dashboard/browser/core/dashboardPanelStyles.ts index a244e574e6..7d660e6ed3 100644 --- a/src/sql/workbench/contrib/dashboard/browser/core/dashboardPanelStyles.ts +++ b/src/sql/workbench/contrib/dashboard/browser/core/dashboardPanelStyles.ts @@ -6,22 +6,20 @@ import 'vs/css!./dashboardPanel'; import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; import { - TAB_ACTIVE_BACKGROUND, TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_BACKGROUND, - TAB_INACTIVE_FOREGROUND, EDITOR_GROUP_HEADER_TABS_BACKGROUND, TAB_BORDER, EDITOR_GROUP_BORDER, DASHBOARD_TAB_ACTIVE_BACKGROUND, DASHBOARD_BORDER + TAB_ACTIVE_BACKGROUND, TAB_INACTIVE_BACKGROUND, + TAB_INACTIVE_FOREGROUND, EDITOR_GROUP_HEADER_TABS_BACKGROUND, TAB_BORDER, EDITOR_GROUP_BORDER, VERTICAL_TAB_ACTIVE_BACKGROUND, DASHBOARD_BORDER, DASHBOARD_WIDGET_SUBTEXT, TAB_LABEL, TAB_GROUP_HEADER, DASHBOARD_WIDGET_TITLE, DASHBOARD_PROPERTIES_NAME } from 'vs/workbench/common/theme'; import { activeContrastBorder } from 'vs/platform/theme/common/colorRegistry'; registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => { // Title Active const tabActiveBackground = theme.getColor(TAB_ACTIVE_BACKGROUND); - const tabActiveForeground = theme.getColor(TAB_ACTIVE_FOREGROUND); - let tabActiveBackgroundVertical = theme.getColor(DASHBOARD_TAB_ACTIVE_BACKGROUND); + const tabActiveBackgroundVertical = theme.getColor(VERTICAL_TAB_ACTIVE_BACKGROUND); - if (tabActiveBackground || tabActiveForeground) { + if (tabActiveBackground) { collector.addRule(` panel.dashboard-panel > .tabbedPanel > .title .tabList .tab:hover .tabLabel, panel.dashboard-panel > .tabbedPanel > .title .tabList .tab .tabLabel.active { - color: ${tabActiveForeground}; border-bottom: 0px solid; } @@ -68,6 +66,26 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) = `); } + // tab label + const tabLabelColor = theme.getColor(TAB_LABEL); + if (tabLabelColor) { + collector.addRule(`.tabbedPanel.vertical > .title .tabList .tabLabel { + color: ${tabLabelColor} + }`); + + collector.addRule(`properties-widget .propertiesValue { + color: ${tabLabelColor} + }`); + } + + // tab group header + const tabGroupHeader = theme.getColor(TAB_GROUP_HEADER); + if (tabGroupHeader) { + collector.addRule(`.tabbedPanel .tab-group-header { + border-color: ${tabGroupHeader}; + }`); + } + // Panel title background const panelTitleBackground = theme.getColor(EDITOR_GROUP_HEADER_TABS_BACKGROUND); if (panelTitleBackground) { @@ -125,4 +143,28 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) = border-right-color: ${sideBorder}; }`); } + + // widget title + const widgetTitle = theme.getColor(DASHBOARD_WIDGET_TITLE); + if (widgetTitle) { + collector.addRule(`dashboard-widget-wrapper .header { + color: ${widgetTitle}; + }`); + } + + // widget subtext + const subText = theme.getColor(DASHBOARD_WIDGET_SUBTEXT); + if (subText) { + collector.addRule(`.subText { + color: ${subText}; + }`); + } + + // properties name + const propertiesName = theme.getColor(DASHBOARD_PROPERTIES_NAME); + if (propertiesName) { + collector.addRule(`properties-widget .propertiesName { + color: ${propertiesName} + }`); + } }); diff --git a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/insightsWidget.component.ts b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/insightsWidget.component.ts index 3c19445d4b..922f460b88 100644 --- a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/insightsWidget.component.ts +++ b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/insightsWidget.component.ts @@ -2,6 +2,7 @@ * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ +import 'vs/css!./insightsWidget'; import { Component, Inject, forwardRef, AfterContentInit, @@ -46,7 +47,7 @@ interface IStorageResult { selector: 'insights-widget', template: `
{{error}}
-
{{lastUpdated}}
+
{{lastUpdated}}
{{autoRefreshStatus}}
diff --git a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/insightsWidget.css b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/insightsWidget.css new file mode 100644 index 0000000000..cd541e4c80 --- /dev/null +++ b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/insightsWidget.css @@ -0,0 +1,9 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the Source EULA. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +.insights-widget-last-updated { + font-size: 10px; + margin-left: 5px; +} diff --git a/src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.html b/src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.html index 803376e0ae..c61ba9e702 100644 --- a/src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.html +++ b/src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.html @@ -11,8 +11,8 @@ -
{{item.displayName}}
-
{{item.value}}
+
{{item.displayName}}
+
{{item.value}}
 diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 4047733265..5e32e7dae9 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -595,14 +595,44 @@ export const WINDOW_INACTIVE_BORDER = registerColor('window.inactiveBorder', { // {{SQL CARBON EDIT}} // < --- Dashboard --- > -export const DASHBOARD_TAB_ACTIVE_BACKGROUND = registerColor('dashboard.tabActiveBackground', { +export const VERTICAL_TAB_ACTIVE_BACKGROUND = registerColor('tab.verticalTabActiveBackground', { dark: '#444444', light: '#e1f0fe', hc: TAB_ACTIVE_BACKGROUND -}, nls.localize('dashboardTabActiveBackground', "Active tab background color for dashboard navigation")); +}, nls.localize('verticalTabActiveBackground', "Active tab background color for vertical tabs")); export const DASHBOARD_BORDER = registerColor('dashboard.border', { dark: '#8A8886', light: '#DDDDDD', 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', + hc: '#FFFFFF' +}, nls.localize('tabGroupHeader', "Color of tab group header")); + +export const DASHBOARD_WIDGET_TITLE = registerColor('dashboardWidget.title', { + light: '#323130', + dark: '#FFFFFF', + hc: '#FFFFFF' +}, nls.localize('dashboardWidget', 'Color of dashboard widget title')); + +export const DASHBOARD_WIDGET_SUBTEXT = registerColor('dashboardWidget.subText', { + light: '#484644', + dark: '#8A8886', + hc: '#FFFFFF' +}, nls.localize('dashboardWidgetSubtext', "Color for dashboard widget subtext")); + +export const DASHBOARD_PROPERTIES_NAME = registerColor('dashboardWidget.propertiesName', { + light: '#161616', + dark: '#8A8886', + hc: '#FFFFFF' +}, nls.localize('dashboardWidgetPropertiesName', "Color for dashboard properties widget names"));