Forms simplified.

frontend/app/features/api/pages/graphql/graphql-page.component.scss

@@ -22,6 +22,10 @@
         & .editorWrap {
             overflow: hidden;
         }
+
+        svg {
+            fill: $color-dark-black;
+        }
     }
 
     .CodeMirror-linenumbers {

frontend/app/features/content/pages/content/content-field.component.scss

@@ -8,7 +8,7 @@
 }
 
 .languages-buttons {
-    @include absolute(.75rem, 1.25rem, auto, auto);
+    @include absolute(.25rem, 1.25rem, auto, auto);
 }
 
 .row {

frontend/app/features/schemas/pages/schema/field-wizard.component.html

@@ -22,7 +22,7 @@
 
                                 <div class="row no-gutters">
                                     <div class="col-auto">
-                                        <div class="type-icon" [class.active]="addFieldForm.form.controls['type'].value === fieldType.type">
+                                        <div class="btn-radio" [class.active]="addFieldForm.form.controls['type'].value === fieldType.type">
                                             <i class="icon-type-{{fieldType.type}}"></i>
                                         </div>
                                     </div>

frontend/app/features/schemas/pages/schema/field-wizard.component.scss

@@ -14,63 +14,6 @@ $icon-size: 4.5rem;
     margin-bottom: 1.5rem;
 }
 
-.type {
-    & {
-        margin-bottom: .5rem;
-    }
-
-    &-title {
-        font-weight: bold;
-    }
-
-    &-text {
-        font-size: .9rem;
-    }
-
-    &-icon {
-        & {
-            @include border-radius;
-            height: $icon-size;
-            color: $color-theme-blue;
-            cursor: pointer;
-            border: 1px solid $color-border;
-            background: transparent;
-            margin-right: .5rem;
-            line-height: $icon-size;
-            font-size: 1.75rem;
-            font-weight: normal;
-            text-align: center;
-            width: $icon-size;
-        }
-
-        .radio-input {
-            display: none;
-        }
-
-        &.active {
-            & {
-                @include box-shadow(0, 0, 10px, .5);
-                background: $color-theme-blue;
-                border-color: $color-theme-blue;
-                color: $color-dark-foreground;
-            }
-
-            &:hover {
-                color: $color-dark-foreground;
-            }
-        }
-
-        &:hover {
-            border-color: $color-border-dark;
-        }
-    }
-
-    .radio-input {
-        display: none;
-    }
-}
-
 .edit-form {
-    margin: -1.5rem -1.75rem;
+    margin: -1.5rem -1.75rem 0;
-    margin-bottom: 0;
 }

frontend/app/features/schemas/pages/schemas/schema-form.component.html

@@ -13,7 +13,7 @@
         <ng-container content>
             <sqx-form-error closeable="true" [error]="createForm.error | async"></sqx-form-error>
         
-            <div class="form-group name-group">
+            <div class="form-group">
                 <label for="schemaName">Name <small class="hint">(required)</small></label>
                 
                 <sqx-control-errors for="name" submitOnly="true" [submitted]="createForm.submitted | async"></sqx-control-errors>
@@ -23,15 +23,9 @@
                 <sqx-form-hint>
                     You can only use letters, numbers and dashes and not more than 40 characters.
                 </sqx-form-hint>
-                
-                <sqx-form-hint>
-                    The schema name becomes part of the api url:
-                </sqx-form-hint>
-
-                <sqx-code>{{apiUrl.buildUrl("api/content/")}}{{appsState.appName}}/{{createForm.schemaName | async}}</sqx-code>
             </div>
 
-            <div class="form-group">
+            <div class="form-group mt-4">
                 <div class="row">
                     <div class="col-6 type">
                         <label>
@@ -39,7 +33,7 @@
                         
                             <div class="row no-gutters">
                                 <div class="col-auto">
-                                    <div class="type-icon" [class.active]="createForm.form.controls['isSingleton'].value !== true">
+                                    <div class="btn-radio" [class.active]="createForm.form.controls['isSingleton'].value !== true">
                                         <i class="icon-multiple-content"></i>
                                     </div>
                                 </div>
@@ -57,7 +51,7 @@
                         
                             <div class="row no-gutters">
                                 <div class="col-auto">
-                                    <div class="type-icon" [class.active]="createForm.form.controls['isSingleton'].value === true">
+                                    <div class="btn-radio" [class.active]="createForm.form.controls['isSingleton'].value === true">
                                         <i class="icon-single-content"></i>
                                     </div>
                                 </div>
@@ -82,7 +76,7 @@
                 <sqx-json-editor height="250" *ngIf="showImport" formControlName="import"></sqx-json-editor>
             </div>
 
-            <sqx-form-alert>
+            <sqx-form-alert marginBottom="0">
                 These values cannot be changed later.
             </sqx-form-alert>
         </ng-container>

frontend/app/features/schemas/pages/schemas/schema-form.component.scss

@@ -8,6 +8,10 @@ $icon-size: 4.5rem;
     margin-left: -.5rem;
 }
 
+.form-group {
+    margin-bottom: 1rem;
+}
+
 .name-group {
     margin-bottom: 1.5rem;
 }

frontend/app/framework/angular/forms/form-hint.component.ts

@@ -10,7 +10,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 @Component({
     selector: 'sqx-form-hint',
     template: `
-        <small class="text-muted form-text {{class}}">
+        <small class="text-muted form-text mt-{{marginTop}} mb-{{marginBottom}} {{class}}">
             <ng-content></ng-content>
         </small>`,
     styles: [`
@@ -29,4 +29,10 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 export class FormHintComponent {
     @Input()
     public class: string;
+
+    @Input()
+    public marginTop = 0;
+
+    @Input()
+    public marginBottom = 0;
 }

frontend/app/shared/components/app-form.component.html

@@ -23,14 +23,10 @@
                 <sqx-form-hint>
                     You can only use letters, numbers and dashes and not more than 40 characters.
                 </sqx-form-hint>
+            </div>
 
-                <sqx-form-hint>
+            <div class="form-group">
-                    The app name becomes part of the api url:
+                <sqx-form-alert marginTop="2" marginBottom="0">
-                </sqx-form-hint>
-
-                <sqx-code>{{apiUrl.buildUrl("api/content/")}}{{createForm.appName | async}}</sqx-code>
-
-                <sqx-form-alert marginTop="2">
                     The app name cannot be changed later.
                 </sqx-form-alert>
             </div>

frontend/app/shared/state/apps.forms.ts

@@ -6,26 +6,17 @@
  */
 
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { map } from 'rxjs/operators';
 
-import {
+import { Form, ValidatorsEx } from '@app/framework';
-    Form,
-    ValidatorsEx,
-    value$
-} from '@app/framework';
-
-const FALLBACK_NAME = 'my-app';
 
 export class CreateAppForm extends Form<FormGroup, { name: string }> {
-    public appName = value$(this.form.controls['name']).pipe(map(v => v || FALLBACK_NAME));
-
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
             name: ['',
                 [
                     Validators.required,
                     Validators.maxLength(40),
-                    ValidatorsEx.pattern('[a-z0-9]+(\-[a-z0-9]+)*', 'Name can contain lower case letters (a-z), numbers and dashes (not at the end).')
+                    ValidatorsEx.pattern('[a-z0-9]+(\-[a-z0-9]+)*', 'Name can contain lower case letters (a-z), numbers and dashes between.')
                 ]
             ]
         }));
@@ -35,7 +26,11 @@ export class CreateAppForm extends Form<FormGroup, { name: string }> {
 export class UpdateAppForm extends Form<FormGroup, { label?: string, description?: string }> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
-            label: '',
+            label: ['',
+                [
+                    Validators.maxLength(40)
+                ]
+            ],
             description: ''
         }));
     }

frontend/app/shared/state/clients.forms.ts

@@ -33,7 +33,7 @@ export class AddClientForm extends Form<FormGroup, { name: string}> {
             name: ['',
                 [
                     Validators.maxLength(40),
-                    ValidatorsEx.pattern('[a-z0-9]+(\-[a-z0-9]+)*', 'Name can contain lower case letters (a-z), numbers and dashes (not at the end).')
+                    ValidatorsEx.pattern('[a-z0-9]+(\-[a-z0-9]+)*', 'Name can contain lower case letters (a-z), numbers and dashes between.')
                 ]
             ]
         }));

frontend/app/shared/state/schemas.forms.ts

@@ -19,8 +19,6 @@ import { AddFieldDto } from './../services/schemas.service';
 
 import { createProperties } from './../services/schemas.types';
 
-const FALLBACK_NAME = 'my-schema';
-
 export class CreateCategoryForm extends Form<FormGroup, { name: string }> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
@@ -30,16 +28,13 @@ export class CreateCategoryForm extends Form<FormGroup, { name: string }> {
 }
 
 export class CreateSchemaForm extends Form<FormGroup, { name: string, isSingleton?: boolean, import: any }> {
-    public schemaName =
-        value$(this.form.controls['name']).pipe(n => n || FALLBACK_NAME);
-
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
             name: ['',
                 [
                     Validators.required,
                     Validators.maxLength(40),
-                    ValidatorsEx.pattern('[a-z0-9]+(\-[a-z0-9]+)*', 'Name can contain lower case letters (a-z), numbers and dashes only (not at the end).')
+                    ValidatorsEx.pattern('[a-z0-9]+(\-[a-z0-9]+)*', 'Name can contain lower case letters (a-z), numbers and dashes between.')
                 ]
             ],
             isSingleton: false,

frontend/app/theme/_bootstrap.scss

@@ -444,7 +444,7 @@ a {
     &-radio {
         & {
             @include border-radius;
-            color: $color-border-dark;
+            color: $color-text-decent;
             cursor: pointer;
             border: 1px solid $color-border;
             background: transparent;
@@ -455,6 +455,10 @@ a {
             width: 4.5rem;
         }
 
+        i {
+            color: $color-border-dark;
+        }
+
         .radio-label {
             display: block;
             font-size: .7rem;
@@ -470,19 +474,30 @@ a {
 
         &.active {
             & {
-                @include box-shadow(0, 0, 10px, .5);
+                background: none;
-                background: $color-theme-blue;
                 border-color: $color-theme-blue;
-                color: $color-dark-foreground;
+                color: $color-theme-blue;
+            }
+
+            i {
+                color: $color-theme-blue;
             }
 
             &:hover {
-                color: $color-dark-foreground;
+                color: $color-theme-blue-dark;
+
+                i {
+                    color: $color-theme-blue-dark;
+                }
             }
         }
 
         &:hover {
             color: $color-theme-blue;
+
+            i {
+                color: $color-theme-blue;
+            }
         }
     }
 
@@ -553,6 +568,48 @@ a {
     }
 }
 
+$icon-size: 4.5rem;
+
+//
+// Type icons, for example for apps or schemas
+//
+.type {
+    & {
+        margin-bottom: .5rem;
+    }
+
+    &-title {
+        font-weight: bold;
+        margin-top: -.25rem;
+        margin-bottom: 0;
+    }
+
+    &-text {
+        font-size: .9rem;
+    }
+
+    .btn-radio {
+        & {
+            line-height: $icon-size;
+            font-size: 1.75rem;
+            font-weight: normal;
+            height: $icon-size;
+        }
+
+        i {
+            color: $color-theme-blue;
+        }
+
+        .radio-input {
+            display: none;
+        }
+    }
+
+    .radio-input {
+        display: none;
+    }
+}
+
 //
 // Restyle modal dialogs.
 //