Help section integrated.

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

@@ -4,11 +4,11 @@
     </ng-container>
 
     <ng-container content>
-        <div *ngFor="let event of events | async" class="event">
+        <div *ngFor="let event of events | async" class="event row no-gutters">
-            <div class="event-left">
+            <div class="col col-auto">
                 <img class="user-picture" [attr.title]="event.actor | sqxUserNameRef:null" [attr.src]="event.actor | sqxUserPictureRef" />
             </div>
-            <div class="event-main">
+            <div class="col pl-2">
                 <div class="event-message">
                     <span class="event-actor user-ref">{{event.actor | sqxUserNameRef:null}}</span> <span [innerHTML]="format(event.message) | async"></span>
                 </div>

src/Squidex/app/features/content/pages/content/content-history.component.scss

@@ -1,14 +1,30 @@
 @import '_vars';
 @import '_mixins';
 
+:host /deep/ {
+    .user-ref {
+        color: $color-title;
+    }
+
+    .marker-ref {
+        color: $color-title;
+    }
+}
+
+.user-picture {
+    margin-top: .25rem;
+}
+
 .event {
     & {
-        @include flex-box;
+        color: $color-text-decent;
-        margin-bottom: 1rem;
+        font-size: .9rem;
+        font-weight: normal;
+        margin-bottom: 1.5rem;
     }
 
-    &-main {
+    &-created {
-        @include flex-grow(1);
+        font-size: .75rem;
     }
 
     &-load {
@@ -24,16 +40,4 @@
             text-decoration: underline !important;
         }
     }
-
-    &-left {
-        min-width: 2.8rem;
-        max-width: 2.8rem;
-        margin-top: .25rem;
-    }
-
-    &-created {
-        font-size: .65rem;
-        font-weight: normal;
-        color: $color-text-decent;
-    }
 }

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

@@ -10,6 +10,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { DndModule } from 'ng2-dnd';
 
 import {
+    HelpComponent,
     SchemaMustExistGuard,
     SqxFrameworkModule,
     SqxSharedModule
@@ -54,7 +55,16 @@ const routes: Routes = [
             {
                 path: ':schemaName',
                 component: SchemaPageComponent,
-                canActivate: [SchemaMustExistGuard]
+                canActivate: [SchemaMustExistGuard],
+                children: [
+                    {
+                        path: 'help',
+                        component: HelpComponent,
+                        data: {
+                            helpPage: '05-integrated/schemas'
+                        }
+                    }
+                ]
             }]
     }
 ];

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

@@ -1,6 +1,6 @@
 <sqx-title message="{app} | {schema}" parameter1="app" [value1]="appsState.appName" parameter2="schema" [value2]="schemasState.schemaName"></sqx-title>
 
-<sqx-panel desiredWidth="56rem">
+<sqx-panel desiredWidth="60rem" [showSidebar]="true">
     <ng-container title>
         <i class="schema-edit icon-pencil" (click)="editSchemaDialog.show()"></i> {{schema.displayName}} 
     </ng-container>
@@ -69,8 +69,16 @@
             </button>
         </div>
     </ng-container>
+
+    <ng-container sidebar>
+        <a class="panel-link" routerLink="help" routerLinkActive="active">
+            <i class="icon-help"></i>
+        </a>
+    </ng-container>
 </sqx-panel>
 
+<router-outlet></router-outlet>
+
 <ng-container *sqxModalView="editSchemaDialog;onRoot:true">
     <sqx-schema-edit-form [schema]="schema" 
         (completed)="editSchemaDialog.hide()">

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

@@ -10,6 +10,8 @@ import { RouterModule, Routes } from '@angular/router';
 import { DndModule } from 'ng2-dnd';
 
 import {
+    HelpComponent,
+    HistoryComponent,
     SqxFrameworkModule,
     SqxSharedModule
 } from '@app/shared';
@@ -38,33 +40,115 @@ const routes: Routes = [
             {
                 path: ''
             },
-            {
-                path: 'plans',
-                component: PlansPageComponent
-            },
             {
                 path: 'more',
                 component: MorePageComponent
             },
             {
                 path: 'backups',
-                component: BackupsPageComponent
+                component: BackupsPageComponent,
+                children: [
+                    {
+                        path: 'help',
+                        component: HelpComponent,
+                        data: {
+                            helpPage: '05-integrated/backups'
+                        }
+                    }
+                ]
+            },
+            {
+                path: 'plans',
+                component: PlansPageComponent,
+                children: [
+                    {
+                        path: 'history',
+                        component: HistoryComponent,
+                        data: {
+                            channel: 'settings.plans'
+                        }
+                    }
+                ]
+            },
+            {
+                path: 'patterns',
+                component: PatternsPageComponent,
+                children: [
+                    {
+                        path: 'history',
+                        component: HistoryComponent,
+                        data: {
+                            channel: 'settings.patterns'
+                        }
+                    },
+                    {
+                        path: 'help',
+                        component: HelpComponent,
+                        data: {
+                            helpPage: '05-integrated/patterns'
+                        }
+                    }
+                ]
             },
             {
                 path: 'clients',
-                component: ClientsPageComponent
+                component: ClientsPageComponent,
+                children: [
+                    {
+                        path: 'history',
+                        component: HistoryComponent,
+                        data: {
+                            channel: 'settings.clients'
+                        }
+                    },
+                    {
+                        path: 'help',
+                        component: HelpComponent,
+                        data: {
+                            helpPage: '05-integrated/clients'
+                        }
+                    }
+                ]
             },
             {
                 path: 'contributors',
-                component: ContributorsPageComponent
+                component: ContributorsPageComponent,
+                children: [
+                    {
+                        path: 'history',
+                        component: HistoryComponent,
+                        data: {
+                            channel: 'settings.contributors'
+                        }
+                    },
+                    {
+                        path: 'help',
+                        component: HelpComponent,
+                        data: {
+                            helpPage: '05-integrated/contributors'
+                        }
+                    }
+                ]
             },
             {
                 path: 'languages',
-                component: LanguagesPageComponent
+                component: LanguagesPageComponent,
-            },
+                children: [
-            {
+                    {
-                path: 'patterns',
+                        path: 'history',
-                component: PatternsPageComponent
+                        component: HistoryComponent,
+                        data: {
+                            channel: 'settings.languages'
+                        }
+                    },
+                    {
+                        path: 'help',
+                        component: HelpComponent,
+                        data: {
+                            helpPage: '05-integrated/languages'
+                        }
+                    }
+                ]
             }
         ]
     }

src/Squidex/app/features/settings/pages/backups/backups-page.component.html

@@ -1,6 +1,6 @@
 <sqx-title message="{app} | Backups | Settings" parameter1="app" [value1]="appsState.appName"></sqx-title>
 
-<sqx-panel desiredWidth="50rem">
+<sqx-panel desiredWidth="50rem" [showSidebar]="true">
     <ng-container title>
         Backups
     </ng-container>
@@ -91,4 +91,12 @@
             </ng-container>
         </ng-container>
     </ng-container>
-</sqx-panel>
+
+    <ng-container sidebar>
+        <a class="panel-link" routerLink="help" routerLinkActive="active">
+            <i class="icon-help"></i>
+        </a>
+    </ng-container>
+</sqx-panel>
+
+<router-outlet></router-outlet>

src/Squidex/app/features/settings/pages/clients/clients-page.component.html

@@ -1,6 +1,6 @@
 <sqx-title message="{app} | Clients | Settings" parameter1="app" [value1]="appsState.appName"></sqx-title>
 
-<sqx-panel desiredWidth="44rem">
+<sqx-panel desiredWidth="50rem" [showSidebar]="true">
     <ng-container title>
         Clients
     </ng-container>
@@ -40,4 +40,15 @@
             </div>
         </ng-container>
     </ng-container>
-</sqx-panel>
+
+    <ng-container sidebar>
+        <a class="panel-link" routerLink="history" routerLinkActive="active">
+            <i class="icon-time"></i>
+        </a>
+        <a class="panel-link" routerLink="help" routerLinkActive="active">
+            <i class="icon-help"></i>
+        </a>
+    </ng-container>
+</sqx-panel>
+
+<router-outlet></router-outlet>

src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html

@@ -1,6 +1,6 @@
 <sqx-title message="{app} | Contributors | Settings" parameter1="app" [value1]="appsState.appName"></sqx-title>
 
-<sqx-panel desiredWidth="50rem">
+<sqx-panel desiredWidth="50rem" [showSidebar]="true">
     <ng-container title>
         Contributors
     </ng-container>
@@ -71,4 +71,15 @@
             </ng-container>
         </ng-container>
     </ng-container>
-</sqx-panel>
+
+    <ng-container sidebar>
+        <a class="panel-link" routerLink="history" routerLinkActive="active">
+            <i class="icon-time"></i>
+        </a>
+        <a class="panel-link" routerLink="help" routerLinkActive="active">
+            <i class="icon-help"></i>
+        </a>
+    </ng-container>
+</sqx-panel>
+
+<router-outlet></router-outlet>

src/Squidex/app/features/settings/pages/languages/languages-page.component.html

@@ -1,6 +1,6 @@
 <sqx-title message="{app} | Languages | Settings" parameter1="app" [value1]="appsState.appName"></sqx-title>
 
-<sqx-panel desiredWidth="42rem">
+<sqx-panel desiredWidth="50rem" [showSidebar]="true">
     <ng-container title>
         Languages
     </ng-container>
@@ -41,4 +41,15 @@
             </ng-container>
         </ng-container>
     </ng-container>
-</sqx-panel>
+
+    <ng-container sidebar>
+        <a class="panel-link" routerLink="history" routerLinkActive="active">
+            <i class="icon-time"></i>
+        </a>
+        <a class="panel-link" routerLink="help" routerLinkActive="active">
+            <i class="icon-help"></i>
+        </a>
+    </ng-container>
+</sqx-panel>
+
+<router-outlet></router-outlet>

src/Squidex/app/features/settings/pages/patterns/patterns-page.component.html

@@ -1,6 +1,6 @@
 <sqx-title message="{app} | Patterns | Settings" parameter1="app" [value1]="appsState.appName"></sqx-title>
 
-<sqx-panel desiredWidth="60rem">
+<sqx-panel desiredWidth="63rem" [showSidebar]="true">
     <ng-container title>
         Patterns
     </ng-container>
@@ -23,6 +23,15 @@
             <sqx-pattern></sqx-pattern>
         </ng-container>
     </ng-container>
+
+    <ng-container sidebar>
+        <a class="panel-link" routerLink="history" routerLinkActive="active">
+            <i class="icon-time"></i>
+        </a>
+        <a class="panel-link" routerLink="help" routerLinkActive="active">
+            <i class="icon-help"></i>
+        </a>
+    </ng-container>
 </sqx-panel>
 
 <router-outlet></router-outlet>

src/Squidex/app/features/settings/pages/plans/plans-page.component.html

@@ -1,6 +1,6 @@
 <sqx-title message="{app} | Plans | Settings" parameter1="app" [value1]="appsState.appName"></sqx-title>
 
-<sqx-panel desiredWidth="61rem">
+<sqx-panel desiredWidth="63rem" [showSidebar]="true">
     <ng-container title>
         Update Plan
     </ng-container>
@@ -77,4 +77,12 @@
             </ng-container>
         </ng-container>
     </ng-container>
-</sqx-panel>
+
+    <ng-container sidebar>
+        <a class="panel-link" routerLink="help" routerLinkActive="active">
+            <i class="icon-help"></i>
+        </a>
+    </ng-container>
+</sqx-panel>
+
+<router-outlet></router-outlet>

src/Squidex/app/shared/components/history-list.component.scss

@@ -23,6 +23,10 @@
         margin-bottom: 1.5rem;
     }
 
+    &-message {
+        margin-bottom: .35rem;
+    }
+
     &-created {
         font-size: .75rem;
     }

src/Squidex/app/theme/_common.scss

@@ -15,16 +15,6 @@ body {
     }
 }
 
-// User ref for history panel. Must be placed here, because element is created dynamically.
-.user-ref {
-    color: $color-theme-blue-dark;
-}
-
-// Marker ref for history panel. Must be placed here, because element is created dynamically.
-.marker-ref {
-    font-weight: bolder;
-}
-
 // Common style for user email.
 .user-email {
     font-style: italic;