From c9888656080e44ad2663d62e8ec48725f1b996df Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Fri, 14 Dec 2018 22:56:51 +0100
Subject: [PATCH] SVG preview.

---
 src/Squidex/app/shared/components/asset.component.html |  8 ++++----
 src/Squidex/app/shared/services/assets.service.ts      |  4 ++++
 src/Squidex/app/shared/services/schemas.service.ts     | 10 +++++++++-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/Squidex/app/shared/components/asset.component.html b/src/Squidex/app/shared/components/asset.component.html
index e83786bae..a00909995 100644
--- a/src/Squidex/app/shared/components/asset.component.html
+++ b/src/Squidex/app/shared/components/asset.component.html
@@ -6,10 +6,10 @@
                     {{asset.fileType}}
                 </span>
                 
-                <div *ngIf="asset.isImage" class="file-image">
+                <div *ngIf="asset.canPreview" class="file-image">
                     <img [sqxImageSource]="asset | sqxAssetPreviewUrl" class="bg" layoutKey="asset-large">
                 </div>
-                <div *ngIf="!asset.isImage" class="file-icon">
+                <div *ngIf="!asset.canPreview" class="file-icon">
                     <img [attr.src]="asset | sqxFileIcon">
                 </div>
 
@@ -88,10 +88,10 @@
     <div class="table-items-row" [class.selectable]="isSelectable" (click)="selected.emit(asset)" (sqxFileDrop)="updateFile($event)">
         <div class="left-border" [class.hidden]="!isSelectable" [class.selected]="isSelected" ></div>
 
-        <div *ngIf="asset && asset.isImage && progress === 0" class="image drag-handle" [class.image-left]="!isSelectable" @fade>
+        <div *ngIf="asset && asset.canPreview && progress === 0" class="image drag-handle" [class.image-left]="!isSelectable" @fade>
             <img [sqxImageSource]="asset | sqxAssetPreviewUrl" class="bg2" layoutKey="asset-small">
         </div>
-        <div *ngIf="asset && !asset.isImage && progress === 0" class="image drag-handle image-padded" [class.image-left]="!isSelectable" @fade>
+        <div *ngIf="asset && !asset.canPreview && progress === 0" class="image drag-handle image-padded" [class.image-left]="!isSelectable" @fade>
             <img class="icon" [attr.src]="asset | sqxFileIcon">
         </div>
 
diff --git a/src/Squidex/app/shared/services/assets.service.ts b/src/Squidex/app/shared/services/assets.service.ts
index eeb3b2c3c..68429ee8d 100644
--- a/src/Squidex/app/shared/services/assets.service.ts
+++ b/src/Squidex/app/shared/services/assets.service.ts
@@ -33,6 +33,10 @@ export class AssetsDto extends Model {
 }
 
 export class AssetDto extends Model {
+    public get canPreview() {
+        return this.isImage || (this.mimeType === 'image/svg+xml' && this.fileSize < 100 * 1024);
+    }
+
     constructor(
         public readonly id: string,
         public readonly createdBy: string,
diff --git a/src/Squidex/app/shared/services/schemas.service.ts b/src/Squidex/app/shared/services/schemas.service.ts
index 1085d6e13..a02bbeeb8 100644
--- a/src/Squidex/app/shared/services/schemas.service.ts
+++ b/src/Squidex/app/shared/services/schemas.service.ts
@@ -54,7 +54,15 @@ export class SchemaDetailsDto extends SchemaDto {
     public listFields: RootFieldDto[];
     public listFieldsEditable: RootFieldDto[];
 
-    constructor(id: string, name: string, category: string, properties: SchemaPropertiesDto, isSingleton: boolean, isPublished: boolean, created: DateTime, createdBy: string, lastModified: DateTime, lastModifiedBy: string, version: Version,
+    constructor(id: string, name: string, category: string,
+            properties: SchemaPropertiesDto,
+            isSingleton: boolean,
+            isPublished: boolean,
+            created: DateTime,
+            createdBy: string,
+            lastModified: DateTime,
+            lastModifiedBy: string,
+            version: Version,
         public readonly fields: RootFieldDto[],
         public readonly scriptQuery?: string,
         public readonly scriptCreate?: string,