From f4f6f778c49d413595e6a122b0460586d59d1659 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Wed, 18 May 2022 16:02:08 +0200
Subject: [PATCH] Half width array and component fields.

---
 .../MongoDb/BsonJsonWriter.cs                 |  4 +--
 .../editor/content-field.component.html       | 14 +++++----
 .../shared/forms/array-editor.component.html  |  2 ++
 .../shared/forms/array-editor.component.ts    |  5 +++-
 .../shared/forms/array-item.component.html    |  1 +
 .../shared/forms/array-item.component.ts      |  5 +++-
 .../forms/component-section.component.html    | 30 +++++++++++--------
 .../forms/component-section.component.scss    |  8 +++++
 .../forms/component-section.component.ts      |  5 +++-
 .../shared/forms/component.component.html     |  1 +
 .../shared/forms/component.component.ts       |  5 +++-
 .../shared/forms/field-editor.component.html  |  3 ++
 .../shared/forms/field-editor.component.ts    |  5 +++-
 13 files changed, 63 insertions(+), 25 deletions(-)

diff --git a/backend/src/Squidex.Infrastructure.MongoDb/MongoDb/BsonJsonWriter.cs b/backend/src/Squidex.Infrastructure.MongoDb/MongoDb/BsonJsonWriter.cs
index a5452246e..400ef0747 100644
--- a/backend/src/Squidex.Infrastructure.MongoDb/MongoDb/BsonJsonWriter.cs
+++ b/backend/src/Squidex.Infrastructure.MongoDb/MongoDb/BsonJsonWriter.cs
@@ -6,11 +6,11 @@
 // ==========================================================================
 
 using MongoDB.Bson.IO;
-using NewtonsoftJSonWriter = Newtonsoft.Json.JsonWriter;
+using NewtonsoftJsonWriter = Newtonsoft.Json.JsonWriter;
 
 namespace Squidex.Infrastructure.MongoDb
 {
-    public sealed class BsonJsonWriter : NewtonsoftJSonWriter
+    public sealed class BsonJsonWriter : NewtonsoftJsonWriter
     {
         private readonly IBsonWriter bsonWriter;
 
diff --git a/frontend/src/app/features/content/pages/content/editor/content-field.component.html b/frontend/src/app/features/content/pages/content/editor/content-field.component.html
index 2a0ad2ea8..b5ba0eeff 100644
--- a/frontend/src/app/features/content/pages/content/editor/content-field.component.html
+++ b/frontend/src/app/features/content/pages/content/editor/content-field.component.html
@@ -24,13 +24,14 @@
                 <div class="form-group" *ngFor="let language of languages">
                     <sqx-field-editor
                         [canUnset]="!formModel.field.isDisabled"
+                        [displaySuffix]="prefix(language)"
                         [form]="form"
                         [formContext]="formContext"
                         [formLevel]="formLevel"
                         [formModel]="formModel.get(language)"
+                        [isComparing]="!!formModelCompare"
                         [language]="language"
-                        [languages]="languages"
-                        [displaySuffix]="prefix(language)">
+                        [languages]="languages">
                     </sqx-field-editor>
                 </div>
             </ng-container>
@@ -42,6 +43,7 @@
                     [formContext]="formContext"
                     [formLevel]="formLevel"
                     [formModel]="getControl()"
+                    [isComparing]="!!formModelCompare"
                     [language]="language"
                     [languages]="languages">
                 </sqx-field-editor>
@@ -73,13 +75,14 @@
             <ng-container *ngIf="showAllControls; else singleControlCompare">
                 <div class="form-group" *ngFor="let language of languages">
                     <sqx-field-editor
+                        [displaySuffix]="prefix(language)"
                         [form]="formCompare"
                         [formContext]="formContext"
                         [formLevel]="formLevel"
                         [formModel]="formModelCompare.get(language)"
+                        [isComparing]="!!formModelCompare"
                         [language]="language"
-                        [languages]="languages"
-                        [displaySuffix]="prefix(language)">
+                        [languages]="languages">
                     </sqx-field-editor>
                 </div>
             </ng-container>
@@ -91,7 +94,8 @@
                     [formLevel]="formLevel"
                     [formModel]="getControlCompare()!"
                     [language]="language"
-                    [languages]="languages">
+                    [languages]="languages"
+                    [isComparing]="!!formModelCompare">
                 </sqx-field-editor>
             </ng-template>
         </div>
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 8b3c67b12..08a507741 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
@@ -17,6 +17,7 @@
                 [formLevel]="formLevel + 1"
                 [formModel]="itemForm"
                 [index]="i"
+                [isComparing]="isComparing"
                 [isCollapsedInitial]="isCollapsedInitial"
                 [isDisabled]="isDisabled | async"
                 [isFirst]="isFirst"
@@ -44,6 +45,7 @@
                     [formModel]="itemForm"
                     [index]="scroll.viewPortInfo.startIndexWithBuffer + i"
                     [isCollapsedInitial]="isCollapsedInitial"
+                    [isComparing]="isComparing"
                     [isDisabled]="isDisabled | async"
                     [isFirst]="scroll.viewPortInfo.startIndexWithBuffer + i === 0"
                     [isLast]="scroll.viewPortInfo.startIndexWithBuffer + i === items.length - 1"
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 447ec9f14..46ccac253 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
@@ -14,7 +14,7 @@ import { AppLanguageDto, ComponentsFieldPropertiesDto, disabled$, EditContentFor
 import { ArrayItemComponent } from './array-item.component';
 
 @Component({
-    selector: 'sqx-array-editor[form][formContext][formLevel][formModel][language][languages]',
+    selector: 'sqx-array-editor[form][formContext][formLevel][formModel][language][languages][isComparing]',
     styleUrls: ['./array-editor.component.scss'],
     templateUrl: './array-editor.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -32,6 +32,9 @@ export class ArrayEditorComponent implements OnChanges {
     @Input()
     public formModel!: FieldArrayForm;
 
+    @Input()
+    public isComparing = false;
+
     @Input()
     public canUnset?: boolean | null;
 
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 e9da04aca..d5d02cc24 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
@@ -51,6 +51,7 @@
                 [formLevel]="formLevel"
                 [formSection]="$any(section)"
                 [index]="index"
+                [isComparing]="isComparing"
                 [language]="language"
                 [languages]="languages">
             </sqx-component-section>
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 afff0429d..0c4fbd466 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
@@ -12,7 +12,7 @@ import { AppLanguageDto, ComponentForm, EditContentForm, FieldDto, FieldFormatte
 import { ComponentSectionComponent } from './component-section.component';
 
 @Component({
-    selector: 'sqx-array-item[form][formContext][formLevel][formModel][index][language][languages]',
+    selector: 'sqx-array-item[form][formContext][formLevel][formModel][index][isComparing][language][languages]',
     styleUrls: ['./array-item.component.scss'],
     templateUrl: './array-item.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -45,6 +45,9 @@ export class ArrayItemComponent implements OnChanges {
     @Input()
     public canUnset?: boolean | null;
 
+    @Input()
+    public isComparing = false;
+
     @Input()
     public isCollapsedInitial = 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 f4043debb..08bb3bcab 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
@@ -6,18 +6,22 @@
             <span [sqxMarkdown]="separator.properties.hints" [optional]="true" [inline]="true"></span>
         </sqx-form-hint>
     </div>
-    
-    <div class="form-group" *ngFor="let child of formSection.fields; trackBy: trackByField">
-        <sqx-field-editor *ngIf="!(child.hiddenChanges | async)"
-            [canUnset]="canUnset"
-            [form]="form"
-            [formContext]="formContext"
-            [formLevel]="formLevel"
-            [formModel]="child"
-            [index]="index"
-            [canUnset]="canUnset"
-            [language]="language"
-            [languages]="languages">
-        </sqx-field-editor>
+
+    <div class="row">
+        <div class="form-group" *ngFor="let child of formSection.fields; trackBy: trackByField"
+            [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"
+                [form]="form"
+                [formContext]="formContext"
+                [formLevel]="formLevel"
+                [formModel]="child"
+                [index]="index"
+                [isComparing]="isComparing"
+                [language]="language"
+                [languages]="languages">
+            </sqx-field-editor>
+        </div>
     </div>
 </ng-container>
\ No newline at end of file
diff --git a/frontend/src/app/features/content/shared/forms/component-section.component.scss b/frontend/src/app/features/content/shared/forms/component-section.component.scss
index d09f89760..ac6f6e429 100644
--- a/frontend/src/app/features/content/shared/forms/component-section.component.scss
+++ b/frontend/src/app/features/content/shared/forms/component-section.component.scss
@@ -9,4 +9,12 @@
     h3 {
         line-height: 2rem;
     }
+}
+
+.col-6 {
+    margin-bottom: 0;
+
+    & ~ .col-12 {
+        margin-top: 1.25rem;
+    }
 }
\ No newline at end of file
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 048e77c29..3a5c42519 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
@@ -10,7 +10,7 @@ import { AbstractContentForm, AppLanguageDto, EditContentForm, FieldDto, FieldSe
 import { FieldEditorComponent } from './field-editor.component';
 
 @Component({
-    selector: 'sqx-component-section[form][formContext][formLevel][formSection][language][languages]',
+    selector: 'sqx-component-section[form][formContext][formLevel][formSection][isComparing][language][languages]',
     styleUrls: ['./component-section.component.scss'],
     templateUrl: './component-section.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -28,6 +28,9 @@ export class ComponentSectionComponent {
     @Input()
     public formSection!: FieldSection<FieldDto, any>;
 
+    @Input()
+    public isComparing = false;
+
     @Input()
     public language!: AppLanguageDto;
 
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 9030286b8..14f6c8db7 100644
--- a/frontend/src/app/features/content/shared/forms/component.component.html
+++ b/frontend/src/app/features/content/shared/forms/component.component.html
@@ -11,6 +11,7 @@
                 [formContext]="formContext"
                 [formLevel]="formLevel + 1"
                 [formSection]="$any(section)"
+                [isComparing]="isComparing"
                 [language]="language"
                 [languages]="languages">
             </sqx-component-section>
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 27f68575d..0a1160ded 100644
--- a/frontend/src/app/features/content/shared/forms/component.component.ts
+++ b/frontend/src/app/features/content/shared/forms/component.component.ts
@@ -11,7 +11,7 @@ import { AppLanguageDto, ComponentFieldPropertiesDto, ComponentForm, disabled$,
 import { ComponentSectionComponent } from './component-section.component';
 
 @Component({
-    selector: 'sqx-component[form][formContext][formLevel][formModel][language][languages]',
+    selector: 'sqx-component[form][formContext][formLevel][formModel][isComparing][language][languages]',
     styleUrls: ['./component.component.scss'],
     templateUrl: './component.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -32,6 +32,9 @@ export class ComponentComponent extends ResourceOwner implements OnChanges {
     @Input()
     public formModel!: ComponentForm;
 
+    @Input()
+    public isComparing = false;
+
     @Input()
     public language!: AppLanguageDto;
 
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 66acc82c4..bb21aaf27 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
@@ -47,6 +47,7 @@
                         [formLevel]="formLevel"
                         [formModel]="$any(formModel)"
                         [formContext]="formContext"
+                        [isComparing]="isComparing"
                         [language]="language"
                         [languages]="languages">
                     </sqx-array-editor>
@@ -74,6 +75,7 @@
                         [formContext]="formContext"
                         [formLevel]="formLevel"
                         [formModel]="$any(formModel)"
+                        [isComparing]="isComparing"
                         [language]="language"
                         [languages]="languages">
                     </sqx-component>
@@ -85,6 +87,7 @@
                         [formLevel]="formLevel"
                         [formModel]="$any(formModel)"
                         [formContext]="formContext"
+                        [isComparing]="isComparing"
                         [language]="language"
                         [languages]="languages">
                     </sqx-array-editor>
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 67b59a6d7..5dc0e45e7 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
@@ -11,7 +11,7 @@ import { Observable } from 'rxjs';
 import { AbstractContentForm, AppLanguageDto, EditContentForm, FieldDto, hasNoValue$, MathHelper, Types } from '@app/shared';
 
 @Component({
-    selector: 'sqx-field-editor[form][formContext][formLevel][formModel][language][languages]',
+    selector: 'sqx-field-editor[form][formContext][formLevel][formModel][isComparing][language][languages]',
     styleUrls: ['./field-editor.component.scss'],
     templateUrl: './field-editor.component.html',
 })
@@ -42,6 +42,9 @@ export class FieldEditorComponent implements OnChanges {
     @Input()
     public index: number | null | undefined;
 
+    @Input()
+    public isComparing = false;
+
     @Input()
     public canUnset?: boolean | null;