Widen schema compare dialog dropdowns and textboxes (#5563)

* widen dialog dropdowns and textboxes

* change padding

* add min-width for labels to match connection pane
This commit is contained in:
kisantia
2019-05-22 11:55:12 -07:00
committed by GitHub
parent 65e59dc57d
commit ef2bbce34b
3 changed files with 25 additions and 9 deletions

View File

@@ -189,7 +189,7 @@ export class SchemaCompareDialog {
// if schema compare was launched from a db context menu, set that db as the source
if (this.database) {
this.formBuilder = view.modelBuilder.formContainer()
this.formBuilder = <azdata.FormBuilder>view.modelBuilder.formContainer()
.withFormItems([
{
title: SourceTitle,
@@ -208,9 +208,13 @@ export class SchemaCompareDialog {
], {
horizontal: true,
titleFontSize: titleFontSize
});
})
.withLayout({
width: '100%',
padding: '10px 10px 0 30px'
});
} else {
this.formBuilder = view.modelBuilder.formContainer()
this.formBuilder = <azdata.FormBuilder>view.modelBuilder.formContainer()
.withFormItems([
{
title: SourceTitle,
@@ -228,7 +232,11 @@ export class SchemaCompareDialog {
], {
horizontal: true,
titleFontSize: titleFontSize
});
})
.withLayout({
width: '100%',
padding: '10px 10px 0 30px'
});
}
let formModel = this.formBuilder.component();
await view.initializeModel(formModel);
@@ -306,8 +314,8 @@ export class SchemaCompareDialog {
databaseRadioButton.onDidClick(() => {
this.sourceIsDacpac = false;
if ((this.sourceServerDropdown.value as ConnectionDropdownValue)) {
this.formBuilder.insertFormItem(this.sourceServerComponent, 2, { horizontal: true, componentWidth: 300, titleFontSize: titleFontSize });
this.formBuilder.insertFormItem(this.sourceDatabaseComponent, 3, { horizontal: true, componentWidth: 300, titleFontSize: titleFontSize });
this.formBuilder.insertFormItem(this.sourceServerComponent, 2, { horizontal: true, titleFontSize: titleFontSize });
this.formBuilder.insertFormItem(this.sourceDatabaseComponent, 3, { horizontal: true, titleFontSize: titleFontSize });
} else {
this.formBuilder.insertFormItem(this.sourceNoActiveConnectionsText, 2, { horizontal: true, titleFontSize: titleFontSize });
}
@@ -361,8 +369,8 @@ export class SchemaCompareDialog {
this.targetIsDacpac = false;
this.formBuilder.removeFormItem(this.targetDacpacComponent);
if ((this.targetServerDropdown.value as ConnectionDropdownValue)) {
this.formBuilder.addFormItem(this.targetServerComponent, { horizontal: true, componentWidth: 300, titleFontSize: titleFontSize });
this.formBuilder.addFormItem(this.targetDatabaseComponent, { horizontal: true, componentWidth: 300, titleFontSize: titleFontSize });
this.formBuilder.addFormItem(this.targetServerComponent, { horizontal: true, titleFontSize: titleFontSize });
this.formBuilder.addFormItem(this.targetDatabaseComponent, { horizontal: true, titleFontSize: titleFontSize });
} else {
this.formBuilder.addFormItem(this.targetNoActiveConnectionsText, { horizontal: true, titleFontSize: titleFontSize });
}

View File

@@ -50,7 +50,7 @@ class FormItem {
<div class="form-row" *ngIf="isFormComponent(item)" [style.height]="getRowHeight(item)">
<ng-container *ngIf="isHorizontal(item)">
<div class="form-cell" [style.font-size]="getItemTitleFontSize(item)" [ngClass]="{'form-group-item': isInGroup(item)}">
<div *ngIf="hasItemTitle(item)" class="form-cell form-cell-title" [style.font-size]="getItemTitleFontSize(item)" [ngClass]="{'form-group-item': isInGroup(item)}">
{{getItemTitle(item)}}<span class="form-required" *ngIf="isItemRequired(item)">*</span>
<span class="icon help form-info" *ngIf="itemHasInfo(item)" [title]="getItemInfo(item)"></span>
</div>
@@ -175,6 +175,10 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
return itemConfig ? itemConfig.title : '';
}
private hasItemTitle(item: FormItem): boolean {
return this.getItemTitle(item) !== '';
}
private getItemTitleFontSize(item: FormItem): string {
let defaultFontSize = '14px';
if (this.isInGroup(item)) {

View File

@@ -32,6 +32,10 @@
display: table-cell;
}
.form-cell-title {
min-width: 129px; /* 129px + 5px padding right = 134px to match the connection pane label widths*/
}
.form-component-container {
display: flex;
flex-direction: row;