A lot of small improvements

src/Squidex/app/app.routes.ts

@@ -46,9 +46,6 @@ export const routes: Routes = [
                     }, {
                         path: 'content',
                         loadChildren: './features/content/module#SqxFeatureContentModule'
-                    }, {
-                        path: 'media',
-                        loadChildren: './features/media/module#SqxFeatureMediaModule'
                     }, {
                         path: 'schemas',
                         loadChildren: './features/schemas/module#SqxFeatureSchemasModule'

src/Squidex/app/features/content/pages/content-page.component.html

@@ -9,6 +9,8 @@
         </a>
     </div>
 
-    <div class="panel-content">
+    <div class="panel-main">
+        <div class="panel-content">
+        </div>
     </div>
 </div>

src/Squidex/app/features/dashboard/pages/dashboard-page.component.html

@@ -5,6 +5,8 @@
         <h3 class="panel-title">Dashboard</h3>
     </div>
 
-    <div class="panel-content">
+    <div class="panel-main">
+        <div class="panel-content">
+        </div>
     </div>
 </div>

src/Squidex/app/features/media/declarations.ts

@@ -1,8 +0,0 @@
-/*
- * Squidex Headless CMS
- * 
- * @license
- * Copyright (c) Sebastian Stehle. All rights reserved
- */
-
-export * from './pages/media-page.component';

src/Squidex/app/features/media/index.ts

@@ -1,9 +0,0 @@
-/*
- * Squidex Headless CMS
- * 
- * @license
- * Copyright (c) Sebastian Stehle. All rights reserved
- */
-
-export * from './declarations';
-export * from './module';

src/Squidex/app/features/media/module.ts

@@ -1,34 +0,0 @@
-/*
- * Squidex Headless CMS
- * 
- * @license
- * Copyright (c) Sebastian Stehle. All rights reserved
- */
-
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { SqxFrameworkModule, SqxSharedModule } from 'shared';
-
-import {
-    MediaPageComponent
-} from './declarations';
-
-const routes: Routes = [
-    {
-        path: '',
-        component: MediaPageComponent
-    }
-];
-
-@NgModule({
-    imports: [
-        SqxFrameworkModule,
-        SqxSharedModule,
-        RouterModule.forChild(routes)
-    ],
-    declarations: [
-        MediaPageComponent
-    ]
-})
-export class SqxFeatureMediaModule { }

src/Squidex/app/features/media/pages/media-page.component.html

@@ -1,14 +0,0 @@
-<sqx-title message="{app} | Media" parameter1="app" value1="{{appName() | async}}"></sqx-title>
-
-<div class="panel panel-light">
-    <div class="panel-header">
-        <h3 class="panel-title">Media</h3>
-
-        <a class="panel-close" dashboardLink>
-            <i class="icon-close"></i>
-        </a>
-    </div>
-
-    <div class="panel-content">
-    </div>
-</div>

src/Squidex/app/features/media/pages/media-page.component.scss

@@ -1,7 +0,0 @@
-@import '_vars';
-@import '_mixins';
-
-.panel {
-    min-width: 600px;
-    max-width: 600px;
-}

src/Squidex/app/features/media/pages/media-page.component.ts

@@ -1,27 +0,0 @@
-/*
- * Squidex Headless CMS
- * 
- * @license
- * Copyright (c) Sebastian Stehle. All rights reserved
- */
-
-import { Component } from '@angular/core';
-
-import {
-    AppComponentBase,
-    AppsStoreService,
-    NotificationService,
-    UsersProviderService
- } from 'shared';
-
-@Component({
-    selector: 'sqx-media-page',
-    styleUrls: ['./media-page.component.scss'],
-    templateUrl: './media-page.component.html'
-})
-export class MediaPageComponent extends AppComponentBase {
-    constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService) {
-        super(apps, notifications, users);
-    }
-}
-

src/Squidex/app/features/schemas/module.ts

@@ -8,7 +8,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { SqxFrameworkModule, SqxSharedModule } from 'shared';
+import {
+    HistoryComponent,
+    SqxFrameworkModule,
+    SqxSharedModule
+} from 'shared';
 
 import {
     FieldComponent,
@@ -31,7 +35,16 @@ const routes: Routes = [
             },
             {
                 path: ':schemaName',
-                component: SchemaPageComponent
+                component: SchemaPageComponent,
+                children: [
+                    {
+                        path: 'history',
+                        component: HistoryComponent,
+                        data: {
+                            channel: 'schemas.{schemaName}'
+                        }
+                    }
+                ]
             }]
     }
 ];

src/Squidex/app/features/schemas/pages/schema/schema-page.component.html

@@ -11,44 +11,57 @@
         </div>
     </div>
 
-    <div class="panel-content">
+    <div class="panel-main">
-        <div *ngFor="let field of schemaFields">
+        <div class="panel-content">
-            <sqx-field [field]="field"
+            <div *ngFor="let field of schemaFields">
-                (disabled)="disableField(field)"
+                <sqx-field [field]="field"
-                (deleted)="deleteField(field)"
+                    (disabled)="disableField(field)"
-                (enabled)="enableField(field)"
+                    (deleted)="deleteField(field)"
-                (hidden)="hideField(field)"
+                    (enabled)="enableField(field)"
-                (saved)="saveField(field, $event)"
+                    (hidden)="hideField(field)"
-                (shown)="showField(field)"></sqx-field>
+                    (saved)="saveField(field, $event)"
-        </div>
+                    (shown)="showField(field)"></sqx-field>
-        
+            </div>
-        <div class="table-items-footer">
+            
-            <form class="form-inline" [formGroup]="addFieldForm" (ngSubmit)="addField()">
+            <div class="table-items-footer">
-                <div class="form-group">
+                <form class="form-inline" [formGroup]="addFieldForm" (ngSubmit)="addField()">
-                    <select class="form-control" formControlName="type">
+                    <div class="form-group">
-                        <option *ngFor="let type of fieldTypes">{{type}}</option>
+                        <select class="form-control" formControlName="type">
-                    </select>
+                            <option *ngFor="let type of fieldTypes">{{type}}</option>
-                </div>
+                        </select>
-                <div class="form-group">
-                    <div class="errors-box" *ngIf="addFieldForm.controls.name.invalid && addFieldForm.controls.name.dirty">
-                        <div class="errors">
-                            <span *ngIf="addFieldForm.controls.name.hasError('required')">
-                                Name is required.
-                            </span>
-                            <span *ngIf="addFieldForm.controls.name.hasError('maxlength')">
-                                Name can not have more than 40 characters.
-                            </span>
-                            <span *ngIf="addFieldForm.controls.name.hasError('pattern')">
-                                Name can contain lower case letters (a-z), numbers and dashes (not at the end).
-                            </span>
-                        </div>
                     </div>
+                    <div class="form-group">
+                        <div class="errors-box" *ngIf="addFieldForm.controls.name.invalid && addFieldForm.controls.name.dirty">
+                            <div class="errors">
+                                <span *ngIf="addFieldForm.controls.name.hasError('required')">
+                                    Name is required.
+                                </span>
+                                <span *ngIf="addFieldForm.controls.name.hasError('maxlength')">
+                                    Name can not have more than 40 characters.
+                                </span>
+                                <span *ngIf="addFieldForm.controls.name.hasError('pattern')">
+                                    Name can contain lower case letters (a-z), numbers and dashes (not at the end).
+                                </span>
+                            </div>
+                        </div>
 
-                    <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter field name" />
+                        <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter field name" />
-                </div>
+                    </div>
 
-                <button type="submit" class="btn btn-success" [disabled]="addFieldForm.invalid">Add Field</button>
+                    <button type="submit" class="btn btn-success" [disabled]="addFieldForm.invalid">Add Field</button>
-            </form>
+                </form>
+            </div>
+        </div>
+        <div class="panel-sidebar">
+            <div class="nav nav-pills nav-stacked nav-light">
+                <li class="nav-item">
+                    <a class="nav-link" routerLink="history" routerLinkActive="active">
+                        <i class="icon-time"></i>
+                    </a>
+                </li>
+            </div>
         </div>
     </div>
-</div>
+</div>
+
+<router-outlet></router-outlet>

src/Squidex/app/features/schemas/pages/schema/schema-page.component.scss

@@ -4,4 +4,8 @@
 .panel {
     min-width: 760px;
     max-width: 700px;
+}
+
+.panel-content {
+    overflow-y: scroll;
 }

src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html

@@ -22,21 +22,23 @@
         </div>
     </div>
 
-    <div class="panel-content">
+    <div class="panel-main">
-        <div class="schemas">
+        <div class="panel-content">
-            <div class="schema" *ngFor="let schema of schemasFiltered | async" [routerLink]="[schema.name]" routerLinkActive="active">
+            <div class="schemas">
-                <div class="schema-inner">
+                <div class="schema" *ngFor="let schema of schemasFiltered | async" [routerLink]="[schema.name]" routerLinkActive="active">
-                    <div class="row">
+                    <div class="schema-inner">
-                        <div class="col-xs-4">
+                        <div class="row">
-                            <span class="schema-name">{{schema.name}}</span> 
+                            <div class="col-xs-4">
-                        </div>
+                                <span class="schema-name">{{schema.name}}</span> 
-                        <div class="col-xs-4">
+                            </div>
-                            <span class="schema-user">
+                            <div class="col-xs-4">
-                                <i class="icon-person"></i> <span class="schema-user-text">{{userName(schema.lastModifiedBy, true) | async}}</span>
+                                <span class="schema-user">
-                            </span>
+                                    <i class="icon-person"></i> <span class="schema-user-text">{{userName(schema.lastModifiedBy, true) | async}}</span>
-                        </div>
+                                </span>
-                        <div class="col-xs-4 schema-col-right">
+                            </div>
-                            <span class="schema-modified">{{schema.lastModified.toLocal() | fromNow}}</span>
+                            <div class="col-xs-4 schema-col-right">
+                                <span class="schema-modified">{{schema.lastModified.toLocal() | fromNow}}</span>
+                            </div>
                         </div>
                     </div>
                 </div>

src/Squidex/app/shared/components/history.component.ts

@@ -26,7 +26,18 @@ const REPLACEMENT_TEMP = '$TEMP$';
 })
 export class HistoryComponent extends AppComponentBase {
     public get channel(): string {
-        return this.route.snapshot.data['channel'];
+        let result = this.route.snapshot.data['channel'];
+        let params = this.route.parent.snapshot.params;
+
+        for (let key in params) {
+            if (params.hasOwnProperty(key)) {
+                 const value = params[key];
+
+                 result = result.replace('{' + key + '}', value);
+            }
+        }
+
+        return result;
     }
 
     public events =

src/Squidex/app/shell/pages/app/left-menu.component.html

@@ -10,11 +10,6 @@
                 <i class="nav-icon icon-content"></i> <span class="nav-text">Content</span>
             </a>
         </li>
-        <li class="nav-item">
-            <a class="nav-link" routerLink="media" routerLinkActive="active">
-                <i class="nav-icon icon-media"></i> <span class="nav-text">Media</span>
-            </a>
-        </li>
         <li class="nav-item" *ngIf="permission === 'Owner'">
             <a class="nav-link" routerLink="settings" routerLinkActive="active">
                 <i class="nav-icon icon-settings2"></i> <span class="nav-text">Settings</span>