nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-22 01:22:16 +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

54
resources/js/components/FilesView/Option.vue
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 {