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

Fix form layout spacing (#1401)

Browse Source
This commit is contained in:
Matt Irvine
2018-05-14 11:06:50 -07:00
committed by GitHub
parent 41ffd6e8ae
commit 3aaf8a24bf
2 changed files with 42 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/sql/parts/modelComponents/formContainer.component.ts
View File

@@ -37,34 +37,34 @@ class FormItem {
<ng-container *ngIf="isFormComponent(item)"> <ng-container *ngIf="isFormComponent(item)">
<ng-container *ngIf="isHorizontal(item)"> <ng-container *ngIf="isHorizontal(item)">
<div class="form-cell">{{getItemTitle(item)}}</div> <div class="form-cell">{{getItemTitle(item)}}</div>
<div class="form-cell" [style.width]="getComponentWidth(item)"> <div class="form-cell">
<div class="form-component-container">
<div [style.width]="getComponentWidth(item)" [ngClass]="{'form-input-flex': !getComponentWidth(item)}">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore"> <model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
</model-component-wrapper> </model-component-wrapper>
</div> </div>
<div *ngIf="itemHasActions(item)" class="form-cell"> <div *ngIf="itemHasActions(item)" class="form-component-actions">
<div class="form-actions-table"> <ng-container *ngFor="let actionItem of getActionComponents(item)">
<div *ngFor="let actionItem of getActionComponents(item)" class="form-cell" >
<model-component-wrapper [descriptor]="actionItem.descriptor" [modelStore]="modelStore" > <model-component-wrapper [descriptor]="actionItem.descriptor" [modelStore]="modelStore" >
</model-component-wrapper> </model-component-wrapper>
</ng-container>
</div> </div>
</div> </div>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="isVertical(item)"> <div class="form-vertical-container" *ngIf="isVertical(item)">
<div class="form-item-row form-item-title">{{getItemTitle(item)}}</div> <div class="form-item-row">{{getItemTitle(item)}}</div>
<div class="form-item-row" [style.width]="getComponentWidth(item)"> <div class="form-item-row" [style.width]="getComponentWidth(item)">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)"> <model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)">
</model-component-wrapper> </model-component-wrapper>
</div> </div>
<div *ngIf="itemHasActions(item)" class="form-actions-table"> <div *ngIf="itemHasActions(item)" class="form-item-row form-actions-table form-item-last-row">
<div *ngFor="let actionItem of getActionComponents(item)" class="form-actions-cell" > <div *ngFor="let actionItem of getActionComponents(item)" class="form-actions-cell" >
<model-component-wrapper [descriptor]="actionItem.descriptor" [modelStore]="modelStore"> <model-component-wrapper [descriptor]="actionItem.descriptor" [modelStore]="modelStore">
</model-component-wrapper> </model-component-wrapper>
</div> </div>
</div> </div>
</ng-container> </div>
</ng-container> </ng-container>
</div> </div>
</ng-container> </ng-container>
@@ -118,12 +118,12 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
private getFormWidth(item: FormItem): string { private getFormWidth(item: FormItem): string {
let itemConfig = item.config; let itemConfig = item.config;
return itemConfig && itemConfig.width ? +itemConfig.width + 'px' : '400px'; return itemConfig && itemConfig.width ? +itemConfig.width + 'px' : '100%';
} }
private getComponentWidth(item: FormItem): string { private getComponentWidth(item: FormItem): string {
let itemConfig = item.config; let itemConfig = item.config;
return itemConfig ? itemConfig.componentWidth + 'px' : ''; return (itemConfig && itemConfig.componentWidth) ? itemConfig.componentWidth + 'px' : '';
} }
private getItemTitle(item: FormItem): string { private getItemTitle(item: FormItem): string {

29
src/sql/parts/modelComponents/formLayout.css
View File

@@ -1,8 +1,9 @@
.form-table { .form-table {
width:400px; width: 100%;
display: table; display: table;
padding: 30px; padding: 10px 30px 0px 30px;
box-sizing: border-box;
} }
.form-actions-table { .form-actions-table {
@@ -11,26 +12,36 @@
.form-row { .form-row {
display: table-row; display: table-row;
width: 100px;
padding-bottom: 10px;
} }
.form-item-row { .form-item-row {
padding-bottom: 5px; padding-bottom: 5px;
width: 300px;
} }
.form-item-title { .form-vertical-container {
padding-bottom: 15px;
padding-top: 20px; width: 100%;
} }
.form-cell { .form-cell {
padding-top: 20px; padding-bottom: 20px;
padding-right: 5px; padding-right: 5px;
display: table-cell; display: table-cell;
} }
.form-component-container {
display: flex;
flex-direction: row;
}
.form-input-flex {
flex: 1;
}
.form-component-actions {
padding-left: 5px;
}
.form-actions-cell { .form-actions-cell {
padding-top: 5px; padding-top: 5px;
padding-right: 5px; padding-right: 5px;