From 58fae350859cc87c4528cd3ef215661555836f4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Sun, 6 Feb 2022 14:56:11 +0100
Subject: [PATCH] drag ui refactoring

---
 resources/js/components/FilesView/DragUI.vue  | 27 +++----------------
 .../js/components/FilesView/TitlePreview.vue  |  2 +-
 2 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/resources/js/components/FilesView/DragUI.vue b/resources/js/components/FilesView/DragUI.vue
index f9ad4031..c96f02fd 100644
--- a/resources/js/components/FilesView/DragUI.vue
+++ b/resources/js/components/FilesView/DragUI.vue
@@ -1,5 +1,7 @@
 <template>
-    <TitlePreview icon="check-square" :title="title" :subtitle="subtitle" id="drag-ui" v-show="isVisible" />
+	<div v-show="isVisible" id="drag-ui" class="w-64 fixed z-20 pointer-events-none p-5 rounded-xl shadow-lg dark:bg-dark-foreground bg-white">
+    	<TitlePreview icon="check-square" :title="title" :subtitle="subtitle" />
+	</div>
 </template>
 
 <script>
@@ -69,26 +71,3 @@ export default {
     },
 }
 </script>
-
-<style lang="scss" scoped>
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
-
-#drag-ui {
-    max-width: 300px;
-    min-width: 250px;
-    position: fixed;
-    z-index: 10;
-    pointer-events: none;
-    padding: 10px;
-    border-radius: 8px;
-    box-shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
-    background: white;
-}
-
-.dark {
-    #drag-ui {
-        background: $dark_mode_foreground;
-    }
-}
-</style>
diff --git a/resources/js/components/FilesView/TitlePreview.vue b/resources/js/components/FilesView/TitlePreview.vue
index 81c90c08..1d6ccc68 100644
--- a/resources/js/components/FilesView/TitlePreview.vue
+++ b/resources/js/components/FilesView/TitlePreview.vue
@@ -8,7 +8,7 @@
             <file-icon v-if="icon === 'file'" class="text-theme vue-feather" size="19" />
         </div>
         <div>
-            <b class="inline-block w-52 overflow-hidden text-ellipsis whitespace-nowrap text-base font-bold 2xl:w-72">
+            <b class="block w-52 overflow-hidden text-ellipsis whitespace-nowrap text-base font-bold 2xl:w-72">
                 {{ title }}
             </b>
             <small class="block text-xs font-bold text-gray-400">