nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-05 05:35:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

mobile filter refactoring

Browse Source
This commit is contained in:
Peter Papp
2021-08-21 09:41:34 +02:00
parent 8cf6b6ea78
commit 5ac786fb4c
13 changed files with 103 additions and 583 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/FileBrowser.vue
+1 -1
View File
@@ -91,7 +91,7 @@
import {debounce} from "lodash";
export default {
name: 'FilesContainer',
name: 'FileBrowser',
components: {
FileActionsMobile,
EmptyFilePage,
resources/js/components/FilesView/FileFilterMobile.vue
+19 -12
View File
@@ -2,13 +2,14 @@
<MenuMobile name="file-filter">
<MenuMobileGroup>
<OptionGroup>
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" :is-active="$isThisLocation('base')" is-hover-disabled="true" />
<Option @click.native="goToLatest" :title="$t('menu.latest')" icon="upload-cloud" :is-active="$isThisLocation('latest')" is-hover-disabled="true" />
<Option @click.native="goToShared" :title="$t('sidebar.my_shared')" icon="share" :is-active="$isThisLocation('shared')" is-hover-disabled="true" />
<Option @click.native="goToTrash" :title="$t('menu.trash')" icon="trash" :is-active="$isThisLocation(['trash', 'trash-root'])" is-hover-disabled="true" />
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" :is-active="$isThisRoute($route, 'Files')" is-hover-disabled="true" />
<Option @click.native="goToLatest" :title="$t('menu.latest')" icon="upload-cloud" :is-active="$isThisRoute($route, 'RecentUploads')" is-hover-disabled="true" />
<Option @click.native="goToShared" :title="$t('sidebar.my_shared')" icon="share" :is-active="$isThisRoute($route, 'MySharedItems')" is-hover-disabled="true" />
<Option @click.native="goToTrash" :title="$t('menu.trash')" icon="trash" :is-active="$isThisRoute($route, 'Trash')" is-hover-disabled="true" />
</OptionGroup>
<OptionGroup>
<!--todo: add teams-->
<Option @click.native="goToTeamFolders" :title="$t('Team Folders')" icon="users" :is-active="$isThisRoute($route, 'TeamFolders')" is-hover-disabled="true" />
<Option @click.native="goToSharedWithMe" :title="$t('Shared with Me')" icon="user-check" :is-active="$isThisRoute($route, 'SharedWithMe')" is-hover-disabled="true" />
</OptionGroup>
</MenuMobileGroup>
</MenuMobile>
@@ -31,17 +32,23 @@ export default {
},
methods: {
goToFiles() {
this.$store.dispatch('getFolder')
this.$router.push({name: 'Files'})
},
goToLatest() {
this.$store.dispatch('getLatest')
},
goToTrash() {
this.$store.dispatch('getTrash')
this.$router.push({name: 'RecentUploads'})
},
goToShared() {
this.$store.dispatch('getShared', [{back: false, init: false}])
}
this.$router.push({name: 'MySharedItems'})
},
goToTrash() {
this.$router.push({name: 'Trash'})
},
goToTeamFolders() {
this.$router.push({name: 'TeamFolders'})
},
goToSharedWithMe() {
this.$router.push({name: 'SharedWithMe'})
},
}
}
</script>
resources/js/components/FilesView/Option.vue
+3
View File
@@ -23,6 +23,7 @@
<users-icon v-if="icon === 'users'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<user-icon v-if="icon === 'user'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<user-plus-icon v-if="icon === 'user-plus'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<user-check-icon v-if="icon === 'user-check'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<settings-icon v-if="icon === 'settings'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<power-icon v-if="icon === 'power'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<lock-icon v-if="icon === 'lock'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
@@ -49,6 +50,7 @@
<script>
import AlphabetIcon from '/resources/js/components/FilesView/Icons/AlphabetIcon'
import {
UserCheckIcon,
UserPlusIcon,
ArrowUpIcon,
ArrowDownIcon,
@@ -94,6 +96,7 @@ import {
'icon'
],
components: {
UserCheckIcon,
UserPlusIcon,
ArrowUpIcon,
ArrowDownIcon,
resources/js/components/Others/ContentFileView.vue
-52
View File
@@ -1,52 +0,0 @@
<template>
<div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="files-view">
<DesktopToolbar/>
<ContextMenu />
<FileBrowser/>
</div>
</template>
<script>
import DesktopToolbar from '/resources/js/components/FilesView/DesktopToolbar'
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
import {events} from '/resources/js/bus'
export default {
name: 'FilesView',
components: {
DesktopToolbar,
FileBrowser,
ContextMenu,
},
methods: {
contextMenu(event, item) {
events.$emit('contextMenu:show', event, item)
},
},
}
</script>
<style lang="scss">
#files-view {
font-family: 'Nunito', sans-serif;
font-size: 16px;
width: 100%;
height: 100%;
position: relative;
min-width: 320px;
overflow-x: hidden;
padding-left: 15px;
padding-right: 15px;
overflow-y: hidden;
}
@media only screen and (max-width: 690px) {
#files-view {
padding-left: 0;
padding-right: 0;
}
}
</style>
resources/js/routes/routesUser.js
Vendored
+22 -4
View File
@@ -9,7 +9,7 @@ const routesUser = [
name: 'Files',
path: '/platform/files/:id?',
component: () =>
import(/* webpackChunkName: "chunks/files" */ '../views/FileView/Files'),
import(/* webpackChunkName: "chunks/files" */ '../views/FileView/Base/Files'),
meta: {
requiresAuth: true
},
@@ -18,7 +18,7 @@ const routesUser = [
name: 'RecentUploads',
path: '/platform/recent-uploads',
component: () =>
import(/* webpackChunkName: "chunks/recent-uploads" */ '../views/FileView/RecentUploads'),
import(/* webpackChunkName: "chunks/recent-uploads" */ '../views/FileView/Base/RecentUploads'),
meta: {
requiresAuth: true
},
@@ -27,7 +27,7 @@ const routesUser = [
name: 'MySharedItems',
path: '/platform/my-shared-items',
component: () =>
import(/* webpackChunkName: "chunks/my-shared-items" */ '../views/FileView/MySharedItems'),
import(/* webpackChunkName: "chunks/my-shared-items" */ '../views/FileView/Base/MySharedItems'),
meta: {
requiresAuth: true
},
@@ -36,7 +36,25 @@ const routesUser = [
name: 'Trash',
path: '/platform/trash/:id?',
component: () =>
import(/* webpackChunkName: "chunks/trash" */ '../views/FileView/Trash'),
import(/* webpackChunkName: "chunks/trash" */ '../views/FileView/Base/Trash'),
meta: {
requiresAuth: true
},
},
{
name: 'TeamFolders',
path: '/platform/team-folder/:id?',
component: () =>
import(/* webpackChunkName: "chunks/team-folders" */ '../views/FileView/Base/Trash'),
meta: {
requiresAuth: true
},
},
{
name: 'SharedWithMe',
path: '/platform/shared-with-me/:id?',
component: () =>
import(/* webpackChunkName: "chunks/shared-with-me" */ '../views/FileView/Base/Trash'),
meta: {
requiresAuth: true
},
resources/js/views/FileView/Files.vue → resources/js/views/FileView/Base/Files.vue
+1 -1
View File
@@ -84,7 +84,7 @@
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
import Option from '/resources/js/components/FilesView/Option'
import { mapGetters } from 'vuex'
import {events} from "../../bus";
import {events} from "../../../bus";
export default {
name: 'Files',
resources/js/views/FileView/MySharedItems.vue → resources/js/views/FileView/Base/MySharedItems.vue
+1 -1
View File
@@ -64,7 +64,7 @@
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
import Option from '/resources/js/components/FilesView/Option'
import { mapGetters } from 'vuex'
import {events} from "../../bus";
import {events} from "../../../bus";
export default {
name: 'MySharedItems',
resources/js/views/FileView/RecentUploads.vue → resources/js/views/FileView/Base/RecentUploads.vue
+1 -1
View File
@@ -58,7 +58,7 @@
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
import Option from '/resources/js/components/FilesView/Option'
import { mapGetters } from 'vuex'
import {events} from "../../bus";
import {events} from "../../../bus";
export default {
name: 'RecentUploads',
resources/js/views/FileView/Trash.vue → resources/js/views/FileView/Base/Trash.vue
+1 -1
View File
@@ -66,7 +66,7 @@
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
import Option from '/resources/js/components/FilesView/Option'
import { mapGetters } from 'vuex'
import {events} from "../../bus";
import {events} from "../../../bus";
export default {
name: 'Trash',
resources/js/views/FileView/NavigationPanel.vue
+3 -3
View File
@@ -46,7 +46,7 @@
<!--Locations-->
<ContentGroup :title="$t('Collaboration')" slug="collaboration" :can-collapse="true">
<div class="menu-list-wrapper vertical">
<!-- <router-link class="menu-list-item link">
<router-link :to="{name: 'TeamFolders'}" class="menu-list-item link">
<div class="icon text-theme">
<users-icon size="17" />
</div>
@@ -54,14 +54,14 @@
{{ $t('Team Folders') }}
</div>
</router-link>
<router-link class="menu-list-item link">
<router-link :to="{name: 'SharedWithMe'}" class="menu-list-item link">
<div class="icon text-theme">
<user-check-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('Shared with Me') }}
</div>
</router-link>-->
</router-link>
</div>
</ContentGroup>
resources/js/views/FileView/Public.vue → resources/js/views/FileView/Public/Public.vue
+1 -1
View File
@@ -96,7 +96,7 @@
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
import Option from '/resources/js/components/FilesView/Option'
import { mapGetters } from 'vuex'
import {events} from "../../bus";
import {events} from "../../../bus";
export default {
name: 'Files',
resources/js/views/Platform.vue
+4 -3
View File
@@ -38,9 +38,9 @@
<!--Sidebar-->
<NavigationPanel />
<div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="files-view">
<div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="file-view" :class="{'is-scaled-down': isScaledDown}">
<DesktopToolbar/>
<router-view :key="$route.fullPath" :class="{'is-scaled-down': isScaledDown}" />
<router-view :key="$route.fullPath" />
</div>
</div>
</template>
@@ -123,7 +123,7 @@
<style lang="scss">
@import '/resources/sass/vuefilemanager/_mixins';
#files-view {
#file-view {
font-family: 'Nunito', sans-serif;
font-size: 16px;
width: 100%;
@@ -134,6 +134,7 @@
padding-left: 15px;
padding-right: 15px;
overflow-y: hidden;
@include transition(120ms);
}
@media only screen and (max-width: 690px) {