mobile filter refactoring

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
@@ -91,7 +91,7 @@
import {debounce} from "lodash";
export default {
name: 'FilesContainer',
name: 'FileBrowser',
components: {
FileActionsMobile,
EmptyFilePage,
@@ -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>
@@ -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,