diff --git a/extensions/agent/src/dialogs/alertDialog.ts b/extensions/agent/src/dialogs/alertDialog.ts index 4cbfdd6a02..1f70f2f1b5 100644 --- a/extensions/agent/src/dialogs/alertDialog.ts +++ b/extensions/agent/src/dialogs/alertDialog.ts @@ -352,9 +352,10 @@ export class AlertDialog extends AgentDialog { .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 { 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; diff --git a/extensions/agent/src/dialogs/jobDialog.ts b/extensions/agent/src/dialogs/jobDialog.ts index 012616f57f..43d58f14ae 100644 --- a/extensions/agent/src/dialogs/jobDialog.ts +++ b/extensions/agent/src/dialogs/jobDialog.ts @@ -59,6 +59,7 @@ export class JobDialog extends AgentDialog { // 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 { 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 { } }); - 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 { 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 { 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); diff --git a/extensions/agent/src/dialogs/jobStepDialog.ts b/extensions/agent/src/dialogs/jobStepDialog.ts index a99b2c1f0c..08146cf8d2 100644 --- a/extensions/agent/src/dialogs/jobStepDialog.ts +++ b/extensions/agent/src/dialogs/jobStepDialog.ts @@ -154,18 +154,20 @@ export class JobStepDialog extends AgentDialog { 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 { 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({ diff --git a/extensions/agent/src/dialogs/notebookDialog.ts b/extensions/agent/src/dialogs/notebookDialog.ts index 4cae1b7353..12ec04009d 100644 --- a/extensions/agent/src/dialogs/notebookDialog.ts +++ b/extensions/agent/src/dialogs/notebookDialog.ts @@ -109,7 +109,8 @@ export class NotebookDialog extends AgentDialog { 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 { 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); diff --git a/extensions/arc/src/ui/components/filePicker.ts b/extensions/arc/src/ui/components/filePicker.ts index b2abf100fa..310f18bd05 100644 --- a/extensions/arc/src/ui/components/filePicker.ts +++ b/extensions/arc/src/ui/components/filePicker.ts @@ -30,7 +30,8 @@ export class FilePicker { this.filePickerButton = modelBuilder.button() .withProperties({ label: loc.browse, - width: buttonWidth + width: buttonWidth, + secondary: true }).component(); onNewDisposableCreated(this.filePickerButton.onDidClick(async () => { const fileUris = await vscode.window.showOpenDialog({ diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/commonControls.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/commonControls.ts index 3446453bbd..2b8515858c 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/commonControls.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/dialog/commonControls.ts @@ -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({ 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 }); }); diff --git a/extensions/dacpac/src/wizard/api/dacFxConfigPage.ts b/extensions/dacpac/src/wizard/api/dacFxConfigPage.ts index 7be4311764..3307851cf7 100644 --- a/extensions/dacpac/src/wizard/api/dacFxConfigPage.ts +++ b/extensions/dacpac/src/wizard/api/dacFxConfigPage.ts @@ -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(); } diff --git a/extensions/import/src/wizard/pages/fileConfigPage.ts b/extensions/import/src/wizard/pages/fileConfigPage.ts index c59becb794..0fa441face 100644 --- a/extensions/import/src/wizard/pages/fileConfigPage.ts +++ b/extensions/import/src/wizard/pages/fileConfigPage.ts @@ -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) => { diff --git a/extensions/import/src/wizard/pages/prosePreviewPage.ts b/extensions/import/src/wizard/pages/prosePreviewPage.ts index 607e29979b..f06cfd556e 100644 --- a/extensions/import/src/wizard/pages/prosePreviewPage.ts +++ b/extensions/import/src/wizard/pages/prosePreviewPage.ts @@ -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 () => { diff --git a/extensions/machine-learning/src/views/externalLanguages/languageContentView.ts b/extensions/machine-learning/src/views/externalLanguages/languageContentView.ts index 1df7404d49..a6098fdf0e 100644 --- a/extensions/machine-learning/src/views/externalLanguages/languageContentView.ts +++ b/extensions/machine-learning/src/views/externalLanguages/languageContentView.ts @@ -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() diff --git a/extensions/machine-learning/src/views/models/azureSignInComponent.ts b/extensions/machine-learning/src/views/models/azureSignInComponent.ts index a54dc6d351..67158832ce 100644 --- a/extensions/machine-learning/src/views/models/azureSignInComponent.ts +++ b/extensions/machine-learning/src/views/models/azureSignInComponent.ts @@ -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); diff --git a/extensions/mssql/src/dashboard/bookWidget.ts b/extensions/mssql/src/dashboard/bookWidget.ts index 52f7055bdc..96775e346c 100644 --- a/extensions/mssql/src/dashboard/bookWidget.ts +++ b/extensions/mssql/src/dashboard/bookWidget.ts @@ -28,9 +28,10 @@ export function registerBooksWidget(bookContributionProvider: BookContributionPr const bookRow = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component(); - const tsgbooklink = view.modelBuilder.button().withProperties({ + 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); diff --git a/extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts b/extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts index 104000f858..c10b0bd174 100644 --- a/extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts +++ b/extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts @@ -211,7 +211,11 @@ export class ManageAccessDialog { this.hdfsModel.createAndAddAclEntry(value, this.addUserOrGroupSelectedType); this.addUserOrGroupInput.value = ''; }); - const addUserOrGroupButton = this.modelBuilder.button().withProperties({ 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 = ''; diff --git a/extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkConfigurationTab.ts b/extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkConfigurationTab.ts index 5b3896f6ac..5e743be5c7 100644 --- a/extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkConfigurationTab.ts +++ b/extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkConfigurationTab.ts @@ -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()); diff --git a/extensions/notebook/src/dialog/configurePython/configurePathPage.ts b/extensions/notebook/src/dialog/configurePython/configurePathPage.ts index b865d1c86d..af3a8c1a62 100644 --- a/extensions/notebook/src/dialog/configurePython/configurePathPage.ts +++ b/extensions/notebook/src/dialog/configurePython/configurePathPage.ts @@ -53,9 +53,10 @@ export class ConfigurePathPage extends BasePage { }) .component(); let browseButton = this.view.modelBuilder.button() - .withProperties({ + .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({ + let editPathButton = this.view.modelBuilder.button().withProps({ label: 'Edit', - width: '70px' + width: '70px', + secondary: true }).component(); let editPathForm = this.view.modelBuilder.formContainer() .withFormItems([{ diff --git a/extensions/notebook/src/dialog/managePackages/addNewPackageTab.ts b/extensions/notebook/src/dialog/managePackages/addNewPackageTab.ts index b1af90381c..ae13fbcfc0 100644 --- a/extensions/notebook/src/dialog/managePackages/addNewPackageTab.ts +++ b/extensions/notebook/src/dialog/managePackages/addNewPackageTab.ts @@ -39,9 +39,10 @@ export class AddNewPackageTab { }); this.packagesSearchButton = view.modelBuilder.button() - .withProperties({ + .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(); diff --git a/extensions/notebook/src/dialog/managePackages/installedPackagesTab.ts b/extensions/notebook/src/dialog/managePackages/installedPackagesTab.ts index 899deb9bb0..4fde8723fe 100644 --- a/extensions/notebook/src/dialog/managePackages/installedPackagesTab.ts +++ b/extensions/notebook/src/dialog/managePackages/installedPackagesTab.ts @@ -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)); diff --git a/extensions/notebook/src/dialog/remoteBookDialog.ts b/extensions/notebook/src/dialog/remoteBookDialog.ts index 3a7fcee183..ad4ce1f330 100644 --- a/extensions/notebook/src/dialog/remoteBookDialog.ts +++ b/extensions/notebook/src/dialog/remoteBookDialog.ts @@ -63,7 +63,8 @@ export class RemoteBookDialog { this.searchButton = this.view.modelBuilder.button().withProperties({ label: loc.search, title: loc.search, - width: '200px' + width: '200px', + secondary: true }).component(); this.searchButton.onDidClick(async () => await this.validate()); diff --git a/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/azureSettingsPage.ts b/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/azureSettingsPage.ts index b5758a52f4..8a6661089e 100644 --- a/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/azureSettingsPage.ts +++ b/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/azureSettingsPage.ts @@ -168,11 +168,13 @@ export class AzureSettingsPage extends BasePage { this.signInButton = view.modelBuilder.button().withProperties({ label: localizedConstants.signIn, - width: '100px' + width: '100px', + secondary: true }).component(); this.refreshButton = view.modelBuilder.button().withProperties({ label: localizedConstants.refresh, - width: '100px' + width: '100px', + secondary: true }).component(); this.signInButton.onDidClick(async (event) => { diff --git a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/azureSettingsPage.ts b/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/azureSettingsPage.ts index 5730b37f94..3a9fb7c298 100644 --- a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/azureSettingsPage.ts +++ b/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/azureSettingsPage.ts @@ -107,11 +107,13 @@ export class AzureSettingsPage extends BasePage { this.signInButton = view.modelBuilder.button().withProperties({ label: localizedConstants.signIn, - width: '100px' + width: '100px', + secondary: true }).component(); this.refreshButton = view.modelBuilder.button().withProperties({ label: localizedConstants.refresh, - width: '100px' + width: '100px', + secondary: true }).component(); this.signInButton.onDidClick(async (event) => { diff --git a/extensions/resource-deployment/src/ui/deployClusterWizard/pages/targetClusterPage.ts b/extensions/resource-deployment/src/ui/deployClusterWizard/pages/targetClusterPage.ts index 1ce8d6904c..fbc10c205d 100644 --- a/extensions/resource-deployment/src/ui/deployClusterWizard/pages/targetClusterPage.ts +++ b/extensions/resource-deployment/src/ui/deployClusterWizard/pages/targetClusterPage.ts @@ -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(); diff --git a/extensions/resource-deployment/src/ui/modelViewUtils.ts b/extensions/resource-deployment/src/ui/modelViewUtils.ts index c540205802..c70713e948 100644 --- a/extensions/resource-deployment/src/ui/modelViewUtils.ts +++ b/extensions/resource-deployment/src/ui/modelViewUtils.ts @@ -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({ 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({ label: loc.signIn, width: '100px' }).component(); - const refreshButton = context.view!.modelBuilder.button().withProperties({ 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' }); diff --git a/extensions/resource-deployment/src/ui/toolsAndEulaSettingsPage.ts b/extensions/resource-deployment/src/ui/toolsAndEulaSettingsPage.ts index 244e714e05..495aadd64f 100644 --- a/extensions/resource-deployment/src/ui/toolsAndEulaSettingsPage.ts +++ b/extensions/resource-deployment/src/ui/toolsAndEulaSettingsPage.ts @@ -142,6 +142,7 @@ export class ToolsAndEulaPage extends ResourceTypePage { 'display': 'none', }, width: '100px', + secondary: true }).component(); this.wizard.registerDisposable(this._installToolButton.onDidClick(() => { diff --git a/extensions/schema-compare/src/dialogs/schemaCompareDialog.ts b/extensions/schema-compare/src/dialogs/schemaCompareDialog.ts index dddb483d2f..55250d0999 100644 --- a/extensions/schema-compare/src/dialogs/schemaCompareDialog.ts +++ b/extensions/schema-compare/src/dialogs/schemaCompareDialog.ts @@ -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(); } diff --git a/extensions/schema-compare/src/schemaCompareMainWindow.ts b/extensions/schema-compare/src/schemaCompareMainWindow.ts index d1431eb10a..7a367d6514 100644 --- a/extensions/schema-compare/src/schemaCompareMainWindow.ts +++ b/extensions/schema-compare/src/schemaCompareMainWindow.ts @@ -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 () => { diff --git a/extensions/sql-migration/src/wizard/createMigrationControllerDialog.ts b/extensions/sql-migration/src/wizard/createMigrationControllerDialog.ts index df330f2c38..818448cb9e 100644 --- a/extensions/sql-migration/src/wizard/createMigrationControllerDialog.ts +++ b/extensions/sql-migration/src/wizard/createMigrationControllerDialog.ts @@ -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) => { diff --git a/extensions/sql-migration/src/wizard/integrationRuntimePage.ts b/extensions/sql-migration/src/wizard/integrationRuntimePage.ts index 8ddc0fb71e..dfb5aa2a8c 100644 --- a/extensions/sql-migration/src/wizard/integrationRuntimePage.ts +++ b/extensions/sql-migration/src/wizard/integrationRuntimePage.ts @@ -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) => { diff --git a/extensions/theme-carbon/themes/dark_carbon.json b/extensions/theme-carbon/themes/dark_carbon.json index d75a5e0b85..b616068321 100644 --- a/extensions/theme-carbon/themes/dark_carbon.json +++ b/extensions/theme-carbon/themes/dark_carbon.json @@ -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 diff --git a/extensions/theme-carbon/themes/light_carbon.json b/extensions/theme-carbon/themes/light_carbon.json index 424aef61dd..e6bb237563 100644 --- a/extensions/theme-carbon/themes/light_carbon.json +++ b/extensions/theme-carbon/themes/light_carbon.json @@ -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 diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts index 1cb4df9ae4..62240880bd 100644 --- a/src/sql/azdata.proposed.d.ts +++ b/src/sql/azdata.proposed.d.ts @@ -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 { diff --git a/src/sql/base/browser/ui/button/button.ts b/src/sql/base/browser/ui/button/button.ts index 0278d1bdc1..71522202dd 100644 --- a/src/sql/base/browser/ui/button/button.ts +++ b/src/sql/base/browser/ui/button/button.ts @@ -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) { diff --git a/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts b/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts index 9e8d7aabba..d1b3408ef8 100644 --- a/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts +++ b/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts @@ -22,7 +22,7 @@ export interface CommandEventArgs { export class HeaderFilter { - public onFilterApplied = new Slick.Event<{ grid: Slick.Grid, column: IExtendedColumn}>(); + public onFilterApplied = new Slick.Event<{ grid: Slick.Grid, column: IExtendedColumn }>(); public onCommand = new Slick.Event>(); private grid!: Slick.Grid; @@ -221,7 +221,7 @@ export class HeaderFilter { 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 { 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'; diff --git a/src/sql/platform/theme/common/colorRegistry.ts b/src/sql/platform/theme/common/colorRegistry.ts index 0b16ff73f5..6e9c252ea6 100644 --- a/src/sql/platform/theme/common/colorRegistry.ts +++ b/src/sql/platform/theme/common/colorRegistry.ts @@ -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")); diff --git a/src/sql/platform/theme/common/styler.ts b/src/sql/platform/theme/common/styler.ts index 7247b01c9a..c28c858677 100644 --- a/src/sql/platform/theme/common/styler.ts +++ b/src/sql/platform/theme/common/styler.ts @@ -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, { diff --git a/src/sql/workbench/api/browser/mainThreadModelViewDialog.ts b/src/sql/workbench/api/browser/mainThreadModelViewDialog.ts index 8f7a2b42ca..d5410da1d9 100644 --- a/src/sql/workbench/api/browser/mainThreadModelViewDialog.ts +++ b/src/sql/workbench/api/browser/mainThreadModelViewDialog.ts @@ -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(); diff --git a/src/sql/workbench/api/common/extHostModelViewDialog.ts b/src/sql/workbench/api/common/extHostModelViewDialog.ts index 10497310d7..b54bfc654e 100644 --- a/src/sql/workbench/api/common/extHostModelViewDialog.ts +++ b/src/sql/workbench/api/common/extHostModelViewDialog.ts @@ -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(); 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, diff --git a/src/sql/workbench/api/common/sqlExtHostTypes.ts b/src/sql/workbench/api/common/sqlExtHostTypes.ts index e148c8dcd1..bcf581d580 100644 --- a/src/sql/workbench/api/common/sqlExtHostTypes.ts +++ b/src/sql/workbench/api/common/sqlExtHostTypes.ts @@ -272,6 +272,7 @@ export interface IModelViewButtonDetails { hidden: boolean; focused?: boolean; position?: 'left' | 'right'; + secondary?: boolean; } export interface IModelViewWizardPageDetails { diff --git a/src/sql/workbench/browser/modal/modal.ts b/src/sql/workbench/browser/modal/modal.ts index eb7838edd7..0eca848803 100644 --- a/src/sql/workbench/browser/modal/modal.ts +++ b/src/sql/workbench/browser/modal/modal.ts @@ -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') { diff --git a/src/sql/workbench/browser/modal/optionsDialog.ts b/src/sql/workbench/browser/modal/optionsDialog.ts index 66abd08529..ca4d4f914a 100644 --- a/src/sql/workbench/browser/modal/optionsDialog.ts +++ b/src/sql/workbench/browser/modal/optionsDialog.ts @@ -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()); } diff --git a/src/sql/workbench/browser/modelComponents/button.component.ts b/src/sql/workbench/browser/modelComponents/button.component.ts index 1f41f4d455..9a7d944674 100644 --- a/src/sql/workbench/browser/modelComponents/button.component.ts +++ b/src/sql/workbench/browser/modelComponents/button.component.ts @@ -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((props) => props.secondary, false); + } } diff --git a/src/sql/workbench/browser/modelComponents/table.component.ts b/src/sql/workbench/browser/modelComponents/table.component.ts index b879fa42d8..cd9c52ddba 100644 --- a/src/sql/workbench/browser/modelComponents/table.component.ts +++ b/src/sql/workbench/browser/modelComponents/table.component.ts @@ -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 diff --git a/src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts b/src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts index 6ea3ed2250..caf472b169 100644 --- a/src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts +++ b/src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts @@ -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; diff --git a/src/sql/workbench/contrib/backup/browser/backup.component.ts b/src/sql/workbench/contrib/backup/browser/backup.component.ts index e76ceff47b..33c92bd2bf 100644 --- a/src/sql/workbench/contrib/backup/browser/backup.component.ts +++ b/src/sql/workbench/contrib/backup/browser/backup.component.ts @@ -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)); diff --git a/src/sql/workbench/contrib/jobManagement/browser/jobsView.component.ts b/src/sql/workbench/contrib/jobManagement/browser/jobsView.component.ts index fbf0079ec9..fa80df730f 100644 --- a/src/sql/workbench/contrib/jobManagement/browser/jobsView.component.ts +++ b/src/sql/workbench/contrib/jobManagement/browser/jobsView.component.ts @@ -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; diff --git a/src/sql/workbench/contrib/jobManagement/browser/notebooksView.component.ts b/src/sql/workbench/contrib/jobManagement/browser/notebooksView.component.ts index 0015e1fb9d..70c93631c9 100644 --- a/src/sql/workbench/contrib/jobManagement/browser/notebooksView.component.ts +++ b/src/sql/workbench/contrib/jobManagement/browser/notebooksView.component.ts @@ -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'; diff --git a/src/sql/workbench/contrib/objectExplorer/browser/serverTreeView.ts b/src/sql/workbench/contrib/objectExplorer/browser/serverTreeView.ts index 2b5dc18d7f..138116af88 100644 --- a/src/sql/workbench/contrib/objectExplorer/browser/serverTreeView.ts +++ b/src/sql/workbench/contrib/objectExplorer/browser/serverTreeView.ts @@ -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'; diff --git a/src/sql/workbench/contrib/resourceViewer/browser/resourceViewerTable.ts b/src/sql/workbench/contrib/resourceViewer/browser/resourceViewerTable.ts index 49b0ced882..1e1c1a856a 100644 --- a/src/sql/workbench/contrib/resourceViewer/browser/resourceViewerTable.ts +++ b/src/sql/workbench/contrib/resourceViewer/browser/resourceViewerTable.ts @@ -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 { diff --git a/src/sql/workbench/contrib/webview/browser/webViewDialog.ts b/src/sql/workbench/contrib/webview/browser/webViewDialog.ts index 647274daba..34cd4a45c6 100644 --- a/src/sql/workbench/contrib/webview/browser/webViewDialog.ts +++ b/src/sql/workbench/contrib/webview/browser/webViewDialog.ts @@ -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 { diff --git a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts index 58018048c9..c8c4608c45 100644 --- a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts +++ b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts @@ -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}; }`); } diff --git a/src/sql/workbench/services/accountManagement/browser/accountDialog.ts b/src/sql/workbench/services/accountManagement/browser/accountDialog.ts index 57cf948be5..9718f76e36 100644 --- a/src/sql/workbench/services/accountManagement/browser/accountDialog.ts +++ b/src/sql/workbench/services/accountManagement/browser/accountDialog.ts @@ -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'; diff --git a/src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts b/src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts index 7a94f19c74..027b7439ea 100644 --- a/src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts +++ b/src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts @@ -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(); diff --git a/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts b/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts index 35a5678ea8..53622385f1 100644 --- a/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts +++ b/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts @@ -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); diff --git a/src/sql/workbench/services/connection/browser/connectionWidget.ts b/src/sql/workbench/services/connection/browser/connectionWidget.ts index a3f6ece013..ea57d84cfb 100644 --- a/src/sql/workbench/services/connection/browser/connectionWidget.ts +++ b/src/sql/workbench/services/connection/browser/connectionWidget.ts @@ -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) { diff --git a/src/sql/workbench/services/dashboard/browser/newDashboardTabDialogImpl.ts b/src/sql/workbench/services/dashboard/browser/newDashboardTabDialogImpl.ts index f00a30baf5..ff58d6e022 100644 --- a/src/sql/workbench/services/dashboard/browser/newDashboardTabDialogImpl.ts +++ b/src/sql/workbench/services/dashboard/browser/newDashboardTabDialogImpl.ts @@ -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(); } diff --git a/src/sql/workbench/services/dialog/browser/dialogModal.ts b/src/sql/workbench/services/dialog/browser/dialogModal.ts index 673f275b48..0275e7b231 100644 --- a/src/sql/workbench/services/dialog/browser/dialogModal.ts +++ b/src/sql/workbench/services/dialog/browser/dialogModal.ts @@ -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); diff --git a/src/sql/workbench/services/dialog/browser/wizardModal.ts b/src/sql/workbench/services/dialog/browser/wizardModal.ts index 805202f477..16ff4f0c3b 100644 --- a/src/sql/workbench/services/dialog/browser/wizardModal.ts +++ b/src/sql/workbench/services/dialog/browser/wizardModal.ts @@ -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); diff --git a/src/sql/workbench/services/dialog/common/dialogTypes.ts b/src/sql/workbench/services/dialog/common/dialogTypes.ts index d98445ca64..cc58f9892e 100644 --- a/src/sql/workbench/services/dialog/common/dialogTypes.ts +++ b/src/sql/workbench/services/dialog/common/dialogTypes.ts @@ -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 = new Emitter(); public readonly onClick: Event = this._onClick.event; private _onUpdate: Emitter = new Emitter(); @@ -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 */ diff --git a/src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts b/src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts index 25deed7945..7930da9d1a 100644 --- a/src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts +++ b/src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts @@ -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; } diff --git a/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts b/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts index 84ea2c6f94..8188fcfbf3 100644 --- a/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts +++ b/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts @@ -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(); diff --git a/src/sql/workbench/services/insights/browser/insightsDialogView.ts b/src/sql/workbench/services/insights/browser/insightsDialogView.ts index 9ce96afd62..bf5c19072c 100644 --- a/src/sql/workbench/services/insights/browser/insightsDialogView.ts +++ b/src/sql/workbench/services/insights/browser/insightsDialogView.ts @@ -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)); diff --git a/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts b/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts index 3cfa15af16..a04941ba99 100644 --- a/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts +++ b/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts @@ -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)); diff --git a/src/sql/workbench/services/resourceProvider/browser/firewallRuleDialog.ts b/src/sql/workbench/services/resourceProvider/browser/firewallRuleDialog.ts index 68894d7dee..8ef1be4c6e 100644 --- a/src/sql/workbench/services/resourceProvider/browser/firewallRuleDialog.ts +++ b/src/sql/workbench/services/resourceProvider/browser/firewallRuleDialog.ts @@ -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(); } diff --git a/src/sql/workbench/services/restore/browser/restoreDialog.ts b/src/sql/workbench/services/restore/browser/restoreDialog.ts index 7cc7aa1162..32cfab331d 100644 --- a/src/sql/workbench/services/restore/browser/restoreDialog.ts +++ b/src/sql/workbench/services/restore/browser/restoreDialog.ts @@ -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'); diff --git a/src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts b/src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts index 2952604f26..b0d095d6aa 100644 --- a/src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts +++ b/src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts @@ -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(); } diff --git a/src/vs/base/browser/ui/button/button.ts b/src/vs/base/browser/ui/button/button.ts index 2c310a1794..09119090ca 100644 --- a/src/vs/base/browser/ui/button/button.ts +++ b/src/vs/base/browser/ui/button/button.ts @@ -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()); get onDidClick(): BaseEvent { 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() { diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index b38d1a20a4..bd2d4a03cd 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -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.")); diff --git a/src/vs/platform/theme/common/styler.ts b/src/vs/platform/theme/common/styler.ts index 081db91bea..9325e04f05 100644 --- a/src/vs/platform/theme/common/styler.ts +++ b/src/vs/platform/theme/common/styler.ts @@ -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); }