align with portal button style (#14187)

* align with portal button style

* fix welcome page

* image button

* more fixes

* use withProperties

* add comment back

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

View File

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

View File

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

View File

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

View File

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