Half width fields.

backend/i18n/frontend_en.json

@@ -662,6 +662,7 @@
   "schemas.field.empty": "No field created yet.",
   "schemas.field.enable": "Enable in UI",
   "schemas.field.enabledMarker": "Enabled",
+  "schemas.field.halfWidth": "Half Width",
   "schemas.field.hiddenMarker": "Hidden",
   "schemas.field.hide": "Hide in API",
   "schemas.field.hintsHint": "Describe this schema for documentation and user interfaces.",

backend/i18n/frontend_it.json

@@ -662,6 +662,7 @@
   "schemas.field.empty": "Nessun campo è stato ancora creato.",
   "schemas.field.enable": "Abilita nella UI",
   "schemas.field.enabledMarker": "Abilitato",
+  "schemas.field.halfWidth": "Half Width",
   "schemas.field.hiddenMarker": "Nasconsto",
   "schemas.field.hide": "Nascondi nelle API",
   "schemas.field.hintsHint": "Descrivi questo schema per la documentazione e le interfacce utente.",

backend/i18n/frontend_nl.json

@@ -58,7 +58,7 @@
   "assets.deleteFolderConfirmTitle": "Map verwijderen",
   "assets.deleteMetadataConfirmText": "Wil je deze metadata echt verwijderen?",
   "assets.deleteMetadataConfirmTitle": "Metadata verwijderen",
-  "assets.deleteReferrerConfirmText": "Er wordt naar het item verwezen door een contentitem.\n\nWil je het item echt verwijderen?",
+  "assets.deleteReferrerConfirmText": "Er wordt naar het item verwezen door een contentitem. \n \n Wil je het item echt verwijderen?",
   "assets.deleteReferrerConfirmTitle": "Verwijder bestand",
   "assets.downloadVersion": "Download deze versie",
   "assets.dropToUpdate": "Zet neer om te updaten",
@@ -662,6 +662,7 @@
   "schemas.field.empty": "Nog geen veld aangemaakt.",
   "schemas.field.enable": "Inschakelen in gebruikersinterface",
   "schemas.field.enabledMarker": "Ingeschakeld",
+  "schemas.field.halfWidth": "Half Width",
   "schemas.field.hiddenMarker": "Verborgen",
   "schemas.field.hide": "Verbergen in API",
   "schemas.field.hintsHint": "Beschrijf dit schema voor documentatie en gebruikersinterfaces.",

backend/i18n/source/backend__ignore.json

@@ -151,10 +151,10 @@
   "/Squidex.Domain.Apps.Entities/Contents/Text/Elastic/ElasticSearchTextIndex.cs": [
     "*"
   ],
-  "/Squidex.Domain.Apps.Entities/Contents/Text/Lucene/IndexManager_Impl.cs": [
+  "/Squidex.Domain.Apps.Entities/Contents/Text/Lucene/IndexManager.cs": [
     "*"
   ],
-  "/Squidex.Domain.Apps.Entities/Contents/Text/Lucene/IndexManager.cs": [
+  "/Squidex.Domain.Apps.Entities/Contents/Text/Lucene/IndexManager_Impl.cs": [
     "*"
   ],
   "/Squidex.Domain.Apps.Entities/Notifications/NotificationEmailSender.cs": [

backend/i18n/source/frontend__ignore.json

@@ -19,8 +19,8 @@
     "#{{index + 1}}"
   ],
   "/features/content/shared/forms/field-editor.component.html": [
-    "{{field.displayName}} {{displaySuffix}}",
-    "*"
+    "*",
+    "{{field.displayName}} {{displaySuffix}}"
   ],
   "/features/content/shared/references/references-editor.component.html": [
     "·"

backend/i18n/source/frontend_en.json

@@ -662,6 +662,7 @@
   "schemas.field.empty": "No field created yet.",
   "schemas.field.enable": "Enable in UI",
   "schemas.field.enabledMarker": "Enabled",
+  "schemas.field.halfWidth": "Half Width",
   "schemas.field.hiddenMarker": "Hidden",
   "schemas.field.hide": "Hide in API",
   "schemas.field.hintsHint": "Describe this schema for documentation and user interfaces.",

backend/src/Squidex.Domain.Apps.Core.Model/Schemas/FieldProperties.cs

@@ -14,6 +14,8 @@ namespace Squidex.Domain.Apps.Core.Schemas
     {
         public bool IsRequired { get; set; }
 
+        public bool IsHalfWidth { get; set; }
+
         public string? Placeholder { get; set; }
 
         public string? EditorUrl { get; set; }

backend/src/Squidex/Areas/Api/Controllers/Schemas/Models/FieldPropertiesDto.cs

@@ -43,6 +43,11 @@ namespace Squidex.Areas.Api.Controllers.Schemas.Models
         /// </summary>
         public bool IsRequired { get; set; }
 
+        /// <summary>
+        /// Indicates if the field should be rendered with half width only.
+        /// </summary>
+        public bool IsHalfWidth { get; set; }
+
         /// <summary>
         /// Optional url to the editor.
         /// </summary>

frontend/app/features/content/pages/content/content-field.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, HostBinding, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { AppLanguageDto, AppsState, EditContentForm, FieldForm, invalid$, LocalStoreService, SchemaDto, Settings, StringFieldPropertiesDto, TranslationsService, Types, value$ } from '@app/shared';
 import { combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -43,6 +43,15 @@ export class ContentFieldComponent implements OnChanges {
     @Input()
     public languages: ReadonlyArray<AppLanguageDto>;
 
+    @HostBinding('class')
+    public get class() {
+        return this.isHalfWidth ? 'col-6 half-field' : 'col-12';
+    }
+
+    public get isHalfWidth() {
+        return this.formModel.field.properties.isHalfWidth && !this.formCompare;
+    }
+
     public showAllControls = false;
 
     public isDifferent: Observable<boolean>;

frontend/app/features/content/pages/content/content-section.component.html

@@ -17,7 +17,7 @@
     </div>
 </ng-container>
 
-<div [class.hidden]="isCollapsed && !formCompare">
+<div class="row small-gutters" [class.hidden]="isCollapsed && !formCompare">
     <sqx-content-field *ngFor="let field of formSection.fields; trackBy: trackByField"
         (languageChange)="languageChange.emit($event)"
         [form]="form"

frontend/app/features/content/pages/content/content-section.component.scss

@@ -1,3 +1,16 @@
+:host ::ng-deep {
+    .small-gutters {
+        margin-left: .25rem;
+        margin-right: .25rem;
+
+        > .col-6,
+        > .col-12 {
+            padding-left: .25rem;
+            padding-right: .25rem;
+        }
+    }
+}
+
 .btn {
     & {
         width: 2rem;

frontend/app/features/schemas/pages/schema/fields/forms/field-form-ui.component.html

@@ -1,5 +1,5 @@
 <div [formGroup]="fieldForm">
-    <div class="form-group row">
+    <div class="form-group row mb-2">
         <label class="col-3 col-form-label" for="{{field.fieldId}}_editorUrl">{{ 'schemas.field.editorUrl' | sqxTranslate }}</label>
 
         <div class="col-6">
@@ -41,3 +41,16 @@
         <sqx-tags-ui [fieldForm]="fieldForm" [field]="field" [properties]="field.rawProperties"></sqx-tags-ui>
     </ng-container>
 </ng-container>
+
+<div [formGroup]="fieldForm">
+    <div class="form-group row mt-2">
+        <div class="col-9 offset-3">
+            <div class="custom-control custom-checkbox">
+                <input class="custom-control-input" type="checkbox" id="{{field.fieldId}}_fieldHalfWidth" formControlName="isHalfWidth">
+                <label class="custom-control-label" for="{{field.fieldId}}_fieldHalfWidth">
+                    {{ 'schemas.field.halfWidth' | sqxTranslate }}
+                </label>
+            </div>
+        </div>
+    </div>
+</div>

frontend/app/features/schemas/pages/schema/fields/forms/field-form-ui.component.scss

@@ -1,3 +0,0 @@
-.form-group {
-    margin-bottom: 1rem;
-}

frontend/app/shared/services/schemas.types.ts

@@ -135,6 +135,7 @@ export abstract class FieldPropertiesDto {
     public readonly editorUrl?: string;
     public readonly hints?: string;
     public readonly isRequired: boolean = false;
+    public readonly isHalfWidth: boolean = false;
     public readonly label?: string;
     public readonly placeholder?: string;
     public readonly tags?: ReadonlyArray<string>;

frontend/app/shared/state/schemas.forms.ts

@@ -214,6 +214,7 @@ export class EditFieldForm extends Form<FormGroup, {}, FieldPropertiesDto> {
             ],
             editorUrl: null,
             isRequired: false,
+            isHalfWidth: false,
             tags: []
         }));
     }