ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-25 09:35:37 -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

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

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

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

@@ -1,36 +1,47 @@
.form-table {
width:400px;
display:table;
padding: 30px;
width: 100%;
display: table;
padding: 10px 30px 0px 30px;
box-sizing: border-box;
}
.form-actions-table {
display:table;
display: table;
}
.form-row {
display: table-row;
width: 100px;
padding-bottom: 10px;
}
.form-item-row {
padding-bottom: 5px;
width: 300px;
}
.form-item-title {
padding-top: 20px;
.form-vertical-container {
padding-bottom: 15px;
width: 100%;
}
.form-cell {
padding-top: 20px;
padding-bottom: 20px;
padding-right: 5px;
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 {
padding-top: 5px;
padding-right: 5px;