ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Widen schema compare dialog dropdowns and textboxes (#5563)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

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

6
src/sql/workbench/electron-browser/modelComponents/formContainer.component.ts
View File

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

4
src/sql/workbench/electron-browser/modelComponents/media/formLayout.css
View File

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