Half width array and component fields.

4 years ago · f4f6f778c4
13 changed files with 63 additions and 25 deletions
--- 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;

--- 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>
--- 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"
--- 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;

--- 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>
--- 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;

--- a/frontend/src/app/features/content/shared/forms/component-section.component.html
+++ b/frontend/src/app/features/content/shared/forms/component-section.component.html
@ -7,17 +7,21 @@
        </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>
--- a/frontend/src/app/features/content/shared/forms/component-section.component.scss
+++ b/frontend/src/app/features/content/shared/forms/component-section.component.scss
@ -10,3 +10,11 @@
        line-height: 2rem;
    }
 }
+
+.col-6 {
+    margin-bottom: 0;
+
+    & ~ .col-12 {
+        margin-top: 1.25rem;
+    }
+}
--- 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;

--- 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>
--- 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;

--- 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>
--- 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;