From 36440eb49458cacf4b751bdbd277e81740380137 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Wed, 22 Nov 2023 20:47:31 +0100
Subject: [PATCH] Minor UI improvements.

---
 .../Areas/IdentityServer/Views/Account/Login.cshtml       | 2 +-
 frontend/src/app/features/administration/routes.ts        | 4 ++--
 .../src/app/features/apps/pages/apps-page.component.html  | 2 +-
 .../content/shared/forms/array-editor.component.html      | 4 +---
 .../content/shared/forms/array-editor.component.ts        | 3 ---
 .../content/shared/forms/array-item.component.html        | 1 -
 .../content/shared/forms/array-item.component.scss        | 4 ++++
 .../features/content/shared/forms/array-item.component.ts | 3 ---
 .../content/shared/forms/component-section.component.html | 1 -
 .../content/shared/forms/component-section.component.ts   | 3 ---
 .../content/shared/forms/component.component.html         | 1 -
 .../features/content/shared/forms/component.component.ts  | 3 ---
 .../content/shared/forms/content-field.component.html     | 2 --
 .../content/shared/forms/field-editor.component.html      | 5 +----
 .../content/shared/forms/field-editor.component.ts        | 7 +++----
 .../src/app/framework/angular/scroll-active.directive.ts  | 8 +++++---
 .../src/app/shell/pages/home/home-page.component.html     | 2 +-
 frontend/src/app/theme/_common.scss                       | 8 ++++++++
 frontend/src/app/theme/_mixins.scss                       | 2 +-
 19 files changed, 28 insertions(+), 37 deletions(-)

diff --git a/backend/src/Squidex/Areas/IdentityServer/Views/Account/Login.cshtml b/backend/src/Squidex/Areas/IdentityServer/Views/Account/Login.cshtml
index 04527ee7e..27180d067 100644
--- a/backend/src/Squidex/Areas/IdentityServer/Views/Account/Login.cshtml
+++ b/backend/src/Squidex/Areas/IdentityServer/Views/Account/Login.cshtml
@@ -72,7 +72,7 @@
                     <input type="password" class="form-control" name="password" id="password" placeholder="@T.Get("users.login.passwordPlaceholder")" />
                 </div>
 
-                <button type="submit" class="btn btn-block btn-primary">@action</button>
+                <button type="submit" data-testid="login-button" class="btn btn-block btn-primary">@action</button>
             </form>
         }
         else
diff --git a/frontend/src/app/features/administration/routes.ts b/frontend/src/app/features/administration/routes.ts
index 33f3ba8d7..26a0e377a 100644
--- a/frontend/src/app/features/administration/routes.ts
+++ b/frontend/src/app/features/administration/routes.ts
@@ -6,10 +6,10 @@
  */
 
 import { Routes } from '@angular/router';
-import { HelpComponent, UsersService } from '@app/shared';
+import { HelpComponent } from '@app/shared';
 import { AdministrationAreaComponent } from './administration-area.component';
 import { userMustExistGuard } from './guards/user-must-exist.guard';
-import { EventConsumersService, EventConsumersState, UsersState } from './internal';
+import { EventConsumersService, EventConsumersState, UsersService, UsersState } from './internal';
 import { EventConsumersPageComponent } from './pages/event-consumers/event-consumers-page.component';
 import { RestorePageComponent } from './pages/restore/restore-page.component';
 import { UserPageComponent } from './pages/users/user-page.component';
diff --git a/frontend/src/app/features/apps/pages/apps-page.component.html b/frontend/src/app/features/apps/pages/apps-page.component.html
index c94de37cb..f7e1241fb 100644
--- a/frontend/src/app/features/apps/pages/apps-page.component.html
+++ b/frontend/src/app/features/apps/pages/apps-page.component.html
@@ -32,7 +32,7 @@
     </ng-container>
 
     <div class="apps-section" *ngIf="(uiState.settings | async)?.canCreateApps">
-        <div class="card card-template card-href" (click)="createNewApp()" sqxTourStep="addApp">
+        <div class="card card-template card-href" data-testid="new-app" (click)="createNewApp()" sqxTourStep="addApp">
             <div class="card-body">
                 <div class="card-image">
                     <img src="./images/add-app.svg">
diff --git a/frontend/src/app/features/content/shared/forms/array-editor.component.html b/frontend/src/app/features/content/shared/forms/array-editor.component.html
index 6318bd658..9b7485aa0 100644
--- a/frontend/src/app/features/content/shared/forms/array-editor.component.html
+++ b/frontend/src/app/features/content/shared/forms/array-editor.component.html
@@ -11,7 +11,6 @@
             [class.first]="isFirst"
             [class.last]="isLast">
             <sqx-array-item
-                [canUnset]="canUnset"
                 (clone)="addCopy(itemForm)"
                 [form]="form"
                 [formContext]="formContext"
@@ -28,7 +27,7 @@
                 [hasChatBot]="hasChatBot"
                 [language]="language"
                 [languages]="languages">
-                <i cdkDragHandle class="icon-drag2" [class.hidden]="isDisabled | async"></i>
+                <i cdkDragHandle class="icon-drag2" [class.disabled]="isDisabled | async"></i>
             </sqx-array-item>
         </div>
     </div>
@@ -39,7 +38,6 @@
                 [class.first]="scroll.viewPortInfo.startIndexWithBuffer + i === 0"
                 [class.last]="scroll.viewPortInfo.startIndexWithBuffer + i === items.length - 1">
                 <sqx-array-item
-                    [canUnset]="canUnset"
                     (clone)="addCopy(itemForm)"
                     [form]="form"
                     [formContext]="formContext"
diff --git a/frontend/src/app/features/content/shared/forms/array-editor.component.ts b/frontend/src/app/features/content/shared/forms/array-editor.component.ts
index 1d5341265..d544934ed 100644
--- a/frontend/src/app/features/content/shared/forms/array-editor.component.ts
+++ b/frontend/src/app/features/content/shared/forms/array-editor.component.ts
@@ -59,9 +59,6 @@ export class ArrayEditorComponent {
     @Input({ transform: booleanAttribute })
     public isExpanded = false;
 
-    @Input({ transform: booleanAttribute })
-    public canUnset?: boolean | null;
-
     @Input({ required: true })
     public language!: AppLanguageDto;
 
diff --git a/frontend/src/app/features/content/shared/forms/array-item.component.html b/frontend/src/app/features/content/shared/forms/array-item.component.html
index 2b9aa3dc1..893c4ddb4 100644
--- a/frontend/src/app/features/content/shared/forms/array-item.component.html
+++ b/frontend/src/app/features/content/shared/forms/array-item.component.html
@@ -45,7 +45,6 @@
     <div class="card-body" *sqxIfOnce="!(isCollapsed | async)" [class.hidden]="isCollapsed | async">
         <div class="form-group" *ngFor="let section of formModel.sectionsChanges | async">
             <sqx-component-section
-                [canUnset]="canUnset"
                 [form]="form"
                 [formContext]="formContext"
                 [formLevel]="formLevel"
diff --git a/frontend/src/app/features/content/shared/forms/array-item.component.scss b/frontend/src/app/features/content/shared/forms/array-item.component.scss
index c05ed28a5..1f7f244db 100644
--- a/frontend/src/app/features/content/shared/forms/array-item.component.scss
+++ b/frontend/src/app/features/content/shared/forms/array-item.component.scss
@@ -18,6 +18,10 @@
         line-height: 2.2rem;
     }
 
+    &-body {
+        padding-top: 1.75rem;
+    }
+
     .header-index {
         @include force-width(3rem);
         display: inline-block;
diff --git a/frontend/src/app/features/content/shared/forms/array-item.component.ts b/frontend/src/app/features/content/shared/forms/array-item.component.ts
index 8a1dbf7b4..03945db5f 100644
--- a/frontend/src/app/features/content/shared/forms/array-item.component.ts
+++ b/frontend/src/app/features/content/shared/forms/array-item.component.ts
@@ -57,9 +57,6 @@ export class ArrayItemComponent {
     @Input({ required: true })
     public formModel!: ObjectFormBase;
 
-    @Input({ transform: booleanAttribute })
-    public canUnset?: boolean | null;
-
     @Input({ required: true, transform: booleanAttribute })
     public isComparing = false;
 
diff --git a/frontend/src/app/features/content/shared/forms/component-section.component.html b/frontend/src/app/features/content/shared/forms/component-section.component.html
index 84c25392a..5f0592461 100644
--- a/frontend/src/app/features/content/shared/forms/component-section.component.html
+++ b/frontend/src/app/features/content/shared/forms/component-section.component.html
@@ -12,7 +12,6 @@
             [class.col-12]="isComparing || !child.field.properties.isHalfWidth"
             [class.col-6]="!isComparing && child.field.properties.isHalfWidth">
             <sqx-field-editor *ngIf="!(child.hiddenChanges | async)"
-                [canUnset]="canUnset"
                 [comments]="null"
                 [form]="form"
                 [formContext]="formContext"
diff --git a/frontend/src/app/features/content/shared/forms/component-section.component.ts b/frontend/src/app/features/content/shared/forms/component-section.component.ts
index ae1bf2cf3..a1d979550 100644
--- a/frontend/src/app/features/content/shared/forms/component-section.component.ts
+++ b/frontend/src/app/features/content/shared/forms/component-section.component.ts
@@ -53,9 +53,6 @@ export class ComponentSectionComponent {
     @Input({ transform: numberAttribute })
     public index: number | null | undefined;
 
-    @Input({ transform: booleanAttribute })
-    public canUnset?: boolean | null;
-
     @ViewChildren(FieldEditorComponent)
     public editors!: QueryList<FieldEditorComponent>;
 
diff --git a/frontend/src/app/features/content/shared/forms/component.component.html b/frontend/src/app/features/content/shared/forms/component.component.html
index a7cf481cf..498df29d5 100644
--- a/frontend/src/app/features/content/shared/forms/component.component.html
+++ b/frontend/src/app/features/content/shared/forms/component.component.html
@@ -6,7 +6,6 @@
 
         <div class="form-group" *ngFor="let section of formModel.sectionsChanges | async">
             <sqx-component-section
-                [canUnset]="canUnset"
                 [form]="form"
                 [formContext]="formContext"
                 [formLevel]="formLevel + 1"
diff --git a/frontend/src/app/features/content/shared/forms/component.component.ts b/frontend/src/app/features/content/shared/forms/component.component.ts
index 339647a3b..48b054f4c 100644
--- a/frontend/src/app/features/content/shared/forms/component.component.ts
+++ b/frontend/src/app/features/content/shared/forms/component.component.ts
@@ -35,9 +35,6 @@ export class ComponentComponent {
     @Input({ required: true })
     public hasChatBot!: boolean;
 
-    @Input({ transform: booleanAttribute })
-    public canUnset?: boolean | null;
-
     @Input({ required: true })
     public form!: EditContentForm;
 
diff --git a/frontend/src/app/features/content/shared/forms/content-field.component.html b/frontend/src/app/features/content/shared/forms/content-field.component.html
index 989ea2420..8ed73dcb0 100644
--- a/frontend/src/app/features/content/shared/forms/content-field.component.html
+++ b/frontend/src/app/features/content/shared/forms/content-field.component.html
@@ -26,7 +26,6 @@
                 <ng-container *ngIf="showAllControls; else singleControl">
                     <div class="form-group" *ngFor="let language of languages">
                         <sqx-field-editor
-                            [canUnset]="!(isDisabled | async)"
                             [comments]="commentsState"
                             [displaySuffix]="prefix(language)"
                             [form]="form"
@@ -43,7 +42,6 @@
             
                 <ng-template #singleControl>
                     <sqx-field-editor
-                        [canUnset]="!(isDisabled | async)"
                         [comments]="commentsState"
                         [form]="form"
                         [formContext]="formContext"
diff --git a/frontend/src/app/features/content/shared/forms/field-editor.component.html b/frontend/src/app/features/content/shared/forms/field-editor.component.html
index dd20659eb..f4a736070 100644
--- a/frontend/src/app/features/content/shared/forms/field-editor.component.html
+++ b/frontend/src/app/features/content/shared/forms/field-editor.component.html
@@ -1,5 +1,5 @@
 <div class="field" [class.expanded]="isExpanded" *ngIf="formModel">
-    <div class="buttons-container" *ngIf="canUnset">
+    <div class="buttons-container" *ngIf="!(isDisabled | async)">
         <div class="buttons">
             <button *ngIf="hasChatBot" type="button" class="btn btn-sm btn-outline-secondary force no-focus-shadow" (click)="chatDialog.show()" tabindex="-1">
                 AI
@@ -48,7 +48,6 @@
 			<ng-container [ngSwitch]="field.properties.fieldType">
                 <ng-container *ngSwitchCase="'Array'">
                     <sqx-array-editor
-                        [canUnset]="canUnset"
                         [form]="form"
                         [formLevel]="formLevel"
                         [formModel]="$any(formModel)"
@@ -78,7 +77,6 @@
                 </ng-container>
                 <ng-container *ngSwitchCase="'Component'">
                     <sqx-component
-                        [canUnset]="canUnset"
                         [form]="form"
                         [formContext]="formContext"
                         [formLevel]="formLevel"
@@ -91,7 +89,6 @@
                 </ng-container>
                 <ng-container *ngSwitchCase="'Components'">
                     <sqx-array-editor
-                        [canUnset]="canUnset"
                         [form]="form"
                         [formLevel]="formLevel"
                         [formModel]="$any(formModel)"
diff --git a/frontend/src/app/features/content/shared/forms/field-editor.component.ts b/frontend/src/app/features/content/shared/forms/field-editor.component.ts
index de2bc7249..7df95c5a0 100644
--- a/frontend/src/app/features/content/shared/forms/field-editor.component.ts
+++ b/frontend/src/app/features/content/shared/forms/field-editor.component.ts
@@ -9,7 +9,7 @@ import { AsyncPipe, NgFor, NgIf, NgSwitch, NgSwitchCase } from '@angular/common'
 import { booleanAttribute, Component, ElementRef, EventEmitter, Input, numberAttribute, Output, ViewChild } from '@angular/core';
 import { AbstractControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Observable } from 'rxjs';
-import { AbstractContentForm, AnnotationCreate, AnnotationsSelect, AppLanguageDto, ChatDialogComponent, CheckboxGroupComponent, CodeEditorComponent, ColorPickerComponent, CommentsState, ConfirmClickDirective, ControlErrorsComponent, DateTimeEditorComponent, DialogModel, EditContentForm, FieldDto, FormHintComponent, GeolocationEditorComponent, hasNoValue$, IndeterminateValueDirective, MarkdownDirective, MathHelper, MessageBus, ModalDirective, RadioGroupComponent, ReferenceInputComponent, RichEditorComponent, StarsComponent, TagEditorComponent, ToggleComponent, TooltipDirective, TransformInputDirective, TypedSimpleChanges, Types } from '@app/shared';
+import { AbstractContentForm, AnnotationCreate, AnnotationsSelect, AppLanguageDto, ChatDialogComponent, CheckboxGroupComponent, CodeEditorComponent, ColorPickerComponent, CommentsState, ConfirmClickDirective, ControlErrorsComponent, DateTimeEditorComponent, DialogModel, disabled$, EditContentForm, FieldDto, FormHintComponent, GeolocationEditorComponent, hasNoValue$, IndeterminateValueDirective, MarkdownDirective, MathHelper, MessageBus, ModalDirective, RadioGroupComponent, ReferenceInputComponent, RichEditorComponent, StarsComponent, TagEditorComponent, ToggleComponent, TooltipDirective, TransformInputDirective, TypedSimpleChanges, Types } from '@app/shared';
 import { ReferenceDropdownComponent } from '../references/reference-dropdown.component';
 import { ReferencesCheckboxesComponent } from '../references/references-checkboxes.component';
 import { ReferencesEditorComponent } from '../references/references-editor.component';
@@ -100,9 +100,6 @@ export class FieldEditorComponent {
     @Input({ required: true, transform: booleanAttribute })
     public isComparing = false;
 
-    @Input({ transform: booleanAttribute })
-    public canUnset?: boolean | null;
-
     @Input()
     public displaySuffix = '';
 
@@ -111,6 +108,7 @@ export class FieldEditorComponent {
 
     public isEmpty?: Observable<boolean>;
     public isExpanded = false;
+    public isDisabled?: Observable<boolean>;
 
     public chatDialog = new DialogModel();
 
@@ -132,6 +130,7 @@ export class FieldEditorComponent {
     public ngOnChanges(changes: TypedSimpleChanges<this>) {
         if (changes.formModel) {
             this.isEmpty = hasNoValue$(this.formModel.form);
+            this.isDisabled = disabled$(this.formModel.form);
         }
 
         if (changes.formModel || changes.comments) {
diff --git a/frontend/src/app/framework/angular/scroll-active.directive.ts b/frontend/src/app/framework/angular/scroll-active.directive.ts
index 457e77e70..0b3aa9be7 100644
--- a/frontend/src/app/framework/angular/scroll-active.directive.ts
+++ b/frontend/src/app/framework/angular/scroll-active.directive.ts
@@ -8,7 +8,7 @@
 /* eslint-disable @angular-eslint/no-input-rename */
 
 import { AfterViewInit, booleanAttribute, Directive, ElementRef, Input, numberAttribute, Renderer2 } from '@angular/core';
-import { Types } from '../internal';
+import { TypedSimpleChanges, Types } from '../internal';
 
 @Directive({
     selector: '[sqxScrollActive]',
@@ -34,8 +34,10 @@ export class ScrollActiveDirective implements AfterViewInit {
         this.check();
     }
 
-    public ngOnChanges() {
-        this.check();
+    public ngOnChanges(changes: TypedSimpleChanges<ScrollActiveDirective>) {
+        if (changes.isActive) {
+            this.check();
+        }
     }
 
     private check() {
diff --git a/frontend/src/app/shell/pages/home/home-page.component.html b/frontend/src/app/shell/pages/home/home-page.component.html
index 6b6852d16..4ce9cd6ff 100644
--- a/frontend/src/app/shell/pages/home/home-page.component.html
+++ b/frontend/src/app/shell/pages/home/home-page.component.html
@@ -4,7 +4,7 @@
             <img alt="Logo" class="login-icon login-element" src="./images/logo.svg">
 
             <div>
-                <button type="button" class="btn btn-success btn-lg login-button login-element" (click)="login()">
+                <button type="button" data-testid="login" class="btn btn-success btn-lg login-button login-element" (click)="login()">
                     {{ 'start.login' | sqxTranslate }}
                 </button>
             </div>
diff --git a/frontend/src/app/theme/_common.scss b/frontend/src/app/theme/_common.scss
index 74b6c6727..fd153972c 100644
--- a/frontend/src/app/theme/_common.scss
+++ b/frontend/src/app/theme/_common.scss
@@ -281,6 +281,14 @@ hr {
     display: none !important;
 }
 
+.disabled {
+    pointer-events: none;
+
+    & {
+        opacity: .5;
+    }
+}
+
 // Hidden helper (fast *ngIf replacement)
 .invisible {
     visibility: hidden;
diff --git a/frontend/src/app/theme/_mixins.scss b/frontend/src/app/theme/_mixins.scss
index 6470abdda..1c7e82348 100644
--- a/frontend/src/app/theme/_mixins.scss
+++ b/frontend/src/app/theme/_mixins.scss
@@ -28,7 +28,7 @@
 
     &:disabled,
     &.disabled {
-        border: none;
+        border-color: transparent;
         border-radius: 0;
         opacity: .4;
     }