mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
6 years ago
committed by
GitHub
GitHub
25 changed files with 392 additions and 322 deletions
@ -1,6 +1,11 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.card-header, |
|||
.card-footer { |
|||
padding: 1.25rem; |
|||
} |
|||
|
|||
textarea { |
|||
resize: none; |
|||
} |
|||
@ -1,15 +1,24 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
:host ::ng-deep { |
|||
.modal-body { |
|||
padding: 0; |
|||
} |
|||
:host, |
|||
.inner-form, |
|||
.inner-main { |
|||
@include flex-box; |
|||
@include flex-grow(1); |
|||
@include flex-direction(column); |
|||
} |
|||
|
|||
.modal-content { |
|||
height: 100%; |
|||
} |
|||
.inner-header, |
|||
.inner-main { |
|||
position: relative; |
|||
} |
|||
|
|||
.inner-header { |
|||
padding: 1rem $panel-padding; |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
.editor { |
|||
@include absolute(0, 0, 0, 0); |
|||
} |
|||
|
|||
@ -0,0 +1,36 @@ |
|||
<div class="fields"> |
|||
<div class="table-items-row table-items-row-empty" *ngIf="schema && schema.fields.length === 0"> |
|||
No field created yet. |
|||
|
|||
<button type="button" class="btn btn-success btn-sm ml-2" (click)="addFieldDialog.show()" *ngIf="schema.canAddField"> |
|||
<i class="icon icon-plus"></i> Add Field |
|||
</button> |
|||
</div> |
|||
|
|||
<ng-container *ngIf="patternsState.patterns | async; let patterns"> |
|||
<div |
|||
cdkDropList |
|||
[cdkDropListDisabled]="!schema.canOrderFields" |
|||
[cdkDropListData]="schema.fields" |
|||
(cdkDropListDropped)="sortFields($event)"> |
|||
<div *ngFor="let field of schema.fields; trackBy: trackByFieldFn" |
|||
class="table-drag" |
|||
cdkDrag |
|||
cdkDragLockAxis="y"> |
|||
<sqx-field [field]="field" [schema]="schema" [patterns]="patterns"> |
|||
<i cdkDragHandle class="icon-drag2 drag-handle"></i> |
|||
</sqx-field> |
|||
</div> |
|||
</div> |
|||
|
|||
<button type="button" class="btn btn-success field-button" (click)="addFieldDialog.show()" *ngIf="schema.canAddField"> |
|||
<i class="icon icon-plus field-button-icon"></i> <div class="field-button-text">Add Field</div> |
|||
</button> |
|||
</ng-container> |
|||
</div> |
|||
|
|||
<ng-container *sqxModal="addFieldDialog"> |
|||
<sqx-field-wizard [schema]="schema" |
|||
(complete)="addFieldDialog.hide()"> |
|||
</sqx-field-wizard> |
|||
</ng-container> |
|||
@ -0,0 +1,22 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.fields { |
|||
padding: $panel-padding; |
|||
} |
|||
|
|||
.field-button { |
|||
& { |
|||
@include circle(5.25rem); |
|||
@include box-shadow(0, 8px, 16px, .3); |
|||
@include absolute(auto, 6rem, 1rem, auto); |
|||
} |
|||
|
|||
&-icon { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&-text { |
|||
font-size: .9rem; |
|||
} |
|||
} |
|||
@ -0,0 +1,60 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
// tslint:disable:no-shadowed-variable
|
|||
|
|||
import { CdkDragDrop } from '@angular/cdk/drag-drop'; |
|||
import { Component, Input, OnInit } from '@angular/core'; |
|||
|
|||
import { |
|||
DialogModel, |
|||
fadeAnimation, |
|||
FieldDto, |
|||
fieldTypes, |
|||
PatternsState, |
|||
SchemaDetailsDto, |
|||
SchemasState, |
|||
sorted |
|||
} from '@app/shared'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-schema-fields', |
|||
styleUrls: ['./schema-fields.component.scss'], |
|||
templateUrl: './schema-fields.component.html', |
|||
animations: [ |
|||
fadeAnimation |
|||
] |
|||
}) |
|||
export class SchemaFieldsComponent implements OnInit { |
|||
public fieldTypes = fieldTypes; |
|||
|
|||
@Input() |
|||
public schema: SchemaDetailsDto; |
|||
|
|||
public addFieldDialog = new DialogModel(); |
|||
|
|||
public trackByFieldFn: (index: number, field: FieldDto) => any; |
|||
|
|||
constructor( |
|||
public readonly schemasState: SchemasState, |
|||
public readonly patternsState: PatternsState |
|||
) { |
|||
this.trackByFieldFn = this.trackByField.bind(this); |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
this.patternsState.load(); |
|||
} |
|||
|
|||
public sortFields(event: CdkDragDrop<ReadonlyArray<FieldDto>>) { |
|||
this.schemasState.orderFields(this.schema, sorted(event)).subscribe(); |
|||
} |
|||
|
|||
public trackByField(index: number, field: FieldDto) { |
|||
return field.fieldId + this.schema.id; |
|||
} |
|||
} |
|||
@ -1,30 +1,19 @@ |
|||
<form [formGroup]="editForm.form" (ngSubmit)="saveSchema()"> |
|||
<sqx-modal-dialog (close)="emitComplete()" large="true"> |
|||
<ng-container title> |
|||
Scripts |
|||
</ng-container> |
|||
|
|||
<ng-container tabs> |
|||
<form class="inner-form" [formGroup]="editForm.form" (ngSubmit)="saveSchema()"> |
|||
<div class="inner-header"> |
|||
<ul class="nav nav-tabs2"> |
|||
<li class="nav-item" *ngFor="let script of editForm.form.controls | sqxKeys"> |
|||
<a class="nav-link" [class.active]="selectedField === script" (click)="selectField(script)">{{script | titlecase}}</a> |
|||
</li> |
|||
</ul> |
|||
</ng-container> |
|||
|
|||
<ng-container content> |
|||
<div class="form-group"> |
|||
<button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">Save</button> |
|||
</div> |
|||
|
|||
<div class="inner-main"> |
|||
<ng-container *ngFor="let script of editForm.form.controls | sqxKeys"> |
|||
<ng-container *ngIf="selectedField === script"> |
|||
<sqx-code-editor [noBorder]="true" [formControlName]="script"></sqx-code-editor> |
|||
</ng-container> |
|||
</ng-container> |
|||
</div> |
|||
</ng-container> |
|||
|
|||
<ng-container footer> |
|||
<button type="reset" class="float-left btn btn-secondary" (click)="emitComplete()" [disabled]="editForm.submitted | async">Cancel</button> |
|||
<button type="submit" class="float-right btn btn-primary" *ngIf="isEditable">Save</button> |
|||
</ng-container> |
|||
</sqx-modal-dialog> |
|||
</form> |
|||
|
|||
@ -1,19 +1,24 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.nav-link { |
|||
cursor: default; |
|||
:host, |
|||
.inner-form, |
|||
.inner-main { |
|||
@include flex-box; |
|||
@include flex-grow(1); |
|||
@include flex-direction(column); |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
.modal-body { |
|||
padding: 0; |
|||
} |
|||
.inner-header, |
|||
.inner-main { |
|||
position: relative; |
|||
} |
|||
|
|||
.modal-content { |
|||
height: 100%; |
|||
} |
|||
.inner-header { |
|||
padding: 1rem $panel-padding; |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
.editor { |
|||
@include absolute(0, 0, 0, 0); |
|||
} |
|||
|
|||
Loading…
Reference in new issue