From 9374edfac95e4559cf972b286c62088c619b2568 Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Mon, 19 Jun 2023 17:03:14 +0300
Subject: [PATCH] web/satellite: added dropzone styling for object browser

Added greyed out dropzone styling for object browser.

Issue:
https://github.com/storj/storj/issues/5970

Change-Id: I9770a9d3fb90f6aaf659885f3c3cafed7af89e1d
---
 .../src/components/browser/Dropzone.vue       | 62 +++++++++++++++++++
 .../src/components/browser/FileBrowser.vue    | 26 +++++++-
 2 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 web/satellite/src/components/browser/Dropzone.vue

diff --git a/web/satellite/src/components/browser/Dropzone.vue b/web/satellite/src/components/browser/Dropzone.vue
new file mode 100644
index 000000000..537ba1f45
--- /dev/null
+++ b/web/satellite/src/components/browser/Dropzone.vue
@@ -0,0 +1,62 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="dropzone" @mouseout="close" @mouseleave="close" @dragleave.self="close">
+        <div class="dropzone__message">
+            <p class="dropzone__message__text">
+                Drop your files to put it into the “{{ bucket }}” bucket.
+            </p>
+        </div>
+        <p class="dropzone__info">Drag and drop files here to upload</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    bucket: string
+    close: () => void
+}>();
+</script>
+
+<style scoped lang="scss">
+.dropzone {
+    z-index: 1;
+    position: fixed;
+    inset: 0;
+    background: rgb(0 0 0 / 35%);
+    border: 1px dashed var(--c-white);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &__message {
+        padding: 10px 24px;
+        background: var(--c-green-1);
+        border: 1px solid var(--c-green-5);
+        border-radius: 8px;
+        position: absolute;
+        top: 24px;
+        pointer-events: none;
+
+        &__text {
+            font-family: 'font_medium', sans-serif;
+            font-size: 14px;
+            line-height: 20px;
+            color: var(--c-green-5);
+            text-align: center;
+        }
+    }
+
+    &__info {
+        font-family: 'font_bold', sans-serif;
+        font-size: 40px;
+        line-height: 50px;
+        text-align: center;
+        max-width: 380px;
+        color: var(--c-white);
+        text-shadow: 0 7px 20px 0 rgb(0 0 0 / 15%);
+        pointer-events: none;
+    }
+}
+</style>
diff --git a/web/satellite/src/components/browser/FileBrowser.vue b/web/satellite/src/components/browser/FileBrowser.vue
index 9eee4d05f..0f4aa9e8b 100644
--- a/web/satellite/src/components/browser/FileBrowser.vue
+++ b/web/satellite/src/components/browser/FileBrowser.vue
@@ -9,8 +9,10 @@
                     v-cloak
                     class="div-responsive"
                     @drop.prevent="upload"
-                    @dragover.prevent
+                    @dragover.prevent="showDropzone"
                 >
+                    <Dropzone v-if="isOver" :bucket="bucketName" :close="hideDropzone" />
+
                     <bread-crumbs @onUpdate="onRouteChange" @bucketClick="goToBuckets" />
 
                     <div class="tile-action-bar">
@@ -219,6 +221,7 @@ import BucketSettingsNav from '@/components/objects/BucketSettingsNav.vue';
 import VTable from '@/components/common/VTable.vue';
 import MultiplePassphraseBanner from '@/components/browser/MultiplePassphrasesBanner.vue';
 import UpEntry from '@/components/browser/UpEntry.vue';
+import Dropzone from '@/components/browser/Dropzone.vue';
 
 import FileIcon from '@/../static/images/objects/file.svg';
 import BlackArrowExpand from '@/../static/images/common/BlackArrowExpand.svg';
@@ -239,6 +242,7 @@ const fileInput = ref<HTMLInputElement>();
 const fetchingFilesSpinner = ref<boolean>(false);
 const isUploadDropDownShown = ref<boolean>(false);
 const isBannerShown = ref<boolean>(true);
+const isOver = ref<boolean>(false);
 /**
  * Retrieve the pathMatch from the current route.
  */
@@ -442,8 +446,12 @@ function filename(file: BrowserObject): string {
  * Upload the current selected or dragged-and-dropped file.
  */
 async function upload(e: Event): Promise<void> {
+    if (isOver.value) {
+        isOver.value = false;
+    }
+
     await obStore.upload({ e });
-    await analytics.eventTriggered(AnalyticsEvent.OBJECT_UPLOADED);
+    analytics.eventTriggered(AnalyticsEvent.OBJECT_UPLOADED);
     const target = e.target as HTMLInputElement;
     target.value = '';
 }
@@ -494,6 +502,20 @@ function toggleUploadDropdown(): void {
     isUploadDropDownShown.value = !isUploadDropDownShown.value;
 }
 
+/**
+ * Makes dropzone visible.
+ */
+function showDropzone(): void {
+    isOver.value = true;
+}
+
+/**
+ * Hides dropzone.
+ */
+function hideDropzone(): void {
+    isOver.value = false;
+}
+
 /**
  * Closes upload options dropdown.
  */