nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-24 09:50:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI fixes

Browse Source
This commit is contained in:
Čarodej
2022-02-05 12:30:02 +01:00
parent 6980c28c57
commit 38e86b4b8b
9 changed files with 41 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/FileBrowser.vue
+4 -3
View File
@@ -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)
resources/js/components/FilesView/OptionGroup.vue
+1 -1
View File
@@ -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">
resources/js/components/Others/Popup/PopupWrapper.vue
+19 -95
View File
@@ -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>
resources/js/components/Others/Vignette.vue
-1
View File
@@ -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))
resources/js/components/Spotlight/Spotlight.vue
+2 -3
View File
@@ -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