ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-22 17:22:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix properties container and overflow actionbar styles (#10180)

Browse Source 
* Fix styles

* Undo bold
This commit is contained in:
Charles Gagnon
2020-04-28 16:27:07 -07:00
committed by GitHub
parent 98f3f57f77
commit 750f6e6559
9 changed files with 101 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/sql/workbench/browser/modelComponents/propertiesContainer.component.ts
View File

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

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

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

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

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

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

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