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

Folder buttons UI refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-25 13:39:21 +01:00
parent 5725753052
commit 630cefee41
11 changed files with 122 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
resources/js/components/FilesView/FileFilterMobile.vue
View File

@@ -2,14 +2,14 @@
<MenuMobile name="file-filter">
<MenuMobileGroup>
<OptionGroup>
<Option @click.native="goToFiles" :title="$t('sidebar.home')" 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" />
<Option @click.native="goToFiles" :title="$t('sidebar.home')" 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>
<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" />
<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>

34
resources/js/components/Others/MobileNavigation.vue
View File

@@ -29,41 +29,41 @@
<!--Main navigation-->
<OptionGroup v-if="!clickedSubmenu">
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" is-hover-disabled="true"/>
<Option @click.native.stop="showSubmenu('settings')" :title="$t('menu.settings')" icon="user" arrow="right" is-hover-disabled="true"/>
<Option v-if="isAdmin" @click.native.stop="showSubmenu('admin')" :title="$t('menu.admin')" icon="settings" arrow="right" is-hover-disabled="true"/>
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" :is-hover-disabled="true"/>
<Option @click.native.stop="showSubmenu('settings')" :title="$t('menu.settings')" icon="user" arrow="right" :is-hover-disabled="true"/>
<Option v-if="isAdmin" @click.native.stop="showSubmenu('admin')" :title="$t('menu.admin')" icon="settings" arrow="right" :is-hover-disabled="true"/>
</OptionGroup>
<OptionGroup v-if="!clickedSubmenu">
<Option @click.native="logOut" :title="$t('menu.logout')" icon="power" is-hover-disabled="true" />
<Option @click.native="logOut" :title="$t('menu.logout')" icon="power" :is-hover-disabled="true" />
</OptionGroup>
<!--Submenu: User settings-->
<OptionGroup v-if="clickedSubmenu === 'settings'">
<Option @click.native="goToRoute('Profile')" :title="$t('menu.profile')" icon="user" is-hover-disabled="true" />
<Option @click.native="goToRoute('Password')" :title="$t('menu.password')" icon="lock" is-hover-disabled="true" />
<Option @click.native="goToRoute('Storage')" :title="$t('menu.storage')" icon="hard-drive" is-hover-disabled="true" />
<Option @click.native="goToRoute('Billing')" v-if="config.isSaaS" :title="$t('Billing')" icon="cloud" is-hover-disabled="true" />
<Option @click.native="goToRoute('Profile')" :title="$t('menu.profile')" icon="user" :is-hover-disabled="true" />
<Option @click.native="goToRoute('Password')" :title="$t('menu.password')" icon="lock" :is-hover-disabled="true" />
<Option @click.native="goToRoute('Storage')" :title="$t('menu.storage')" icon="hard-drive" :is-hover-disabled="true" />
<Option @click.native="goToRoute('Billing')" v-if="config.isSaaS" :title="$t('Billing')" icon="cloud" :is-hover-disabled="true" />
</OptionGroup>
<!--Submenu: Admin settings-->
<OptionGroup v-if="clickedSubmenu === 'admin'">
<Option @click.native="goToRoute('Dashboard')" :title="$t('admin_menu.dashboard')" icon="box" is-hover-disabled="true" />
<Option @click.native="goToRoute('Users')" :title="$t('admin_menu.users')" icon="users" is-hover-disabled="true" />
<Option @click.native="goToRoute('AppOthers')" :title="$t('admin_menu.settings')" icon="settings" is-hover-disabled="true" />
<Option @click.native="goToRoute('Dashboard')" :title="$t('admin_menu.dashboard')" icon="box" :is-hover-disabled="true" />
<Option @click.native="goToRoute('Users')" :title="$t('admin_menu.users')" icon="users" :is-hover-disabled="true" />
<Option @click.native="goToRoute('AppOthers')" :title="$t('admin_menu.settings')" icon="settings" :is-hover-disabled="true" />
</OptionGroup>
<!--Submenu: Content settings-->
<OptionGroup v-if="clickedSubmenu === 'admin'">
<Option @click.native="goToRoute('Pages')" :title="$t('admin_menu.pages')" icon="monitor" is-hover-disabled="true" />
<Option @click.native="goToRoute('Language')" :title="$t('languages')" icon="globe" is-hover-disabled="true" />
<Option @click.native="goToRoute('Pages')" :title="$t('admin_menu.pages')" icon="monitor" :is-hover-disabled="true" />
<Option @click.native="goToRoute('Language')" :title="$t('languages')" icon="globe" :is-hover-disabled="true" />
</OptionGroup>
<!--Submenu: Billing settings-->
<OptionGroup v-if="clickedSubmenu === 'admin' && config.isSaaS">
<Option @click.native="goToRoute('AppPayments')" :title="$t('Payments')" icon="credit-card" is-hover-disabled="true" />
<Option @click.native="goToRoute('Subscriptions')" v-if="config.subscriptionType === 'fixed'" :title="$t('Subscriptions')" icon="credit-card" is-hover-disabled="true" />
<Option @click.native="goToRoute('Plans')" :title="$t('admin_menu.plans')" icon="database" is-hover-disabled="true" />
<Option @click.native="goToRoute('Invoices')" :title="$t('Transactions')" icon="file-text" is-hover-disabled="true" />
<Option @click.native="goToRoute('AppPayments')" :title="$t('Payments')" icon="credit-card" :is-hover-disabled="true" />
<Option @click.native="goToRoute('Subscriptions')" v-if="config.subscriptionType === 'fixed'" :title="$t('Subscriptions')" icon="credit-card" :is-hover-disabled="true" />
<Option @click.native="goToRoute('Plans')" :title="$t('admin_menu.plans')" icon="database" :is-hover-disabled="true" />
<Option @click.native="goToRoute('Invoices')" :title="$t('Transactions')" icon="file-text" :is-hover-disabled="true" />
</OptionGroup>
</MenuMobileGroup>
</MenuMobile>

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

@@ -1,5 +1,6 @@
import {debounce, isArray, orderBy} from "lodash"
import i18n from '/resources/js/i18n/index'
import router from '/resources/js/router'
import store from '../store/index'
import {events} from '../bus'
import axios from 'axios'
@@ -334,15 +335,15 @@ const FunctionHelpers = {
Vue.prototype.$getDataByLocation = function () {
let routes = {
'Files': ['getFolder', this.$route.params.id],
'Files': ['getFolder', router.currentRoute.params.id || undefined],
'RecentUploads': ['getRecentUploads'],
'MySharedItems': ['getMySharedItems'],
'Trash': ['getTrash', this.$route.params.id],
'TeamFolders': ['getTeamFolder', this.$route.params.id],
'SharedWithMe': ['getSharedWithMeFolder', this.$route.params.id],
'Trash': ['getTrash', router.currentRoute.params.id || undefined],
'TeamFolders': ['getTeamFolder', router.currentRoute.params.id || undefined],
'SharedWithMe': ['getSharedWithMeFolder', router.currentRoute.params.id || undefined],
}
this.$store.dispatch(...routes[this.$router.currentRoute.name])
store.dispatch(...routes[router.currentRoute.name])
}
Vue.prototype.$getPaymentLogo = function (driver) {

9
resources/js/store/modules/fileFunctions.js vendored
View File

@@ -213,8 +213,11 @@ const actions = {
if (!getters.fileQueue.length) {
commit('CLEAR_UPLOAD_PROGRESS')
// Reload folder tree
dispatch('getFolderTree')
// Reload files after upload is done
dispatch('getFolder', [{folder: getters.currentFolder, back: true, init: false}])
Vue.prototype.$getDataByLocation()
}
}
})
@@ -223,7 +226,7 @@ const actions = {
console.log(error);
/* let messages = {
let messages = {
'423': {
title: i18n.t('popup_exceed_limit.title'),
message: i18n.t('popup_exceed_limit.message')
@@ -245,7 +248,7 @@ const actions = {
emoji: '😬😬😬',
title: messages[error.response.status]['title'],
message: messages[error.response.status]['message'] || null
})*/
})
commit('PROCESSING_FILE', false)
commit('CLEAR_UPLOAD_PROGRESS')

10
resources/js/views/FileView/Files.vue
View File

@@ -22,11 +22,12 @@
<MobileCreateMenu>
<OptionGroup>
<OptionUpload :class="{'is-inactive': !hasCapacity }" :title="$t('actions.upload')" is-hover-disabled="true" />
<OptionUpload :class="{'is-inactive': !hasCapacity }" :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup>
<Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" is-hover-disabled="true" />
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" is-hover-disabled="true" />
<Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" :is-hover-disabled="true" />
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
</OptionGroup>
</MobileCreateMenu>
@@ -39,7 +40,8 @@
<ContextMenu>
<template v-slot:empty-select>
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" />
<OptionUpload :title="$t('actions.upload')" type="file" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />

8
resources/js/views/FileView/Public.vue
View File

@@ -20,10 +20,11 @@
<MobileCreateMenu>
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
</OptionGroup>
<OptionGroup>
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" is-hover-disabled="true" />
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
</OptionGroup>
</MobileCreateMenu>
@@ -41,7 +42,8 @@
<ContextMenu>
<template v-slot:empty-select v-if="$checkPermission('editor')">
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" />
<OptionUpload :title="$t('actions.upload')" type="file" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />

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

@@ -13,10 +13,11 @@
<MobileCreateMenu>
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
</OptionGroup>
<OptionGroup>
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" is-hover-disabled="true" />
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
</OptionGroup>
</MobileCreateMenu>
@@ -35,7 +36,10 @@
<ContextMenu>
<template v-slot:empty-select v-if="canEdit">
<OptionGroup v-if="! isTeamFolderHomepage">
<OptionUpload :title="$t('actions.upload')" />
<OptionUpload :title="$t('actions.upload')" type="file" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup v-if="! isTeamFolderHomepage">
<Option @click.stop.native="$createFolder" :title="$t('actions.create_folder')" icon="folder-plus" />
</OptionGroup>
</template>

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

@@ -22,11 +22,12 @@
<MobileCreateMenu>
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
</OptionGroup>
<OptionGroup>
<Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" is-hover-disabled="true" />
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" is-hover-disabled="true" />
<Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" :is-hover-disabled="true" />
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
</OptionGroup>
</MobileCreateMenu>
@@ -46,7 +47,8 @@
<ContextMenu>
<template v-slot:empty-select>
<OptionGroup v-if="! isTeamFolderHomepage">
<OptionUpload :title="$t('actions.upload')" />
<OptionUpload :title="$t('actions.upload')" type="file" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
<Option @click.stop.native="$createFolder" :title="$t('actions.create_folder')" icon="folder-plus" />
</OptionGroup>
<OptionGroup v-if="isTeamFolderHomepage">