nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 08:12:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Teams mobile implementation

Browse Source
This commit is contained in:
Čarodej
2021-10-29 11:43:55 +02:00
parent 0f08d9fe38
commit ce846cc076
11 changed files with 152 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/FilesView/DesktopToolbar.vue
View File

@@ -67,7 +67,7 @@
<!--Team Folder Icon-->
<PopoverWrapper v-if="$isThisRoute($route, ['TeamFolders', 'SharedWithMe'])">
<TeamMembersButton @click.stop.native="showTeamFolderMenu" class="team-preview" />
<TeamMembersButton @click.stop.native="showTeamFolderMenu" size="32" class="team-preview" />
<PopoverItem name="team-folder" side="left">
<TeamFolderPreview />

2
resources/js/components/FilesView/FileActionsMobile.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="sticky dark:bg-dark-background bg-white top-12 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 md:hidden block">
<!--Show Buttons-->
<div v-if="! isMultiSelectMode" class="mobile-actions">

24
resources/js/components/FilesView/MobileTeamContextMenu.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<MenuMobile name="team-menu">
<TeamFolderPreview />
<MenuMobileGroup v-if="$slots.default">
<slot></slot>
</MenuMobileGroup>
</MenuMobile>
</template>
<script>
import MenuMobileGroup from '/resources/js/components/Mobile/MenuMobileGroup'
import TeamFolderPreview from '../Teams/Components/TeamFolderPreview'
import MenuMobile from '/resources/js/components/Mobile/MenuMobile'
export default {
name: 'MobileTeamContextMenu',
components: {
TeamFolderPreview,
MenuMobileGroup,
MenuMobile,
},
}
</script>

78
resources/js/components/FilesView/MobileToolbar.vue
View File

@@ -1,26 +1,37 @@
<template>
<div class="sticky top-0 dark:bg-dark-background bg-white flex text-center py-4 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 md:hidden block">
<!-- Go back-->
<div @click="goBack" class="go-back-button flex text-left items-center">
<chevron-left-icon size="17" class="icon-back" :class="{'is-visible': isLoadedFolder }" />
<chevron-left-icon size="17" class="pointer-events-none opacity-20 align-middle cursor-pointer mr-2" :class="{'pointer-events-auto opacity-100': isLoadedFolder }" />
<!--Folder Title-->
<div class="directory-name lg:text-base text-sm">
<div class="lg:text-base text-sm align-middle font-bold overflow-hidden overflow-ellipsis inline-block whitespace-nowrap" style="max-width: 200px;">
{{ $getCurrentLocationName() }}
</div>
</div>
<!--More Actions-->
<div class="more-actions-button">
<div v-if="$checkPermission('master')" @click="showMobileNavigation" class="tap-area px-1.5">
<menu-icon size="17" />
</div>
</div>
<div class="flex items-center relative">
<TeamMembersButton
v-if="$isThisRoute($route, ['TeamFolders', 'SharedWithMe'])"
size="28"
@click.stop.native="$showMobileMenu('team-menu')"
class="absolute right-9"
/>
<!--More Actions-->
<div class="more-actions-button">
<div v-if="$checkPermission('master')" @click="showMobileNavigation" class="tap-area px-1.5">
<menu-icon size="17" />
</div>
</div>
</div>
</div>
</template>
<script>
import TeamMembersPreview from "../Teams/Components/TeamMembersPreview";
import TeamMembersButton from "../Teams/Components/TeamMembersButton";
import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
import SearchBar from '/resources/js/components/FilesView/SearchBar'
import { MenuIcon, ChevronLeftIcon } from 'vue-feather-icons'
@@ -30,6 +41,8 @@
export default {
name: 'MobileToolBar',
components: {
TeamMembersPreview,
TeamMembersButton,
ChevronLeftIcon,
ToolbarButton,
SearchBar,
@@ -37,9 +50,11 @@
},
computed: {
...mapGetters([
'currentTeamFolder',
'isVisibleSidebar',
'itemViewType',
'currentFolder',
'itemViewType',
'clipboard',
]),
isLoadedFolder() {
return this.$route.params.id
@@ -47,7 +62,7 @@
},
methods: {
showMobileNavigation() {
events.$emit('mobile-menu:show', 'user-navigation')
this.$showMobileMenu('user-navigation')
this.$store.commit('DISABLE_MULTISELECT_MODE')
},
goBack() {
@@ -66,47 +81,6 @@
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.go-back-button {
.icon-back {
pointer-events: none;
opacity: 0.15;
vertical-align: middle;
cursor: pointer;
margin-top: -2px;
margin-right: 4px;
&.is-visible {
pointer-events: initial;
visibility: visible;
opacity: 1;
}
}
}
.directory-name {
line-height: 1;
width: 100%;
vertical-align: middle;
color: $text;
font-weight: 700;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.more-actions-button {
position: relative;
.tap-area {
path, line, polyline, rect, circle {
stroke: $text;
}
}
}
.dark {
.directory-name {