History component.

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

@@ -117,17 +117,7 @@
                         History
                     </div>
                     <div class="card-body card-history card-body-scroll">
-                        <div *ngFor="let event of history" class="event">
+                        <sqx-history-list [events]="history"></sqx-history-list>            
-                            <div class="event-left">
-                                <img class="user-picture" [attr.title]="event.actor | sqxUserNameRef:null" [attr.src]="event.actor | sqxUserPictureRef" />
-                            </div>
-                            <div class="event-main">
-                                <div class="event-message">
-                                    <span class="event-actor user-ref">{{event.actor | sqxUserNameRef:null}}</span> <span [innerHTML]="format(event.message) | async"></span>
-                                </div>
-                                <div class="event-created">{{event.created | sqxFromNow}}</div>
-                            </div>
-                        </div>            
                     </div>
                 </div>
             </div>

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

@@ -6,7 +6,7 @@
  */
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
 
 import {
     AppDto,
@@ -14,11 +14,9 @@ import {
     AuthService,
     DateTime,
     fadeAnimation,
-    formatHistoryMessage,
     HistoryEventDto,
     HistoryService,
-    UsagesService,
+    UsagesService
-    UsersProviderService
 } from '@app/shared';
 
 declare var _urq: any;
@@ -74,7 +72,6 @@ export class DashboardPageComponent implements OnDestroy, OnInit {
         public readonly appsState: AppsState,
         public readonly authState: AuthService,
         private readonly historyService: HistoryService,
-        private readonly users: UsersProviderService,
         private readonly usagesService: UsagesService
     ) {
     }
@@ -178,10 +175,6 @@ export class DashboardPageComponent implements OnDestroy, OnInit {
                 }));
     }
 
-    public format(message: string): Observable<string> {
-        return formatHistoryMessage(message, this.users);
-    }
-
     public showForum() {
         _urq.push(['Feedback_Open']);
     }

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

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

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

@@ -0,0 +1,29 @@
+@import '_vars';
+@import '_mixins';
+
+:host /deep/ {
+    .user-ref {
+        color: $color-title;
+    }
+
+    .marker-ref {
+        color: $color-title;
+    }
+}
+
+.user-picture {
+    margin-top: .25rem;
+}
+
+.event {
+    & {
+        color: $color-text-decent;
+        font-size: .9rem;
+        font-weight: normal;
+        margin-bottom: 1.5rem;
+    }
+
+    &-created {
+        font-size: .75rem;
+    }
+}

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

@@ -0,0 +1,38 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Component, Input } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import {
+    formatHistoryMessage,
+    HistoryEventDto,
+    UsersProviderService
+} from '@app/shared/internal';
+
+@Component({
+    selector: 'sqx-history-list',
+    styleUrls: ['./history-list.component.scss'],
+    templateUrl: './history-list.component.html'
+})
+export class HistoryListComponent {
+    @Input()
+    public events: HistoryEventDto;
+
+    constructor(
+        private readonly users: UsersProviderService
+    ) {
+    }
+
+    public format(message: string): Observable<string> {
+        return formatHistoryMessage(message, this.users);
+    }
+
+    public trackByEvent(index: number, event: HistoryEventDto) {
+        return event.eventId;
+    }
+}

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

@@ -4,16 +4,6 @@
     </ng-container>
 
     <ng-container content>
-        <div *ngFor="let event of events | async" class="event">
+        <sqx-history-list [events]="events | async"></sqx-history-list>
-            <div class="event-left">
-                <img class="user-picture" [attr.title]="event.actor | sqxUserNameRef:null" [attr.src]="event.actor | sqxUserPictureRef" />
-            </div>
-            <div class="event-main">
-                <div class="event-message">
-                    <span class="event-actor user-ref">{{event.actor | sqxUserNameRef:null}}</span> <span [innerHTML]="format(event.message) | async"></span>
-                </div>
-                <div class="event-created">{{event.created | sqxFromNow}}</div>
-            </div>
-        </div>
     </ng-container>
 </sqx-panel>

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

@@ -1,25 +1,2 @@
 @import '_vars';
-@import '_mixins';
+@import '_mixins';
-
-.event {
-    & {
-        @include flex-box;
-        margin-bottom: 1rem;
-    }
-
-    &-main {
-        @include flex-grow(1);
-    }
-
-    &-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/shared/components/history.component.ts

@@ -12,12 +12,10 @@ import { Observable } from 'rxjs';
 import {
     allParams,
     AppsState,
-    formatHistoryMessage,
     HistoryChannelUpdated,
     HistoryEventDto,
     HistoryService,
-    MessageBus,
+    MessageBus
-    UsersProviderService
 } from '@app/shared/internal';
 
 @Component({
@@ -26,23 +24,7 @@ import {
     templateUrl: './history.component.html'
 })
 export class HistoryComponent {
-    public get channel(): string {
+    private readonly channel = this.calculateChannel();
-        let channelPath = this.route.snapshot.data['channel'];
-
-        if (channelPath) {
-            const params = allParams(this.route);
-
-            for (let key in params) {
-                if (params.hasOwnProperty(key)) {
-                    const value = params[key];
-
-                    channelPath = channelPath.replace(`{${key}}`, value);
-                }
-            }
-        }
-
-        return channelPath;
-    }
 
     public events: Observable<HistoryEventDto[]> =
         Observable.timer(0, 10000).merge(this.messageBus.of(HistoryChannelUpdated).delay(1000))
@@ -50,14 +32,27 @@ export class HistoryComponent {
 
     constructor(
         private readonly appsState: AppsState,
-        private readonly users: UsersProviderService,
         private readonly historyService: HistoryService,
         private readonly messageBus: MessageBus,
         private readonly route: ActivatedRoute
     ) {
     }
 
-    public format(message: string): Observable<string> {
+    private calculateChannel(): string {
-        return formatHistoryMessage(message, this.users);
+        let channel = this.route.snapshot.data['channel'];
+
+        if (channel) {
+            const params = allParams(this.route);
+
+            for (let key in params) {
+                if (params.hasOwnProperty(key)) {
+                    const value = params[key];
+
+                    channel = channel.replace(`{${key}}`, value);
+                }
+            }
+        }
+
+        return channel;
     }
 }

src/Squidex/app/shared/declarations.ts

@@ -12,6 +12,7 @@ export * from './components/assets-selector.component';
 export * from './components/help.component';
 export * from './components/geolocation-editor.component';
 export * from './components/history.component';
+export * from './components/history-list.component';
 export * from './components/language-selector.component';
 export * from './components/markdown-editor.component';
 export * from './components/pipes';

src/Squidex/app/shared/module.ts

@@ -44,6 +44,7 @@ import {
     HelpComponent,
     HelpService,
     HistoryComponent,
+    HistoryListComponent,
     HistoryService,
     LanguageSelectorComponent,
     LanguagesService,
@@ -95,6 +96,7 @@ import {
         GeolocationEditorComponent,
         HelpComponent,
         HistoryComponent,
+        HistoryListComponent,
         LanguageSelectorComponent,
         MarkdownEditorComponent,
         UserDtoPicture,
@@ -116,6 +118,7 @@ import {
         GeolocationEditorComponent,
         HelpComponent,
         HistoryComponent,
+        HistoryListComponent,
         LanguageSelectorComponent,
         MarkdownEditorComponent,
         RouterModule,