mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 11:00:39 +00:00
Fixes:
- [x] Ipad landscape in teams missing heads widget - [x] Ipad portrait (sm) full screen mode - [x] Ipad landscape add file handler button - [x] In recent upload, shared items and trash is search instead spotlight text button - [x] Dissapearing mobile context menu animation is buggy - [x] Fileitemgrid in single shared item refactoring - [x] Ipad landscape add eye icon to show info details list/grid
This commit is contained in:
Čarodej
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="desktop-toolbar" class="md:block hidden">
|
||||
<div id="desktop-toolbar" class="lg:block hidden">
|
||||
<div class="toolbar-wrapper">
|
||||
<div @click="goBack" class="location">
|
||||
<chevron-left-icon :class="{'is-active': isNotHomepage }" class="icon-back" size="17" />
|
||||
@@ -63,7 +63,7 @@
|
||||
</ToolbarGroup>
|
||||
|
||||
<!--File Controls-->
|
||||
<ToolbarGroup v-if="$checkPermission(['master', 'editor']) && ! $isMobile()">
|
||||
<ToolbarGroup v-if="$checkPermission(['master', 'editor']) || ($isMobile() && $isThisRoute($route, ['SharedWithMe', 'TeamFolders']))">
|
||||
|
||||
<!--Team Heads-->
|
||||
<PopoverWrapper v-if="$isThisRoute($route, ['TeamFolders', 'SharedWithMe'])">
|
||||
@@ -83,12 +83,14 @@
|
||||
</PopoverItem>
|
||||
</PopoverWrapper>
|
||||
|
||||
<!--Share icons-->
|
||||
<ToolbarButton v-if="canShowConvertToTeamFolder" @click.native="$convertAsTeamFolder(clipboard[0])" :class="{'is-inactive': ! canCreateTeamFolderInView }" source="user-plus" :action="$t('actions.convert_into_team_folder')" />
|
||||
<ToolbarButton v-if="! $isThisRoute($route, ['SharedWithMe', 'Public'])" @click.native="$shareFileOrFolder(clipboard[0])" :class="{'is-inactive': canShareInView }" source="share" :action="$t('actions.share')" />
|
||||
<!--Item actions-->
|
||||
<span v-if="! $isMobile()">
|
||||
<ToolbarButton v-if="canShowConvertToTeamFolder" @click.native="$convertAsTeamFolder(clipboard[0])" :class="{'is-inactive': ! canCreateTeamFolderInView }" source="user-plus" :action="$t('actions.convert_into_team_folder')" />
|
||||
<ToolbarButton v-if="! $isThisRoute($route, ['SharedWithMe', 'Public'])" @click.native="$shareFileOrFolder(clipboard[0])" :class="{'is-inactive': canShareInView }" source="share" :action="$t('actions.share')" />
|
||||
|
||||
<ToolbarButton @click.native="$moveFileOrFolder(clipboard[0])" :class="{'is-inactive': canMoveInView && ! canEdit }" source="move" :action="$t('actions.move')" />
|
||||
<ToolbarButton @click.native="$deleteFileOrFolder(clipboard[0])" :class="{'is-inactive': canDeleteInView && ! canEdit }" source="trash" :action="$t('actions.delete')" />
|
||||
<ToolbarButton @click.native="$moveFileOrFolder(clipboard[0])" :class="{'is-inactive': canMoveInView && ! canEdit }" source="move" :action="$t('actions.move')" />
|
||||
<ToolbarButton @click.native="$deleteFileOrFolder(clipboard[0])" :class="{'is-inactive': canDeleteInView && ! canEdit }" source="trash" :action="$t('actions.delete')" />
|
||||
</span>
|
||||
</ToolbarGroup>
|
||||
|
||||
<!--View Controls-->
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="sticky dark:bg-dark-background bg-white top-14 pb-3 px-4 z-10 whitespace-nowrap overflow-x-auto md:hidden block">
|
||||
<div class="sticky dark:bg-dark-background bg-white top-14 pb-3 px-4 z-10 whitespace-nowrap overflow-x-auto lg:hidden block">
|
||||
|
||||
<!--Show Buttons-->
|
||||
<div v-if="! isMultiSelectMode" class="mobile-actions">
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
'grid-view': itemViewType === 'grid' && ! isVisibleSidebar,
|
||||
'grid-view-sidebar': itemViewType === 'grid' && isVisibleSidebar
|
||||
}"
|
||||
class="md:w-full md:overflow-y-auto md:h-full md:px-0 px-4"
|
||||
class="lg:w-full lg:overflow-y-auto lg:h-full lg:px-0 px-4"
|
||||
@drop.stop.prevent="uploadDroppedItems($event)"
|
||||
@keydown.delete="deleteItems"
|
||||
@dragover="dragEnter"
|
||||
@@ -141,7 +141,7 @@
|
||||
|
||||
<style>
|
||||
.grid-view {
|
||||
@apply grid content-start xl:grid-cols-6 xl:gap-4 lg:grid-cols-4 lg:gap-2 grid-cols-3
|
||||
@apply grid content-start xl:grid-cols-6 sm:grid-cols-4 grid-cols-3 xl:gap-4 lg:gap-2
|
||||
}
|
||||
|
||||
.grid-view-sidebar {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
:class="{'dark:bg-dark-foreground bg-light-background': isClicked}"
|
||||
class="flex flex-wrap items-center justify-center relative z-0 text-center lg:h-52 h-48 px-1 pt-2 rounded-lg select-none border-2 border-transparent border-dashed dark:hover:bg-dark-foreground lg:hover:bg-light-background"
|
||||
class="flex flex-wrap items-center justify-center relative z-0 text-center lg:h-60 sm:h-56 h-48 px-1 pt-2 rounded-lg select-none border-2 border-transparent border-dashed dark:hover:bg-dark-foreground lg:hover:bg-light-background"
|
||||
:draggable="canDrag"
|
||||
spellcheck="false"
|
||||
>
|
||||
@@ -76,8 +76,14 @@
|
||||
</div>
|
||||
|
||||
<!-- Mobile item action button-->
|
||||
<div v-if="! isMultiSelectMode" class="inline-block py-0.5 px-2 md:hidden">
|
||||
<MoreHorizontalIcon @mousedown.stop="showItemActions" size="16" class="vue-feather text-theme dark-text-theme inline-block transform scale-110" />
|
||||
<div v-if="mobileHandler && ! isMultiSelectMode && $isMobile()" class="flex items-center justify-center py-0.5 px-2 relative">
|
||||
<div @mouseup.stop="$openInDetailPanel(entry)" class="p-2.5 sm:block hidden">
|
||||
<eye-icon size="18" class="vue-feather opacity-30 inline-block" />
|
||||
</div>
|
||||
|
||||
<div @mouseup.stop="showItemActions" class="p-2.5">
|
||||
<MoreHorizontalIcon size="18" class="vue-feather text-theme dark-text-theme inline-block" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -85,7 +91,7 @@
|
||||
|
||||
<script>
|
||||
import FolderIcon from '/resources/js/components/FilesView/FolderIcon'
|
||||
import {LinkIcon, MoreHorizontalIcon} from 'vue-feather-icons'
|
||||
import {LinkIcon, MoreHorizontalIcon, EyeIcon} from 'vue-feather-icons'
|
||||
import FileIconThumbnail from "./FileIconThumbnail";
|
||||
import MemberAvatar from "./MemberAvatar";
|
||||
import CheckBox from "./CheckBox";
|
||||
@@ -102,8 +108,10 @@
|
||||
FolderIcon,
|
||||
CheckBox,
|
||||
LinkIcon,
|
||||
EyeIcon,
|
||||
},
|
||||
props: [
|
||||
'mobileHandler',
|
||||
'entry',
|
||||
],
|
||||
data() {
|
||||
|
||||
@@ -16,6 +16,8 @@
|
||||
<ItemGrid
|
||||
v-if="itemViewType === 'grid'"
|
||||
:entry="item"
|
||||
:highlight="true"
|
||||
:mobile-handler="true"
|
||||
@mouseup.stop.native="clickFilter"
|
||||
@dragstart.native="$emit('dragstart')"
|
||||
@drop.native="drop()"
|
||||
|
||||
@@ -55,9 +55,12 @@
|
||||
</div>
|
||||
|
||||
<!-- Mobile item action button-->
|
||||
<div v-if="mobileHandler && ! isMultiSelectMode" class="block pr-1 flex-grow text-right md:hidden relative">
|
||||
<div @mousedown.stop="showItemActions" class="absolute right-0 p-4 -mr-4 transform -translate-y-2/4">
|
||||
<MoreVerticalIcon size="16" class="vue-feather text-theme dark-text-theme inline-block transform scale-110" />
|
||||
<div v-if="mobileHandler && ! isMultiSelectMode && $isMobile()" class="pr-1 flex-grow text-right relative">
|
||||
<div @mouseup.stop="$openInDetailPanel(entry)" class="absolute right-10 p-2.5 -mr-4 transform -translate-y-2/4 lg:block hidden">
|
||||
<eye-icon size="18" class="vue-feather opacity-30 inline-block" />
|
||||
</div>
|
||||
<div @mouseup.stop="showItemActions" class="absolute right-0 p-2.5 -mr-4 transform -translate-y-2/4">
|
||||
<MoreVerticalIcon size="18" class="vue-feather text-theme dark-text-theme inline-block" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,7 +68,7 @@
|
||||
|
||||
<script>
|
||||
import FolderIcon from '/resources/js/components/FilesView/FolderIcon'
|
||||
import {LinkIcon, MoreVerticalIcon} from 'vue-feather-icons'
|
||||
import {LinkIcon, MoreVerticalIcon, EyeIcon} from 'vue-feather-icons'
|
||||
import FileIconThumbnail from "./FileIconThumbnail";
|
||||
import MemberAvatar from "./MemberAvatar";
|
||||
import CheckBox from "./CheckBox";
|
||||
@@ -82,6 +85,7 @@
|
||||
FolderIcon,
|
||||
CheckBox,
|
||||
LinkIcon,
|
||||
EyeIcon,
|
||||
},
|
||||
props: [
|
||||
'mobileHandler',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="sticky top-0 dark:bg-dark-background bg-white flex text-center py-5 px-4 w-full justify-between items-center z-10 md:hidden block">
|
||||
<div class="sticky top-0 dark:bg-dark-background bg-white flex text-center py-5 px-4 w-full justify-between items-center z-10 lg:hidden block">
|
||||
|
||||
<!-- Go back-->
|
||||
<div @click="goBack" class="go-back-button flex text-left items-center">
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
}
|
||||
|
||||
.context-menu-leave-active {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
||||
@@ -254,7 +254,7 @@
|
||||
|
||||
// If is open send share via email
|
||||
if(this.sendToRecipientsMenu && !this.isEmailSended) {
|
||||
this.sendViaEmail()
|
||||
await this.sendViaEmail()
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section class="content-sidebar flex-none xl:w-56 w-52 sm:block hidden overflow-y-auto pt-6 select-none" id="content-sidebar">
|
||||
<section class="content-sidebar flex-none xl:w-56 w-52 lg:block hidden overflow-y-auto pt-6 select-none" id="content-sidebar">
|
||||
<slot></slot>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<nav class="menu-bar flex-none xl:w-20 w-16 sm:grid hidden">
|
||||
<nav class="menu-bar flex-none xl:w-20 w-16 lg:grid hidden">
|
||||
<div class="icon-navigation menu" v-if="user">
|
||||
|
||||
<router-link :to="{name: 'Profile'}" class="icon-navigation-item user">
|
||||
|
||||
+2
@@ -262,6 +262,7 @@ const FunctionHelpers = {
|
||||
return locations.includes(route.name)
|
||||
}
|
||||
|
||||
// TODO: not working correctly in share page
|
||||
Vue.prototype.$checkPermission = function (type) {
|
||||
|
||||
let currentPermission = store.getters.permission
|
||||
@@ -381,6 +382,7 @@ const FunctionHelpers = {
|
||||
|
||||
Vue.prototype.$openInDetailPanel = function (entry) {
|
||||
// Dispatch load file info detail
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', entry)
|
||||
|
||||
// Show panel if is not open
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
|
||||
<FileActionsMobile>
|
||||
<MobileActionButton @click.native="$openSpotlight" icon="search">
|
||||
{{ $t('actions.search')}}
|
||||
{{ $t('Spotlight')}}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="$showMobileMenu('file-filter')" icon="filter">
|
||||
{{ $getCurrentSectionName() }}
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
<FileActionsMobile>
|
||||
<template v-if="$checkPermission('editor')">
|
||||
<MobileActionButton @click.native="$openSpotlight" icon="search">
|
||||
{{ $t('actions.search') }}
|
||||
{{ $t('Spotlight') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="$showMobileMenu('create-list')" icon="cloud-plus">
|
||||
{{ $t('mobile.create') }}
|
||||
@@ -88,7 +88,7 @@
|
||||
</template>
|
||||
<template v-if="$checkPermission('visitor')">
|
||||
<MobileActionButton @click.native="$openSpotlight" icon="search">
|
||||
{{ $t('actions.search')}}
|
||||
{{ $t('Spotlight')}}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
|
||||
{{ $t('context_menu.select') }}
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
|
||||
<FileActionsMobile>
|
||||
<MobileActionButton @click.native="$openSpotlight" icon="search">
|
||||
{{ $t('actions.search')}}
|
||||
{{ $t('Spotlight') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="$showMobileMenu('file-filter')" icon="filter">
|
||||
{{ $getCurrentSectionName() }}
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
|
||||
<FileActionsMobile>
|
||||
<MobileActionButton @click.native="$openSpotlight" icon="search">
|
||||
{{ $t('actions.search')}}
|
||||
{{ $t('Spotlight')}}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="$showMobileMenu('file-filter')" icon="filter">
|
||||
{{ $getCurrentSectionName() }}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="sm:flex md:h-screen md:overflow-hidden">
|
||||
<div class="lg:flex lg:h-screen lg:overflow-hidden">
|
||||
|
||||
<!--On Top of App Components-->
|
||||
<FilePreview />
|
||||
@@ -35,25 +35,25 @@
|
||||
|
||||
<div
|
||||
@contextmenu.prevent.capture="contextMenu($event, undefined)"
|
||||
class="md:grid md:content-start sm:flex-grow sm:px-3.5 transition-transform duration-200"
|
||||
class="lg:grid lg:content-start lg:flex-grow lg:px-3.5 transition-transform duration-200"
|
||||
>
|
||||
<DesktopToolbar />
|
||||
|
||||
<MobileToolbar />
|
||||
|
||||
<!--File list & info sidebar-->
|
||||
<div class="flex space-x-6 md:overflow-hidden md:h-screen">
|
||||
<div class="flex space-x-6 lg:overflow-hidden lg:h-screen">
|
||||
|
||||
<router-view
|
||||
id="file-view"
|
||||
:class="{'2xl:w-5/6 md:w-4/6 w-full': isVisibleSidebar, 'w-full': ! isVisibleSidebar}"
|
||||
:class="{'2xl:w-5/6 lg:w-4/6 w-full': isVisibleSidebar, 'w-full': ! isVisibleSidebar}"
|
||||
class="relative"
|
||||
:key="$route.fullPath"
|
||||
/>
|
||||
|
||||
<InfoSidebar
|
||||
v-if="isVisibleSidebar"
|
||||
class="2xl:w-72 w-2/6 overflow-y-auto overflow-x-hidden h-screen md:block hidden"
|
||||
class="2xl:w-72 w-2/6 overflow-y-auto overflow-x-hidden h-screen lg:block hidden"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
<template>
|
||||
<div id="single-file">
|
||||
<div class="single-file-wrapper">
|
||||
<!-- TODO: fix-->
|
||||
<!-- <FileItemGrid v-if="sharedFile" :item="sharedFile.data.attributes" :context-menu="false"/>-->
|
||||
<div class="h-screen flex justify-center items-center">
|
||||
<div>
|
||||
<ItemGrid
|
||||
v-if="sharedFile"
|
||||
:entry="sharedFile"
|
||||
:highlight="true"
|
||||
:mobile-handler="true"
|
||||
/>
|
||||
|
||||
<ButtonBase @click.native="download" class="download-button" button-style="theme">
|
||||
<ButtonBase @click.native="download" button-style="theme">
|
||||
{{ $t('page_shared.download_file') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
@@ -13,12 +17,14 @@
|
||||
|
||||
<script>
|
||||
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
|
||||
import {mapGetters} from "vuex";
|
||||
import ItemGrid from "../../components/FilesView/ItemGrid"
|
||||
import {mapGetters} from "vuex"
|
||||
|
||||
export default {
|
||||
name: 'SharedSingleItem',
|
||||
components: {
|
||||
ButtonBase,
|
||||
ItemGrid,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
@@ -41,42 +47,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#single-file {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: grid;
|
||||
height: 100%;
|
||||
|
||||
.single-file-wrapper {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
|
||||
.download-button {
|
||||
margin-top: 15px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .file-wrapper {
|
||||
|
||||
.file-item {
|
||||
width: 290px;
|
||||
|
||||
&:hover, &.is-clicked {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.item-shared {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
Reference in New Issue
Block a user