chore(edit-content): Thumbnail in the Binary Preview Punchlist #26907 (…

…#27160) * dev: show correct thumbail for images && pdf * dev: show correct file size in Bytes, KB, MB, and GB * clean up * dev: show correct thumbnail * dev: allow user edit the image in old JSP * dev: fix DotContentThumbnailComponent tests * dev: fix tests * dev: clean up && update prime icon for web-components * clean up * update story * fix test * clean up * clean up * update styles * update styles v2
dotCMS · Jan 10, 2024 · 791bf1f · 791bf1f
1 parent a910e83
commit 791bf1f
Show file tree

Hide file tree

Showing 27 changed files with 510 additions and 348 deletions.
diff --git a/core-web/libs/dotcms-models/src/index.ts b/core-web/libs/dotcms-models/src/index.ts
@@ -8,6 +8,7 @@ export * from './lib/dot-temp-file.model';
 export * from './lib/dot-workflow-action.model';
 export * from './lib/dot-workflow.model';
 export * from './lib/dot-asset-create-options.model';
+export * from './lib/dot-file-metadata.model';
 export * from './lib/dot-http-error-response.model';
 export * from './lib/dot-http-request-options.model';
 export * from './lib/dot-login.model';

diff --git a/core-web/libs/dotcms-models/src/lib/dot-file-metadata.model.ts b/core-web/libs/dotcms-models/src/lib/dot-file-metadata.model.ts
@@ -0,0 +1,14 @@
+export interface DotFileMetadata {
+    contentType: string;
+    fileSize: number;
+    isImage: boolean;
+    length: number;
+    modDate: number;
+    name: string;
+    sha256: string;
+    title: string;
+    version: number;
+    height?: number;
+    width?: number;
+    editableAsText?: boolean;
+}
diff --git a/core-web/libs/dotcms-models/src/lib/dot-temp-file.model.ts b/core-web/libs/dotcms-models/src/lib/dot-temp-file.model.ts
@@ -1,3 +1,5 @@
+import { DotFileMetadata } from './dot-file-metadata.model';
+
 /**
  * Interface that represent the response of /api/v1/temp, endpoint to upload temporary files.
  *
@@ -13,4 +15,5 @@ export interface DotCMSTempFile {
     referenceUrl: string;
     thumbnailUrl: string;
     content?: string;
+    metadata?: DotFileMetadata;
 }
diff --git a/core-web/libs/dotcms-scss/angular/_prime-icons.scss b/core-web/libs/dotcms-scss/angular/_prime-icons.scss
diff --git a/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.html b/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.html
@@ -5,7 +5,7 @@
         (actionFired)="
             fireWorkflowAction({
                 actionId: $event.id,
-                inode: vm.contentlet.inode,
+                inode: vm.contentlet?.inode,
                 contentType: vm.contentType
             })
         "></dot-edit-content-toolbar>

diff --git a/...tent-binary-field/components/dot-binary-field-editor/dot-binary-field-editor.component.ts b/...tent-binary-field/components/dot-binary-field-editor/dot-binary-field-editor.component.ts
@@ -47,7 +47,8 @@ const EDITOR_CONFIG: MonacoEditorConstructionOptions = {
     lineNumbers: 'on',
     roundedSelection: false,
     automaticLayout: true,
-    language: 'text'
+    language: 'text',
+    fontSize: 14
 };
 
 @Component({

diff --git a/...-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.html b/...-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.html
@@ -6,21 +6,24 @@
     <ng-template #contentThumnail>
         <div class="preview-image__container">
             <dot-content-thumbnail
-                [dotThumbanilOptions]="dotThumbnailOptions"></dot-content-thumbnail>
+                [url]="file.url"
+                [inode]="file.inode"
+                [name]="file.name"
+                [contentType]="file.contentType"
+                [titleImage]="file.titleImage"
+                [objectFit]="objectFit"
+                [iconSize]="'48px'"></dot-content-thumbnail>
         </div>
 
         <div class="preview-metadata__container">
             <span class="preview-metadata_header">{{ file.name }}</span>
             <div class="preview-metadata" *ngIf="file.width && file.height">
                 <i class="pi pi-arrows-alt"></i>
-                <span>{{ file.width }}px, {{ file.height }}px</span>
+                <span>{{ file.width }} x {{ file.height }}</span>
             </div>
-            <div class="preview-metadata">
+            <div class="preview-metadata" *ngIf="file.fileSize">
                 <i class="pi pi-file"></i>
-                <span
-                    >{{ file.fileSize | number : '1.0-2' }}
-                    {{ 'dot.binary.field.file.bytes' | dm }}</span
-                >
+                <span>{{ file.fileSize | dotFileSizeFormat }}</span>
             </div>
         </div>
     </ng-template>

diff --git a/...-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.scss b/...-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.scss
@@ -67,7 +67,7 @@
 
     .preview-metadata_header {
         font-size: $font-size-md;
-        font-weight: $font-weight-bold;
+        font-weight: $font-weight-semi-bold;
         margin: 0;
         color: $black;
     }
@@ -87,7 +87,7 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    gap: $spacing-1;
+    gap: $spacing-0;
 }
 
 .preview-metadata__actions {

diff --git a/...nary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.spec.ts b/...nary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.spec.ts
@@ -4,36 +4,37 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 import { DotBinaryFieldPreviewComponent } from './dot-binary-field-preview.component';
 
-import { BinaryFile } from '../../interfaces';
+import { DotFilePreview } from '../../interfaces';
+import { fileMetaData } from '../../utils/mock';
 
-const fileImage: BinaryFile = {
-    mimeType: 'image/png',
-    name: 'test.png',
-    fileSize: 1234,
-    content: 'data:image/png;base64,iVBORw0KGg...',
-    url: 'http://example.com/test.png',
+const fileImage: DotFilePreview = {
+    ...fileMetaData,
+    id: '123',
     inode: '123',
-    titleImage: 'Test Image',
-    width: '100',
-    height: '100'
+    titleImage: 'Assets',
+    contentType: 'image/png',
+    name: 'test.png',
+    content: 'data:image/png;base64,iVBORw0KGg...'
 };
 
-const fileText: BinaryFile = {
-    mimeType: 'text/plain',
+const fileText: DotFilePreview = {
+    ...fileMetaData,
+    id: '123',
+    inode: '123',
+    titleImage: 'TITLE_IMAGE_NOT_FOUND',
+    contentType: 'text/plain',
     name: 'test.txt',
-    fileSize: 1234,
-    content: 'This is a text file',
-    url: 'http://example.com/test.txt',
-    inode: '123'
+    content: 'This is a text file'
 };
 
-const fileUnknown: BinaryFile = {
-    mimeType: 'unknown',
+const fileUnknown: DotFilePreview = {
+    ...fileMetaData,
+    id: '123',
+    inode: '123',
+    contentType: 'unknown',
+    titleImage: 'TITLE_IMAGE_NOT_FOUND',
     name: 'test.txt',
-    fileSize: 1234,
-    content: 'This is a text file but the mime type is unknown',
-    url: 'http://example.com/test.txt',
-    inode: '123'
+    content: 'This is a text file but the mime type is unknown'
 };
 
 describe('DotBinaryFieldPreviewComponent', () => {

diff --git a/...y-field/components/dot-binary-field-preview/dot-binary-field-preview.component.stories.ts b/...y-field/components/dot-binary-field-preview/dot-binary-field-preview.component.stories.ts
@@ -11,22 +11,16 @@ import { DotContentThumbnailComponent, DotSpinnerModule } from '@dotcms/ui';
 
 import { DotBinaryFieldPreviewComponent } from './dot-binary-field-preview.component';
 
-const previewImage = {
-    type: 'image',
-    resolution: {
-        width: '400',
-        height: '400'
-    },
-    fileSize: 8000,
-    content: '',
-    mimeType: 'image/png',
-    inode: '123456789',
-    titleImage: 'true',
-    name: 'image.jpg',
-    title: 'image.jpg',
-
+import { DotFilePreview } from '../../interfaces';
+import { fileMetaData } from '../../utils/mock';
+
+const previewImage: DotFilePreview = {
+    ...fileMetaData,
+    id: '123',
+    inode: '123',
+    titleImage: 'Assets',
     contentType: 'image/png',
-    contentTypeIcon: 'image'
+    name: 'test.png'
 };
 
 const previewVideo = {

diff --git a/...nt-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.ts b/...nt-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.ts
@@ -13,12 +13,12 @@ import { OverlayPanelModule } from 'primeng/overlaypanel';
 
 import {
     DotContentThumbnailComponent,
+    DotFileSizeFormatPipe,
     DotMessagePipe,
-    DotSpinnerModule,
-    DotThumbnailOptions
+    DotSpinnerModule
 } from '@dotcms/ui';
 
-import { BinaryFile } from '../../interfaces';
+import { DotFilePreview } from '../../interfaces';
 
 export enum EDITABLE_FILE {
     image = 'image',
@@ -39,14 +39,15 @@ type EDITABLE_FILE_FUNCTION_MAP = {
         DotContentThumbnailComponent,
         DotSpinnerModule,
         OverlayPanelModule,
-        DotMessagePipe
+        DotMessagePipe,
+        DotFileSizeFormatPipe
     ],
     templateUrl: './dot-binary-field-preview.component.html',
     styleUrls: ['./dot-binary-field-preview.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DotBinaryFieldPreviewComponent implements OnChanges {
-    @Input() file: BinaryFile;
+    @Input() file: DotFilePreview;
     @Input() editableImage: boolean;
 
     @Output() editImage: EventEmitter<void> = new EventEmitter();
@@ -61,15 +62,12 @@ export class DotBinaryFieldPreviewComponent implements OnChanges {
     private contenttype: EDITABLE_FILE;
     isEditable = false;
 
-    get dotThumbnailOptions(): DotThumbnailOptions {
-        return {
-            tempUrl: this.file.url,
-            inode: this.file.inode,
-            name: this.file.name,
-            contentType: this.file.mimeType,
-            iconSize: '48px',
-            titleImage: this.file.name
-        };
+    get objectFit(): string {
+        if (this.file?.height > this.file?.width) {
+            return 'contain';
+        }
+
+        return 'cover';
     }
 
     ngOnChanges(): void {
@@ -93,7 +91,7 @@ export class DotBinaryFieldPreviewComponent implements OnChanges {
     }
 
     private setIsEditable() {
-        const type = this.file.mimeType?.split('/')[0];
+        const type = this.file.contentType?.split('/')[0];
         this.contenttype = EDITABLE_FILE[type] || EDITABLE_FILE.unknown;
         this.isEditable = this.EDITABLE_FILE_FUNCTION_MAP[this.contenttype]();
     }

diff --git a/...src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.html b/...src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.html
@@ -57,7 +57,7 @@
     <dot-binary-field-preview
         *ngIf="vm.status === BinaryFieldStatus.PREVIEW"
         [file]="vm.file"
-        [editableImage]="vm.isEnterprise"
+        [editableImage]="vm.isEnterprise && imageEditor"
         (removeFile)="removeFile()"
         (editFile)="onEditFile()"
         (editImage)="onEditImage()"