ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-15 17:22:25 -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");
// Publish Dialog options
export const publishOptions = localize('publishOptions', 'Publish Options');
export const publishingOptions = localize('publishingOptions', 'Publishing Options');
export const GeneralOptions: string = localize('generalOptions', "General Options");
export const AdvancedOptionsButton = localize('advancedOptionsButton', 'Advanced...');
export const AdvancedPublishOptions = localize('advancedPublishOptions', 'Advanced Publish Options');
export const PublishOptions = localize('publishOptions', 'Publish Options');
export const ResetButton: string = localize('reset', "Reset");
export const OptionDescription: string = localize('optionDescription', "Option Description");
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 publishDialogTextboxWidth = '190px';
export const publishDialogDropdownWidth = '192px';
export const PublishingOptionsButtonWidth = '120px';
export const PublishingOptionsButtonWidth = '100px';
export const addDatabaseReferenceDialogLabelWidth = '215px';
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 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()
.withFormItems([
@@ -170,6 +170,10 @@ export class PublishDatabaseDialog {
title: constants.selectConnectionRadioButtonsTitle,
component: selectConnectionRadioButtons
},*/
{
component: displayOptionsButton,
title: ''
}
]
}
], {
@@ -906,12 +910,12 @@ export class PublishDatabaseDialog {
*/
private createOptionsButton(view: azdataType.ModelView): azdataType.FlexContainer {
this.optionsButton = view.modelBuilder.button().withProps({
label: constants.publishingOptions,
label: constants.AdvancedOptionsButton,
secondary: true,
width: cssStyles.PublishingOptionsButtonWidth
}).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 () => {
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 {
this.optionsTab = utils.getAzdataApi()!.window.createTab(constants.publishOptions);
this.optionsTab = utils.getAzdataApi()!.window.createTab(constants.PublishOptions);
this.intializeDeploymentOptionsDialogTab();
this.dialog.content = [this.optionsTab];
}
public openDialog(): void {
this.dialog = utils.getAzdataApi()!.window.createModelViewDialog(constants.publishOptions);
this.dialog = utils.getAzdataApi()!.window.createModelViewDialog(constants.AdvancedPublishOptions);
this.initializeDialog();
@@ -99,7 +99,7 @@ export class PublishOptionsDialog {
flexFlow: 'column'
}).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.descriptionText, { CSSStyles: { 'padding': '4px', 'margin-right': '10px', 'overflow': 'scroll', 'height': '10vh' } });
await view.initializeModel(this.optionsFlexBuilder);
@@ -170,8 +170,7 @@ export class PublishOptionsDialog {
await this.updateOptionsTable();
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);
}