From 867816209093a5aaf649a72119de1293d6d61d2c Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Fri, 7 Aug 2020 16:46:49 +0200
Subject: [PATCH] Simplified preview images.

---
 .../content/shared/list/content-list-cell.directive.ts      | 2 ++
 .../content/shared/list/content-value.component.scss        | 6 +-----
 .../content/shared/references/reference-item.component.html | 2 +-
 frontend/app/shared/state/contents.forms.spec.ts            | 6 +++---
 frontend/app/shared/state/contents.forms.visitors.ts        | 6 +++---
 5 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/frontend/app/features/content/shared/list/content-list-cell.directive.ts b/frontend/app/features/content/shared/list/content-list-cell.directive.ts
index c3cb45572..9fa0a1b4b 100644
--- a/frontend/app/features/content/shared/list/content-list-cell.directive.ts
+++ b/frontend/app/features/content/shared/list/content-list-cell.directive.ts
@@ -86,5 +86,7 @@ export class ContentListCellDirective implements OnChanges {
             this.renderer.setStyle(this.element.nativeElement, 'max-width', width);
             this.renderer.setStyle(this.element.nativeElement, 'width', width);
         }
+
+        this.renderer.setStyle(this.element.nativeElement, 'position', 'relative');
     }
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/list/content-value.component.scss b/frontend/app/features/content/shared/list/content-value.component.scss
index 9c4c63504..3de8b1711 100644
--- a/frontend/app/features/content/shared/list/content-value.component.scss
+++ b/frontend/app/features/content/shared/list/content-value.component.scss
@@ -1,13 +1,9 @@
-:host {
-    position: relative;
-}
-
 :host ::ng-deep {
     img {
         max-height: 50px;
         min-height: 50px;
         position: absolute;
-        top: -15px;
+        top: 5px;
     }
 
     img + span {
diff --git a/frontend/app/features/content/shared/references/reference-item.component.html b/frontend/app/features/content/shared/references/reference-item.component.html
index 845e47abe..d38200658 100644
--- a/frontend/app/features/content/shared/references/reference-item.component.html
+++ b/frontend/app/features/content/shared/references/reference-item.component.html
@@ -3,7 +3,7 @@
         <ng-content></ng-content>
     </td>
 
-    <td sqxContentListCell="meta.lastModifiedBy.avatar">
+    <td class="content-field" sqxContentListCell="meta.lastModifiedBy.avatar">
         <sqx-content-list-field field="meta.lastModifiedBy.avatar" [content]="content" [language]="language"></sqx-content-list-field>
     </td>
 
diff --git a/frontend/app/shared/state/contents.forms.spec.ts b/frontend/app/shared/state/contents.forms.spec.ts
index 70e53ffa1..863e41e11 100644
--- a/frontend/app/shared/state/contents.forms.spec.ts
+++ b/frontend/app/shared/state/contents.forms.spec.ts
@@ -422,7 +422,7 @@ describe('StringField', () => {
     it('should format to preview image', () => {
         const field2 = createField({ properties: createProperties('String', { editor: 'StockPhoto' }) });
 
-        expect(FieldFormatter.format(field2, 'https://images.unsplash.com/123?x', true)).toEqual(new HtmlValue('<img src="https://images.unsplash.com/123?x&q=80&fm=jpg&crop=entropy&cs=tinysrgb&h=50&fit=max" /> &nbsp;'));
+        expect(FieldFormatter.format(field2, 'https://images.unsplash.com/123?x', true)).toEqual(new HtmlValue('<img src="https://images.unsplash.com/123?x&q=80&fm=jpg&crop=entropy&cs=tinysrgb&h=50&fit=max" />'));
     });
 
     it('should not format to preview image when html not allowed', () => {
@@ -463,7 +463,7 @@ describe('GetContentValue', () => {
 
         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 &nbsp;</span>') });
+        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', () => {
@@ -479,7 +479,7 @@ describe('GetContentValue', () => {
 
         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" /> &nbsp;') });
+        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', () => {
diff --git a/frontend/app/shared/state/contents.forms.visitors.ts b/frontend/app/shared/state/contents.forms.visitors.ts
index 86beca463..2eacffc6f 100644
--- a/frontend/app/shared/state/contents.forms.visitors.ts
+++ b/frontend/app/shared/state/contents.forms.visitors.ts
@@ -55,9 +55,9 @@ export function getContentValue(content: ContentDto, language: LanguageDto, fiel
                         const previewMode = field.properties['previewMode'];
 
                         if (previewMode === 'ImageAndFileName') {
-                            formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" /> <span>${value[1]} &nbsp;</span>`);
+                            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" /> &nbsp;`);
+                            formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" />`);
                         } else {
                             formatted = value[1];
                         }
@@ -181,7 +181,7 @@ export class FieldFormatter implements FieldPropertiesVisitor<FieldValue> {
             const src = thumbnail(this.value, undefined, 50);
 
             if (src) {
-                return new HtmlValue(`<img src="${src}" /> &nbsp;`);
+                return new HtmlValue(`<img src="${src}" />`);
             }
         }