Fix for comments.

frontend/app/features/assets/pages/assets-page.component.scss

@@ -22,13 +22,4 @@
             }
         }
     }
-}
-
-.grid-header {
-    padding-left: 1rem;
-}
-
-.grid-content {
-    padding-top: 1rem;
-    padding-bottom: 1rem;
 }

frontend/app/features/content/shared/contents-selector.component.scss

@@ -27,10 +27,4 @@
     padding: 0;
     padding-right: 1.5rem;
     min-width: 100%;
-}
-
-.grid-content {
-    overflow-y: auto;
-    overflow-x: auto;
-    padding-right: 0;
 }

frontend/app/framework/angular/list-view.component.html

@@ -7,7 +7,7 @@
         <ng-content select="[header]"></ng-content>
     </div>
     
-    <div class="grid-content normal" [class.loading-indicator]="isLoadingValue"  #contentElement [class.tabled]="table">
+    <div class="grid-content normal" [class.loading-indicator]="isLoadingValue" [class.tabled]="table" #contentElement>
         <ng-content select="[content]"></ng-content>
     </div>
 </ng-container>

frontend/app/framework/angular/list-view.component.scss

@@ -46,7 +46,7 @@
         & {
             @include flex-shrink(0);
             border: 0;
-            border-bottom: 2px solid $color-border;
+            border-bottom: 1px solid $color-border;
             overflow-x: hidden;
             overflow-y: hidden;
         }
@@ -72,7 +72,7 @@
         & {
             @include flex-shrink(1);
             border: 0;
-            border-top: 2px solid $color-border;
+            border-top: 1px solid $color-border;
         }
 
         /deep/ .pagination {

frontend/app/shared/components/comments.component.html

@@ -4,8 +4,8 @@
     </ng-container>
 
     <ng-container content>
-        <div class="grid-content" #scrollMe [scrollTop]="scrollMe.scrollHeight">
-            <sqx-comment *ngFor="let comment of state.comments | async; trackBy: trackByComment"
+        <div class="comments-list" #scrollMe [scrollTop]="scrollMe.scrollHeight">
+            <sqx-comment *ngFor="let comment of commentsState.comments | async; trackBy: trackByComment"
                 [comment]="comment"
                 [userId]="userId"
                 (update)="update(comment, $event)"
@@ -13,9 +13,13 @@
             </sqx-comment>
         </div>
         
-        <div class="grid-footer">
+        <div class="comments-footer">
             <form [formGroup]="commentForm.form" (ngSubmit)="comment()">
-                <input class="form-control" name="text" formControlName="text" placeholder="Create a comment" />
+                <input class="form-control" name="text" formControlName="text" placeholder="Create a comment"
+                    autocomplete="off" 
+                    autocorrect="off"
+                    autocapitalize="off"
+                />
             </form>
         </div>
     </ng-container>

frontend/app/shared/components/comments.component.scss

@@ -1,11 +1,26 @@
 @import '_vars';
 @import '_mixins';
 
-.grid-footer {
-    border-top-width: 1px;
+.comments {
+    &-list {
+        @include flex-grow(1);
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 1rem;
+        padding-left: 1.5rem;
+    }
+
+    &-footer {
+        @include flex-shrink(0);
+        border-top: 1px solid $color-border;
+    }
 }
 
-.grid-body,
-.grid-footer {
-    padding: 1rem;
+
+.form-control {
+    border: 0;
+
+    &:focus {
+        @include box-shadow-none;
+    }
 }

frontend/app/shared/components/comments.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 import { timer } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
@@ -27,18 +27,18 @@ import {
     templateUrl: './comments.component.html'
 })
 export class CommentsComponent extends ResourceOwner implements OnInit {
-    public state: CommentsState;
-
-    public userId: string;
+    @Input()
+    public commentsId: string;
 
+    public commentsState: CommentsState;
     public commentForm = new UpsertCommentForm(this.formBuilder);
 
-    @Input()
-    public commentsId: string;
+    public userId: string;
 
     constructor(authService: AuthService,
         private readonly appsState: AppsState,
         private readonly commentsService: CommentsService,
+        private readonly changeDetector: ChangeDetectorRef,
         private readonly dialogs: DialogService,
         private readonly formBuilder: FormBuilder
     ) {
@@ -48,26 +48,27 @@ export class CommentsComponent extends ResourceOwner implements OnInit {
     }
 
     public ngOnInit() {
-        this.state = new CommentsState(this.appsState, this.commentsId, this.commentsService, this.dialogs);
+        this.commentsState = new CommentsState(this.appsState, this.commentsId, this.commentsService, this.dialogs);
 
-        this.own(timer(0, 4000).pipe(switchMap(() => this.state.load())));
+        this.own(timer(0, 4000).pipe(switchMap(() => this.commentsState.load())));
     }
 
     public delete(comment: CommentDto) {
-        this.state.delete(comment);
+        this.commentsState.delete(comment);
     }
 
     public update(comment: CommentDto, text: string) {
-        this.state.update(comment, text);
+        this.commentsState.update(comment, text);
     }
 
     public comment() {
         const value = this.commentForm.submit();
 
-        if (value) {
-            this.state.create(value.text);
-
+        if (value && value.text && value.text.length > 0) {
+            this.commentsState.create(value.text);
             this.commentForm.submitCompleted();
+
+            this.changeDetector.detectChanges();
         }
     }
 

frontend/app/shared/state/comments.form.ts

@@ -5,18 +5,14 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
 
 import { Form } from '@app/framework';
 
 export class UpsertCommentForm extends Form<FormGroup, { text: string }> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({
-            text: ['',
-                [
-                    Validators.required
-                ]
-            ]
+            text: ''
         }));
     }
 }