From 7691b5bad51cb8a9af52e016a0aa1855d273a33d Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Wed, 4 Mar 2020 17:15:18 +0100
Subject: [PATCH] Usability improvements.

---
 .../content/shared/forms/array-item.component.html     | 10 +++++-----
 .../angular/forms/control-errors.component.ts          |  8 ++++++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/app/features/content/shared/forms/array-item.component.html b/frontend/app/features/content/shared/forms/array-item.component.html
index f440c1e20..e8286a908 100644
--- a/frontend/app/features/content/shared/forms/array-item.component.html
+++ b/frontend/app/features/content/shared/forms/array-item.component.html
@@ -11,16 +11,16 @@
                 </div>
             </div>
             <div class="col-auto pr-4">
-                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled || isFirst" (click)="moveTop()">
+                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled || isFirst" (click)="moveTop()" title="Move this item to top">
                     <i class="icon-caret-top"></i>
                 </button>
-                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled || isFirst" (click)="moveUp()">
+                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled || isFirst" (click)="moveUp()" title="Move this item up">
                     <i class="icon-caret-up"></i>
                 </button>
-                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled || isLast" (click)="moveDown()">
+                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled || isLast" (click)="moveDown()" title="Move this item down">
                     <i class="icon-caret-down"></i>
                 </button>
-                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled || isLast" (click)="moveBottom()">
+                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled || isLast" (click)="moveBottom()" title="Move this item to bottom">
                     <i class="icon-caret-bottom"></i>
                 </button>
                 <button type="button" class="btn btn-text-secondary" [class.hidden]="!isHidden" (click)="expand()" title="Expand this item">
@@ -31,7 +31,7 @@
                 </button>
             </div>
             <div class="col-auto">
-                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled" (click)="clone.emit()">
+                <button type="button" class="btn btn-text-secondary" [disabled]="isDisabled" (click)="clone.emit()" title="Clone this item">
                     <i class="icon-clone"></i>
                 </button>
         
diff --git a/frontend/app/framework/angular/forms/control-errors.component.ts b/frontend/app/framework/angular/forms/control-errors.component.ts
index 440efa842..1a6d72dda 100644
--- a/frontend/app/framework/angular/forms/control-errors.component.ts
+++ b/frontend/app/framework/angular/forms/control-errors.component.ts
@@ -6,7 +6,7 @@
  */
 
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Host, Input, OnChanges, OnDestroy, Optional } from '@angular/core';
-import { AbstractControl, FormGroupDirective } from '@angular/forms';
+import { AbstractControl, FormArray, FormGroupDirective } from '@angular/forms';
 import { merge } from 'rxjs';
 
 import {
@@ -123,7 +123,7 @@ export class ControlErrorsComponent extends StatefulComponent<State> implements
     private createMessages() {
         const errors: string[] = [];
 
-        if (this.control && this.control.invalid && ((this.control.touched && !this.submitOnly) || this.submitted) && this.control.errors) {
+        if (this.control && this.control.invalid && ((this.isTouched() && !this.submitOnly) || this.submitted) && this.control.errors) {
             for (const key in <any>this.control.errors) {
                 if (this.control.errors.hasOwnProperty(key)) {
                     const message = formatError(this.displayFieldName, key, this.control.errors[key], this.control.value, this.errors);
@@ -139,4 +139,8 @@ export class ControlErrorsComponent extends StatefulComponent<State> implements
             this.next(s => ({ ...s, errorMessages: errors }));
         }
     }
+
+    private isTouched() {
+        return this.control.touched || Types.is(this.control, FormArray);
+    }
 }