nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 16:22:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

File icons refactoring

Browse Source
This commit is contained in:
Čarodej
2021-10-28 07:45:55 +02:00
parent 407f2d2874
commit 9c26c764bd
7 changed files with 195 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
resources/js/components/FilesView/ItemList.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="{'bg-light-background': isClicked}" class="flex items-center px-2.5 py-2 rounded-lg select-none border-2 border-transparent border-dashed" :draggable="canDrag" spellcheck="false">
<div :class="{'dark:bg-dark-foreground bg-light-background': isClicked}" class="flex items-center px-2.5 py-2 rounded-lg select-none border-2 border-transparent border-dashed dark:hover:bg-dark-foreground hover:bg-light-background" :draggable="canDrag" spellcheck="false">
<!--MultiSelecting for the mobile version-->
<CheckBox v-if="isMultiSelectMode" :is-clicked="isClicked" class="mr-5"/>
@@ -20,19 +20,21 @@
<FolderIcon v-if="isFolder" :item="entry" location="file-item-list" />
<!--File Icon-->
<div v-if="isFile || isVideo || (isImage && !entry.data.attributes.thumbnail)" class="flex items-center justify-center">
<div v-if="isFile || isVideo || (isImage && !entry.data.attributes.thumbnail)" class="flex items-center justify-center pr-2">
<span class="text-theme dark-text-theme text-xs font-semibold absolute z-10 inline-block mx-auto mt-2 w-7 overflow-ellipsis overflow-hidden text-center">
{{ entry.data.attributes.mimetype }}
</span>
<svg width="38px" height="51px" viewBox="0 0 38 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M22.1666667,13.546875 L22.1666667,3 C22.1666667,1.34314575 20.8235209,-3.04359188e-16 19.1666667,0 L2.375,0 L2.375,0 C1.05885417,0 0,1.06582031 0,2.390625 L0,48.609375 C0,49.9341797 1.05885417,51 2.375,51 L35.625,51 C36.9411458,51 38,49.9341797 38,48.609375 L38,18.9375 C38,17.2806458 36.6568542,15.9375 35,15.9375 L24.5416667,15.9375 L24.5416667,15.9375 C23.2354167,15.9375 22.1666667,14.8617187 22.1666667,13.546875 Z M38,12.1423828 L38,12.75 L28.3333333,12.75 C26.6764791,12.75 25.3333333,11.4068542 25.3333333,9.75 L25.3333333,0 L25.3333333,0 L25.9369792,0 C26.5703125,0 27.1739583,0.249023438 27.6192708,0.697265625 L37.3072917,10.4589844 C37.7526042,10.9072266 38,11.5148437 38,12.1423828 Z" id="file" fill="#F8F9FA" fill-rule="nonzero"></path>
</g>
<path
stroke-width="0"
fill="#F8F9FA"
d="M22.1666667,13.546875 L22.1666667,0 L2.375,0 C1.05885417,0 0,1.06582031 0,2.390625 L0,48.609375 C0,49.9341797 1.05885417,51 2.375,51 L35.625,51 C36.9411458,51 38,49.9341797 38,48.609375 L38,15.9375 L24.5416667,15.9375 C23.2354167,15.9375 22.1666667,14.8617187 22.1666667,13.546875 Z M38,12.1423828 L38,12.75 L25.3333333,12.75 L25.3333333,0 L25.9369792,0 C26.5703125,0 27.1739583,0.249023438 27.6192708,0.697265625 L37.3072917,10.4589844 C37.7526042,10.9072266 38,11.5148437 38,12.1423828 Z"></path>
</svg>
</div>
<!--Image thumbnail-->
<img v-if="isImage && entry.data.attributes.thumbnail" class="w-12 h-12 rounded" :src="entry.data.attributes.thumbnail" :alt="entry.data.attributes.name" loading="lazy" />
<img v-if="isImage && entry.data.attributes.thumbnail" class="w-12 h-12 rounded ml-0.5" :src="entry.data.attributes.thumbnail" :alt="entry.data.attributes.name" loading="lazy" />
</div>
<!--Item Info-->
@@ -48,7 +50,7 @@
<!--Shared Icon-->
<div v-if="$checkPermission('master') && entry.data.relationships.shared">
<link-icon size="12" class="mr-1.5 stroke-current text-theme dark-text-theme"/>
<link-icon size="12" class="mr-1.5 text-theme dark-text-theme vue-feather"/>
</div>
<!--File & Image sub line-->
@@ -65,10 +67,11 @@
<!-- Mobile item action button-->
<div v-if="! isMultiSelectMode" class="block pr-1 flex-grow text-right md:hidden">
<MoreVerticalIcon @mousedown.stop="showItemActions" size="16" class="text-theme dark-text-theme inline-block transform scale-110" />
<MoreVerticalIcon @mousedown.stop="showItemActions" size="16" class="vue-feather text-theme dark-text-theme inline-block transform scale-110" />
</div>
</div>
</template>
<script>
import {LinkIcon, MoreVerticalIcon} from 'vue-feather-icons'
import FolderIcon from '/resources/js/components/FilesView/FolderIcon'