From 38e86b4b8b69aec02562b4f1ad2a5617af8a6da0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Sat, 5 Feb 2022 12:30:02 +0100
Subject: [PATCH] UI fixes

---
 .../js/components/FilesView/FileBrowser.vue   |   7 +-
 .../js/components/FilesView/OptionGroup.vue   |   2 +-
 .../components/Others/Popup/PopupWrapper.vue  | 114 +++---------------
 resources/js/components/Others/Vignette.vue   |   1 -
 .../js/components/Spotlight/Spotlight.vue     |   5 +-
 resources/js/main.js                          |  15 ++-
 resources/js/views/Platform.vue               |   2 +-
 resources/js/views/User/Settings.vue          |   4 +-
 resources/views/index.blade.php               |  14 +--
 9 files changed, 41 insertions(+), 123 deletions(-)

diff --git a/resources/js/components/FilesView/FileBrowser.vue b/resources/js/components/FilesView/FileBrowser.vue
index bf02e742..fa3d2cc7 100644
--- a/resources/js/components/FilesView/FileBrowser.vue
+++ b/resources/js/components/FilesView/FileBrowser.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         :class="{
-            'user-dropping-file': isDragging,
+            'opacity-75': isDragging,
             'grid-view': itemViewType === 'grid' && !isVisibleSidebar,
             'grid-view-sidebar': itemViewType === 'grid' && isVisibleSidebar,
         }"
@@ -14,7 +14,7 @@
         tabindex="-1"
         @click.self="deselect"
     >
-		<div v-html="config.ads"></div>
+		<!--<div v-html="config.ads"></div>-->
 
         <ItemHandler
             @click.native="hideContextMenu"
@@ -111,8 +111,9 @@ export default {
                     })
                 }
             } else {
+				console.log(data.data.type);
                 // Get id from current folder
-                const id = data.data.type !== 'folder' ? this.currentFolder.data.id : data.data.id
+                const id = data.data.type !== 'folder' ? this.currentFolder?.data.id : data.data.id
 
                 // Upload external file
                 this.$uploadDraggedFiles(event, id)
diff --git a/resources/js/components/FilesView/OptionGroup.vue b/resources/js/components/FilesView/OptionGroup.vue
index ade957ce..8b453403 100644
--- a/resources/js/components/FilesView/OptionGroup.vue
+++ b/resources/js/components/FilesView/OptionGroup.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<b v-if="title" class="py-0.5 px-4 mt-2 block text-xs text-gray-500 dark-text-theme">
+		<b v-if="title" class="py-0.5 px-4 mt-2 block text-xs text-gray-400 dark-text-theme">
 			{{ title }}
 		</b>
 		<ul class="option-group py-1">
diff --git a/resources/js/components/Others/Popup/PopupWrapper.vue b/resources/js/components/Others/Popup/PopupWrapper.vue
index 3bcedfbd..977ac3c3 100644
--- a/resources/js/components/Others/Popup/PopupWrapper.vue
+++ b/resources/js/components/Others/Popup/PopupWrapper.vue
@@ -1,8 +1,8 @@
 <template>
     <transition name="popup">
-        <div class="popup fixed top-0 left-0 right-0 bottom-0 grid h-full overflow-y-auto p-10 lg:absolute" @click.self="closePopup" v-if="isVisibleWrapper">
-            <div class="popup-wrapper">
-                <slot></slot>
+        <div v-if="isVisibleWrapper" @click.self="closePopup" class="popup z-50 fixed top-0 left-0 right-0 bottom-0 grid h-full overflow-y-auto p-10 lg:absolute">
+            <div class="fixed md:relative top-0 bottom-0 left-0 right-0 w-full dark:bg-2x-dark-foreground bg-white m-auto z-10 md:w-[490px] md:rounded-xl shadow-xl">
+                <slot />
             </div>
         </div>
     </transition>
@@ -44,97 +44,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
+	@media only screen and (max-width: 690px) {
+		.popup-enter-active {
+			animation: popup-slide-in 0.35s 0.15s ease both;
+		}
+		.popup-leave-active {
+			animation: popup-slide-in 0.15s ease reverse;
+		}
+	}
 
-.popup {
-    z-index: 41;
-}
-
-.popup-wrapper {
-    box-shadow: $light_mode_popup_shadow;
-    border-radius: 8px;
-    background: white;
-    margin: auto;
-    width: 480px;
-    z-index: 12;
-}
-
-// Desktop, tablet
-.medium,
-.large {
-    // Animations
-    .popup-enter-active {
-        animation: popup-in 0.35s 0.15s ease both;
-    }
-
-    .popup-leave-active {
-        animation: popup-in 0.15s ease reverse;
-    }
-}
-
-@keyframes popup-in {
-    0% {
-        opacity: 0;
-        transform: scale(0.7);
-    }
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-@keyframes popup-slide-in {
-    0% {
-        transform: translateY(100%);
-    }
-    100% {
-        transform: translateY(0);
-    }
-}
-
-@media only screen and (max-width: 690px) {
-    .popup {
-        overflow: hidden;
-    }
-    .popup-wrapper {
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        right: 0;
-        left: 0;
-        transform: translateY(0) scale(1);
-        box-shadow: none;
-        width: 100%;
-        border-radius: 0px;
-    }
-    // Animations
-    .popup-enter-active {
-        animation: popup-slide-in 0.35s 0.15s ease both;
-    }
-    .popup-leave-active {
-        animation: popup-slide-in 0.15s ease reverse;
-    }
-}
-
-@media only screen and (max-width: 320px) {
-    .popup-wrapper {
-        overflow-y: auto;
-    }
-}
-
-.dark {
-    .popup-wrapper {
-        background: $dark_mode_foreground;
-        box-shadow: $dark_mode_popup_shadow;
-    }
-}
-
-@media only screen and (max-width: 690px) {
-    .dark {
-        .popup-wrapper {
-            background: $dark_mode_background;
-        }
-    }
-}
+	@keyframes popup-slide-in {
+		0% {
+			transform: translateY(100%);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
 </style>
diff --git a/resources/js/components/Others/Vignette.vue b/resources/js/components/Others/Vignette.vue
index e8a337e9..2d4a823b 100644
--- a/resources/js/components/Others/Vignette.vue
+++ b/resources/js/components/Others/Vignette.vue
@@ -31,7 +31,6 @@ export default {
     created() {
         // Show vignette
         events.$on('popup:open', () => (this.isVisibleVignette = true))
-        events.$on('spotlight:show', () => (this.isVisibleVignette = true))
         events.$on('mobile-menu:show', () => (this.isVisibleVignette = true))
         events.$on('alert:open', () => (this.isVisibleVignette = true))
         events.$on('success:open', () => (this.isVisibleVignette = true))
diff --git a/resources/js/components/Spotlight/Spotlight.vue b/resources/js/components/Spotlight/Spotlight.vue
index 1d8cb20e..e21f3ac5 100644
--- a/resources/js/components/Spotlight/Spotlight.vue
+++ b/resources/js/components/Spotlight/Spotlight.vue
@@ -1,6 +1,6 @@
 <template>
-    <div v-if="isVisible" @keyup.esc="exitSpotlight" tabindex="-1" class="fixed z-50 h-full w-full bg-white dark:bg-dark-foreground md:absolute md:z-auto md:bg-transparent">
-        <div class="relative z-50 mx-auto w-full overflow-y-auto bg-white dark:bg-2x-dark-foreground md:mt-8 md:max-w-xl md:rounded-xl 2xl:mt-20">
+    <div v-if="isVisible" @keyup.esc="exitSpotlight" @click.exact.self="exitSpotlight" tabindex="-1" class="fixed z-50 h-full w-full left-0 right-0 bottom-0 top-0 z-50 md:absolute dark:bg-dark-background bg-white md:bg-dark-background dark:md:bg-opacity-[0.45] md:bg-opacity-[0.35]">
+        <div class="relative z-50 mx-auto w-full overflow-y-auto md:mt-8 md:max-w-xl md:rounded-xl 2xl:mt-20 md:bg-white dark:md:bg-2x-dark-foreground md:shadow-xl">
             <!--Query bar-->
             <div class="z-50 mx-auto flex items-center px-5 py-4">
                 <div class="relative mr-4">
@@ -690,7 +690,6 @@ export default {
             this.results = []
             this.query = ''
             this.isVisible = false
-			this.$closePopup()
         },
         onPageDown() {
             let results = this.results.length
diff --git a/resources/js/main.js b/resources/js/main.js
index 5b6d2730..33d4792f 100644
--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -20,12 +20,15 @@ Vue.use(ValidatorHelpers)
 Vue.use(functionHelpers)
 Vue.use(AlertHelpers)
 Vue.use(itemHelpers)
-Vue.use(VueReCaptcha, {
-    siteKey: config.recaptcha_client_id,
-    loaderOptions: {
-        autoHideBadge: true,
-    },
-})
+
+if (config.allowedRecaptcha) {
+    Vue.use(VueReCaptcha, {
+        siteKey: config.recaptcha_client_id,
+        loaderOptions: {
+            autoHideBadge: true,
+        },
+    })
+}
 
 Vue.config.productionTip = false
 
diff --git a/resources/js/views/Platform.vue b/resources/js/views/Platform.vue
index 2d064f04..ffa9654b 100644
--- a/resources/js/views/Platform.vue
+++ b/resources/js/views/Platform.vue
@@ -38,7 +38,7 @@
             <MobileToolbar />
 
             <!--File list & info sidebar-->
-            <div class="flex space-x-3 lg:h-screen lg:overflow-hidden">
+            <div class="flex space-x-3 lg:overflow-hidden">
                 <router-view id="file-view" class="relative w-full" :key="$route.fullPath" />
 
                 <InfoSidebar v-if="isVisibleSidebar" />
diff --git a/resources/js/views/User/Settings.vue b/resources/js/views/User/Settings.vue
index b293e7fe..7d279956 100644
--- a/resources/js/views/User/Settings.vue
+++ b/resources/js/views/User/Settings.vue
@@ -117,7 +117,7 @@
                             'border-transparent': config.defaultThemeMode !== theme.type,
                         }"
 					>
-                        <img :src="theme.image" :alt="theme.type" />
+                        <img :src="theme.image" :alt="theme.type" class="w-full"/>
                     </div>
                 </div>
             </AppInputText>
@@ -140,7 +140,7 @@
                             'border-transparent': currentEmojis !== emoji.type,
                         }"
 					>
-                        <img :src="isDarkMode ? emoji.image.dark : emoji.image.light" :alt="emoji.type" />
+                        <img :src="isDarkMode ? emoji.image.dark : emoji.image.light" :alt="emoji.type" class="w-full" />
                     </div>
                 </div>
             </AppInputText>
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index f5a0dc3b..1c6dcd2c 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -55,7 +55,7 @@
 
     @include('vuefilemanager.others.color-template')
 </head>
-<body class="{{ is_dev() ? 'debug-screen' : '' }}">
+<body class="{{ is_dev() ? 'debug-screens' : '' }}">
 
     <div id="app"></div>
 
@@ -150,14 +150,6 @@
             // App settings
 			userRegistration: {{ $settings->registration ?? 1 }},
 			userVerification: {{ $settings->user_verification ?? 0 }},
-
-            ads: `<ins class="adsbygoogle"
-			 style="display:block"
-			 data-ad-format="fluid"
-			 data-ad-layout-key="-h0-8+2c-1x-39"
-			 data-ad-client="ca-pub-8058330732865164"
-             data-adtest="on"
-			 data-ad-slot="6184326900"></ins>`,
         }
     </script>
 
@@ -182,10 +174,10 @@
         <script src="{{ mix('js/main.js') }}"></script>
     @endif
 
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8058330732865164" crossorigin="anonymous"></script>
+<!--    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8058330732865164" crossorigin="anonymous"></script>
 
     <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
+    </script>-->
 </body>
 </html>