ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-03 01:25:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard style updates to match mockups (#9857)

Browse Source 
* widget formatting

* tab panel style

* breadcrumb padding

* dark theme colors

* Addressing comments

* move colors to theme.ts

* update properties widget colors

* update color names
This commit is contained in:
Kim Santiago
2020-04-08 18:15:23 -07:00
committed by GitHub
parent db49a146b0
commit 238acb1468
9 changed files with 111 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css
View File

@@ -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 {

54
src/sql/workbench/contrib/dashboard/browser/core/dashboardPanelStyles.ts
View File

@@ -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}
}`);
}
});

3
src/sql/workbench/contrib/dashboard/browser/widgets/insights/insightsWidget.component.ts
View File

@@ -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: `
<div *ngIf="error" style="text-align: center; padding-top: 20px">{{error}}</div>
<div *ngIf="lastUpdated" style="font-style: italic; font-size: 80%; margin-left: 5px">{{lastUpdated}}</div>
<div *ngIf="lastUpdated" class="insights-widget-last-updated subText">{{lastUpdated}}</div>
<div *ngIf="autoRefreshStatus" style="font-style: italic; font-size: 80%; margin-left: 5px">{{autoRefreshStatus}}</div>
<div style="margin: 10px; width: calc(100% - 20px); height: calc(100% - 20px)">
<ng-template *ngIf="!_loading" component-host></ng-template>

9
src/sql/workbench/contrib/dashboard/browser/widgets/insights/insightsWidget.css Normal file
View File

@@ -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;
}

4
src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.html
View File

@@ -11,8 +11,8 @@
<span #child style="white-space : nowrap; width: fit-content">
<ng-template ngFor let-item [ngForOf]="properties">
<span style="margin-left: 10px; display: inline-block;">
<div style="font-size: 11px;">{{item.displayName}}</div>
<div>{{item.value}}</div>
<div class="propertiesName" style="font-size: 11px;">{{item.displayName}}</div>
<div class="propertiesValue">{{item.value}}</div>
</span>
</ng-template>
</span>