mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-06 02:33:48 +00:00
UI fixes
This commit is contained in:
Čarodej
@@ -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)
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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))
|
||||
|
||||
@@ -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
|
||||
|
||||
15
resources/js/main.js
vendored
15
resources/js/main.js
vendored
@@ -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
|
||||
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user