ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 18:46:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

OptionsDialog and buttons CSS styling updates (#19792)

Browse Source 
* OptionsDialog and buttons CSS styling updates

* final css changes for sql db options tab

* modified options button into itmes list

* updated tab name

* Added removed line git blame
This commit is contained in:
Sai Avishkar Sreerama
2022-07-08 09:50:00 -05:00
committed by GitHub
parent eec944ff7d
commit 985f9b03c5
4 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
extensions/sql-database-projects/src/common/constants.ts
View File

@@ -146,9 +146,9 @@ export const done = localize('done', "Done");
export const nameMustNotBeEmpty = localize('nameMustNotBeEmpty', "Name must not be empty"); export const nameMustNotBeEmpty = localize('nameMustNotBeEmpty', "Name must not be empty");
// Publish Dialog options // Publish Dialog options
export const publishOptions = localize('publishOptions', 'Publish Options'); export const AdvancedOptionsButton = localize('advancedOptionsButton', 'Advanced...');
export const publishingOptions = localize('publishingOptions', 'Publishing Options'); export const AdvancedPublishOptions = localize('advancedPublishOptions', 'Advanced Publish Options');
export const GeneralOptions: string = localize('generalOptions', "General Options"); export const PublishOptions = localize('publishOptions', 'Publish Options');
export const ResetButton: string = localize('reset', "Reset"); export const ResetButton: string = localize('reset', "Reset");
export const OptionDescription: string = localize('optionDescription', "Option Description"); export const OptionDescription: string = localize('optionDescription', "Option Description");
export const OptionName: string = localize('optionName', "Option Name"); export const OptionName: string = localize('optionName', "Option Name");

2
extensions/sql-database-projects/src/common/uiConstants.ts
View File

@@ -14,7 +14,7 @@ export namespace cssStyles {
export const publishDialogLabelWidth = '205px'; export const publishDialogLabelWidth = '205px';
export const publishDialogTextboxWidth = '190px'; export const publishDialogTextboxWidth = '190px';
export const publishDialogDropdownWidth = '192px'; export const publishDialogDropdownWidth = '192px';
export const PublishingOptionsButtonWidth = '120px'; export const PublishingOptionsButtonWidth = '100px';
export const addDatabaseReferenceDialogLabelWidth = '215px'; export const addDatabaseReferenceDialogLabelWidth = '215px';
export const addDatabaseReferenceInputboxWidth = '220px'; export const addDatabaseReferenceInputboxWidth = '220px';

10
extensions/sql-database-projects/src/dialogs/publishDatabaseDialog.ts
View File

@@ -146,7 +146,7 @@ export class PublishDatabaseDialog {
const displayOptionsButton = this.createOptionsButton(view); const displayOptionsButton = this.createOptionsButton(view);
const horizontalFormSection = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component(); const horizontalFormSection = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component();
horizontalFormSection.addItems([profileRow, this.databaseRow, displayOptionsButton]); horizontalFormSection.addItems([profileRow, this.databaseRow]);
this.formBuilder = <azdataType.FormBuilder>view.modelBuilder.formContainer() this.formBuilder = <azdataType.FormBuilder>view.modelBuilder.formContainer()
.withFormItems([ .withFormItems([
@@ -170,6 +170,10 @@ export class PublishDatabaseDialog {
title: constants.selectConnectionRadioButtonsTitle, title: constants.selectConnectionRadioButtonsTitle,
component: selectConnectionRadioButtons component: selectConnectionRadioButtons
},*/ },*/
{
component: displayOptionsButton,
title: ''
}
] ]
} }
], { ], {
@@ -906,12 +910,12 @@ export class PublishDatabaseDialog {
*/ */
private createOptionsButton(view: azdataType.ModelView): azdataType.FlexContainer { private createOptionsButton(view: azdataType.ModelView): azdataType.FlexContainer {
this.optionsButton = view.modelBuilder.button().withProps({ this.optionsButton = view.modelBuilder.button().withProps({
label: constants.publishingOptions, label: constants.AdvancedOptionsButton,
secondary: true, secondary: true,
width: cssStyles.PublishingOptionsButtonWidth width: cssStyles.PublishingOptionsButtonWidth
}).component(); }).component();
const optionsRow = view.modelBuilder.flexContainer().withItems([this.optionsButton], { CSSStyles: { flex: '0 0 auto', 'margin': '6px 0 0 287px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component(); const optionsRow = view.modelBuilder.flexContainer().withItems([this.optionsButton], { CSSStyles: { flex: '0 0 auto', 'margin': '-8px 0 0 307px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component();
this.toDispose.push(this.optionsButton.onDidClick(async () => { this.toDispose.push(this.optionsButton.onDidClick(async () => {
TelemetryReporter.sendActionEvent(TelemetryViews.SqlProjectPublishDialog, TelemetryActions.publishOptionsOpened); TelemetryReporter.sendActionEvent(TelemetryViews.SqlProjectPublishDialog, TelemetryActions.publishOptionsOpened);

9
extensions/sql-database-projects/src/dialogs/publishOptionsDialog.ts
View File

@@ -29,13 +29,13 @@ export class PublishOptionsDialog {
} }
protected initializeDialog(): void { protected initializeDialog(): void {
this.optionsTab = utils.getAzdataApi()!.window.createTab(constants.publishOptions); this.optionsTab = utils.getAzdataApi()!.window.createTab(constants.PublishOptions);
this.intializeDeploymentOptionsDialogTab(); this.intializeDeploymentOptionsDialogTab();
this.dialog.content = [this.optionsTab]; this.dialog.content = [this.optionsTab];
} }
public openDialog(): void { public openDialog(): void {
this.dialog = utils.getAzdataApi()!.window.createModelViewDialog(constants.publishOptions); this.dialog = utils.getAzdataApi()!.window.createModelViewDialog(constants.AdvancedPublishOptions);
this.initializeDialog(); this.initializeDialog();
@@ -99,7 +99,7 @@ export class PublishOptionsDialog {
flexFlow: 'column' flexFlow: 'column'
}).component(); }).component();
this.optionsFlexBuilder.addItem(this.optionsTable, { CSSStyles: { 'overflow': 'scroll', 'height': '65vh' } }); this.optionsFlexBuilder.addItem(this.optionsTable, { CSSStyles: { 'overflow': 'scroll', 'height': '65vh', 'padding-top': '2px' } });
this.optionsFlexBuilder.addItem(this.descriptionHeading, { CSSStyles: { 'font-weight': 'bold', 'height': '30px' } }); this.optionsFlexBuilder.addItem(this.descriptionHeading, { CSSStyles: { 'font-weight': 'bold', 'height': '30px' } });
this.optionsFlexBuilder.addItem(this.descriptionText, { CSSStyles: { 'padding': '4px', 'margin-right': '10px', 'overflow': 'scroll', 'height': '10vh' } }); this.optionsFlexBuilder.addItem(this.descriptionText, { CSSStyles: { 'padding': '4px', 'margin-right': '10px', 'overflow': 'scroll', 'height': '10vh' } });
await view.initializeModel(this.optionsFlexBuilder); await view.initializeModel(this.optionsFlexBuilder);
@@ -170,8 +170,7 @@ export class PublishOptionsDialog {
await this.updateOptionsTable(); await this.updateOptionsTable();
this.optionsFlexBuilder?.removeItem(this.optionsTable!); this.optionsFlexBuilder?.removeItem(this.optionsTable!);
this.optionsFlexBuilder?.insertItem(this.optionsTable!, 0, { CSSStyles: { 'overflow': 'scroll', 'height': '65vh' } }); this.optionsFlexBuilder?.insertItem(this.optionsTable!, 0, { CSSStyles: { 'overflow': 'scroll', 'height': '65vh', 'padding-top': '2px' } });
TelemetryReporter.sendActionEvent(TelemetryViews.PublishOptionsDialog, TelemetryActions.resetOptions); TelemetryReporter.sendActionEvent(TelemetryViews.PublishOptionsDialog, TelemetryActions.resetOptions);
} }