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

Update Import UI to match other UIs (#13637)

Browse Source 
* Update Import UI to match other UIs

* Fixed another bug
This commit is contained in:
Sakshi Sharma
2020-12-03 13:30:47 -08:00
committed by GitHub
parent f69dc6a445
commit 4d3443c192
4 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -122,7 +122,7 @@ export const databaseProject = localize('databaseProject', "Database project");
// Create Project From Database dialog strings // Create Project From Database dialog strings
export const createProjectFromDatabaseDialogName = localize('createProjectFromDatabaseDialogName', "Create Project From Database"); export const createProjectFromDatabaseDialogName = localize('createProjectFromDatabaseDialogName', "Create project from database");
export const createProjectDialogOkButtonText = localize('createProjectDialogOkButtonText', "Create"); export const createProjectDialogOkButtonText = localize('createProjectDialogOkButtonText', "Create");
export const sourceDatabase = localize('sourceDatabase', "Source database"); export const sourceDatabase = localize('sourceDatabase', "Source database");
export const targetProject = localize('targetProject', "Target project"); export const targetProject = localize('targetProject', "Target project");
@@ -130,7 +130,7 @@ export const createProjectSettings = localize('createProjectSettings', "Settings
export const projectNameLabel = localize('projectNameLabel', "Name"); export const projectNameLabel = localize('projectNameLabel', "Name");
export const projectNamePlaceholderText = localize('projectNamePlaceholderText', "Enter project name"); export const projectNamePlaceholderText = localize('projectNamePlaceholderText', "Enter project name");
export const projectLocationLabel = localize('projectLocationLabel', "Location"); export const projectLocationLabel = localize('projectLocationLabel', "Location");
export const projectLocationPlaceholderText = localize('projectLocationPlaceholderText', "Enter project location"); export const projectLocationPlaceholderText = localize('projectLocationPlaceholderText', "Select location to create project");
export const browseButtonText = localize('browseButtonText', "Browse folder"); export const browseButtonText = localize('browseButtonText', "Browse folder");
export const folderStructureLabel = localize('folderStructureLabel', "Folder structure"); export const folderStructureLabel = localize('folderStructureLabel', "Folder structure");

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

@@ -11,12 +11,15 @@ export namespace cssStyles {
export const fontWeightBold = { 'font-weight': 'bold' }; export const fontWeightBold = { 'font-weight': 'bold' };
export const titleFontSize = 13; export const titleFontSize = 13;
export const labelWidth = '205px'; export const publishDialogLabelWidth = '205px';
export const textboxWidth = '190px'; export const publishDialogTextboxWidth = '190px';
export const addDatabaseReferenceDialogLabelWidth = '215px'; export const addDatabaseReferenceDialogLabelWidth = '215px';
export const addDatabaseReferenceInputboxWidth = '220px'; export const addDatabaseReferenceInputboxWidth = '220px';
export const createProjectFromDatabaseLabelWidth = '110px';
export const createProjectFromDatabaseTextboxWidth = '320px';
// font-styles // font-styles
export namespace fontStyle { export namespace fontStyle {
export const normal = 'normal'; export const normal = 'normal';

37
extensions/sql-database-projects/src/dialogs/createProjectFromDatabaseDialog.ts
View File

@@ -112,7 +112,8 @@ export class CreateProjectFromDatabaseDialog {
titleFontSize: cssStyles.titleFontSize titleFontSize: cssStyles.titleFontSize
}) })
.withLayout({ .withLayout({
width: '100%' width: '100%',
padding: '10px 10px 0 20px'
}); });
let formModel = this.formBuilder.component(); let formModel = this.formBuilder.component();
@@ -129,12 +130,11 @@ export class CreateProjectFromDatabaseDialog {
const serverLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ const serverLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
value: constants.server, value: constants.server,
requiredIndicator: true, requiredIndicator: true,
width: cssStyles.labelWidth, width: cssStyles.createProjectFromDatabaseLabelWidth
CSSStyles: cssStyles.fontWeightBold
}).component(); }).component();
const connectionRow = view.modelBuilder.flexContainer().withItems([serverLabel, sourceConnectionTextBox], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px', 'margin-bottom': '-10px', 'margin-top': '-20px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component(); const connectionRow = view.modelBuilder.flexContainer().withItems([serverLabel, sourceConnectionTextBox], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px', 'margin-bottom': '-5px', 'margin-top': '-10px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component();
connectionRow.insertItem(selectConnectionButton, 2, { CSSStyles: { 'margin-right': '0px', 'margin-bottom': '-10px', 'margin-top': '-20px' } }); connectionRow.insertItem(selectConnectionButton, 2, { CSSStyles: { 'margin-right': '0px', 'margin-bottom': '-5px', 'margin-top': '-10px' } });
return connectionRow; return connectionRow;
} }
@@ -143,7 +143,7 @@ export class CreateProjectFromDatabaseDialog {
this.sourceDatabaseDropDown = view.modelBuilder.dropDown().withProperties({ this.sourceDatabaseDropDown = view.modelBuilder.dropDown().withProperties({
ariaLabel: constants.databaseNameLabel, ariaLabel: constants.databaseNameLabel,
required: true, required: true,
width: cssStyles.textboxWidth, width: cssStyles.createProjectFromDatabaseTextboxWidth,
editable: true, editable: true,
fireOnTextChange: true fireOnTextChange: true
}).component(); }).component();
@@ -156,8 +156,7 @@ export class CreateProjectFromDatabaseDialog {
const databaseLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ const databaseLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
value: constants.databaseNameLabel, value: constants.databaseNameLabel,
requiredIndicator: true, requiredIndicator: true,
width: cssStyles.labelWidth, width: cssStyles.createProjectFromDatabaseLabelWidth
CSSStyles: cssStyles.fontWeightBold
}).component(); }).component();
const databaseRow = view.modelBuilder.flexContainer().withItems([databaseLabel, <azdata.DropDownComponent>this.sourceDatabaseDropDown], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px', 'margin-bottom': '-10px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component(); const databaseRow = view.modelBuilder.flexContainer().withItems([databaseLabel, <azdata.DropDownComponent>this.sourceDatabaseDropDown], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px', 'margin-bottom': '-10px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component();
@@ -173,7 +172,7 @@ export class CreateProjectFromDatabaseDialog {
this.sourceConnectionTextBox = view.modelBuilder.inputBox().withProperties({ this.sourceConnectionTextBox = view.modelBuilder.inputBox().withProperties({
value: '', value: '',
placeHolder: constants.selectConnection, placeHolder: constants.selectConnection,
width: cssStyles.textboxWidth, width: cssStyles.createProjectFromDatabaseTextboxWidth,
enabled: false enabled: false
}).component(); }).component();
@@ -229,8 +228,9 @@ export class CreateProjectFromDatabaseDialog {
private createProjectNameRow(view: azdata.ModelView): azdata.FlexContainer { private createProjectNameRow(view: azdata.ModelView): azdata.FlexContainer {
this.projectNameTextBox = view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({ this.projectNameTextBox = view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
ariaLabel: constants.projectNamePlaceholderText, ariaLabel: constants.projectNamePlaceholderText,
placeHolder: constants.projectNamePlaceholderText,
required: true, required: true,
width: cssStyles.textboxWidth, width: cssStyles.createProjectFromDatabaseTextboxWidth,
validationErrorMessage: constants.projectNameRequired validationErrorMessage: constants.projectNameRequired
}).component(); }).component();
@@ -242,11 +242,10 @@ export class CreateProjectFromDatabaseDialog {
const projectNameLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ const projectNameLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
value: constants.projectNameLabel, value: constants.projectNameLabel,
requiredIndicator: true, requiredIndicator: true,
width: cssStyles.labelWidth, width: cssStyles.createProjectFromDatabaseLabelWidth
CSSStyles: cssStyles.fontWeightBold
}).component(); }).component();
const projectNameRow = view.modelBuilder.flexContainer().withItems([projectNameLabel, this.projectNameTextBox], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px', 'margin-bottom': '-10px', 'margin-top': '-20px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component(); const projectNameRow = view.modelBuilder.flexContainer().withItems([projectNameLabel, this.projectNameTextBox], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px', 'margin-bottom': '-5px', 'margin-top': '-10px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component();
return projectNameRow; return projectNameRow;
} }
@@ -258,7 +257,7 @@ export class CreateProjectFromDatabaseDialog {
value: '', value: '',
ariaLabel: constants.projectLocationLabel, ariaLabel: constants.projectLocationLabel,
placeHolder: constants.projectLocationPlaceholderText, placeHolder: constants.projectLocationPlaceholderText,
width: cssStyles.textboxWidth, width: cssStyles.createProjectFromDatabaseTextboxWidth,
validationErrorMessage: constants.projectLocationRequired validationErrorMessage: constants.projectLocationRequired
}).component(); }).component();
@@ -270,8 +269,7 @@ export class CreateProjectFromDatabaseDialog {
const projectLocationLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ const projectLocationLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
value: constants.projectLocationLabel, value: constants.projectLocationLabel,
requiredIndicator: true, requiredIndicator: true,
width: cssStyles.labelWidth, width: cssStyles.createProjectFromDatabaseLabelWidth
CSSStyles: cssStyles.fontWeightBold
}).component(); }).component();
const projectLocationRow = view.modelBuilder.flexContainer().withItems([projectLocationLabel, this.projectLocationTextBox], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px', 'margin-bottom': '-10px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component(); const projectLocationRow = view.modelBuilder.flexContainer().withItems([projectLocationLabel, this.projectLocationTextBox], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px', 'margin-bottom': '-10px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component();
@@ -313,7 +311,7 @@ export class CreateProjectFromDatabaseDialog {
value: constants.schemaObjectType, value: constants.schemaObjectType,
ariaLabel: constants.folderStructureLabel, ariaLabel: constants.folderStructureLabel,
required: true, required: true,
width: cssStyles.textboxWidth width: cssStyles.createProjectFromDatabaseTextboxWidth
}).component(); }).component();
this.folderStructureDropDown.onValueChanged(() => { this.folderStructureDropDown.onValueChanged(() => {
@@ -323,11 +321,10 @@ export class CreateProjectFromDatabaseDialog {
const folderStructureLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ const folderStructureLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
value: constants.folderStructureLabel, value: constants.folderStructureLabel,
requiredIndicator: true, requiredIndicator: true,
width: cssStyles.labelWidth, width: cssStyles.createProjectFromDatabaseLabelWidth
CSSStyles: cssStyles.fontWeightBold
}).component(); }).component();
const folderStructureRow = view.modelBuilder.flexContainer().withItems([folderStructureLabel, <azdata.DropDownComponent>this.folderStructureDropDown], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px', 'margin-top': '-20px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component(); const folderStructureRow = view.modelBuilder.flexContainer().withItems([folderStructureLabel, <azdata.DropDownComponent>this.folderStructureDropDown], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px', 'margin-top': '-10px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component();
return folderStructureRow; return folderStructureRow;
} }

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

@@ -289,7 +289,7 @@ export class PublishDatabaseDialog {
value: '', value: '',
ariaLabel: constants.targetConnectionLabel, ariaLabel: constants.targetConnectionLabel,
placeHolder: constants.selectConnection, placeHolder: constants.selectConnection,
width: cssStyles.textboxWidth, width: cssStyles.publishDialogTextboxWidth,
enabled: false enabled: false
}).component(); }).component();
@@ -353,12 +353,12 @@ export class PublishDatabaseDialog {
this.loadProfileTextBox = view.modelBuilder.inputBox().withProperties({ this.loadProfileTextBox = view.modelBuilder.inputBox().withProperties({
placeHolder: constants.loadProfilePlaceholderText, placeHolder: constants.loadProfilePlaceholderText,
ariaLabel: constants.profile, ariaLabel: constants.profile,
width: cssStyles.textboxWidth width: cssStyles.publishDialogTextboxWidth
}).component(); }).component();
const profileLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ const profileLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
value: constants.profile, value: constants.profile,
width: cssStyles.labelWidth width: cssStyles.publishDialogLabelWidth
}).component(); }).component();
const profileRow = view.modelBuilder.flexContainer().withItems([profileLabel, this.loadProfileTextBox], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component(); const profileRow = view.modelBuilder.flexContainer().withItems([profileLabel, this.loadProfileTextBox], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component();
@@ -374,7 +374,7 @@ export class PublishDatabaseDialog {
const serverLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ const serverLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
value: constants.server, value: constants.server,
requiredIndicator: true, requiredIndicator: true,
width: cssStyles.labelWidth width: cssStyles.publishDialogLabelWidth
}).component(); }).component();
const connectionRow = view.modelBuilder.flexContainer().withItems([serverLabel, this.targetConnectionTextBox], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component(); const connectionRow = view.modelBuilder.flexContainer().withItems([serverLabel, this.targetConnectionTextBox], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component();
@@ -389,7 +389,7 @@ export class PublishDatabaseDialog {
value: this.getDefaultDatabaseName(), value: this.getDefaultDatabaseName(),
ariaLabel: constants.databaseNameLabel, ariaLabel: constants.databaseNameLabel,
required: true, required: true,
width: cssStyles.textboxWidth, width: cssStyles.publishDialogTextboxWidth,
editable: true, editable: true,
fireOnTextChange: true fireOnTextChange: true
}).component(); }).component();
@@ -401,7 +401,7 @@ export class PublishDatabaseDialog {
const databaseLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ const databaseLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
value: constants.databaseNameLabel, value: constants.databaseNameLabel,
requiredIndicator: true, requiredIndicator: true,
width: cssStyles.labelWidth width: cssStyles.publishDialogLabelWidth
}).component(); }).component();
const databaseRow = view.modelBuilder.flexContainer().withItems([databaseLabel, <azdata.DropDownComponent>this.targetDatabaseDropDown], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component(); const databaseRow = view.modelBuilder.flexContainer().withItems([databaseLabel, <azdata.DropDownComponent>this.targetDatabaseDropDown], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component();