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 '_vars'; |
||||
@import '_mixins'; |
@import '_mixins'; |
||||
|
|
||||
|
.card-header, |
||||
|
.card-footer { |
||||
|
padding: 1.25rem; |
||||
|
} |
||||
|
|
||||
textarea { |
textarea { |
||||
resize: none; |
resize: none; |
||||
} |
} |
||||
@ -1,15 +1,24 @@ |
|||||
@import '_vars'; |
@import '_vars'; |
||||
@import '_mixins'; |
@import '_mixins'; |
||||
|
|
||||
:host ::ng-deep { |
:host, |
||||
.modal-body { |
.inner-form, |
||||
padding: 0; |
.inner-main { |
||||
} |
@include flex-box; |
||||
|
@include flex-grow(1); |
||||
|
@include flex-direction(column); |
||||
|
} |
||||
|
|
||||
.modal-content { |
.inner-header, |
||||
height: 100%; |
.inner-main { |
||||
} |
position: relative; |
||||
|
} |
||||
|
|
||||
|
.inner-header { |
||||
|
padding: 1rem $panel-padding; |
||||
|
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
.editor { |
.editor { |
||||
@include absolute(0, 0, 0, 0); |
@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()"> |
<form class="inner-form" [formGroup]="editForm.form" (ngSubmit)="saveSchema()"> |
||||
<sqx-modal-dialog (close)="emitComplete()" large="true"> |
<div class="inner-header"> |
||||
<ng-container title> |
|
||||
Scripts |
|
||||
</ng-container> |
|
||||
|
|
||||
<ng-container tabs> |
|
||||
<ul class="nav nav-tabs2"> |
<ul class="nav nav-tabs2"> |
||||
<li class="nav-item" *ngFor="let script of editForm.form.controls | sqxKeys"> |
<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> |
<a class="nav-link" [class.active]="selectedField === script" (click)="selectField(script)">{{script | titlecase}}</a> |
||||
</li> |
</li> |
||||
</ul> |
</ul> |
||||
</ng-container> |
|
||||
|
|
||||
<ng-container content> |
<button type="submit" class="float-right btn btn-primary" [class.invisible]="!isEditable">Save</button> |
||||
<div class="form-group"> |
</div> |
||||
|
|
||||
|
<div class="inner-main"> |
||||
<ng-container *ngFor="let script of editForm.form.controls | sqxKeys"> |
<ng-container *ngFor="let script of editForm.form.controls | sqxKeys"> |
||||
<ng-container *ngIf="selectedField === script"> |
<ng-container *ngIf="selectedField === script"> |
||||
<sqx-code-editor [noBorder]="true" [formControlName]="script"></sqx-code-editor> |
<sqx-code-editor [noBorder]="true" [formControlName]="script"></sqx-code-editor> |
||||
</ng-container> |
</ng-container> |
||||
</ng-container> |
</ng-container> |
||||
</div> |
</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> |
</form> |
||||
|
|||||
@ -1,19 +1,24 @@ |
|||||
@import '_vars'; |
@import '_vars'; |
||||
@import '_mixins'; |
@import '_mixins'; |
||||
|
|
||||
.nav-link { |
:host, |
||||
cursor: default; |
.inner-form, |
||||
|
.inner-main { |
||||
|
@include flex-box; |
||||
|
@include flex-grow(1); |
||||
|
@include flex-direction(column); |
||||
} |
} |
||||
|
|
||||
:host ::ng-deep { |
.inner-header, |
||||
.modal-body { |
.inner-main { |
||||
padding: 0; |
position: relative; |
||||
} |
} |
||||
|
|
||||
.modal-content { |
.inner-header { |
||||
height: 100%; |
padding: 1rem $panel-padding; |
||||
} |
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
.editor { |
.editor { |
||||
@include absolute(0, 0, 0, 0); |
@include absolute(0, 0, 0, 0); |
||||
} |
} |
||||
|
|||||
Loading…
Reference in new issue