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 {

9
resources/js/components/Teams/Components/TeamMembersButton.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="w-28">
<div v-if="! teamFolder" class="text-center">
<span class="dark:text-gray-500 text-gray-600 mr-0.5 text-tiny">
<div v-if="! teamFolder" class="md:text-center text-right">
<span class="dark:text-gray-500 text-gray-600 md:mr-0.5 mr-3 text-tiny align-middle">
{{ $t('Not selected') }}
</span>
</div>
<TeamMembersPreview v-else :folder="teamFolder" :limit="true" :avatar-size="32" class="justify-center" />
<TeamMembersPreview v-else :folder="teamFolder" :limit="true" :avatar-size="size" class="md:justify-center justify-end" />
</div>
</template>
@@ -18,6 +18,9 @@
components: {
TeamMembersPreview,
},
props: [
'size'
],
computed: {
...mapGetters([
'currentTeamFolder',

2
resources/js/components/Teams/Components/TeamMembersPreview.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="team-folder">
<span v-if="limit && membersCount > 3" class="member-count">
3+
+{{ membersCount - 3 }}
</span>
<div class="members">
<div v-for="member in members" :key="member.data.id" :title="member.data.attributes.email" class="member-preview z-10">

5
resources/js/helpers/functionHelpers.js vendored
View File

@@ -392,6 +392,11 @@ const FunctionHelpers = {
Vue.prototype.$showViewOptions = function () {
events.$emit('mobile-menu:show', 'file-sorting')
}
// TODO: refactor other methods
Vue.prototype.$showMobileMenu = function (name) {
events.$emit('mobile-menu:show', name)
}
}
}

15
resources/js/views/FileView/SharedWithMe.vue
View File

@@ -20,6 +20,12 @@
</OptionGroup>
</MobileCreateMenu>
<MobileTeamContextMenu>
<OptionGroup>
<Option @click.native="$detachMeFromTeamFolder(teamFolder)" :title="$t('Leave the Team Folder')" icon="user-minus" />
</OptionGroup>
</MobileTeamContextMenu>
<MobileMultiSelectToolbar>
<ToolbarButton v-if="canEdit" @click.native="$moveFileOrFolder(clipboard)" class="action-btn" source="move" :action="$t('actions.move')" :class="{'is-inactive' : clipboard.length < 1}" />
<ToolbarButton v-if="canEdit" @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" />
@@ -113,6 +119,7 @@
</template>
<script>
import MobileTeamContextMenu from "../../components/FilesView/MobileTeamContextMenu";
import EmptyFilePage from "../../components/FilesView/EmptyFilePage";
import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
@@ -130,14 +137,13 @@
import Option from '/resources/js/components/FilesView/Option'
import { mapGetters } from 'vuex'
import {events} from "../../bus";
import Vue from "vue";
import router from "../../router";
export default {
name: 'SharedWithMe',
components: {
MobileActionButtonUpload,
MobileMultiSelectToolbar,
MobileTeamContextMenu,
MobileActionButton,
MobileContextMenu,
MobileCreateMenu,
@@ -159,6 +165,11 @@
'config',
'user',
]),
teamFolder() {
return this.currentTeamFolder
? this.currentTeamFolder
: this.clipboard[0]
},
canEdit() {
if (this.currentTeamFolder && this.user) {
let member = this.currentTeamFolder.data.relationships.members.data.find(member => member.data.id === this.user.data.id)

17
resources/js/views/FileView/TeamFolders.vue
View File

@@ -30,6 +30,13 @@
</OptionGroup>
</MobileCreateMenu>
<MobileTeamContextMenu>
<OptionGroup>
<Option @click.native="$updateTeamFolder(teamFolder)" :title="$t('Edit Members')" icon="rename" />
<Option @click.native="$dissolveTeamFolder(teamFolder)" :title="$t('Dissolve Team')" icon="trash" />
</OptionGroup>
</MobileTeamContextMenu>
<MobileMultiSelectToolbar>
<ToolbarButton @click.native="$moveFileOrFolder(clipboard)" class="action-btn" source="move" :action="$t('actions.move')" :class="{'is-inactive' : clipboard.length < 1}" />
<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" />
@@ -129,6 +136,7 @@
</template>
<script>
import MobileTeamContextMenu from "../../components/FilesView/MobileTeamContextMenu";
import EmptyFilePage from "../../components/FilesView/EmptyFilePage";
import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
@@ -146,14 +154,13 @@
import Option from '/resources/js/components/FilesView/Option'
import { mapGetters } from 'vuex'
import {events} from "../../bus";
import Vue from "vue";
import router from "../../router";
export default {
name: 'TeamFolders',
components: {
MobileActionButtonUpload,
MobileMultiSelectToolbar,
MobileTeamContextMenu,
MobileActionButton,
MobileContextMenu,
MobileCreateMenu,
@@ -170,10 +177,16 @@
},
computed: {
...mapGetters([
'currentTeamFolder',
'clipboard',
'config',
'user',
]),
teamFolder() {
return this.currentTeamFolder
? this.currentTeamFolder
: this.clipboard[0]
},
isTeamFolderHomepage() {
return this.$isThisRoute(this.$route, ['TeamFolders'])
&& ! this.$route.params.id