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

upload request prototype UI

Browse Source
This commit is contained in:
Čarodej
2022-02-16 16:57:57 +01:00
parent 3fafc811fe
commit 394a7b6baf
197 changed files with 6927 additions and 2738 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/Option.vue
+230 -40
View File
@@ -1,54 +1,244 @@
<template>
<li
class="flex items-center justify-between py-4 px-5"
:class="{'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': !isHoverDisabled}"
class="flex items-center justify-between py-3.5 px-5"
:class="{ 'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': !isHoverDisabled }"
>
<div class="flex items-center">
<div class="mr-4">
<calendar-icon v-if="icon === 'calendar'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<grid-icon v-if="icon === 'grid'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<list-icon v-if="icon === 'list'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<trash-2-icon v-if="icon === 'trash'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<life-buoy-icon v-if="icon === 'restore'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<trash-icon v-if="icon === 'empty-trash'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<eye-icon v-if="icon === 'detail'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<download-cloud-icon v-if="icon === 'download'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<edit2-icon v-if="icon === 'rename'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<corner-down-right-icon v-if="icon === 'move-item'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<link-icon v-if="icon === 'share'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<star-icon v-if="icon === 'favourites'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<folder-plus-icon v-if="icon === 'create-folder'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<smile-icon v-if="icon === 'no-options'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<paperclip-icon v-if="icon === 'zip-folder'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<alphabet-icon v-if="icon === 'alphabet'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<star-icon v-if="icon === 'star'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<hard-drive-icon v-if="icon === 'hard-drive'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<upload-cloud-icon v-if="icon === 'upload-cloud'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<users-icon v-if="icon === 'users'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<user-icon v-if="icon === 'user'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<user-plus-icon v-if="icon === 'user-plus'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<user-minus-icon v-if="icon === 'user-minus'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<user-check-icon v-if="icon === 'user-check'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<settings-icon v-if="icon === 'settings'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<power-icon v-if="icon === 'power'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<lock-icon v-if="icon === 'lock'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<cloud-icon v-if="icon === 'cloud'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<credit-card-icon v-if="icon === 'credit-card'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<file-text-icon v-if="icon === 'file-text'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<database-icon v-if="icon === 'database'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<globe-icon v-if="icon === 'globe'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<monitor-icon v-if="icon === 'monitor'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<box-icon v-if="icon === 'box'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<folder-plus-icon v-if="icon === 'folder-plus'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<calendar-icon
v-if="icon === 'calendar'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<grid-icon
v-if="icon === 'grid'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<list-icon
v-if="icon === 'list'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<trash-2-icon
v-if="icon === 'trash'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<life-buoy-icon
v-if="icon === 'restore'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<trash-icon
v-if="icon === 'empty-trash'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<eye-icon
v-if="icon === 'detail'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<download-cloud-icon
v-if="icon === 'download'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<edit2-icon
v-if="icon === 'rename'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<corner-down-right-icon
v-if="icon === 'move-item'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<link-icon
v-if="icon === 'share'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<star-icon
v-if="icon === 'favourites'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<folder-plus-icon
v-if="icon === 'create-folder'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<smile-icon
v-if="icon === 'no-options'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<paperclip-icon
v-if="icon === 'zip-folder'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<alphabet-icon
v-if="icon === 'alphabet'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<star-icon
v-if="icon === 'star'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<hard-drive-icon
v-if="icon === 'hard-drive'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<upload-cloud-icon
v-if="icon === 'upload-cloud'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<users-icon
v-if="icon === 'users'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<user-icon
v-if="icon === 'user'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<user-plus-icon
v-if="icon === 'user-plus'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<user-minus-icon
v-if="icon === 'user-minus'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<user-check-icon
v-if="icon === 'user-check'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<settings-icon
v-if="icon === 'settings'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<power-icon
v-if="icon === 'power'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<lock-icon
v-if="icon === 'lock'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<cloud-icon
v-if="icon === 'cloud'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<credit-card-icon
v-if="icon === 'credit-card'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<file-text-icon
v-if="icon === 'file-text'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<database-icon
v-if="icon === 'database'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<globe-icon
v-if="icon === 'globe'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<monitor-icon
v-if="icon === 'monitor'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<box-icon
v-if="icon === 'box'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<folder-plus-icon
v-if="icon === 'folder-plus'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
</div>
<b class="group-hover-text-theme text-sm font-bold" :class="{ 'text-theme': isActive }">
{{ title }}
</b>
</div>
<div v-if="arrow" class="ml-2">
<chevron-right-icon v-if="arrow === 'right'" size="14" class="vue-feather group-hover-text-theme opacity-50" :class="{ 'text-theme': isActive }" />
<arrow-up-icon v-if="arrow === 'up'" size="14" class="vue-feather group-hover-text-theme opacity-50" :class="{ 'text-theme': isActive }" />
<arrow-down-icon v-if="arrow === 'down'" size="14" class="vue-feather group-hover-text-theme opacity-50" :class="{ 'text-theme': isActive }" />
<chevron-right-icon
v-if="arrow === 'right'"
size="14"
class="vue-feather group-hover-text-theme opacity-50"
:class="{ 'text-theme': isActive }"
/>
<arrow-up-icon
v-if="arrow === 'up'"
size="14"
class="vue-feather group-hover-text-theme opacity-50"
:class="{ 'text-theme': isActive }"
/>
<arrow-down-icon
v-if="arrow === 'down'"
size="14"
class="vue-feather group-hover-text-theme opacity-50"
:class="{ 'text-theme': isActive }"
/>
</div>
</li>
</template>