#23863 include in 23.01.3

dotCMS · May 22, 2023 · 174d563 · 174d563
1 parent dce4fa1
commit 174d563
Show file tree

Hide file tree

Showing 23 changed files with 467 additions and 287 deletions.
diff --git a/...web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.scss b/...web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.scss
@@ -256,6 +256,23 @@
             }
         }
 
+        video {
+            max-width: 100%;
+            max-height: 100%;
+            height: auto;
+        }
+
+        .vertical-video {
+            max-height: 400px;
+            width: auto;
+        }
+
+        .horizontal-video,
+        .node-image {
+            height: auto;
+            width: 50%;
+        }
+
         .node-container {
             margin-bottom: $spacing-3;
         }

diff --git a/...bs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.stories.ts b/...bs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.stories.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
 
@@ -43,6 +44,7 @@ export const primary = () => ({
             BlockEditorModule,
             OrderListModule,
             ListboxModule,
+            BrowserModule,
             BrowserAnimationsModule
         ],
         providers: [
@@ -88,7 +90,7 @@ export const primary = () => ({
                                 }
                             }
                         ]).pipe(
-                            delay(1500),
+                            delay(5000000),
                             tap(() => statusCallback(FileStatus.IMPORT))
                         );
                     }

diff --git a/core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.component.html b/core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.component.html
@@ -1,6 +1,11 @@
 <div class="tabview-container">
     <p-tabView>
-        <p-tabPanel [cache]="false" header="dotCMS" leftIcon="pi pi-images">
+        <p-tabPanel
+            [cache]="false"
+            [disabled]="disableTabs"
+            header="Library"
+            leftIcon="pi pi-images"
+        >
             <ng-template pTemplate="content">
                 <div class="wrapper">
                     <dot-asset-search
@@ -11,17 +16,29 @@
                 </div>
             </ng-template>
         </p-tabPanel>
-        <p-tabPanel [cache]="false" [header]="'Upload ' + type" leftIcon="pi pi-folder">
+        <p-tabPanel
+            [cache]="false"
+            [header]="'Upload ' + type"
+            [disabled]="disableTabs"
+            leftIcon="pi pi-folder"
+        >
             <ng-template pTemplate="content">
                 <div class="wrapper">
                     <dot-upload-asset
                         [type]="type"
                         (uploadedFile)="onSelectAsset($event)"
+                        (preventClose)="onPreventClose($event)"
+                        (hide)="onHide($event)"
                     ></dot-upload-asset>
                 </div>
             </ng-template>
         </p-tabPanel>
-        <p-tabPanel [cache]="false" [header]="type + ' URL'" leftIcon="pi pi-link">
+        <p-tabPanel
+            [cache]="false"
+            [header]="type + ' URL'"
+            [disabled]="disableTabs"
+            leftIcon="pi pi-link"
+        >
             <ng-template pTemplate="content">
                 <div class="wrapper">
                     <dot-external-asset

diff --git a/core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.component.scss b/core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.component.scss
@@ -14,12 +14,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 25rem;
+    height: 100%;
     width: 100%;
 }
 
 :host::ng-deep {
     .p-tabview-nav {
         padding: 0 $spacing-5;
     }
+
+    .p-tabview-panel {
+        height: 25rem;
+    }
 }
diff --git a/core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.component.ts b/core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.component.ts
@@ -14,4 +14,13 @@ export class AssetFormComponent {
     @Input() languageId = DEFAULT_LANG_ID;
     @Input() type: EditorAssetTypes;
     @Input() onSelectAsset: (payload: DotCMSContentlet | string) => void;
+    @Input() preventClose: (value: boolean) => void;
+    @Input() onHide: (value: boolean) => void;
+
+    public disableTabs = false;
+
+    public onPreventClose(value) {
+        this.preventClose(value);
+        this.disableTabs = value;
+    }
 }
diff --git a/core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.extension.ts b/core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.extension.ts
@@ -55,6 +55,7 @@ export const BubbleAssetFormExtension = (viewContainerRef: ViewContainerRef) =>
     let formTippy: Instance | undefined;
     let component: ComponentRef<AssetFormComponent>;
     let element: Element;
+    let preventClose = false;
 
     function onStart({ editor, type, getPosition }: StartProps) {
         setUpTippy(editor);
@@ -69,6 +70,10 @@ export const BubbleAssetFormExtension = (viewContainerRef: ViewContainerRef) =>
     }
 
     function onHide(editor): void {
+        if (preventClose) {
+            return;
+        }
+
         editor.commands.closeAssetForm();
         formTippy?.hide();
         component?.destroy();
@@ -95,13 +100,25 @@ export const BubbleAssetFormExtension = (viewContainerRef: ViewContainerRef) =>
         component.instance.languageId = editor.storage.dotConfig.lang;
         component.instance.type = type;
         component.instance.onSelectAsset = (payload) => {
+            onPreventClose(editor, false);
             editor.chain().insertAsset({ type, payload }).addNextLine().closeAssetForm().run();
         };
 
+        component.instance.preventClose = (value) => onPreventClose(editor, value);
+        component.instance.onHide = () => {
+            onPreventClose(editor, false);
+            onHide(editor);
+        };
+
         element = component.location.nativeElement;
         component.changeDetectorRef.detectChanges();
     }
 
+    function onPreventClose(editor, value) {
+        preventClose = value;
+        editor.setOptions({ editable: !value });
+    }
+
     return BubbleMenu.extend<unknown>({
         name: 'bubbleAssetForm',
 

diff --git a/...lock-editor/src/lib/extensions/asset-form/components/dot-upload-asset/animations/index.ts b/...lock-editor/src/lib/extensions/asset-form/components/dot-upload-asset/animations/index.ts
@@ -0,0 +1,33 @@
+import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
+
+export const shakeAnimation = trigger('shakeit', [
+    state(
+        'shakestart',
+        style({
+            transform: 'scale(1.1)'
+        })
+    ),
+    state(
+        'shakeend',
+        style({
+            transform: 'scale(1)'
+        })
+    ),
+    transition(
+        'shakestart => shakeend',
+        animate(
+            '1000ms ease-in',
+            keyframes([
+                style({ transform: 'translate3d(-2px, 0, 0)', offset: 0.1 }),
+                style({ transform: 'translate3d(4px, 0, 0)', offset: 0.2 }),
+                style({ transform: 'translate3d(-4px, 0, 0)', offset: 0.3 }),
+                style({ transform: 'translate3d(4px, 0, 0)', offset: 0.4 }),
+                style({ transform: 'translate3d(-4px, 0, 0)', offset: 0.5 }),
+                style({ transform: 'translate3d(4px, 0, 0)', offset: 0.6 }),
+                style({ transform: 'translate3d(-4px, 0, 0)', offset: 0.7 }),
+                style({ transform: 'translate3d(4px, 0, 0)', offset: 0.8 }),
+                style({ transform: 'translate3d(-2px, 0, 0)', offset: 0.9 })
+            ])
+        )
+    )
+]);
diff --git a/...components/dot-upload-asset/components/dot-asset-preview/dot-asset-preview.component.html b/...components/dot-upload-asset/components/dot-asset-preview/dot-asset-preview.component.html
@@ -4,7 +4,7 @@
     </ng-container>
     <ng-container *ngSwitchCase="'video'">
         <video controls preload="metadata">
-            <source [src]="src || file.objectURL" [type]="file.type" />
+            <source [src]="src || file.objectURL" />
         </video>
     </ng-container>
     <p *ngSwitchDefault>Select an accepted asset type</p>

diff --git a/...src/lib/extensions/asset-form/components/dot-upload-asset/dot-upload-asset.component.html b/...src/lib/extensions/asset-form/components/dot-upload-asset/dot-upload-asset.component.html
@@ -11,33 +11,25 @@
 <ng-template #preview>
     <div class="preview-container">
         <dot-asset-preview
-            *ngIf="status === 'PREVIEW'; else loading"
+            *ngIf="status === 'UPLOAD'"
             [type]="type"
             [file]="file"
             [src]="src"
         ></dot-asset-preview>
-        <ng-template #loading>
-            <dot-spinner></dot-spinner>
+        <ng-template #errorTemplate *ngIf="status === 'ERROR'">
+            <span class="error">{{ error }}</span>
         </ng-template>
     </div>
 
-    <div class="btn-container">
-        <button
-            class="p-button-outlined"
-            [disabled]="status === 'UPLOAD'"
-            (click)="removeFile()"
-            data-test-id="back-btn"
-            pButton
-        >
-            Back
-        </button>
-        <button
-            [disabled]="status === 'UPLOAD'"
-            (click)="uploadFile()"
-            data-test-id="upload-btn"
-            pButton
-        >
-            Insert
+    <div class="action-container">
+        <div class="loading-message">
+            <dot-spinner [size]="'30px'"></dot-spinner>
+            <span class="warning" [@shakeit]="animation" (@shakeit.done)="shakeEnd($event)">
+                {{ errorMessage }}
+            </span>
+        </div>
+        <button class="p-button-outlined" (click)="cancelAction()" data-test-id="back-btn" pButton>
+            Cancel
         </button>
     </div>
 </ng-template>
diff --git a/...src/lib/extensions/asset-form/components/dot-upload-asset/dot-upload-asset.component.scss b/...src/lib/extensions/asset-form/components/dot-upload-asset/dot-upload-asset.component.scss
@@ -10,13 +10,21 @@
     align-items: center;
     flex-direction: column;
 
+    .error {
+        color: $error;
+        font-size: $font-size-large;
+        max-width: 100%;
+        white-space: pre-wrap;
+    }
+
     .preview-container {
         align-items: center;
         display: flex;
         flex-grow: 1;
         justify-content: center;
         overflow: hidden;
         width: 100%;
+        flex-direction: column;
 
         img {
             height: 100%;
@@ -25,11 +33,24 @@
         }
     }
 
-    .btn-container {
+    .action-container {
         display: flex;
-        gap: $spacing-3;
         height: fit-content;
-        justify-content: end;
+        justify-content: space-between;
         width: 100%;
     }
+
+    .loading-message {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: $spacing-3;
+    }
+
+    .warning {
+        display: block;
+        font-style: normal;
+        text-align: center;
+        color: $black;
+    }
 }