nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-24 01:50:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

- New mobile navigation experience

Browse Source
This commit is contained in:
Peter Papp
2021-04-15 09:28:06 +02:00
parent a7ba0719a5
commit 110f7b60d6
11 changed files with 239 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/FileFilterMobile.vue
+6 -7
View File
@@ -2,13 +2,13 @@
<MenuMobile name="file-filter">
<MenuMobileGroup>
<OptionGroup>
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" :is-active="$isThisLocation('base')" />
<Option @click.native="goToLatest" :title="$t('menu.latest')" icon="upload-cloud" :is-active="$isThisLocation('latest')" />
<Option @click.native="goToTrash" :title="$t('menu.trash')" icon="trash" :is-active="$isThisLocation(['trash', 'trash-root'])" />
<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="goToTrash" :title="$t('menu.trash')" icon="trash" :is-active="$isThisLocation(['trash', 'trash-root'])" is-hover-disabled="true" />
</OptionGroup>
<OptionGroup>
<Option @click.native="goToShared" :title="$t('sidebar.my_shared')" icon="share" :is-active="$isThisLocation('shared')" />
<Option @click.native="goToParticipantUploads" :title="$t('sidebar.participant_uploads')" icon="users" :is-active="$isThisLocation('participant_uploads')" />
<Option @click.native="goToShared" :title="$t('sidebar.my_shared')" icon="share" :is-active="$isThisLocation('shared')" is-hover-disabled="true" />
<Option @click.native="goToParticipantUploads" :title="$t('sidebar.participant_uploads')" icon="users" :is-active="$isThisLocation('participant_uploads')" is-hover-disabled="true" />
</OptionGroup>
</MenuMobileGroup>
</MenuMobile>
@@ -20,7 +20,6 @@ import OptionGroup from '@/components/FilesView/OptionGroup'
import MenuMobile from '@/components/Mobile/MenuMobile'
import Option from '@/components/FilesView/Option'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'FileMenuMobile',
@@ -58,7 +57,7 @@ export default {
goToParticipantUploads() {
this.$store.dispatch('getParticipantUploads')
this.flushBrowseHistory()
},
}
}
}
</script>
resources/js/components/FilesView/Option.vue
+50 -4
View File
@@ -1,6 +1,6 @@
<template>
<li class="menu-option group">
<div class="icon group-hover-text-theme">
<li class="menu-option group" :class="{'hover-disabled': isHoverDisabled}">
<div class="icon-left group-hover-text-theme">
<calendar-icon v-if="icon === 'calendar'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<grid-icon v-if="icon === 'grid'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<list-icon v-if="icon === 'list'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
@@ -24,16 +24,35 @@
<user-icon v-if="icon === 'user'" 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}"/>
<cloud-icon v-if="icon === 'cloud'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<credit-card-icon v-if="icon === 'credit-card'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<file-text-icon v-if="icon === 'file-text'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<database-icon v-if="icon === 'database'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<globe-icon v-if="icon === 'globe'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<monitor-icon v-if="icon === 'monitor'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<box-icon v-if="icon === 'box'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
</div>
<div class="text-label group-hover-text-theme" :class="{'text-theme': isActive}">
{{ title }}
</div>
<div v-if="isArrowRight" class="icon-right group-hover-text-theme">
<chevron-right-icon size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
</div>
</li>
</template>
<script>
import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
import {
ChevronRightIcon,
BoxIcon,
MonitorIcon,
GlobeIcon,
FileTextIcon,
CreditCardIcon,
CloudIcon,
LockIcon,
PowerIcon,
SettingsIcon,
UsersIcon,
@@ -55,16 +74,28 @@ import {
GridIcon,
ListIcon,
CalendarIcon,
DatabaseIcon,
} from 'vue-feather-icons'
export default {
name: 'Option',
props:[
'isHoverDisabled',
'isArrowRight',
'isActive',
'title',
'icon'
],
components: {
BoxIcon,
MonitorIcon,
GlobeIcon,
DatabaseIcon,
ChevronRightIcon,
FileTextIcon,
CreditCardIcon,
CloudIcon,
LockIcon,
CornerDownRightIcon,
DownloadCloudIcon,
UploadCloudIcon,
@@ -106,7 +137,21 @@ import {
display: flex;
align-items: center;
.icon {
.icon-right {
vertical-align: middle;
text-align: right;
width: 100%;
svg {
@include transform(translateY(3px));
}
polyline {
color: inherit;
}
}
.icon-left {
margin-right: 20px;
line-height: 0;
@@ -124,10 +169,11 @@ import {
@include font-size(16);
}
&:hover {
&:hover:not(.hover-disabled) {
background: $light_background;
}
}
@media (prefers-color-scheme: dark) {
.menu-option {