refine file drop and gallery

src/lib/common/FileDropZone.svelte

@@ -376,64 +376,38 @@
 
 <svelte:window on:focus={onWindowFocus} on:dragover={onDocumentDragOver} on:drop={onDocumentDrop} />
 
-<div style="display: block;">
-    <div
-        bind:this={rootRef}
-        tabindex="0"
-        role="button"
-        class="{disableDefaultStyles ? '' : 'file-dropzone'} {containerClasses}"
-        style={`${containerStyles}`}
-        on:keydown={composeKeyboardHandler(onKeyDownCb)}
-        on:focus={composeKeyboardHandler(onFocusCb)}
-        on:blur={composeKeyboardHandler(onBlurCb)}
-        on:click={composeHandler(onClickCb)}
-        on:dragenter={composeDragHandler(onDragEnterCb)}
-        on:dragover={composeDragHandler(onDragOverCb)}
-        on:dragleave={composeDragHandler(onDragLeaveCb)}
-        on:drop={composeDragHandler(onDropCb)}
-    >
-        <input
-            {accept}
-            {multiple}
-            {required}
-            type="file"
-            {name}
-            autocomplete="off"
-            tabindex="-1"
-            on:change={onDropCb}
-            on:click={onInputElementClick}
-            bind:this={inputElement}
-            style="display: none;"
-        />
-        <slot>
-            <p class={`file-drop-text ${isError ? 'text-danger' : isSuccess ? 'text-success' : ''}`}>{innerDropText}</p>
-        </slot>
-    </div>
-</div>
 
-
-<style>
-    .file-dropzone {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 20px;
-      border-width: 2px;
-      border-radius: 2px;
-      border-color: #eeeeee;
-      border-style: dashed;
-      background-color: #fafafa;
-      color: #bdbdbd;
-      outline: none;
-      transition: border 0.24s ease-in-out;
-      margin-top: 3px;
-      width: 100%;
-      height: 10rem;
-    }
-
-    .file-drop-text {
-        margin-top: auto;
-        margin-bottom: auto;
-    }
-</style>
+<div
+    bind:this={rootRef}
+    tabindex="0"
+    role="button"
+    class="{disableDefaultStyles ? '' : 'file-dropzone'} {containerClasses}"
+    style={`${containerStyles}`}
+    on:keydown={composeKeyboardHandler(onKeyDownCb)}
+    on:focus={composeKeyboardHandler(onFocusCb)}
+    on:blur={composeKeyboardHandler(onBlurCb)}
+    on:click={composeHandler(onClickCb)}
+    on:dragenter={composeDragHandler(onDragEnterCb)}
+    on:dragover={composeDragHandler(onDragOverCb)}
+    on:dragleave={composeDragHandler(onDragLeaveCb)}
+    on:drop={composeDragHandler(onDropCb)}
+>
+    <input
+        {accept}
+        {multiple}
+        {required}
+        type="file"
+        {name}
+        autocomplete="off"
+        tabindex="-1"
+        on:change={onDropCb}
+        on:click={onInputElementClick}
+        bind:this={inputElement}
+        style="display: none;"
+    />
+    <slot>
+        <div class="add-file-icon">
+            <i class="bx bxs-image-add" />
+        </div>
+    </slot>
+</div>

src/lib/common/FileGallery.svelte

@@ -1,12 +1,11 @@
 <script>
     import { LightboxGallery, GalleryThumbnail, GalleryImage } from 'svelte-lightbox';
-    import Viewport from 'svelte-viewport-info';
 
     /** @type {any[]} */
     export let files = [];
 
     /** @type {boolean} */
-    export let needDelete = true;
+    export let needDelete = false;
 
     /** @type {boolean} */
     export let disabled = false;
@@ -29,28 +28,26 @@
 {#if files?.length > 0}
     <LightboxGallery transitionDuration={100}>
         <svelte:fragment slot="thumbnail">
-            <div class="image-gallery-container">
-                {#each files as file, idx (idx)}
-                    <div class={`gallery-item`}>
-                        <GalleryThumbnail style="width: 100%; height: 100%; display: flex;" id={idx}>
-                            <div class="gallery-item-wrapper">
-                                {#if needDelete}
-                                    <div
-                                        class="gallery-item-icon"
-                                        tabindex="0"
-                                        role="button"
-                                        on:keydown={() => {}}
-                                        on:click={e => handleDeleteFile(e, idx)}
-                                    >
-                                        <i class="bx bx-trash" />
-                                    </div>
-                                {/if}
-                                <img class="gallery-item-image" src={file.url} alt={''}>
-                            </div>
-                        </GalleryThumbnail>
-                    </div>
-                {/each}
-            </div>
+            {#each files as file, idx (idx)}
+                <div class={`gallery-item`}>
+                    <GalleryThumbnail style="width: 100%; height: 100%; display: flex;" id={idx}>
+                        <div class="gallery-item-wrapper">
+                            {#if needDelete}
+                                <div
+                                    class="gallery-item-icon"
+                                    tabindex="0"
+                                    role="button"
+                                    on:keydown={() => {}}
+                                    on:click={e => handleDeleteFile(e, idx)}
+                                >
+                                    <i class="bx bx-trash" />
+                                </div>
+                            {/if}
+                            <img class="gallery-item-image" src={file.url} alt={''}>
+                        </div>
+                    </GalleryThumbnail>
+                </div>
+            {/each}
         </svelte:fragment>
 
         {#each files as file, idx (idx)}

src/lib/helpers/enums.js

@@ -20,7 +20,8 @@ const richType = {
     QuickReply: 'quick_reply',
     Button: 'button_template',
     MultiSelect: 'multi-select_template',
-    Generic: 'generic_template'
+    Generic: 'generic_template',
+    Upload: 'upload_template'
 }
 export const RichType = Object.freeze(richType);
 

src/lib/scss/app.scss

@@ -40,7 +40,7 @@ File: Main Css File
 @import "custom/components/loader";
 @import "custom/components/chat";
 @import "custom/components/alert";
-@import "custom/components/gallery";
+@import "custom/components/file";
 
 // Plugins
 @import "custom/plugins/custom-scrollbar";

src/lib/scss/custom/components/_file.scss

@@ -0,0 +1,75 @@
+$attachment-width: 8em;
+$attachment-height: 8em;
+$attachment-width-lite: 5em;
+$attachment-height-lite: 5em;
+$file-screen-max-width: 500px;
+
+.gallery-item {
+    width: $attachment-width;
+    height: $attachment-height;
+
+    @media (max-width: $file-screen-max-width) {
+        width: $attachment-width-lite;
+        height: $attachment-height-lite;
+    }
+
+    .gallery-item-wrapper {
+        position: relative;
+
+        .gallery-item-icon {
+            position: absolute;
+            color: white;
+            cursor: pointer;
+            z-index: 1000;
+            right: 3px;
+            font-size: 1.5em;
+        }
+
+        .gallery-item-image {
+            width: 100%;
+            height: 100%;
+            border-radius: 10px;
+        }
+    }
+}
+
+.svelte-lightbox-footer p {
+    display: none;
+}
+
+.item-text {
+    text-align: center;
+    color: white;
+}
+
+.file-dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-width: 2px;
+    border-radius: 10px;
+    border-color: #eeeeee;
+    border-style: dashed;
+    background-color: #fafafa;
+    color: #bdbdbd;
+    outline: none;
+    transition: border 0.24s ease-in-out;
+    width: $attachment-width;
+    height: $attachment-width;
+}
+
+.add-file-icon {
+    font-size: 3em;
+}
+
+@media (max-width: $file-screen-max-width) {
+    .file-dropzone {
+        width: $attachment-width-lite;
+        height: $attachment-width-lite;
+    }
+
+    .add-file-icon {
+        font-size: 2em;
+    }
+}

src/lib/scss/custom/pages/_chat.scss

@@ -153,8 +153,7 @@
         }
     }
 
-    .conversation-list {
-        margin-bottom: 20px;
+    .conv-msg-container {
         display: flex;
         position: relative;
         width: 100%;
@@ -328,7 +327,7 @@
     }
 
     .right {
-        .conversation-list {
+        .conv-msg-container {
             justify-content: flex-end;
 
             .msg-container {
@@ -344,7 +343,7 @@
             }
 
             &.last-chat {
-                .conversation-list {
+                .conv-msg-container {
                     &:before {
                         right: 0;
                         left: auto;
@@ -355,7 +354,7 @@
     }
 
     .last-chat {
-        .conversation-list {
+        .conv-msg-container {
             &:before {
                 content: "\F0009";
                 font-family: "Material Design Icons";
@@ -600,3 +599,6 @@
     }
 }
 
+.conv-msg-wrapper {
+    margin-bottom: 20px;
+}