Update Import UI to match other UIs (#13637)

* 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

View File

@@ -122,7 +122,7 @@ export const databaseProject = localize('databaseProject', "Database project");
// 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 sourceDatabase = localize('sourceDatabase', "Source database");
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 projectNamePlaceholderText = localize('projectNamePlaceholderText', "Enter project name");
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 folderStructureLabel = localize('folderStructureLabel', "Folder structure");

View File

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

View File

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

View File

@@ -289,7 +289,7 @@ export class PublishDatabaseDialog {
value: '',
ariaLabel: constants.targetConnectionLabel,
placeHolder: constants.selectConnection,
width: cssStyles.textboxWidth,
width: cssStyles.publishDialogTextboxWidth,
enabled: false
}).component();
@@ -353,12 +353,12 @@ export class PublishDatabaseDialog {
this.loadProfileTextBox = view.modelBuilder.inputBox().withProperties({
placeHolder: constants.loadProfilePlaceholderText,
ariaLabel: constants.profile,
width: cssStyles.textboxWidth
width: cssStyles.publishDialogTextboxWidth
}).component();
const profileLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
value: constants.profile,
width: cssStyles.labelWidth
width: cssStyles.publishDialogLabelWidth
}).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>({
value: constants.server,
requiredIndicator: true,
width: cssStyles.labelWidth
width: cssStyles.publishDialogLabelWidth
}).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(),
ariaLabel: constants.databaseNameLabel,
required: true,
width: cssStyles.textboxWidth,
width: cssStyles.publishDialogTextboxWidth,
editable: true,
fireOnTextChange: true
}).component();
@@ -401,7 +401,7 @@ export class PublishDatabaseDialog {
const databaseLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
value: constants.databaseNameLabel,
requiredIndicator: true,
width: cssStyles.labelWidth
width: cssStyles.publishDialogLabelWidth
}).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();