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

implement styler for infobutton (#14396)

Browse Source 
* implement styler for infobutton

* comments

* one more comment
This commit is contained in:
Alan Ren
2021-02-23 13:28:48 -08:00
committed by GitHub
parent 948bb5bc34
commit 561242a0d9
6 changed files with 76 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/sql/base/browser/ui/infoButton/infoButton.css
View File

@@ -37,37 +37,9 @@
}
.info-button {
background-color: #fff;
border-radius: 2px;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.13);
display: inline-block;
}
.info-button[tabindex="0"]:active {
background-color: #fff;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.13);
}
.vs-dark .info-button {
background-color: #1b1a19;
box-shadow: 0px 1px 4px rgba(255, 255, 255, 0.13);
}
.vs-dark .info-button[tabindex="0"]:active {
background-color: #1b1a19;
box-shadow: 0px 3px 8px rgba(255, 255, 255, 0.13);
}
.hc-black .info-button {
background-color: #000;
box-shadow: none;
}
.hc-black .info-button[tabindex="0"]:active {
background-color: #000;
}
.info-button:hover {
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.13);
}
.vs-dark .info-button:hover {
box-shadow: 0px 3px 8px rgba(255, 255, 255, 0.13);
}
.hc-black .info-button[tabindex="0"]:hover {
border-style: dashed !important;
border-color: rgb(243, 133, 24) !important;
background-image: none;
border-width: 1px;
border-style: solid;
}

19
src/sql/base/browser/ui/infoButton/infoButton.ts
View File

@@ -5,7 +5,7 @@
import 'vs/css!./infoButton';
import { Button as sqlButton } from 'sql/base/browser/ui/button/button';
import { IButtonOptions } from 'vs/base/browser/ui/button/button';
import { IButtonOptions, IButtonStyles } from 'vs/base/browser/ui/button/button';
export interface IInfoButtonOptions extends IButtonOptions {
buttonMaxHeight: number,
@@ -34,6 +34,8 @@ export class InfoButton extends sqlButton {
private _iconWidth?: number;
private _title?: string;
private _styles: IButtonStyles;
constructor(container: HTMLElement, options?: IInfoButtonOptions) {
super(container, options);
this._container = container;
@@ -149,4 +151,19 @@ export class InfoButton extends sqlButton {
this.iconClass = options.iconClass;
this.title = options.title;
}
style(styles: IButtonStyles): void {
this._styles = styles;
this.applyStyles();
}
applyStyles(): void {
this.element.style.backgroundColor = this._styles?.buttonBackground?.toString();
this.element.style.color = this._styles?.buttonForeground?.toString();
this.element.style.borderColor = this._styles?.buttonBorder?.toString();
}
setHoverBackground(): void {
this.element.style.backgroundColor = this._styles?.buttonHoverBackground?.toString();
}
}

15
src/sql/platform/theme/common/colorRegistry.ts
View File

@@ -3,7 +3,7 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { registerColor } from 'vs/platform/theme/common/colorRegistry';
import { contrastBorder, registerColor } from 'vs/platform/theme/common/colorRegistry';
import { Color, RGBA } from 'vs/base/common/color';
import * as nls from 'vs/nls';
@@ -67,8 +67,13 @@ export const notebookFindMatchHighlight = registerColor('notebook.findMatchHighl
export const notebookFindRangeHighlight = registerColor('notebook.findRangeHighlightBackground', { dark: '#FFA500', light: '#FFA500', hc: null }, nls.localize('notebookFindRangeHighlight', "Color of the range limiting the search. The color must not be opaque so as not to hide underlying decorations."), true);
// Info Box
export const InfoBoxInformationBackground = registerColor('infoBox.infomationBackground', { light: '#F0F6FF', dark: '#001433', hc: '#000000' }, nls.localize('infoBox.infomationBackground', "InfoBox: The background color when the notification type is information."));
export const InfoBoxWarningBackground = registerColor('infoBox.warningBackground', { light: '#FFF8F0', dark: '#331B00', hc: '#000000' }, nls.localize('infoBox.warningBackground', "InfoBox: The background color when the notification type is warning."));
export const InfoBoxErrorBackground = registerColor('infoBox.errorBackground', { light: '#FEF0F1', dark: '#300306', hc: '#000000' }, nls.localize('infoBox.errorBackground', "InfoBox: The background color when the notification type is error."));
export const InfoBoxSuccessBackground = registerColor('infoBox.successBackground', { light: '#F8FFF0', dark: '#1B3300', hc: '#000000' }, nls.localize('infoBox.successBackground', "InfoBox: The background color when the notification type is success."));
export const infoBoxInformationBackground = registerColor('infoBox.infomationBackground', { light: '#F0F6FF', dark: '#001433', hc: '#000000' }, nls.localize('infoBox.infomationBackground', "InfoBox: The background color when the notification type is information."));
export const infoBoxWarningBackground = registerColor('infoBox.warningBackground', { light: '#FFF8F0', dark: '#331B00', hc: '#000000' }, nls.localize('infoBox.warningBackground', "InfoBox: The background color when the notification type is warning."));
export const infoBoxErrorBackground = registerColor('infoBox.errorBackground', { light: '#FEF0F1', dark: '#300306', hc: '#000000' }, nls.localize('infoBox.errorBackground', "InfoBox: The background color when the notification type is error."));
export const infoBoxSuccessBackground = registerColor('infoBox.successBackground', { light: '#F8FFF0', dark: '#1B3300', hc: '#000000' }, nls.localize('infoBox.successBackground', "InfoBox: The background color when the notification type is success."));
// Info Button
export const infoButtonForeground = registerColor('infoButton.foreground', { dark: '#FFFFFF', light: '#000000', hc: '#FFFFFF' }, nls.localize('infoButton.foreground', "Info button foreground color."));
export const infoButtonBackground = registerColor('infoButton.background', { dark: '#1B1A19', light: '#FFFFFF', hc: '#000000' }, nls.localize('infoButton.background', "Info button background color."));
export const infoButtonBorder = registerColor('infoButton.border', { dark: '#1B1A19', light: '#FFFFFF', hc: contrastBorder }, nls.localize('infoButton.border', "Info button border color."));
export const infoButtonHoverBackground = registerColor('infoButton.hoverBackground', { dark: '#282625', light: '#F3F2F1', hc: '#000000' }, nls.localize('infoButton.hoverBackground', "Info button hover background color."));

26
src/sql/platform/theme/common/styler.ts
View File

@@ -299,12 +299,30 @@ export interface IInfoBoxStyleOverrides {
}
export const defaultInfoBoxStyles: IInfoBoxStyleOverrides = {
informationBackground: sqlcr.InfoBoxInformationBackground,
warningBackground: sqlcr.InfoBoxWarningBackground,
errorBackground: sqlcr.InfoBoxErrorBackground,
successBackground: sqlcr.InfoBoxSuccessBackground
informationBackground: sqlcr.infoBoxInformationBackground,
warningBackground: sqlcr.infoBoxWarningBackground,
errorBackground: sqlcr.infoBoxErrorBackground,
successBackground: sqlcr.infoBoxSuccessBackground
};
export function attachInfoBoxStyler(widget: IThemable, themeService: IThemeService, style?: IInfoBoxStyleOverrides): IDisposable {
return attachStyler(themeService, { ...defaultInfoBoxStyles, ...style }, widget);
}
export interface IInfoButtonStyleOverrides {
buttonBackground: cr.ColorIdentifier,
buttonForeground: cr.ColorIdentifier,
buttonBorder: cr.ColorIdentifier,
buttonHoverBackground: cr.ColorIdentifier
}
export const defaultInfoButtonStyles: IInfoButtonStyleOverrides = {
buttonBackground: sqlcr.infoButtonBackground,
buttonForeground: sqlcr.infoButtonForeground,
buttonBorder: sqlcr.infoButtonBorder,
buttonHoverBackground: sqlcr.infoButtonHoverBackground
};
export function attachInfoButtonStyler(widget: IThemable, themeService: IThemeService, style?: IInfoButtonStyleOverrides): IDisposable {
return attachStyler(themeService, { ...defaultInfoButtonStyles, ...style }, widget);
}

38
src/sql/workbench/browser/modelComponents/button.component.ts
View File

@@ -3,24 +3,26 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/button';
import {
Component, Input, Inject, ChangeDetectorRef, forwardRef,
ViewChild, ElementRef, OnDestroy
} from '@angular/core';
import { ChangeDetectorRef, Component, ElementRef, forwardRef, Inject, Input, OnDestroy, ViewChild } from '@angular/core';
import * as azdata from 'azdata';
import { ComponentWithIconBase } from 'sql/workbench/browser/modelComponents/componentWithIconBase';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { convertSize } from 'sql/base/browser/dom';
import { Button } from 'sql/base/browser/ui/button/button';
import { InfoButton } from 'sql/base/browser/ui/infoButton/infoButton';
import { IComponentDescriptor, IComponent, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { convertSize } from 'sql/base/browser/dom';
import { ComponentEventType, IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
import { attachInfoButtonStyler } from 'sql/platform/theme/common/styler';
import { ComponentWithIconBase } from 'sql/workbench/browser/modelComponents/componentWithIconBase';
import { createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
import { ILogService } from 'vs/platform/log/common/log';
import { IDisposable } from 'vs/base/common/lifecycle';
import { ILogService } from 'vs/platform/log/common/log';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
enum ButtonType {
File = 'File',
Normal = 'Normal',
Informational = 'Informational'
}
@Component({
selector: 'modelview-button',
@@ -43,7 +45,7 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
@Input() modelStore: IModelStore;
private _button: Button | InfoButton;
public fileType: string = '.sql';
private _currentButtonType?: azdata.ButtonType = undefined;
private _currentButtonType?: ButtonType = undefined;
private _buttonStyler: IDisposable | undefined = undefined;
@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
@@ -191,7 +193,11 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
*/
private updateStyler(): void {
this._buttonStyler?.dispose();
this._buttonStyler = this._register(attachButtonStyler(this._button, this.themeService));
if (this.buttonType === ButtonType.Informational) {
this._buttonStyler = this._register(attachInfoButtonStyler(this._button, this.themeService));
} else {
this._buttonStyler = this._register(attachButtonStyler(this._button, this.themeService));
}
}
protected get defaultIconHeight(): number {
@@ -212,11 +218,11 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
this.setPropertyFromUI<string>(this.setValueProperties, newValue);
}
public get buttonType(): azdata.ButtonType {
public get buttonType(): ButtonType {
if (this.isFile === true) {
return 'File' as azdata.ButtonType;
return ButtonType.File;
} else {
return this.getPropertyOrDefault((props) => props.buttonType, 'Normal' as azdata.ButtonType);
return this.getPropertyOrDefault((props) => props.buttonType, ButtonType.Normal);
}
}