mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
8 years ago
10 changed files with 185 additions and 305 deletions
@ -1,128 +1,64 @@ |
|||||
<div class="modal-dialog modal-lg"> |
<form [formGroup]="addFieldForm.form" (ngSubmit)="addField(false)"> |
||||
<div class="modal-content" *ngIf="!editForm"> |
<sqx-modal-dialog (close)="complete()"> |
||||
<form [formGroup]="addFieldForm" (ngSubmit)="addField(false, false)"> |
<ng-container title> |
||||
<div class="modal-header"> |
Create Field |
||||
<h4 class="modal-title"> |
</ng-container> |
||||
Create Field |
|
||||
</h4> |
|
||||
|
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="complete()"> |
|
||||
<span aria-hidden="true">×</span> |
|
||||
</button> |
|
||||
</div> |
|
||||
|
|
||||
<div class="modal-body"> |
<ng-container content> |
||||
<h3 class="wizard-title">Create Field</h3> |
<ng-container *ngIf="addFieldForm.error | async; let error"> |
||||
|
<div class="form-alert form-alert-error" [innerHTML]="error"></div> |
||||
<div *ngIf="addFieldError"> |
</ng-container> |
||||
<div class="form-alert form-alert-error" [innerHTML]="addFieldError"></div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="form-group"> |
<div class="form-group"> |
||||
<div class="row"> |
<div class="row"> |
||||
<div class="col-4 type" *ngFor="let fieldType of fieldTypes"> |
<div class="col-4 type" *ngFor="let fieldType of fieldTypes"> |
||||
<label> |
<label> |
||||
<input type="radio" class="radio-input" formControlName="type" value="{{fieldType.type}}" /> |
<input type="radio" class="radio-input" formControlName="type" value="{{fieldType.type}}" /> |
||||
|
|
||||
<div class="row no-gutters"> |
<div class="row no-gutters"> |
||||
<div class="col col-auto"> |
<div class="col col-auto"> |
||||
<div class="type-icon" [class.active]="addFieldForm.controls.type.value === fieldType.type"> |
<div class="type-icon" [class.active]="addFieldForm.form.controls.type.value === fieldType.type"> |
||||
<i class="icon-type-{{fieldType.type}}"></i> |
<i class="icon-type-{{fieldType.type}}"></i> |
||||
</div> |
|
||||
</div> |
|
||||
<div class="col"> |
|
||||
<div class="type-title">{{fieldType.type}}</div> |
|
||||
<div class="type-text text-muted">{{fieldType.description}}</div> |
|
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
|
<div class="col"> |
||||
|
<div class="type-title">{{fieldType.type}}</div> |
||||
|
<div class="type-text text-muted">{{fieldType.description}}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
</label> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="form-group"> |
|
||||
<sqx-control-errors for="name" submitOnly="true" [submitted]="addFieldFormSubmitted"></sqx-control-errors> |
|
||||
|
|
||||
<input type="text" class="form-control" formControlName="name" maxlength="40" #nameInput placeholder="Enter field name" sqxFocusOnInit /> |
|
||||
</div> |
|
||||
|
|
||||
<div class="form-group"> |
|
||||
<div class="form-check"> |
|
||||
<input class="form-check-input" type="checkbox" id="isLocalizable" formControlName="isLocalizable" /> |
|
||||
<label class="form-check-label" for="isLocalizable"> |
|
||||
Localizable |
|
||||
</label> |
</label> |
||||
</div> |
</div> |
||||
|
|
||||
<small class="form-text text-muted"> |
|
||||
You can the field as localizable. It means that is dependent on the language, for example a city name. |
|
||||
</small> |
|
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<div class="modal-footer"> |
|
||||
<div class="clearfix"> |
|
||||
<button type="reset" class="float-left btn btn-secondary" (click)="complete()">Cancel</button> |
|
||||
|
|
||||
<div class="float-right"> |
|
||||
<button class="btn btn-success" (click)="addField(false, false)">Create and close</button> |
|
||||
<button class="btn btn-success" (click)="addField(true, false)">Create and new field</button> |
|
||||
<button class="btn btn-success" (click)="addField(false, true)">Create and configure</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</form> |
|
||||
</div> |
|
||||
|
|
||||
<div class="modal-content" *ngIf="editForm"> |
|
||||
<form [formGroup]="editForm"> |
|
||||
<div class="modal-header"> |
|
||||
<h4 class="modal-title"> |
|
||||
Configure Field |
|
||||
</h4> |
|
||||
|
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="complete()"> |
<div class="form-group"> |
||||
<span aria-hidden="true">×</span> |
<sqx-control-errors for="name" submitOnly="true" [submitted]="addFieldForm.submitted | async"></sqx-control-errors> |
||||
</button> |
|
||||
</div> |
|
||||
|
|
||||
<div class="modal-tabs"> |
<input type="text" class="form-control" formControlName="name" maxlength="40" #nameInput placeholder="Enter field name" sqxFocusOnInit /> |
||||
<ul class="nav nav-tabs2"> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" [class.active]="editTab === 1" (click)="selectTab(1)">Common</a> |
|
||||
</li> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" [class.active]="editTab === 2" (click)="selectTab(2)">Validation</a> |
|
||||
</li> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" [class.active]="editTab === 3" (click)="selectTab(3)">Editing</a> |
|
||||
</li> |
|
||||
</ul> |
|
||||
</div> |
</div> |
||||
|
|
||||
<div class="modal-body"> |
<div class="form-group"> |
||||
<div [class.hidden]="editTab !== 1"> |
<div class="form-check"> |
||||
<sqx-field-form-common [editForm]="editForm" [editFormSubmitted]="editFormSubmitted" [showName]="false" [field]="editField"></sqx-field-form-common> |
<input class="form-check-input" type="checkbox" id="isLocalizable" formControlName="isLocalizable" /> |
||||
</div> |
<label class="form-check-label" for="isLocalizable"> |
||||
|
Localizable |
||||
<div [class.hidden]="editTab !== 2"> |
</label> |
||||
<sqx-field-form-validation [editForm]="editForm" [field]="editField"></sqx-field-form-validation> |
|
||||
</div> |
|
||||
|
|
||||
<div [class.hidden]="editTab !== 3"> |
|
||||
<sqx-field-form-ui [editForm]="editForm" [field]="editField"></sqx-field-form-ui> |
|
||||
</div> |
</div> |
||||
|
|
||||
|
<small class="form-text text-muted"> |
||||
|
You can the field as localizable. It means that is dependent on the language, for example a city name. |
||||
|
</small> |
||||
</div> |
</div> |
||||
<div class="modal-footer"> |
</ng-container> |
||||
<div class="clearfix"> |
|
||||
<button type="reset" class="float-left btn btn-secondary" (click)="complete()">Cancel</button> |
|
||||
|
|
||||
<div class="float-right"> |
<ng-container footer> |
||||
<button class="btn btn-success" (click)="configureField(false)">Configure and close</button> |
<button type="reset" class="float-left btn btn-secondary" (click)="complete()">Cancel</button> |
||||
<button class="btn btn-success" (click)="configureField(true)">Configure and new field</button> |
|
||||
</div> |
<div class="float-right"> |
||||
</div> |
<button class="btn btn-success" (click)="addField(false)">Create and close</button> |
||||
|
<button class="btn btn-success" (click)="addField(true)">Create and new field</button> |
||||
</div> |
</div> |
||||
</form> |
</ng-container> |
||||
</div> |
</sqx-modal-dialog> |
||||
</div> |
</form> |
||||
Loading…
Reference in new issue