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

align with portal button style (#14187)

Browse Source 
* align with portal button style

* fix welcome page

* image button

* more fixes

* use withProperties

* add comment back

* add border radius
This commit is contained in:
Alan Ren
2021-02-08 15:12:54 -08:00
committed by GitHub
parent 7a0ac71b98
commit a3cddbc8aa
67 changed files with 384 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
extensions/agent/src/dialogs/alertDialog.ts
View File

@@ -352,9 +352,10 @@ export class AlertDialog extends AgentDialog<AlertData> {
.withProperties({ width: 375 })
.component();
this.executeJobTextBox.enabled = false;
this.newJobButton = view.modelBuilder.button().withProperties({
this.newJobButton = view.modelBuilder.button().withProps({
label: AlertDialog.NewJobButtonLabel,
width: 80
width: 80,
secondary: true
}).component();
this.newJobButton.enabled = false;
this.newJobButton.onDidClick(() => {
@@ -405,9 +406,10 @@ export class AlertDialog extends AgentDialog<AlertData> {
width: 375
}).component();
this.newOperatorButton = view.modelBuilder.button().withProperties({
this.newOperatorButton = view.modelBuilder.button().withProps({
label: AlertDialog.NewOperatorButtonLabel,
width: 80
width: 80,
secondary: true
}).component();
this.operatorsTable.enabled = false;

41
extensions/agent/src/dialogs/jobDialog.ts
View File

@@ -59,6 +59,7 @@ export class JobDialog extends AgentDialog<JobData> {
// Schedules tab strings
private readonly SchedulesTopLabelString: string = localize('jobDialog.schedulesaLabel', "Schedules list");
private readonly PickScheduleButtonString: string = localize('jobDialog.pickSchedule', "Pick Schedule");
private readonly RemoveScheduleButtonString: string = localize('jobDialog.removeSchedule', "Remove Schedule");
// Alerts tab strings
private readonly AlertsTopLabelString: string = localize('jobDialog.alertsList', "Alerts list");
@@ -241,26 +242,29 @@ export class JobDialog extends AgentDialog<JobData> {
this.startStepDropdown.values = this.startStepDropdownValues;
this.moveStepUpButton = view.modelBuilder.button()
.withProperties({
.withProps({
label: this.MoveStepUpButtonString,
title: this.MoveStepUpButtonString,
width: 120
width: 120,
secondary: true
}).component();
this.moveStepDownButton = view.modelBuilder.button()
.withProperties({
.withProps({
label: this.MoveStepDownButtonString,
title: this.MoveStepDownButtonString,
width: 120
width: 120,
secondary: true
}).component();
this.moveStepUpButton.enabled = false;
this.moveStepDownButton.enabled = false;
this.newStepButton = view.modelBuilder.button().withProperties({
this.newStepButton = view.modelBuilder.button().withProps({
label: this.NewStepButtonString,
title: this.NewStepButtonString,
width: 140
width: 140,
secondary: true
}).component();
this.newStepButton.onDidClick((e) => {
@@ -285,16 +289,18 @@ export class JobDialog extends AgentDialog<JobData> {
}
});
this.editStepButton = view.modelBuilder.button().withProperties({
this.editStepButton = view.modelBuilder.button().withProps({
label: this.EditStepButtonString,
title: this.EditStepButtonString,
width: 140
width: 140,
secondary: true
}).component();
this.deleteStepButton = view.modelBuilder.button().withProperties({
this.deleteStepButton = view.modelBuilder.button().withProps({
label: this.DeleteStepButtonString,
title: this.DeleteStepButtonString,
width: 140
width: 140,
secondary: true
}).component();
this.stepsTable.enabled = false;
@@ -443,9 +449,10 @@ export class JobDialog extends AgentDialog<JobData> {
width: 400
}).component();
this.newAlertButton = view.modelBuilder.button().withProperties({
this.newAlertButton = view.modelBuilder.button().withProps({
label: this.NewAlertButtonString,
width: 80
width: 80,
secondary: true
}).component();
let alertDialog = new AlertDialog(this.model.ownerUri, this.model, null, true);
@@ -489,13 +496,13 @@ export class JobDialog extends AgentDialog<JobData> {
width: 420
}).component();
this.pickScheduleButton = view.modelBuilder.button().withProperties({
this.pickScheduleButton = view.modelBuilder.button().withProps({
label: this.PickScheduleButtonString,
width: 80
secondary: true
}).component();
this.removeScheduleButton = view.modelBuilder.button().withProperties({
label: 'Remove schedule',
width: 100
this.removeScheduleButton = view.modelBuilder.button().withProps({
label: this.RemoveScheduleButtonString,
secondary: true
}).component();
this.pickScheduleButton.onDidClick(() => {
let pickScheduleDialog = new PickScheduleDialog(this.model.ownerUri, this.model.name);

16
extensions/agent/src/dialogs/jobStepDialog.ts
View File

@@ -154,18 +154,20 @@ export class JobStepDialog extends AgentDialog<JobStepData> {
private createCommands(view: azdata.ModelView, queryProvider: azdata.QueryProvider) {
this.openButton = view.modelBuilder.button()
.withProperties({
.withProps({
label: this.OpenCommandText,
title: this.OpenCommandText,
width: '80px',
isFile: true
isFile: true,
secondary: true
}).component();
this.parseButton = view.modelBuilder.button()
.withProperties({
.withProps({
label: this.ParseCommandText,
title: this.ParseCommandText,
width: '80px',
isFile: false
isFile: false,
secondary: true
}).component();
this.openButton.onDidClick(e => {
let queryContent = e.fileContent;
@@ -492,7 +494,11 @@ export class JobStepDialog extends AgentDialog<JobStepData> {
private createTSQLOptions(view: azdata.ModelView) {
this.outputFileBrowserButton = view.modelBuilder.button()
.withProperties({ width: '20px', label: '...' }).component();
.withProps({
width: '20px',
label: '...',
secondary: true
}).component();
this.outputFileBrowserButton.onDidClick(() => this.openFileBrowserDialog());
this.outputFileNameBox = view.modelBuilder.inputBox()
.withProperties({

13
extensions/agent/src/dialogs/notebookDialog.ts
View File

@@ -109,7 +109,8 @@ export class NotebookDialog extends AgentDialog<NotebookData> {
title: '...',
width: '20px',
isFile: true,
fileType: '.ipynb'
fileType: '.ipynb',
secondary: true
}).component();
this.openTemplateFileButton.onDidClick(e => {
if (e) {
@@ -181,13 +182,15 @@ export class NotebookDialog extends AgentDialog<NotebookData> {
width: 420
}).component();
this.pickScheduleButton = view.modelBuilder.button().withProperties({
this.pickScheduleButton = view.modelBuilder.button().withProps({
label: PickScheduleButtonString,
width: 110
width: 110,
secondary: true
}).component();
this.removeScheduleButton = view.modelBuilder.button().withProperties({
this.removeScheduleButton = view.modelBuilder.button().withProps({
label: RemoveScheduleButtonString,
width: 110
width: 110,
secondary: true
}).component();
this.pickScheduleButton.onDidClick(() => {
let pickScheduleDialog = new PickScheduleDialog(this.model.ownerUri, this.model.name);

3
extensions/arc/src/ui/components/filePicker.ts
View File

@@ -30,7 +30,8 @@ export class FilePicker {
this.filePickerButton = modelBuilder.button()
.withProperties<azdata.ButtonProperties>({
label: loc.browse,
width: buttonWidth
width: buttonWidth,
secondary: true
}).component();
onNewDisposableCreated(this.filePickerButton.onDidClick(async () => {
const fileUris = await vscode.window.showOpenDialog({

6
extensions/big-data-cluster/src/bigDataCluster/dialog/commonControls.ts
View File

@@ -8,7 +8,11 @@ import * as vscode from 'vscode';
import * as loc from '../localizedConstants';
export function createViewDetailsButton(modelBuilder: azdata.ModelBuilder, text: string): azdata.ButtonComponent {
const viewDetailsButton = modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: loc.viewDetails, ariaLabel: loc.viewErrorDetails }).component();
const viewDetailsButton = modelBuilder.button().withProps({
label: loc.viewDetails,
ariaLabel: loc.viewErrorDetails,
secondary: true
}).component();
viewDetailsButton.onDidClick(() => {
vscode.window.showErrorMessage(text, { modal: true });
});

5
extensions/dacpac/src/wizard/api/dacFxConfigPage.ts
View File

@@ -171,10 +171,11 @@ export abstract class DacFxConfigPage extends BasePage {
});
this.fileTextBox.ariaLabel = loc.fileLocation;
this.fileButton = this.view.modelBuilder.button().withProperties({
this.fileButton = this.view.modelBuilder.button().withProps({
label: '•••',
title: loc.selectFile,
ariaLabel: loc.selectFile
ariaLabel: loc.selectFile,
secondary: true
}).component();
}

1
extensions/import/src/wizard/pages/fileConfigPage.ts
View File

@@ -245,6 +245,7 @@ export class FileConfigPage extends ImportPage {
this.fileButton = this.view.modelBuilder.button().withProperties({
label: constants.browseFilesText,
secondary: true
}).component();
this.fileButton.onDidClick(async (click) => {

5
extensions/import/src/wizard/pages/prosePreviewPage.ts
View File

@@ -70,9 +70,10 @@ export class ProsePreviewPage extends ImportPage {
columns: undefined,
forceFitColumns: azdata.ColumnSizingMode.DataFit
}).component();
this.refresh = this.view.modelBuilder.button().withProperties({
this.refresh = this.view.modelBuilder.button().withProps({
label: constants.refreshText,
isFile: false
isFile: false,
secondary: true
}).component();
this.refresh.onDidClick(async () => {

5
extensions/machine-learning/src/views/externalLanguages/languageContentView.ts
View File

@@ -66,12 +66,13 @@ export class LanguageContentView extends LanguageViewBase {
value: '',
width: parent.componentMaxLength - parent.browseButtonMaxLength - parent.spaceBetweenComponentsLength
}).component();
let fileBrowser = this._modelBuilder.button().withProperties({
let fileBrowser = this._modelBuilder.button().withProps({
label: '...',
width: parent.browseButtonMaxLength,
CSSStyles: {
'text-align': 'end'
}
},
secondary: true
}).component();
let flexFilePathModel = this._modelBuilder.flexContainer()

3
extensions/machine-learning/src/views/models/azureSignInComponent.ts
View File

@@ -22,9 +22,10 @@ export class AzureSignInComponent extends ModelViewBase {
*/
constructor(apiWrapper: ApiWrapper, private _modelBuilder: azdata.ModelBuilder, parent: ModelViewBase) {
super(apiWrapper, parent.root, parent);
this._signInButton = this._modelBuilder.button().withProperties({
this._signInButton = this._modelBuilder.button().withProps({
width: componentWidth,
label: constants.azureSignIn,
secondary: true
}).component();
this._signInButton.onDidClick(() => {
this.sendRequest(SignInToAzureEventName);

5
extensions/mssql/src/dashboard/bookWidget.ts
View File

@@ -28,9 +28,10 @@ export function registerBooksWidget(bookContributionProvider: BookContributionPr
const bookRow = view.modelBuilder.flexContainer().withLayout({
flexFlow: 'row'
}).component();
const tsgbooklink = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
const tsgbooklink = view.modelBuilder.button().withProps({
label: contribution.name,
title: contribution.name
title: contribution.name,
secondary: true
}).component();
tsgbooklink.onDidClick(() => {
let uri: vscode.Uri = vscode.Uri.file(contribution.path);

6
extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts
View File

@@ -211,7 +211,11 @@ export class ManageAccessDialog {
this.hdfsModel.createAndAddAclEntry(value, this.addUserOrGroupSelectedType);
this.addUserOrGroupInput.value = '';
});
const addUserOrGroupButton = this.modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: loc.addLabel, width: 75 }).component();
const addUserOrGroupButton = this.modelBuilder.button().withProps({
label: loc.addLabel,
width: 75,
secondary: true
}).component();
addUserOrGroupButton.onDidClick(() => {
this.hdfsModel.createAndAddAclEntry(this.addUserOrGroupInput.value, this.addUserOrGroupSelectedType);
this.addUserOrGroupInput.value = '';

3
extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkConfigurationTab.ts
View File

@@ -138,7 +138,8 @@ export class SparkConfigurationTab {
enabled: (this._path) ? false : true,
label: '•••',
width: constants.mssqlClusterSparkJobFileSelectorButtonWidth,
height: constants.mssqlClusterSparkJobFileSelectorButtonHeight
height: constants.mssqlClusterSparkJobFileSelectorButtonHeight,
secondary: true
}).component();
this._filePickerButton.onDidClick(() => this.onSelectFile());

10
extensions/notebook/src/dialog/configurePython/configurePathPage.ts
View File

@@ -53,9 +53,10 @@ export class ConfigurePathPage extends BasePage {
})
.component();
let browseButton = this.view.modelBuilder.button()
.withProperties<azdata.ButtonProperties>({
.withProps({
label: this.BrowseButtonText,
width: '70px'
width: '70px',
secondary: true
}).component();
browseButton.onDidClick(() => this.handleBrowse());
@@ -88,9 +89,10 @@ export class ConfigurePathPage extends BasePage {
enabled: false,
width: '400px'
}).component();
let editPathButton = this.view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
let editPathButton = this.view.modelBuilder.button().withProps({
label: 'Edit',
width: '70px'
width: '70px',
secondary: true
}).component();
let editPathForm = this.view.modelBuilder.formContainer()
.withFormItems([{

8
extensions/notebook/src/dialog/managePackages/addNewPackageTab.ts
View File

@@ -39,9 +39,10 @@ export class AddNewPackageTab {
});
this.packagesSearchButton = view.modelBuilder.button()
.withProperties<azdata.ButtonProperties>({
.withProps({
label: localize('managePackages.searchButtonLabel', "Search"),
width: '200px'
width: '200px',
secondary: true
}).component();
this.packagesSearchButton.onDidClick(async () => {
await this.loadNewPackageInfo();
@@ -64,7 +65,8 @@ export class AddNewPackageTab {
this.packageInstallButton = view.modelBuilder.button().withProperties({
label: localize('managePackages.installButtonText', "Install"),
width: '200px'
width: '200px',
secondary: true
}).component();
this.packageInstallButton.onDidClick(async () => {
await this.doPackageInstall();

5
extensions/notebook/src/dialog/managePackages/installedPackagesTab.ts
View File

@@ -103,9 +103,10 @@ export class InstalledPackagesTab {
}));
this.uninstallPackageButton = view.modelBuilder.button()
.withProperties({
.withProps({
label: localize('managePackages.uninstallButtonText', "Uninstall selected packages"),
width: '200px'
width: '200px',
secondary: true
}).component();
this.uninstallPackageButton.onDidClick(() => this.doUninstallPackage(this.installedPackagesTable.selectedRows));

3
extensions/notebook/src/dialog/remoteBookDialog.ts
View File

@@ -63,7 +63,8 @@ export class RemoteBookDialog {
this.searchButton = this.view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
label: loc.search,
title: loc.search,
width: '200px'
width: '200px',
secondary: true
}).component();
this.searchButton.onDidClick(async () => await this.validate());

6
extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/azureSettingsPage.ts
View File

@@ -168,11 +168,13 @@ export class AzureSettingsPage extends BasePage {
this.signInButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
label: localizedConstants.signIn,
width: '100px'
width: '100px',
secondary: true
}).component();
this.refreshButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
label: localizedConstants.refresh,
width: '100px'
width: '100px',
secondary: true
}).component();
this.signInButton.onDidClick(async (event) => {

6
extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/azureSettingsPage.ts
View File

@@ -107,11 +107,13 @@ export class AzureSettingsPage extends BasePage {
this.signInButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
label: localizedConstants.signIn,
width: '100px'
width: '100px',
secondary: true
}).component();
this.refreshButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
label: localizedConstants.refresh,
width: '100px'
width: '100px',
secondary: true
}).component();
this.signInButton.onDidClick(async (event) => {

2
extensions/resource-deployment/src/ui/deployClusterWizard/pages/targetClusterPage.ts
View File

@@ -87,7 +87,7 @@ export class TargetClusterContextPage extends ResourceTypePage {
configFileLabel.width = labelWidth;
this.configFileInput = this.view!.modelBuilder.inputBox().withProperties({ width: '300px' }).component();
this.configFileInput.enabled = false;
this.browseFileButton = this.view!.modelBuilder.button().withProperties({ label: localize('deployCluster.browseText', "Browse"), width: '100px' }).component();
this.browseFileButton = this.view!.modelBuilder.button().withProperties({ label: localize('deployCluster.browseText', "Browse"), width: '100px', secondary: true }).component();
let configFileContainer = this.view!.modelBuilder.flexContainer()
.withLayout({ flexFlow: 'row', alignItems: 'baseline' })
.withItems([configFileLabel, this.configFileInput, this.browseFileButton], { CSSStyles: { 'margin-right': '10px' } }).component();

10
extensions/resource-deployment/src/ui/modelViewUtils.ts
View File

@@ -868,7 +868,11 @@ function processFilePickerField(context: FieldContext): FilePickerInputs {
input.labelComponent = label;
context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, input);
input.component.enabled = false;
const browseFileButton = context.view!.modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: loc.browse, width: buttonWidth }).component();
const browseFileButton = context.view!.modelBuilder.button().withProps({
label: loc.browse,
width: buttonWidth,
secondary: true
}).component();
const fieldInfo = context.fieldInfo as FilePickerFieldInfo;
let filter: { [name: string]: string[] } | undefined = undefined;
if (fieldInfo.filter) {
@@ -1163,8 +1167,8 @@ function createAzureAccountDropdown(context: AzureAccountFieldContext): AzureAcc
accountDropdown.component.fireOnTextChange = true;
accountDropdown.labelComponent = label;
context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, accountDropdown);
const signInButton = context.view!.modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: loc.signIn, width: '100px' }).component();
const refreshButton = context.view!.modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: loc.refresh, width: '100px' }).component();
const signInButton = context.view!.modelBuilder.button().withProps({ label: loc.signIn, width: '100px', secondary: true }).component();
const refreshButton = context.view!.modelBuilder.button().withProps({ label: loc.refresh, width: '100px', secondary: true }).component();
addLabelInputPairToContainer(context.view, context.components, label, accountDropdown.component, context.fieldInfo);
const buttons = createFlexContainer(context.view!, [signInButton, refreshButton], true, undefined, undefined, undefined, { 'margin-right': '10px' });

1
extensions/resource-deployment/src/ui/toolsAndEulaSettingsPage.ts
View File

@@ -142,6 +142,7 @@ export class ToolsAndEulaPage extends ResourceTypePage {
'display': 'none',
},
width: '100px',
secondary: true
}).component();
this.wizard.registerDisposable(this._installToolButton.onDidClick(() => {

6
extensions/schema-compare/src/dialogs/schemaCompareDialog.ts
View File

@@ -282,13 +282,15 @@ export class SchemaCompareDialog {
this.targetFileButton = this.view.modelBuilder.button().withProperties({
label: '•••',
title: loc.selectTargetFile,
ariaLabel: loc.selectTargetFile
ariaLabel: loc.selectTargetFile,
secondary: true
}).component();
} else {
this.sourceFileButton = this.view.modelBuilder.button().withProperties({
label: '•••',
title: loc.selectSourceFile,
ariaLabel: loc.selectSourceFile
ariaLabel: loc.selectSourceFile,
secondary: true
}).component();
}

6
extensions/schema-compare/src/schemaCompareMainWindow.ts
View File

@@ -888,7 +888,8 @@ export class SchemaCompareMainWindow {
this.selectSourceButton = this.view.modelBuilder.button().withProperties({
label: '•••',
title: loc.selectSource,
ariaLabel: loc.selectSource
ariaLabel: loc.selectSource,
secondary: true
}).component();
this.selectSourceButton.onDidClick(async () => {
@@ -901,7 +902,8 @@ export class SchemaCompareMainWindow {
this.selectTargetButton = this.view.modelBuilder.button().withProperties({
label: '•••',
title: loc.selectTarget,
ariaLabel: loc.selectTarget
ariaLabel: loc.selectTarget,
secondary: true
}).component();
this.selectTargetButton.onDidClick(async () => {

10
extensions/sql-migration/src/wizard/createMigrationControllerDialog.ts
View File

@@ -327,6 +327,7 @@ export class CreateMigrationControllerDialog {
const refreshButton = this._view.modelBuilder.button().withProps({
label: constants.REFRESH,
secondary: true
}).component();
const refreshLoadingIndicator = this._view.modelBuilder.loadingComponent().withProps({
@@ -383,7 +384,8 @@ export class CreateMigrationControllerDialog {
CSSStyles: {
'margin-top': '10px'
},
width: '100px'
width: '100px',
secondary: true
}).component();
refreshKeyButton.onDidClick(async (e) => {
@@ -437,7 +439,8 @@ export class CreateMigrationControllerDialog {
const keys = await getMigrationControllerAuthKeys(this.migrationStateModel.azureAccount, subscription, resourceGroup, region, this.migrationStateModel.migrationController!.name);
this._copyKey1Button = this._view.modelBuilder.button().withProps({
label: constants.COPY_KEY
label: constants.COPY_KEY,
secondary: true
}).component();
this._copyKey1Button.onDidClick((e) => {
@@ -446,7 +449,8 @@ export class CreateMigrationControllerDialog {
});
this._copyKey2Button = this._view.modelBuilder.button().withProps({
label: constants.COPY_KEY
label: constants.COPY_KEY,
secondary: true
}).component();
this._copyKey2Button.onDidClick((e) => {

7
extensions/sql-migration/src/wizard/integrationRuntimePage.ts
View File

@@ -32,6 +32,7 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
const createNewController = view.modelBuilder.button().withProps({
label: constants.NEW,
width: '100px',
secondary: true
}).component();
createNewController.onDidClick((e) => {
@@ -53,7 +54,8 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
this.startSetupButton = view.modelBuilder.button().withProps({
label: constants.CREATE,
width: '100px'
width: '100px',
secondary: true
}).component();
this.startSetupButton.onDidClick((e) => {
@@ -68,7 +70,8 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
this.cancelSetupButton = view.modelBuilder.button().withProps({
label: constants.CANCEL,
width: '100px'
width: '100px',
secondary: true
}).component();
this.cancelSetupButton.onDidClick((e) => {

21
extensions/theme-carbon/themes/dark_carbon.json
View File

@@ -14,18 +14,19 @@
"textLinkActiveForeground": "#30b4ff",
//Button control
"button.background": "#0078D4",
"button.foreground": "#ffffff",
"button.hoverBackground": "#106EBE",
"button.background": "#4894FE",
"button.foreground": "#111111",
"button.hoverBackground": "#6CA9FE",
"button.border": "#4894FE",
// TODO add support for these
"button.secondaryBackground": "#1B1A19",
"button.secondaryHoverBackground": "#1B1A19",
"button.secondaryForeground": "#ffffff",
"button.secondaryHoverForeground": "#0078D4",
"button.secondaryBackground": "#212121",
"button.secondaryHoverBackground": "#7F7F7F19",
"button.secondaryForeground": "#4894FE",
"button.secondaryBorder": "#4894FE",
"button.disabledBackground": "#252423",
"button.disabledForeground": "#797775",
"button.disabledBackground": "#7F7F7F19",
"button.disabledForeground": "#797775B2",
"button.disabledBorder": "#7F7F7F19",
//Checkbox

15
extensions/theme-carbon/themes/light_carbon.json
View File

@@ -14,18 +14,19 @@
"textLinkActiveForeground": "#3062d6",
//Button control
"button.background": "#007ACC",
"button.foreground": "#ffffff",
"button.hoverBackground": "#0078d7",
"button.background": "#0078D4",
"button.foreground": "#FFFFFF",
"button.hoverBackground": "#106EBE",
"button.border": "#0078D4",
// TODO add support for these
"button.secondaryBackground": "#ffffff",
"button.secondaryHoverBackground": "#ffffff",
"button.secondaryBackground": "#FFFFFF",
"button.secondaryHoverBackground": "#F3F2F1",
"button.secondaryForeground": "#323130",
"button.secondaryHoverForeground": "#0078D4",
"button.secondaryBorder": "#8A8886",
"button.disabledBackground": "#F3F2F1",
"button.disabledForeground": "#A19F9D",
"button.disabledBorder": "#F3F2F1",
//Checkbox

11
src/sql/azdata.proposed.d.ts vendored
View File

@@ -708,6 +708,13 @@ declare module 'azdata' {
* @param pageName The optional page name parameter will be used for telemetry
*/
export function createWizardPage(title: string, pageName?: string): WizardPage;
export interface Button {
/**
* Specifies whether this is a secondary button. Default is false.
*/
secondary?: boolean;
}
}
export namespace workspace {
@@ -853,6 +860,10 @@ declare module 'azdata' {
* Description text to display inside button element.
*/
description?: string;
/**
* Specifies whether this is a secondary button. Default value is false.
*/
secondary?: boolean;
}
export enum ButtonType {

28
src/sql/base/browser/ui/button/button.ts
View File

@@ -4,11 +4,9 @@
*--------------------------------------------------------------------------------------------*/
import { Button as vsButton, IButtonOptions, IButtonStyles as vsIButtonStyles } from 'vs/base/browser/ui/button/button';
import * as DOM from 'vs/base/browser/dom';
import { Color } from 'vs/base/common/color';
export interface IButtonStyles extends vsIButtonStyles {
buttonFocusOutline?: Color;
}
export class Button extends vsButton {
@@ -16,32 +14,6 @@ export class Button extends vsButton {
constructor(container: HTMLElement, options?: IButtonOptions) {
super(container, options);
this._register(DOM.addDisposableListener(this.element, DOM.EventType.FOCUS, () => {
this.element.style.outlineColor = this.buttonFocusOutline ? this.buttonFocusOutline.toString() : '';
this.element.style.outlineWidth = '1px';
}));
this._register(DOM.addDisposableListener(this.element, DOM.EventType.MOUSE_DOWN, e => {
if (!DOM.hasClass(this.element, 'disabled') && e.button === 0) {
this.element.classList.add('active');
}
}));
this._register(DOM.addDisposableListener(this.element, DOM.EventType.MOUSE_UP, e => {
DOM.EventHelper.stop(e);
this.element.classList.remove('active');
}));
this._register(DOM.addDisposableListener(this.element, DOM.EventType.MOUSE_LEAVE, e => {
DOM.EventHelper.stop(e);
this.element.classList.remove('active');
}));
}
public style(styles: IButtonStyles): void {
super.style(styles);
this.buttonFocusOutline = styles.buttonFocusOutline;
}
public set title(value: string) {

6
src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts
View File

@@ -22,7 +22,7 @@ export interface CommandEventArgs<T extends Slick.SlickData> {
export class HeaderFilter<T extends Slick.SlickData> {
public onFilterApplied = new Slick.Event<{ grid: Slick.Grid<T>, column: IExtendedColumn<T>}>();
public onFilterApplied = new Slick.Event<{ grid: Slick.Grid<T>, column: IExtendedColumn<T> }>();
public onCommand = new Slick.Event<CommandEventArgs<T>>();
private grid!: Slick.Grid<T>;
@@ -221,7 +221,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
this.handleApply(ev, this.columnDef);
});
this.clearButton = new Button(this.$menu.get(0));
this.clearButton = new Button(this.$menu.get(0), { secondary: true });
this.clearButton.label = localize('headerFilter.clear', "Clear");
this.clearButton.title = localize('headerFilter.clear', "Clear");
this.clearButton.element.id = 'filter-clear-button';
@@ -232,7 +232,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
this.handleApply(ev, this.columnDef);
});
this.cancelButton = new Button(this.$menu.get(0));
this.cancelButton = new Button(this.$menu.get(0), { secondary: true });
this.cancelButton.label = localize('headerFilter.cancel', "Cancel");
this.cancelButton.title = localize('headerFilter.cancel', "Cancel");
this.cancelButton.element.id = 'filter-cancel-button';

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

@@ -22,14 +22,7 @@ export const tileBorder = registerColor('tileBorder', { light: '#fff', dark: '#8
export const tileBoxShadow = registerColor('tileBoxShadow', { light: tileBoxShadowColor, dark: tileBoxShadowColor, hc: tileBoxShadowColor }, nls.localize('tileBoxShadow', "The tile box shadow color"));
// -- Buttons
export const buttonSecondaryBorder = registerColor('button.secondaryBorder', { light: '#8A8886', dark: '#FFF', hc: '#264BD3' }, nls.localize('button.secondaryBorder', "The border color for secondary button"));
export const buttonSecondaryBackground = registerColor('button.secondaryBackground', { light: null, dark: null, hc: null }, nls.localize('button.secondaryBackground', "The background color for the secondary button"));
export const buttonSecondary = registerColor('button.secondaryForeground', { light: '#323130', dark: '#fff', hc: '#fff' }, nls.localize('button.secondaryForeground', "The font color for secondary button"));
export const buttonSecondaryHoverColor = registerColor('button.secondaryHoverForeground', { light: '#0078D4', dark: '#3794ff', hc: '#3794ff' }, nls.localize('button.secondaryHoverForeground', "The hover color for secondary buttons"));
export const buttonSecondaryHoverBorder = registerColor('button.buttonSecondaryHoverBorder', { light: '#0078D4', dark: '#3794ff', hc: '#3794ff' }, nls.localize('button.buttonSecondaryHoverBorder', "The hover border color for secondary buttons"));
export const buttonDropdownBackgroundHover = registerColor('buttonDropdownBackgroundHover', { light: '#3062d6', dark: '#3062d6', hc: '#3062d6' }, nls.localize('buttonDropdownBackgroundHover', "The button dropdown background hover color"));
export const disabledButton = registerColor('button.disabledForeground', { light: '#A19F9D', dark: '#797775', hc: '#797775' }, nls.localize('button.disabledForeground', "The color for a secondary disabled button"));
export const disabledButtonBackground = registerColor('button.disabledBackground', { light: '#F3F2F1', dark: '#252423', hc: '#252423' }, nls.localize('button.disabledBackground', "The background color for secondary disabled button"));
// -- Shadows
export const hoverShadow = registerColor('buttonDropdownBoxShadow', { light: dropdownBoxShadow, dark: dropdownBoxShadow, hc: dropdownBoxShadow }, nls.localize('buttonDropdownBoxShadow', "The button dropdown box shadow color"));

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

@@ -284,23 +284,6 @@ export function attachEditableDropdownStyler(widget: IThemable, themeService: IT
}, widget);
}
type ButtonStyle = {
buttonForeground?: cr.ColorIdentifier,
buttonBackground?: cr.ColorIdentifier,
buttonHoverBackground?: cr.ColorIdentifier,
buttonFocusOutline?: cr.ColorIdentifier
};
export function attachButtonStyler(widget: IThemable, themeService: IThemeService, style?: ButtonStyle): IDisposable {
return attachStyler(themeService, {
buttonForeground: (style && style.buttonForeground) || cr.buttonForeground,
buttonBackground: (style && style.buttonBackground) || cr.buttonBackground,
buttonHoverBackground: (style && style.buttonHoverBackground) || cr.buttonHoverBackground,
buttonBorder: cr.contrastBorder,
buttonFocusOutline: (style && style.buttonFocusOutline) || colors.buttonFocusOutline
}, widget);
}
export function attachCheckboxStyler(widget: IThemable, themeService: IThemeService, style?: { disabledCheckboxForeground?: cr.ColorIdentifier })
: IDisposable {
return attachStyler(themeService, {

2
src/sql/workbench/api/browser/mainThreadModelViewDialog.ts
View File

@@ -135,6 +135,7 @@ export class MainThreadModelViewDialog implements MainThreadModelViewDialogShape
button = new DialogButton(details.label, details.enabled);
button.position = details.position;
button.hidden = details.hidden;
button.secondary = details.secondary;
button.onClick(() => this.onButtonClick(handle));
this._buttons.set(handle, button);
} else {
@@ -143,6 +144,7 @@ export class MainThreadModelViewDialog implements MainThreadModelViewDialogShape
button.hidden = details.hidden;
button.focused = details.focused;
button.position = details.position;
button.secondary = details.secondary;
}
return Promise.resolve();

34
src/sql/workbench/api/common/extHostModelViewDialog.ts
View File

@@ -134,7 +134,7 @@ class DialogImpl extends ModelViewPanelImpl implements azdata.window.Dialog {
extension: IExtensionDescription) {
super('modelViewDialog', extHostModelViewDialog, extHostModelView, extension);
this.okButton = this._extHostModelViewDialog.createButton(DONE_LABEL);
this.cancelButton = this._extHostModelViewDialog.createButton(CANCEL_LABEL);
this.cancelButton = this._extHostModelViewDialog.createButton(CANCEL_LABEL, 'right', true);
this._operationHandler = new BackgroundOperationHandler('dialog', extHostTaskManagement);
this.okButton.onClick(() => {
this._operationHandler.createOperation();
@@ -219,6 +219,7 @@ class ButtonImpl implements azdata.window.Button {
private _hidden: boolean;
private _focused: boolean;
private _position: azdata.window.DialogButtonPosition;
private _secondary: boolean;
private _onClick = new Emitter<void>();
public onClick = this._onClick.event;
@@ -265,6 +266,15 @@ class ButtonImpl implements azdata.window.Button {
this._extHostModelViewDialog.updateButton(this);
}
public get secondary(): boolean {
return this._secondary;
}
public set secondary(value: boolean) {
this._secondary = value;
this._extHostModelViewDialog.updateButton(this);
}
public get focused(): boolean {
return this._focused;
}
@@ -386,10 +396,10 @@ class WizardImpl implements azdata.window.Wizard {
constructor(public title: string, public name: string, private _extHostModelViewDialog: ExtHostModelViewDialog, extHostTaskManagement: ExtHostBackgroundTaskManagementShape) {
this.doneButton = this._extHostModelViewDialog.createButton(DONE_LABEL);
this.cancelButton = this._extHostModelViewDialog.createButton(CANCEL_LABEL);
this.generateScriptButton = this._extHostModelViewDialog.createButton(GENERATE_SCRIPT_LABEL);
this.cancelButton = this._extHostModelViewDialog.createButton(CANCEL_LABEL, 'right', true);
this.generateScriptButton = this._extHostModelViewDialog.createButton(GENERATE_SCRIPT_LABEL, 'right', true);
this.nextButton = this._extHostModelViewDialog.createButton(NEXT_LABEL);
this.backButton = this._extHostModelViewDialog.createButton(PREVIOUS_LABEL);
this.backButton = this._extHostModelViewDialog.createButton(PREVIOUS_LABEL, 'right', true);
this._extHostModelViewDialog.registerWizardPageInfoChangedCallback(this, info => this.handlePageInfoChanged(info));
this._currentPage = 0;
this.onPageChanged(info => this._currentPage = info.newPage);
@@ -670,7 +680,10 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
tabs.forEach(tab => this.updateTabContent(tab));
}
if (dialog.customButtons) {
dialog.customButtons.forEach(button => this.updateButton(button));
dialog.customButtons.forEach(button => {
button.secondary = true;
this.updateButton(button);
});
}
this.updateButton(dialog.okButton);
this.updateButton(dialog.cancelButton);
@@ -708,7 +721,8 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
enabled: button.enabled,
hidden: button.hidden,
focused: button.focused,
position: button.position
position: button.position,
secondary: button.secondary
});
}
@@ -735,12 +749,13 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
return tab;
}
public createButton(label: string, position: azdata.window.DialogButtonPosition = 'right'): azdata.window.Button {
public createButton(label: string, position: azdata.window.DialogButtonPosition = 'right', secondary: boolean = false): azdata.window.Button {
let button = new ButtonImpl(this);
this.getHandle(button);
this.registerOnClickCallback(button, button.getOnClickCallback());
button.label = label;
button.position = position;
button.secondary = secondary;
return button;
}
@@ -796,7 +811,10 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
this.updateButton(wizard.doneButton);
this.updateButton(wizard.nextButton);
if (wizard.customButtons) {
wizard.customButtons.forEach(button => this.updateButton(button));
wizard.customButtons.forEach(button => {
button.secondary = true;
this.updateButton(button);
});
}
return this._proxy.$setWizardDetails(handle, {
title: wizard.title,

1
src/sql/workbench/api/common/sqlExtHostTypes.ts
View File

@@ -272,6 +272,7 @@ export interface IModelViewButtonDetails {
hidden: boolean;
focused?: boolean;
position?: 'left' | 'right';
secondary?: boolean;
}
export interface IModelViewWizardPageDetails {

6
src/sql/workbench/browser/modal/modal.ts
View File

@@ -191,7 +191,7 @@ export abstract class Modal extends Disposable implements IThemable {
this._modalHeaderSection = DOM.append(this._modalContent, DOM.$('.modal-header'));
if (this._modalOptions.hasBackButton) {
const container = DOM.append(this._modalHeaderSection, DOM.$('.modal-go-back'));
this._backButton = new Button(container);
this._backButton = new Button(container, { secondary: true });
this._backButton.icon = 'backButtonIcon';
this._backButton.title = localize('modal.back', "Back");
}
@@ -416,9 +416,9 @@ export abstract class Modal extends Disposable implements IThemable {
* @param label Label to show on the button
* @param onSelect The callback to call when the button is selected
*/
protected addFooterButton(label: string, onSelect: () => void, orientation: 'left' | 'right' = 'right'): Button {
protected addFooterButton(label: string, onSelect: () => void, orientation: 'left' | 'right' = 'right', isSecondary: boolean = false): Button {
let footerButton = DOM.$('.footer-button');
let button = this._register(new Button(footerButton));
let button = this._register(new Button(footerButton, { secondary: isSecondary }));
button.label = label;
button.onDidClick(() => onSelect()); // @todo this should be registered to dispose but that brakes some dialogs
if (orientation === 'left') {

9
src/sql/workbench/browser/modal/optionsDialog.ts
View File

@@ -8,7 +8,6 @@ import * as DialogHelper from './dialogHelper';
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
import { IModalOptions, Modal } from './modal';
import * as OptionsDialogHelper from './optionsDialogHelper';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import * as azdata from 'azdata';
@@ -72,13 +71,13 @@ export class OptionsDialog extends Modal {
attachModalDialogStyler(this, this._themeService);
if (this.backButton) {
this.backButton.onDidClick(() => this.cancel());
attachButtonStyler(this.backButton, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND });
styler.attachButtonStyler(this.backButton, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND });
}
let okButton = this.addFooterButton(localize('optionsDialog.ok', "OK"), () => this.ok());
let closeButton = this.addFooterButton(this.options.cancelLabel || localize('optionsDialog.cancel', "Cancel"), () => this.cancel());
let closeButton = this.addFooterButton(this.options.cancelLabel || localize('optionsDialog.cancel', "Cancel"), () => this.cancel(), 'right', true);
// Theme styler
attachButtonStyler(okButton, this._themeService);
attachButtonStyler(closeButton, this._themeService);
styler.attachButtonStyler(okButton, this._themeService);
styler.attachButtonStyler(closeButton, this._themeService);
this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme(e)));
this.updateTheme(this._themeService.getColorTheme());
}

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

@@ -11,19 +11,16 @@ import {
import * as azdata from 'azdata';
import { ComponentWithIconBase } from 'sql/workbench/browser/modelComponents/componentWithIconBase';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import { SIDE_BAR_BACKGROUND, SIDE_BAR_TITLE_FOREGROUND } from 'vs/workbench/common/theme';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { focusBorder, foreground } from 'vs/platform/theme/common/colorRegistry';
import { Button } from 'sql/base/browser/ui/button/button';
import { InfoButton } from 'sql/base/browser/ui/infoButton/infoButton';
import { Color } from 'vs/base/common/color';
import { IComponentDescriptor, IComponent, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { convertSize } from 'sql/base/browser/dom';
import { createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
import { ILogService } from 'vs/platform/log/common/log';
import { IDisposable } from 'vs/base/common/lifecycle';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
@Component({
selector: 'modelview-button',
@@ -78,7 +75,7 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
this._currentButtonType = this.buttonType;
const elementToRemove = this._button?.element;
if (this._inputContainer) {
this._button = new Button(this._inputContainer.nativeElement);
this._button = new Button(this._inputContainer.nativeElement, { secondary: this.secondary });
} else if (this._infoButtonContainer) {
this._button = new InfoButton(this._infoButtonContainer.nativeElement);
}
@@ -192,22 +189,7 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
*/
private updateStyler(): void {
this._buttonStyler?.dispose();
if (this.iconPath) {
this._buttonStyler = this._register(attachButtonStyler(this._button, this.themeService, {
buttonBackground: Color.transparent.toString(),
buttonHoverBackground: Color.transparent.toString(),
buttonFocusOutline: focusBorder,
buttonForeground: foreground
}));
} else {
this._buttonStyler = this._register(attachButtonStyler(this._button, this.themeService, {
buttonBackground: SIDE_BAR_BACKGROUND,
buttonHoverBackground: SIDE_BAR_BACKGROUND,
buttonForeground: SIDE_BAR_TITLE_FOREGROUND
}));
}
this._buttonStyler = this._register(attachButtonStyler(this._button, this.themeService));
}
protected get defaultIconHeight(): number {
@@ -267,4 +249,8 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
private setFileProperties(properties: azdata.ButtonProperties, isFile: boolean): void {
properties.isFile = isFile;
}
private get secondary(): boolean {
return this.getPropertyOrDefault<boolean>((props) => props.secondary, false);
}
}

3
src/sql/workbench/browser/modelComponents/table.component.ts
View File

@@ -15,7 +15,7 @@ import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBa
import { Table } from 'sql/base/browser/ui/table/table';
import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
import { attachTableStyler, attachButtonStyler } from 'sql/platform/theme/common/styler';
import { attachTableStyler } from 'sql/platform/theme/common/styler';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { getContentHeight, getContentWidth, Dimension, isAncestor } from 'vs/base/browser/dom';
import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
@@ -34,6 +34,7 @@ import { onUnexpectedError } from 'vs/base/common/errors';
import { ILogService } from 'vs/platform/log/common/log';
import { TableCellClickEventArgs } from 'sql/base/browser/ui/table/plugins/tableColumn';
import { HyperlinkCellValue, HyperlinkColumn } from 'sql/base/browser/ui/table/plugins/hyperlinkColumn.plugin';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
export enum ColumnSizingMode {
ForceFit = 0, // all columns will be sized to fit in viewable space, no horiz scroll bar

2
src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts
View File

@@ -19,7 +19,6 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
import { IDashboardService } from 'sql/platform/dashboard/browser/dashboardService';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { IColorTheme } from 'vs/platform/theme/common/themeService';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import { RowDetailView, ExtendedItem } from 'sql/base/browser/ui/table/plugins/rowDetailView';
import {
IAssessmentComponent,
@@ -46,6 +45,7 @@ import { ITableStyles } from 'sql/base/browser/ui/table/interfaces';
import { TelemetryView } from 'sql/platform/telemetry/common/telemetryKeys';
import { LocalizedStrings } from 'sql/workbench/contrib/assessment/common/strings';
import { ConnectionManagementInfo } from 'sql/platform/connection/common/connectionManagementInfo';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
export const ASMTRESULTSVIEW_SELECTOR: string = 'asmt-results-view-component';
export const ROW_HEIGHT: number = 25;

11
src/sql/workbench/contrib/backup/browser/backup.component.ts
View File

@@ -11,7 +11,7 @@ import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import { ListBox } from 'sql/base/browser/ui/listBox/listBox';
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
import { attachButtonStyler, attachListBoxStyler, attachInputBoxStyler, attachSelectBoxStyler, attachCheckboxStyler } from 'sql/platform/theme/common/styler';
import { attachListBoxStyler, attachInputBoxStyler, attachSelectBoxStyler, attachCheckboxStyler } from 'sql/platform/theme/common/styler';
import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
import * as BackupConstants from 'sql/workbench/contrib/backup/common/constants';
import { IBackupService, TaskExecutionMode } from 'sql/platform/backup/common/backupService';
@@ -34,6 +34,7 @@ import { AngularDisposable } from 'sql/base/browser/lifecycle';
import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
import { fileFiltersSet } from 'sql/workbench/services/restore/common/constants';
import { IColorTheme } from 'vs/platform/theme/common/themeService';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
export const BACKUP_SELECTOR: string = 'backup-component';
@@ -292,11 +293,11 @@ export class BackupComponent extends AngularDisposable {
this.pathListBox.render(this.pathElement!.nativeElement);
// Set backup path add/remove buttons
this.addPathButton = this._register(new Button(this.addPathElement!.nativeElement));
this.addPathButton = this._register(new Button(this.addPathElement!.nativeElement, { secondary: true }));
this.addPathButton.label = '+';
this.addPathButton.title = localize('addFile', "Add a file");
this.removePathButton = this._register(new Button(this.removePathElement!.nativeElement));
this.removePathButton = this._register(new Button(this.removePathElement!.nativeElement, { secondary: true }));
this.removePathButton.label = '-';
this.removePathButton.title = localize('removeFile', "Remove files");
@@ -401,7 +402,7 @@ export class BackupComponent extends AngularDisposable {
private addFooterButtons(): void {
// Set script footer button
this.scriptButton = this._register(new Button(this.scriptButtonElement!.nativeElement));
this.scriptButton = this._register(new Button(this.scriptButtonElement!.nativeElement, { secondary: true }));
this.scriptButton.label = localize('backupComponent.script', "Script");
this.scriptButton.onDidClick(() => this.onScript());
this._register(attachButtonStyler(this.scriptButton, this.themeService));
@@ -415,7 +416,7 @@ export class BackupComponent extends AngularDisposable {
this.backupEnabled = false;
// Set cancel footer button
this.cancelButton = this._register(new Button(this.cancelButtonElement!.nativeElement));
this.cancelButton = this._register(new Button(this.cancelButtonElement!.nativeElement, { secondary: true }));
this.cancelButton.label = localize('backupComponent.cancel', "Cancel");
this.cancelButton.onDidClick(() => this.onCancel());
this._register(attachButtonStyler(this.cancelButton, this.themeService));

2
src/sql/workbench/contrib/jobManagement/browser/jobsView.component.ts
View File

@@ -30,10 +30,10 @@ import { escape } from 'sql/base/common/strings';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { tableBackground, cellBackground, cellBorderColor } from 'sql/platform/theme/common/colors';
import { TelemetryView } from 'sql/platform/telemetry/common/telemetryKeys';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import { IColorTheme } from 'vs/platform/theme/common/themeService';
import { onUnexpectedError } from 'vs/base/common/errors';
import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
export const JOBSVIEW_SELECTOR: string = 'jobsview-component';
export const ROW_HEIGHT: number = 45;

2
src/sql/workbench/contrib/jobManagement/browser/notebooksView.component.ts
View File

@@ -30,11 +30,11 @@ import { escape } from 'sql/base/common/strings';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { tableBackground, cellBackground, cellBorderColor } from 'sql/platform/theme/common/colors';
import { TelemetryView } from 'sql/platform/telemetry/common/telemetryKeys';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import { Taskbar } from 'sql/base/browser/ui/taskbar/taskbar';
import { onUnexpectedError } from 'vs/base/common/errors';
import { IColorTheme } from 'vs/platform/theme/common/themeService';
import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
export const NOTEBOOKSVIEW_SELECTOR: string = 'notebooksview-component';

3
src/sql/workbench/contrib/objectExplorer/browser/serverTreeView.ts
View File

@@ -8,7 +8,7 @@ import * as errors from 'vs/base/common/errors';
import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation';
import Severity from 'vs/base/common/severity';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { attachListStyler } from 'vs/platform/theme/common/styler';
import { attachButtonStyler, attachListStyler } from 'vs/platform/theme/common/styler';
import { ISelectionEvent, ITree } from 'vs/base/parts/tree/browser/tree';
import { Disposable } from 'vs/base/common/lifecycle';
import { localize } from 'vs/nls';
@@ -27,7 +27,6 @@ import { TreeSelectionHandler } from 'sql/workbench/services/objectExplorer/brow
import { IObjectExplorerService, IServerTreeView } from 'sql/workbench/services/objectExplorer/browser/objectExplorerService';
import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
import { Button } from 'sql/base/browser/ui/button/button';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import { TreeNode, TreeItemCollapsibleState } from 'sql/workbench/services/objectExplorer/common/treeNode';
import { IErrorMessageService } from 'sql/platform/errorMessage/common/errorMessageService';
import { ServerTreeActionProvider } from 'sql/workbench/services/objectExplorer/browser/serverTreeActionProvider';

3
src/sql/workbench/contrib/resourceViewer/browser/resourceViewerTable.ts
View File

@@ -6,7 +6,7 @@
import 'vs/css!./media/resourceViewerTable';
import * as azdata from 'azdata';
import { Table } from 'sql/base/browser/ui/table/table';
import { attachTableStyler, attachButtonStyler } from 'sql/platform/theme/common/styler';
import { attachTableStyler } from 'sql/platform/theme/common/styler';
import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
@@ -24,6 +24,7 @@ import { ColumnDefinition } from 'sql/workbench/browser/editor/resourceViewer/re
import { Emitter } from 'vs/base/common/event';
import { ContextMenuAnchor } from 'sql/workbench/contrib/resourceViewer/browser/resourceViewerEditor';
import { LoadingSpinnerPlugin } from 'sql/base/browser/ui/table/plugins/loadingSpinner.plugin';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
export class ResourceViewerTable extends Disposable {

2
src/sql/workbench/contrib/webview/browser/webViewDialog.ts
View File

@@ -6,7 +6,6 @@
import { Button } from 'sql/base/browser/ui/button/button';
import { Modal } from 'sql/workbench/browser/modal/modal';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { Event, Emitter } from 'vs/base/common/event';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
@@ -20,6 +19,7 @@ import { ITextResourcePropertiesService } from 'vs/editor/common/services/textRe
import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
import { attachModalDialogStyler } from 'sql/workbench/common/styler';
import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
export class WebViewDialog extends Modal {

24
src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts
View File

@@ -28,9 +28,9 @@ import { IWorkbenchExtensionEnablementService, EnablementState, IExtensionRecomm
import { ILifecycleService, StartupKind } from 'vs/platform/lifecycle/common/lifecycle';
import { Disposable } from 'vs/base/common/lifecycle';
import { splitName } from 'vs/base/common/labels';
import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { buttonSecondaryBackground, buttonSecondaryBorder, buttonSecondary, buttonSecondaryHoverColor, tileBorder, disabledButton, disabledButtonBackground, gradientOne, gradientTwo, gradientBackground, extensionPackHeaderShadow, extensionPackGradientColorOneColor, extensionPackGradientColorTwoColor, tileBoxShadow, hoverShadow } from 'sql/platform/theme/common/colorRegistry';
import { registerColor, foreground, textLinkActiveForeground, descriptionForeground, activeContrastBorder, buttonForeground, menuBorder, menuForeground, editorWidgetBorder, selectBackground, buttonHoverBackground, selectBorder, iconForeground, textLinkForeground, inputBackground, focusBorder, listFocusBackground, listFocusForeground } from 'vs/platform/theme/common/colorRegistry';
import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { tileBorder, gradientOne, gradientTwo, gradientBackground, extensionPackHeaderShadow, extensionPackGradientColorOneColor, extensionPackGradientColorTwoColor, tileBoxShadow, hoverShadow } from 'sql/platform/theme/common/colorRegistry';
import { registerColor, foreground, textLinkActiveForeground, descriptionForeground, activeContrastBorder, buttonForeground, menuBorder, menuForeground, editorWidgetBorder, selectBackground, buttonHoverBackground, selectBorder, iconForeground, textLinkForeground, inputBackground, focusBorder, listFocusBackground, listFocusForeground, buttonSecondaryBackground, buttonSecondaryBorder, buttonDisabledForeground, buttonDisabledBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground } from 'vs/platform/theme/common/colorRegistry';
import { IExtensionsWorkbenchService } from 'vs/workbench/contrib/extensions/common/extensions';
import { IEditorInputFactory, EditorInput } from 'vs/workbench/common/editor';
import { INotificationService, Severity } from 'vs/platform/notification/common/notification';
@@ -52,6 +52,7 @@ import { Button } from 'sql/base/browser/ui/button/button';
import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
import { ICommandAction, MenuItemAction } from 'vs/platform/actions/common/actions';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
const configurationKey = 'workbench.startupEditor';
const oldConfigurationKey = 'workbench.welcome.enabled';
const telemetryFrom = 'welcomePage';
@@ -247,7 +248,8 @@ class WelcomePage extends Disposable {
@IWorkbenchLayoutService protected layoutService: IWorkbenchLayoutService,
@ICommandService private readonly commandService: ICommandService,
@IContextMenuService private readonly contextMenuService: IContextMenuService,
@IContextKeyService private readonly contextKeyService: IContextKeyService) {
@IContextKeyService private readonly contextKeyService: IContextKeyService,
@IThemeService private themeService: IThemeService) {
super();
this._register(lifecycleService.onShutdown(() => this.dispose()));
const recentlyOpened = this.workspacesService.getRecentlyOpened();
@@ -569,6 +571,7 @@ class WelcomePage extends Disposable {
extensionPacks.forEach((extension) => {
const installText = localize('welcomePage.install', "Install");
let dropdownBtn = this._register(new Button(btnContainer));
this._register(attachButtonStyler(dropdownBtn, this.themeService));
dropdownBtn.label = installText;
const classes = ['btn'];
const getDropdownBtn = container.querySelector('.extensionPack .monaco-button:first-of-type') as HTMLAnchorElement;
@@ -598,6 +601,7 @@ class WelcomePage extends Disposable {
installedButton.label = installedText;
installedButton.enabled = false;
const getInstalledButton = container.querySelector('.extensionPack .monaco-button:nth-of-type(2)') as HTMLAnchorElement;
this._register(attachButtonStyler(installedButton, this.themeService));
getInstalledButton.innerText = localize('welcomePage.installed', "Installed");
getInstalledButton.title = extension.isKeymap ? localize('welcomePage.installedKeymap', "{0} keymap is already installed", extension.name) : localize('welcomePage.installedExtensionPack', "{0} support is already installed", extension.name);
@@ -874,7 +878,7 @@ registerThemingParticipant((theme, collector) => {
}
const buttonHoverBackgroundColor = theme.getColor(buttonHoverBackground);
if (buttonHoverBackgroundColor) {
collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary:hover { background: ${buttonHoverBackgroundColor}}`);
collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary:hover { background-color: ${buttonHoverBackgroundColor}}`);
}
const buttonSecondaryBackgroundColor = theme.getColor(buttonSecondaryBackground);
if (buttonSecondaryBackgroundColor) {
@@ -884,13 +888,13 @@ registerThemingParticipant((theme, collector) => {
if (buttonSecondaryBorderColor) {
collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary .monaco-button{ border: 1px solid ${buttonSecondaryBorderColor}}`);
}
const buttonSecondaryColor = theme.getColor(buttonSecondary);
const buttonSecondaryColor = theme.getColor(buttonSecondaryForeground);
if (buttonSecondaryColor) {
collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary { color: ${buttonSecondaryColor} !important}`);
}
const buttonSecondaryHover = theme.getColor(buttonSecondaryHoverColor);
const buttonSecondaryHover = theme.getColor(buttonSecondaryHoverBackground);
if (buttonSecondaryColor) {
collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary:hover:not(.disabled) { color: ${buttonSecondaryHover};}`);
collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary:hover:not(.disabled) { background-color: ${buttonSecondaryHover};}`);
}
const selectBackgroundColor = theme.getColor(selectBackground);
if (selectBackgroundColor) {
@@ -933,11 +937,11 @@ registerThemingParticipant((theme, collector) => {
if (descriptionColor) {
collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .detail { color: ${descriptionColor}; }`);
}
const disabledButtonColor = theme.getColor(disabledButton);
const disabledButtonColor = theme.getColor(buttonDisabledForeground);
if (disabledButtonColor) {
collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .btn:disabled { color: ${disabledButtonColor}; }`);
}
const disabledButtonBackgroundColor = theme.getColor(disabledButtonBackground);
const disabledButtonBackgroundColor = theme.getColor(buttonDisabledBackground);
if (disabledButtonColor) {
collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .btn:disabled { background: ${disabledButtonBackgroundColor}; }`);
}

3
src/sql/workbench/services/accountManagement/browser/accountDialog.ts
View File

@@ -10,7 +10,7 @@ import { List } from 'vs/base/browser/ui/list/listWidget';
import { Event, Emitter } from 'vs/base/common/event';
import { localize } from 'vs/nls';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { attachListStyler } from 'vs/platform/theme/common/styler';
import { attachButtonStyler, attachListStyler } from 'vs/platform/theme/common/styler';
import { IAction } from 'vs/base/common/actions';
import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
@@ -23,7 +23,6 @@ import * as azdata from 'azdata';
import { Button } from 'sql/base/browser/ui/button/button';
import { Modal } from 'sql/workbench/browser/modal/modal';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import { AccountViewModel } from 'sql/platform/accounts/common/accountViewModel';
import { AddAccountAction } from 'sql/platform/accounts/common/accountActions';
import { AccountListRenderer, AccountListDelegate } from 'sql/workbench/services/accountManagement/browser/accountListRenderer';

5
src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts
View File

@@ -6,7 +6,7 @@
import 'vs/css!./media/autoOAuthDialog';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { attachInputBoxStyler } from 'vs/platform/theme/common/styler';
import { attachButtonStyler, attachInputBoxStyler } from 'vs/platform/theme/common/styler';
import { Event, Emitter } from 'vs/base/common/event';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { localize } from 'vs/nls';
@@ -17,7 +17,6 @@ import { $, append } from 'vs/base/browser/dom';
import { Button } from 'sql/base/browser/ui/button/button';
import { Modal } from 'sql/workbench/browser/modal/modal';
import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
import { ILogService } from 'vs/platform/log/common/log';
@@ -79,7 +78,7 @@ export class AutoOAuthDialog extends Modal {
this._register(attachButtonStyler(this.backButton!, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND }));
this._copyAndOpenButton = this.addFooterButton(localize('copyAndOpen', "Copy & Open"), () => this.addAccount());
this._closeButton = this.addFooterButton(localize('oauthDialog.cancel', "Cancel"), () => this.cancel());
this._closeButton = this.addFooterButton(localize('oauthDialog.cancel', "Cancel"), () => this.cancel(), 'right', true);
this.registerListeners();
this._userCodeInputBox!.disable();
this._websiteInputBox!.disable();

7
src/sql/workbench/services/connection/browser/connectionDialogWidget.ts
View File

@@ -5,7 +5,6 @@
import 'vs/css!./media/connectionDialog';
import { Button } from 'sql/base/browser/ui/button/button';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
import { Modal } from 'sql/workbench/browser/modal/modal';
import { IConnectionManagementService, INewConnectionParams } from 'sql/platform/connection/common/connectionManagement';
@@ -299,7 +298,7 @@ export class ConnectionDialogWidget extends Modal {
const cancelLabel = localize('connectionDialog.cancel', "Cancel");
this._connectButton = this.addFooterButton(connectLabel, () => this.connect());
this._connectButton.enabled = false;
this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel());
this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel(), 'right', true);
this.registerListeners();
this.onProviderTypeSelected(this._providerTypeSelectBox.value);
}
@@ -320,8 +319,8 @@ export class ConnectionDialogWidget extends Modal {
private registerListeners(): void {
// Theme styler
this._register(styler.attachSelectBoxStyler(this._providerTypeSelectBox, this._themeService));
this._register(attachButtonStyler(this._connectButton, this._themeService));
this._register(attachButtonStyler(this._closeButton, this._themeService));
this._register(styler.attachButtonStyler(this._connectButton, this._themeService));
this._register(styler.attachButtonStyler(this._closeButton, this._themeService));
this._register(this._providerTypeSelectBox.onDidSelect(selectedProviderType => {
this.onProviderTypeSelected(selectedProviderType.selected);

5
src/sql/workbench/services/connection/browser/connectionWidget.ts
View File

@@ -35,6 +35,7 @@ import { endsWith, startsWith } from 'vs/base/common/strings';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { ILogService } from 'vs/platform/log/common/log';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
export enum AuthenticationType {
SqlLogin = 'SqlLogin',
@@ -329,7 +330,7 @@ export class ConnectionWidget extends lifecycle.Disposable {
let cellContainer = DOM.append(rowContainer, DOM.$('td'));
cellContainer.setAttribute('align', 'right');
let divContainer = DOM.append(cellContainer, DOM.$('div.advanced-button'));
let button = new Button(divContainer);
let button = new Button(divContainer, { secondary: true });
button.label = title;
button.onDidClick(() => {
//open advanced page
@@ -351,7 +352,7 @@ export class ConnectionWidget extends lifecycle.Disposable {
this._register(styler.attachInputBoxStyler(this._connectionNameInputBox, this._themeService));
this._register(styler.attachInputBoxStyler(this._userNameInputBox, this._themeService));
this._register(styler.attachInputBoxStyler(this._passwordInputBox, this._themeService));
this._register(styler.attachButtonStyler(this._advancedButton, this._themeService));
this._register(attachButtonStyler(this._advancedButton, this._themeService));
this._register(styler.attachCheckboxStyler(this._rememberPasswordCheckBox, this._themeService));
this._register(styler.attachSelectBoxStyler(this._azureAccountDropdown, this._themeService));
if (this._serverGroupSelectBox) {

5
src/sql/workbench/services/dashboard/browser/newDashboardTabDialogImpl.ts
View File

@@ -10,7 +10,7 @@ import { List } from 'vs/base/browser/ui/list/listWidget';
import { Event, Emitter } from 'vs/base/common/event';
import { localize } from 'vs/nls';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { attachListStyler } from 'vs/platform/theme/common/styler';
import { attachButtonStyler, attachListStyler } from 'vs/platform/theme/common/styler';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { IListVirtualDelegate, IListRenderer } from 'vs/base/browser/ui/list/list';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
@@ -18,7 +18,6 @@ import { KeyCode } from 'vs/base/common/keyCodes';
import { Button } from 'sql/base/browser/ui/button/button';
import { Modal } from 'sql/workbench/browser/modal/modal';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { NewDashboardTabViewModel, IDashboardUITab } from 'sql/workbench/services/dashboard/browser/newDashboardTabViewModel';
import { IDashboardTab } from 'sql/workbench/services/dashboard/browser/common/interfaces';
@@ -147,7 +146,7 @@ export class NewDashboardTabDialog extends Modal {
attachModalDialogStyler(this, this._themeService);
this._addNewTabButton = this.addFooterButton(localize('newDashboardTab.ok', "OK"), () => this.addNewTabs());
this._cancelButton = this.addFooterButton(localize('newDashboardTab.cancel', "Cancel"), () => this.cancel());
this._cancelButton = this.addFooterButton(localize('newDashboardTab.cancel', "Cancel"), () => this.cancel(), 'right', true);
this.registerListeners();
}

2
src/sql/workbench/services/dialog/browser/dialogModal.ts
View File

@@ -91,7 +91,7 @@ export class DialogModal extends Modal {
}
private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined, registerClickEvent: boolean = true, requireDialogValid: boolean = false): Button {
let buttonElement = this.addFooterButton(button.label, onSelect, button.position);
let buttonElement = this.addFooterButton(button.label, onSelect, button.position, button.secondary);
buttonElement.enabled = button.enabled;
if (registerClickEvent) {
button.registerClickEvent(buttonElement.onDidClick);

2
src/sql/workbench/services/dialog/browser/wizardModal.ts
View File

@@ -100,7 +100,7 @@ export class WizardModal extends Modal {
}
private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined, registerClickEvent: boolean = true, requirePageValid: boolean = false): Button {
let buttonElement = this.addFooterButton(button.label, onSelect, button.position);
let buttonElement = this.addFooterButton(button.label, onSelect, button.position, button.secondary);
buttonElement.enabled = button.enabled;
if (registerClickEvent) {
button.registerClickEvent(buttonElement.onDidClick);

9
src/sql/workbench/services/dialog/common/dialogTypes.ts
View File

@@ -86,6 +86,7 @@ export class DialogButton implements azdata.window.Button {
private _hidden: boolean;
private _focused: boolean | undefined;
private _position?: azdata.window.DialogButtonPosition;
private _secondary: boolean | undefined;
private _onClick: Emitter<void> = new Emitter<void>();
public readonly onClick: Event<void> = this._onClick.event;
private _onUpdate: Emitter<void> = new Emitter<void>();
@@ -142,6 +143,14 @@ export class DialogButton implements azdata.window.Button {
this._onUpdate.fire();
}
public get secondary(): boolean | undefined {
return this._secondary;
}
public set secondary(value: boolean | undefined) {
this._secondary = value;
}
/**
* Register an event that notifies the button that it has been clicked
*/

6
src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts
View File

@@ -7,7 +7,6 @@ import 'vs/css!./media/errorMessageDialog';
import { Button } from 'sql/base/browser/ui/button/button';
import { Modal } from 'sql/workbench/browser/modal/modal';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import Severity from 'vs/base/common/severity';
import { IThemeService } from 'vs/platform/theme/common/themeService';
@@ -24,6 +23,7 @@ import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
import { onUnexpectedError } from 'vs/base/common/errors';
import { attachModalDialogStyler } from 'sql/workbench/common/styler';
import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
const maxActions = 1;
@@ -79,14 +79,14 @@ export class ErrorMessageDialog extends Modal {
if (this._messageDetails) {
this._clipboardService.writeText(this._messageDetails!).catch(err => onUnexpectedError(err));
}
}, 'left');
}, 'left', true);
this._copyButton!.icon = 'codicon scriptToClipboard';
this._copyButton!.element.title = copyButtonLabel;
this._register(attachButtonStyler(this._copyButton!, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND, buttonForeground: SIDE_BAR_FOREGROUND }));
}
private createStandardButton(label: string, onSelect: () => void): Button {
let button = this.addFooterButton(label, onSelect, 'right');
let button = this.addFooterButton(label, onSelect, 'right', true);
this._register(attachButtonStyler(button, this._themeService));
return button;
}

5
src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts
View File

@@ -9,7 +9,6 @@ import { InputBox, OnLoseFocusParams } from 'sql/base/browser/ui/inputBox/inputB
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
import * as DialogHelper from 'sql/workbench/browser/modal/dialogHelper';
import { Modal } from 'sql/workbench/browser/modal/modal';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { FileNode } from 'sql/workbench/services/fileBrowser/common/fileNode';
import { FileBrowserTreeView } from 'sql/workbench/services/fileBrowser/browser/fileBrowserTreeView';
@@ -21,7 +20,7 @@ import { Event, Emitter } from 'vs/base/common/event';
import { localize } from 'vs/nls';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { attachInputBoxStyler, attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
import { attachButtonStyler, attachInputBoxStyler, attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
import * as DOM from 'vs/base/browser/dom';
import * as strings from 'vs/base/common/strings';
@@ -105,7 +104,7 @@ export class FileBrowserDialog extends Modal {
this._okButton = this.addFooterButton(localize('fileBrowser.ok', "OK"), () => this.ok());
this._okButton.enabled = false;
this._cancelButton = this.addFooterButton(localize('fileBrowser.discard', "Discard"), () => this.close());
this._cancelButton = this.addFooterButton(localize('fileBrowser.discard', "Discard"), () => this.close(), 'right', true);
this.registerListeners();
this.updateTheme();

5
src/sql/workbench/services/insights/browser/insightsDialogView.ts
View File

@@ -7,7 +7,7 @@ import 'vs/css!./media/insightsDialog';
import { Button } from 'sql/base/browser/ui/button/button';
import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
import { Modal } from 'sql/workbench/browser/modal/modal';
import { attachButtonStyler, attachTableStyler } from 'sql/platform/theme/common/styler';
import { attachTableStyler } from 'sql/platform/theme/common/styler';
import { ConnectionProfile } from 'sql/platform/connection/common/connectionProfile';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { IInsightsDialogModel, ListResource, IInsightDialogActionContext, insertValueRegex } from 'sql/workbench/services/insights/browser/insightsDialogService';
@@ -49,6 +49,7 @@ import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
import { Registry } from 'vs/platform/registry/common/platform';
import { SyncDescriptor } from 'vs/platform/instantiation/common/descriptors';
import { IInsightsConfigDetails } from 'sql/platform/extensions/common/extensions';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
const labelDisplay = nls.localize("insights.item", "Item");
const valueDisplay = nls.localize("insights.value", "Value");
@@ -389,7 +390,7 @@ export class InsightsDialogView extends Modal {
}
let context = this.topInsightContext(resource);
this._commandService.executeCommand(action, context).catch(err => onUnexpectedError(err));
}, 'left');
}, 'left', true);
button.enabled = false;
this._taskButtonDisposables.push(button);
this._taskButtonDisposables.push(attachButtonStyler(button, this._themeService));

12
src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts
View File

@@ -7,7 +7,7 @@ import 'vs/css!./media/profilerFilterDialog';
import { Button } from 'sql/base/browser/ui/button/button';
import { Modal } from 'sql/workbench/browser/modal/modal';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { attachButtonStyler, attachInputBoxStyler } from 'sql/platform/theme/common/styler';
import { attachInputBoxStyler } from 'sql/platform/theme/common/styler';
import { KeyCode } from 'vs/base/common/keyCodes';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
@@ -16,7 +16,7 @@ import { localize } from 'vs/nls';
import { ProfilerInput } from 'sql/workbench/browser/editor/profiler/profilerInput';
import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
import { attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
import { attachButtonStyler, attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { generateUuid } from 'vs/base/common/uuid';
import * as DOM from 'vs/base/browser/dom';
@@ -102,11 +102,11 @@ export class ProfilerFilterDialog extends Modal {
this.title = DialogTitle;
this.titleIconClassName = TitleIconClass;
this._register(attachModalDialogStyler(this, this._themeService));
this._saveFilterButton = this.addFooterButton(SaveFilterText, () => this.saveFilter(), 'left');
this._loadFilterButton = this.addFooterButton(LoadFilterText, () => this.loadSavedFilter(), 'left');
this._applyButton = this.addFooterButton(ApplyText, () => this.filterSession());
this._saveFilterButton = this.addFooterButton(SaveFilterText, () => this.saveFilter(), 'left', true);
this._loadFilterButton = this.addFooterButton(LoadFilterText, () => this.loadSavedFilter(), 'left', true);
this._applyButton = this.addFooterButton(ApplyText, () => this.filterSession(), 'right', true);
this._okButton = this.addFooterButton(OkText, () => this.handleOkButtonClick());
this._cancelButton = this.addFooterButton(CancelText, () => this.hide('cancel'));
this._cancelButton = this.addFooterButton(CancelText, () => this.hide('cancel'), 'right', true);
this._register(attachButtonStyler(this._okButton, this._themeService));
this._register(attachButtonStyler(this._cancelButton, this._themeService));
this._register(attachButtonStyler(this._applyButton, this._themeService));

5
src/sql/workbench/services/resourceProvider/browser/firewallRuleDialog.ts
View File

@@ -10,7 +10,7 @@ import { Event, Emitter } from 'vs/base/common/event';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { localize } from 'vs/nls';
import { buttonBackground } from 'vs/platform/theme/common/colorRegistry';
import { attachInputBoxStyler } from 'vs/platform/theme/common/styler';
import { attachButtonStyler, attachInputBoxStyler } from 'vs/platform/theme/common/styler';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
@@ -22,7 +22,6 @@ import * as azdata from 'azdata';
import { Button } from 'sql/base/browser/ui/button/button';
import { Modal } from 'sql/workbench/browser/modal/modal';
import { FirewallRuleViewModel } from 'sql/platform/accounts/common/firewallRuleViewModel';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import { IAccountPickerService } from 'sql/workbench/services/accountManagement/browser/accountPicker';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
@@ -108,7 +107,7 @@ export class FirewallRuleDialog extends Modal {
this.backButton!.onDidClick(() => this.cancel());
this._register(attachButtonStyler(this.backButton!, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND }));
this._createButton = this.addFooterButton(localize('firewall.ok', "OK"), () => this.createFirewallRule());
this._closeButton = this.addFooterButton(localize('firewall.cancel', "Cancel"), () => this.cancel());
this._closeButton = this.addFooterButton(localize('firewall.cancel', "Cancel"), () => this.cancel(), 'right', true);
this.registerListeners();
}

9
src/sql/workbench/services/restore/browser/restoreDialog.ts
View File

@@ -30,7 +30,7 @@ import { Table } from 'sql/base/browser/ui/table/table';
import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
import * as DialogHelper from 'sql/workbench/browser/modal/dialogHelper';
import { Modal } from 'sql/workbench/browser/modal/modal';
import { attachButtonStyler, attachTableStyler, attachInputBoxStyler, attachSelectBoxStyler, attachEditableDropdownStyler, attachCheckboxStyler } from 'sql/platform/theme/common/styler';
import { attachTableStyler, attachInputBoxStyler, attachSelectBoxStyler, attachEditableDropdownStyler, attachCheckboxStyler } from 'sql/platform/theme/common/styler';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { RestoreViewModel, RestoreOptionParam, SouceDatabaseNamesParam } from 'sql/workbench/services/restore/browser/restoreViewModel';
import * as FileValidationConstants from 'sql/workbench/services/fileBrowser/common/fileValidationServiceConstants';
@@ -45,6 +45,7 @@ import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
import { attachModalDialogStyler, attachTabbedPanelStyler } from 'sql/workbench/common/styler';
import { fileFiltersSet } from 'sql/workbench/services/restore/common/constants';
import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
interface FileListElement {
logicalFileName: string;
@@ -159,9 +160,9 @@ export class RestoreDialog extends Modal {
super.render();
attachModalDialogStyler(this, this._themeService);
let cancelLabel = localize('restoreDialog.cancel', "Cancel");
this._scriptButton = this.addFooterButton(localize('restoreDialog.script', "Script"), () => this.restore(true));
this._scriptButton = this.addFooterButton(localize('restoreDialog.script', "Script"), () => this.restore(true), 'right', true);
this._restoreButton = this.addFooterButton(this._restoreLabel, () => this.restore(false));
this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel());
this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel(), 'right', true);
this.registerListeners();
this._destinationRestoreToInputBox!.disable();
}
@@ -186,7 +187,7 @@ export class RestoreDialog extends Modal {
this._filePathInputBox = new InputBox(DOM.append(filePathInputContainer, DOM.$('.dialog-input')), this._contextViewService, validationOptions);
this._browseFileButton = new Button(DOM.append(filePathInputContainer, DOM.$('.file-browser')));
this._browseFileButton = new Button(DOM.append(filePathInputContainer, DOM.$('.file-browser')), { secondary: true });
this._browseFileButton.label = '...';
const sourceDatabasesElement = DOM.$('.source-database-list');

5
src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts
View File

@@ -11,7 +11,7 @@ import * as DOM from 'vs/base/browser/dom';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { attachInputBoxStyler, attachCheckboxStyler } from 'vs/platform/theme/common/styler';
import { attachInputBoxStyler, attachCheckboxStyler, attachButtonStyler } from 'vs/platform/theme/common/styler';
import { Event, Emitter } from 'vs/base/common/event';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { localize } from 'vs/nls';
@@ -21,7 +21,6 @@ import { Button } from 'sql/base/browser/ui/button/button';
import { Modal } from 'sql/workbench/browser/modal/modal';
import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import { ServerGroupViewModel } from 'sql/workbench/services/serverGroup/common/serverGroupViewModel';
import { attachButtonStyler } from 'sql/platform/theme/common/styler';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
import { ILogService } from 'vs/platform/log/common/log';
@@ -82,7 +81,7 @@ export class ServerGroupDialog extends Modal {
const okLabel = localize('serverGroup.ok', "OK");
const cancelLabel = localize('serverGroup.cancel', "Cancel");
this._addServerButton = this.addFooterButton(okLabel, () => this.addGroup());
this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel());
this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel(), 'right', true);
this.isRendered = true;
this.registerListeners();
}

74
src/vs/base/browser/ui/button/button.ts
View File

@@ -28,6 +28,11 @@ export interface IButtonStyles {
buttonSecondaryHoverBackground?: Color;
buttonSecondaryForeground?: Color;
buttonBorder?: Color;
// {{SQL CARBON EDIT}}
buttonSecondaryBorder?: Color;
buttonDisabledBackground?: Color;
buttonDisabledForeground?: Color;
buttonDisabledBorder?: Color;
}
const defaultOptions: IButtonStyles = {
@@ -48,6 +53,13 @@ export class Button extends Disposable {
private buttonSecondaryHoverBackground: Color | undefined;
private buttonSecondaryForeground: Color | undefined;
private buttonBorder: Color | undefined;
// {{SQL CARBON EDIT}}
private buttonSecondaryBorder: Color | undefined;
private buttonDisabledBackground: Color | undefined;
private buttonDisabledForeground: Color | undefined;
private buttonDisabledBorder: Color | undefined;
private hasIcon: boolean = false;
// {{SQL CARBON EDIT}} - END
private _onDidClick = this._register(new Emitter<Event>());
get onDidClick(): BaseEvent<Event> { return this._onDidClick.event; }
@@ -69,6 +81,12 @@ export class Button extends Disposable {
this.buttonSecondaryHoverBackground = this.options.buttonSecondaryHoverBackground;
this.buttonBorder = this.options.buttonBorder;
// {{SQL CARBON EDIT}}
this.buttonSecondaryBorder = this.options.buttonSecondaryBorder;
this.buttonDisabledBackground = this.options.buttonDisabledBackground;
this.buttonDisabledForeground = this.options.buttonDisabledForeground;
this.buttonDisabledBorder = this.options.buttonDisabledBorder;
this._element = document.createElement('a');
this._element.classList.add('monaco-button');
@@ -125,6 +143,10 @@ export class Button extends Disposable {
}
private setHoverBackground(): void {
// {{SQL CARBON EDIT}} - skip if this is an icon button
if (this.hasIcon) {
return;
}
let hoverBackground;
if (this.options.secondary) {
hoverBackground = this.buttonSecondaryHoverBackground ? this.buttonSecondaryHoverBackground.toString() : null;
@@ -145,9 +167,15 @@ export class Button extends Disposable {
this.buttonSecondaryHoverBackground = styles.buttonSecondaryHoverBackground;
this.buttonBorder = styles.buttonBorder;
this.buttonSecondaryBorder = styles.buttonSecondaryBorder;
this.buttonDisabledBackground = styles.buttonDisabledBackground;
this.buttonDisabledForeground = styles.buttonDisabledForeground;
this.buttonDisabledBorder = styles.buttonDisabledBorder;
this.applyStyles();
}
/**
// {{SQL CARBON EDIT}} -- removed 'private' access modifier @todo anthonydresser 4/12/19 things needs investigation whether we need this
applyStyles(): void {
if (this._element) {
@@ -170,6 +198,49 @@ export class Button extends Disposable {
this._element.style.borderColor = border;
}
}
*/
// {{SQL CARBON EDIT}} - custom applyStyles
applyStyles(): void {
if (this._element) {
let background, foreground, border, fontWeight, fontSize;
if (this.hasIcon) {
background = border = 'transparent';
foreground = this.buttonSecondaryForeground;
fontWeight = fontSize = 'inherit';
} else {
if (this.enabled) {
if (this.options.secondary) {
foreground = this.buttonSecondaryForeground ? this.buttonSecondaryForeground.toString() : '';
background = this.buttonSecondaryBackground ? this.buttonSecondaryBackground.toString() : '';
border = this.buttonSecondaryBorder ? this.buttonSecondaryBorder.toString() : '';
} else {
foreground = this.buttonForeground ? this.buttonForeground.toString() : '';
background = this.buttonBackground ? this.buttonBackground.toString() : '';
border = this.buttonBorder ? this.buttonBorder.toString() : '';
}
}
else {
foreground = this.buttonDisabledForeground;
background = this.buttonDisabledBackground;
border = this.buttonDisabledBorder;
}
fontWeight = '600';
fontSize = '12px';
}
this._element.style.color = foreground;
this._element.style.backgroundColor = background;
this._element.style.borderWidth = border ? '1px' : '';
this._element.style.borderStyle = border ? 'solid' : '';
this._element.style.borderColor = border;
this._element.style.opacity = this.hasIcon ? '' : '1';
this._element.style.fontWeight = fontWeight;
this._element.style.fontSize = fontSize;
this._element.style.borderRadius = '2px';
}
}
// {{SQL CARBON EDIT}} - end custom applyStyles
get element(): HTMLElement {
return this._element;
@@ -192,7 +263,9 @@ export class Button extends Disposable {
// {{SQL CARBON EDIT}}
set icon(iconClassName: string) {
this.hasIcon = iconClassName !== '';
this._element.classList.add(...iconClassName.split(' '));
this.applyStyles();
}
set enabled(value: boolean) {
@@ -205,6 +278,7 @@ export class Button extends Disposable {
this._element.setAttribute('aria-disabled', String(true));
removeTabIndexAndUpdateFocus(this._element);
}
this.applyStyles(); // {{SQL CARBON EDIT}}
}
get enabled() {

22
src/vs/platform/theme/common/colorRegistry.ts
View File

@@ -227,13 +227,23 @@ export const simpleCheckboxBackground = registerColor('checkbox.background', { d
export const simpleCheckboxForeground = registerColor('checkbox.foreground', { dark: selectForeground, light: selectForeground, hc: selectForeground }, nls.localize('checkbox.foreground', "Foreground color of checkbox widget."));
export const simpleCheckboxBorder = registerColor('checkbox.border', { dark: selectBorder, light: selectBorder, hc: selectBorder }, nls.localize('checkbox.border', "Border color of checkbox widget."));
export const buttonForeground = registerColor('button.foreground', { dark: Color.white, light: Color.white, hc: Color.white }, nls.localize('buttonForeground', "Button foreground color."));
export const buttonBackground = registerColor('button.background', { dark: '#0078D4', light: '#007ACC', hc: '#0078D4' }, nls.localize('buttonBackground', "Button background color."));
export const buttonHoverBackground = registerColor('button.hoverBackground', { dark: lighten(buttonBackground, 0.2), light: darken(buttonBackground, 0.2), hc: null }, nls.localize('buttonHoverBackground', "Button background color when hovering."));
// {{SQL CARBON EDIT}} - ADS custom button styles
// Existing VSCode button colors, reuse the color ids with modified color values
export const buttonForeground = registerColor('button.foreground', { dark: '#111111', light: Color.white, hc: Color.white }, nls.localize('buttonForeground', "Button foreground color."));
export const buttonBackground = registerColor('button.background', { dark: '#4894FE', light: '#0078D4', hc: null }, nls.localize('buttonBackground', "Button background color."));
export const buttonHoverBackground = registerColor('button.hoverBackground', { dark: '#6CA9FE', light: '#106EBE', hc: null }, nls.localize('buttonHoverBackground', "Button background color when hovering."));
export const buttonSecondaryForeground = registerColor('button.secondaryForeground', { dark: Color.white, light: Color.white, hc: Color.white }, nls.localize('buttonSecondaryForeground', "Secondary button foreground color."));
export const buttonSecondaryBackground = registerColor('button.secondaryBackground', { dark: '#3A3D41', light: '#5F6A79', hc: null }, nls.localize('buttonSecondaryBackground', "Secondary button background color."));
export const buttonSecondaryHoverBackground = registerColor('button.secondaryHoverBackground', { dark: lighten(buttonSecondaryBackground, 0.2), light: darken(buttonSecondaryBackground, 0.2), hc: null }, nls.localize('buttonSecondaryHoverBackground', "Secondary button background color when hovering."));
export const buttonSecondaryForeground = registerColor('button.secondaryForeground', { dark: '#4894FE', light: '#323130', hc: Color.white }, nls.localize('buttonSecondaryForeground', "Secondary button foreground color."));
export const buttonSecondaryBackground = registerColor('button.secondaryBackground', { dark: '#212121', light: Color.white, hc: null }, nls.localize('buttonSecondaryBackground', "Secondary button background color."));
export const buttonSecondaryHoverBackground = registerColor('button.secondaryHoverBackground', { dark: new Color(new RGBA(127, 127, 127, 0.1)), light: '#F3F2F1', hc: null }, nls.localize('buttonSecondaryHoverBackground', "Secondary button background color when hovering."));
// new button colors introduced by ADS
export const buttonBorder = registerColor('button.border', { dark: '#4894FE', light: '#0078D4', hc: contrastBorder }, nls.localize('button.border', "Primary button border color."));
export const buttonSecondaryBorder = registerColor('button.secondaryBorder', { dark: '#4894FE', light: '#8A8886', hc: contrastBorder }, nls.localize('button.secondaryBorder', "Secondary button border color."));
export const buttonDisabledBorder = registerColor('button.disabledBorder', { dark: new Color(new RGBA(127, 127, 127, 0.1)), light: '#F3F2F1', hc: '#00FF00' }, nls.localize('button.secondaryBorder', "Secondary button border color."));
export const buttonDisabledForeground = registerColor('button.disabledForeground', { dark: new Color(new RGBA(127, 127, 127, 0.7)), light: '#A19F9D', hc: '#00FF00' }, nls.localize('button.disabledForeground', "Disabled button foreground color."));
export const buttonDisabledBackground = registerColor('button.disabledBackground', { dark: new Color(new RGBA(127, 127, 127, 0.1)), light: '#F3F2F1', hc: Color.black }, nls.localize('button.disabledBackground', "Disablbed button background color."));
// {{SQL CARBON EDIT}} - end of ADS custom button styles
export const badgeBackground = registerColor('badge.background', { dark: '#4D4D4D', light: '#C4C4C4', hc: Color.black }, nls.localize('badgeBackground', "Badge background color. Badges are small information labels, e.g. for search results count."));
export const badgeForeground = registerColor('badge.foreground', { dark: Color.white, light: '#333', hc: Color.white }, nls.localize('badgeForeground', "Badge foreground color. Badges are small information labels, e.g. for search results count."));

15
src/vs/platform/theme/common/styler.ts
View File

@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService';
import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, inputActiveOptionBackground, inputActiveOptionForeground, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, badgeBackground, badgeForeground, progressBarBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, editorWidgetBorder, inputValidationInfoForeground, inputValidationWarningForeground, inputValidationErrorForeground, menuForeground, menuBackground, menuSelectionForeground, menuSelectionBackground, menuSelectionBorder, menuBorder, menuSeparatorBackground, darken, listFilterWidgetOutline, listFilterWidgetNoMatchesOutline, listFilterWidgetBackground, editorWidgetBackground, treeIndentGuidesStroke, editorWidgetForeground, simpleCheckboxBackground, simpleCheckboxBorder, simpleCheckboxForeground, ColorValue, resolveColorValue, textLinkForeground, problemsWarningIconForeground, problemsErrorIconForeground, problemsInfoIconForeground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground } from 'vs/platform/theme/common/colorRegistry';
import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, inputActiveOptionBackground, inputActiveOptionForeground, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, badgeBackground, badgeForeground, progressBarBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, editorWidgetBorder, inputValidationInfoForeground, inputValidationWarningForeground, inputValidationErrorForeground, menuForeground, menuBackground, menuSelectionForeground, menuSelectionBackground, menuSelectionBorder, menuBorder, menuSeparatorBackground, darken, listFilterWidgetOutline, listFilterWidgetNoMatchesOutline, listFilterWidgetBackground, editorWidgetBackground, treeIndentGuidesStroke, editorWidgetForeground, simpleCheckboxBackground, simpleCheckboxBorder, simpleCheckboxForeground, ColorValue, resolveColorValue, textLinkForeground, problemsWarningIconForeground, problemsErrorIconForeground, problemsInfoIconForeground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground, buttonBorder, buttonSecondaryBorder, buttonDisabledBorder, buttonDisabledBackground, buttonDisabledForeground } from 'vs/platform/theme/common/colorRegistry';
import { IDisposable } from 'vs/base/common/lifecycle';
import { Color } from 'vs/base/common/color';
import { IThemable, styleFn } from 'vs/base/common/styler';
@@ -265,6 +265,12 @@ export interface IButtonStyleOverrides extends IStyleOverrides {
buttonSecondaryForeground?: ColorIdentifier;
buttonSecondaryBackground?: ColorIdentifier;
buttonSecondaryHoverBackground?: ColorIdentifier;
// {{SQL CARBON EDIT}}
buttonBorder?: ColorIdentifier;
buttonSecondaryBorder?: ColorIdentifier;
buttonDisabledForeground?: ColorIdentifier;
buttonDisabledBackground?: ColorIdentifier;
buttonDisabledBorder?: ColorIdentifier;
}
export function attachButtonStyler(widget: IThemable, themeService: IThemeService, style?: IButtonStyleOverrides): IDisposable {
@@ -275,7 +281,12 @@ export function attachButtonStyler(widget: IThemable, themeService: IThemeServic
buttonSecondaryForeground: (style && style.buttonSecondaryForeground) || buttonSecondaryForeground,
buttonSecondaryBackground: (style && style.buttonSecondaryBackground) || buttonSecondaryBackground,
buttonSecondaryHoverBackground: (style && style.buttonSecondaryHoverBackground) || buttonSecondaryHoverBackground,
buttonBorder: contrastBorder
// {{SQL CARBON EDIT}}
buttonBorder: (style && style.buttonBorder) || buttonBorder,
buttonSecondaryBorder: (style && style.buttonSecondaryBorder) || buttonSecondaryBorder,
buttonDisabledBorder: (style && style.buttonDisabledBorder) || buttonDisabledBorder,
buttonDisabledBackground: (style && style.buttonDisabledBackground) || buttonDisabledBackground,
buttonDisabledForeground: (style && style.buttonDisabledForeground) || buttonDisabledForeground
} as IButtonStyleOverrides, widget);
}