mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-15 17:22:25 -05:00
Update Import UI to match other UIs (#13637)
* Update Import UI to match other UIs * Fixed another bug
This commit is contained in:
@@ -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");
|
||||
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user