Skip to content

Commit

Permalink
Update Explorer.vue
Browse files Browse the repository at this point in the history
  • Loading branch information
@hughsaffar
hughsaffar committed Jun 30, 2024
1 parent f1e7f8f commit 13971e3
Showing 1 changed file with 106 additions and 23 deletions.
129 changes: 106 additions & 23 deletions src/components/Explorer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,54 @@
<template>
<div class="relative flex-auto flex flex-col">
<div v-if="app.view === 'list' || searchQuery.length" class="grid grid-cols-12 px-1 bg-neutral-50 dark:bg-gray-800 border-b border-neutral-300 dark:border-gray-700 text-xs select-none divide-x">
<div @click="sortBy('basename')" class="col-span-7 vf-sort-button">
<div class="vuefinder__explorer__container">
<div v-if="app.view === 'list' || searchQuery.length" class="vuefinder__explorer__header">
<div @click="sortBy('basename')" class="vuefinder__explorer__sort-button vuefinder__explorer__sort-button--name vf-sort-button">
{{ t('Name') }} <SortIcon :direction="sort.order" v-show="sort.active && sort.column === 'basename'"/>
</div>
<div v-if="!searchQuery.length" @click="sortBy('file_size')" class="justify-center col-span-2 vf-sort-button">
<div v-if="!searchQuery.length" @click="sortBy('file_size')" class="vuefinder__explorer__sort-button vuefinder__explorer__sort-button--size vf-sort-button">
{{ t('Size') }} <SortIcon :direction="sort.order" v-show="sort.active && sort.column === 'file_size'"/>
</div>
<div v-if="!searchQuery.length" @click="sortBy('last_modified')" class="justify-center col-span-3 vf-sort-button">
<div v-if="!searchQuery.length" @click="sortBy('last_modified')" class="vuefinder__explorer__sort-button vuefinder__explorer__sort-button--date vf-sort-button">
{{ t('Date') }} <SortIcon :direction="sort.order" v-show="sort.active && sort.column === 'last_modified'"/>
</div>
<div v-if="searchQuery.length" @click="sortBy('path')" class="justify-center col-span-5 vf-sort-button">
<div v-if="searchQuery.length" @click="sortBy('path')" class="vuefinder__explorer__sort-button vuefinder__explorer__sort-button--path vf-sort-button">
{{ t('Filepath') }} <SortIcon :direction="sort.order" v-show="sort.active && sort.column === 'path'"/>
</div>
</div>

<div class="relative">
<div class="vuefinder__explorer__drag-item">
<DragItem ref="dragImage" :count="ds.getCount()"/>
</div>

<div :ref="ds.scrollBarContainer" class="vf-explorer-scrollbar-container" :class="[{'grid-view': app.view === 'grid'}, {'search-active': searchQuery.length}]">
<div :ref="ds.scrollBar" class="w-5 bg-transparent pointer-events-none"></div>
<div :ref="ds.scrollBarContainer" class="vf-explorer-scrollbar-container vuefinder__explorer__scrollbar-container" :class="[{'grid-view': app.view === 'grid'}, {'search-active': searchQuery.length}]">
<div :ref="ds.scrollBar" class="vuefinder__explorer__scrollbar"></div>
</div>

<div :ref="ds.area"
class="h-full w-full text-xs p-1 vf-explorer-scrollbar vf-selector-area z-0 overflow-y-auto"
class="vuefinder__explorer__selector-area vf-explorer-scrollbar vf-selector-area"
@contextmenu.self.prevent="app.emitter.emit('vf-contextmenu-show',{event: $event, items: ds.getSelected()})"
>

<!-- Search View -->
<Item v-if="searchQuery.length" v-for="(item, index) in getItems()"
:item="item" :index="index" :dragImage="dragImage" class="vf-item vf-item-list">
<div class="grid grid-cols-12 items-center">
<div class="flex col-span-7 items-center">
<div class="vuefinder__explorer__item-list-content">
<div class="vuefinder__explorer__item-list-name">
<ItemIcon :type="item.type" :small="app.compactListView"/>
<span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.basename }}</span>
<span class="vuefinder__explorer__item-name">{{ item.basename }}</span>
</div>
<div class="col-span-5 overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.path }}</div>
<div class="vuefinder__explorer__item-path">{{ item.path }}</div>
</div>
</Item>
<!-- List View -->
<Item v-if="app.view==='list' && !searchQuery.length" v-for="(item, index) in getItems()"
:item="item" :index="index" :dragImage="dragImage" class="vf-item vf-item-list" draggable="true" :key="item.path">
<div class="grid grid-cols-12 items-center">
<div class="flex col-span-7 items-center">
<div class="vuefinder__explorer__item-list-content">
<div class="vuefinder__explorer__item-list-name">
<ItemIcon :type="item.type" :small="app.compactListView"/>
<span class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ item.basename }}</span>
<span class="vuefinder__explorer__item-name">{{ item.basename }}</span>
</div>
<div class="col-span-2 text-center">{{ item.file_size ? app.filesize(item.file_size) : '' }}</div>
<div class="col-span-3 overflow-ellipsis overflow-hidden whitespace-nowrap px-1 md:px-3">
<div class="vuefinder__explorer__item-size">{{ item.file_size ? app.filesize(item.file_size) : '' }}</div>
<div class="vuefinder__explorer__item-date">
{{ datetimestring(item.last_modified) }}
</div>
</div>
Expand All @@ -57,18 +57,18 @@
<Item v-if="app.view==='grid' && !searchQuery.length" v-for="(item, index) in getItems(false)"
:item="item" :index="index" :dragImage="dragImage" class="vf-item vf-item-grid" draggable="true">
<div>
<div class="relative">
<div class="vuefinder__explorer__item-grid-content">
<img src="data:image/png;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
class="lazy h-10 md:h-12 m-auto" v-if="(item.mime_type ?? '').startsWith('image') && app.showThumbnails"
class="vuefinder__explorer__item-thumbnail lazy" v-if="(item.mime_type ?? '').startsWith('image') && app.showThumbnails"
:data-src="app.requester.getPreviewUrl(app.fs.adapter, item)" :alt="item.basename" :key="item.path">
<ItemIcon :type="item.type" v-else/>
<div class="absolute hidden md:block top-1/2 w-full text-center text-neutral-500"
<div class="vuefinder__explorer__item-extension"
v-if="!((item.mime_type ?? '').startsWith('image') && app.showThumbnails) && item.type !== 'dir'" >
{{ ext(item.extension) }}
</div>
</div>
<span class="break-all">{{ title_shorten(item.basename) }}</span>
<span class="vuefinder__explorer__item-title break-all">{{ title_shorten(item.basename) }}</span>
</div>
</Item>
</div>
Expand All @@ -77,6 +77,89 @@
</div>
</template>
<style>
.vuefinder__explorer__container {
@apply relative flex-auto flex flex-col;
}
.vuefinder__explorer__header {
@apply grid grid-cols-12 px-1 bg-neutral-50 dark:bg-gray-800 border-b border-neutral-300 dark:border-gray-700 text-xs select-none divide-x;
}
.vuefinder__explorer__sort-button {
@apply cursor-pointer;
}
.vuefinder__explorer__sort-button--name {
@apply col-span-7;
}
.vuefinder__explorer__sort-button--size {
@apply justify-center col-span-2;
}
.vuefinder__explorer__sort-button--date {
@apply justify-center col-span-3;
}
.vuefinder__explorer__sort-button--path {
@apply justify-center col-span-5;
}
.vuefinder__explorer__drag-item {
@apply relative;
}
.vuefinder__explorer__scrollbar-container {
@apply relative;
}
.vuefinder__explorer__scrollbar {
@apply w-5 bg-transparent pointer-events-none;
}
.vuefinder__explorer__selector-area {
@apply h-full w-full text-xs p-1 z-0 overflow-y-auto;
}
.vuefinder__explorer__item-list-content {
@apply grid grid-cols-12 items-center;
}
.vuefinder__explorer__item-list-name {
@apply flex col-span-7 items-center;
}
.vuefinder__explorer__item-name,
.vuefinder__explorer__item-path {
@apply overflow-ellipsis overflow-hidden whitespace-nowrap;
}
.vuefinder__explorer__item-size {
@apply col-span-2 text-center;
}
.vuefinder__explorer__item-date {
@apply col-span-3 overflow-ellipsis overflow-hidden whitespace-nowrap px-1 md:px-3;
}
.vuefinder__explorer__item-grid-content {
@apply relative;
}
.vuefinder .vuefinder__explorer__item-thumbnail {
@apply h-10 md:h-12 m-auto;
}
.vuefinder .vuefinder__explorer__item-extension {
@apply absolute hidden md:block top-1/2 w-full text-center text-neutral-500;
}
.vuefinder__explorer__item-title {
@apply break-all;
}
</style>
<script setup>
import {inject, onBeforeUnmount, onMounted, onUpdated, reactive, ref} from 'vue';
import datetimestring from '../utils/datetimestring.js';
Expand Down

0 comments on commit 13971e3

Please sign in to comment.