Preview mode for assets.

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

@@ -0,0 +1,16 @@
+// ==========================================================================
+//  Squidex Headless CMS
+// ==========================================================================
+//  Copyright (c) Squidex UG (haftungsbeschraenkt)
+//  All rights reserved. Licensed under the MIT license.
+// ==========================================================================
+
+namespace Squidex.Domain.Apps.Core.Schemas
+{
+    public enum AssetPreviewMode
+    {
+        ImageAndFileName,
+        Image,
+        FileName
+    }
+}

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

@@ -12,7 +12,7 @@ namespace Squidex.Domain.Apps.Core.Schemas
     [Equals(DoNotAddEqualityOperators = true)]
     public sealed class AssetsFieldProperties : FieldProperties
     {
-        public bool MustBeImage { get; set; }
+        public AssetPreviewMode PreviewMode { get; set; }
 
         public int? MinItems { get; set; }
 
@@ -34,6 +34,8 @@ namespace Squidex.Domain.Apps.Core.Schemas
 
         public int? AspectHeight { get; set; }
 
+        public bool MustBeImage { get; set; }
+
         public bool AllowDuplicates { get; set; }
 
         public bool ResolveFirst { get; set; }

backend/src/Squidex/Areas/Api/Controllers/Schemas/Models/Fields/AssetsFieldPropertiesDto.cs

@@ -14,6 +14,11 @@ namespace Squidex.Areas.Api.Controllers.Schemas.Models.Fields
 {
     public sealed class AssetsFieldPropertiesDto : FieldPropertiesDto
     {
+        /// <summary>
+        /// The preview mode for the asset.
+        /// </summary>
+        public AssetPreviewMode PreviewMode { get; set; }
+
         /// <summary>
         /// The minimum allowed items for the field value.
         /// </summary>

frontend/app/features/content/shared/list/content-value.component.html

@@ -2,5 +2,5 @@
     <span class="truncate">{{value}}</span>
 </ng-container>
 <ng-template #html>
-    <span class="html-value truncate" [innerHTML]="value.html"></span>
+    <span class="html-value" [innerHTML]="value.html"></span> &nbsp;
 </ng-template>

frontend/app/features/content/shared/list/content-value.component.scss

@@ -1,11 +1,19 @@
-:ng-deep {
+:host ::ng-deep {
     .html-value {
         img {
-            margin-top: -25px;
+            margin-top: -15px;
             max-height: 50px;
             min-height: 50px;
             position: absolute;
         }
+
+        img + span {
+            padding-left: 60px;
+        }
+
+        span {
+            @include truncate;
+        }
     }
 }
 

frontend/app/features/schemas/pages/schema/fields/types/assets-ui.component.html

@@ -1,5 +1,21 @@
 
 <div [formGroup]="editForm">
+    <div class="form-group row">
+        <label class="col-3 col-form-label" for="{{field.fieldId}}_previewMode">PreviewMode</label>
+
+        <div class="col-6">
+            <select type="text" class="form-control" id="{{field.fieldId}}_previewMode" formControlName="previewMode">
+                <option value="ImageAndFileName">Thumbnail and file name</option>
+                <option value="Image">Only thumbnail or file name if not an image</option>
+                <option value="FileName">Only file name</option>
+            </select>
+
+            <sqx-form-hint>
+                The preview mode for assets in content lists.
+            </sqx-form-hint>
+        </div>
+    </div>
+
     <div class="form-group row">
         <div class="col-9 offset-3">
             <div class="form-check">

frontend/app/features/schemas/pages/schema/fields/types/assets-ui.component.ts

@@ -25,6 +25,9 @@ export class AssetsUIComponent implements OnInit {
     public properties: AssetsFieldPropertiesDto;
 
     public ngOnInit() {
+        this.editForm.setControl('previewMode',
+            new FormControl(this.properties.previewMode));
+
         this.editForm.setControl('resolveFirst',
             new FormControl(this.properties.resolveFirst));
     }

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

@@ -172,6 +172,7 @@ export class ArrayFieldPropertiesDto extends FieldPropertiesDto {
 export class AssetsFieldPropertiesDto extends FieldPropertiesDto {
     public readonly fieldType = 'Assets';
 
+    public readonly previewMode: 'ImageAndFileName' | 'Image' | 'FileName';
     public readonly allowDuplicates?: boolean;
     public readonly allowedExtensions?: ReadonlyArray<string>;
     public readonly resolveFirst: boolean;

frontend/app/shared/state/contents.forms.spec.ts

@@ -456,9 +456,43 @@ describe('GetContentValue', () => {
             }
         };
 
-        const result = getContentValue(content, language, fieldAssets);
+        const assetWithImageAndFileName = createField({ properties: createProperties('Assets', { previewMode: 'ImageAndFileName' }) });
+
+        const result = getContentValue(content, language, assetWithImageAndFileName);
+
+        expect(result).toEqual({ value: ['url/to/13', 'file13'], formatted: new HtmlValue('<img src="url/to/13?width=50&height=50" /> <span>file13</span>') });
+    });
+
+    it('should resolve image url only from referenced asset', () => {
+        const content: any = {
+            referenceData: {
+                field1: {
+                    en: ['url/to/13', 'file13']
+                }
+            }
+        };
+
+        const assetWithImage = createField({ properties: createProperties('Assets', { previewMode: 'Image' }) });
+
+        const result = getContentValue(content, language, assetWithImage);
+
+        expect(result).toEqual({ value: ['url/to/13', 'file13'], formatted: new HtmlValue('<img src="url/to/13?width=50&height=50" />') });
+    });
+
+    it('should resolve filename only from referenced asset', () => {
+        const content: any = {
+            referenceData: {
+                field1: {
+                    en: ['url/to/13', 'file13']
+                }
+            }
+        };
+
+        const assetWithFileName = createField({ properties: createProperties('Assets', { previewMode: 'FileName' }) });
+
+        const result = getContentValue(content, language, assetWithFileName);
 
-        expect(result).toEqual({ value: ['url/to/13', 'file13'], formatted: new HtmlValue('<img src="url/to/13?width=50&height=50" /> file13') });
+        expect(result).toEqual({ value: ['url/to/13', 'file13'], formatted: 'file13' });
     });
 
     it('should resolve filename from referenced asset', () => {

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

@@ -69,7 +69,15 @@ export function getContentValue(content: ContentDto, language: LanguageDto, fiel
             if (value) {
                 if (isAssets && Types.isArray(value)) {
                     if (value.length === 2) {
-                        formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" /> ${value[1]}`);
+                        const previewMode = field.properties['previewMode'];
+
+                        if (previewMode === 'ImageAndFileName') {
+                            formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" /> <span>${value[1]}</span>`);
+                        } else if (previewMode === 'Image') {
+                            formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" />`);
+                        } else {
+                            formatted = value[1];
+                        }
                     } else if (value.length === 1) {
                         formatted = value[0];
                     }