Skip to content

Commit

Permalink
Update Breadcrumb.vue
Browse files Browse the repository at this point in the history
  • Loading branch information
@hughsaffar
hughsaffar committed Jun 30, 2024
1 parent 56f9c02 commit a663216
Showing 1 changed file with 102 additions and 23 deletions.
125 changes: 102 additions & 23 deletions src/components/Breadcrumb.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
<template>
<div
class="space-x-0.5 flex p-1.5 bg-neutral-100 dark:bg-gray-800 border-t border-b border-neutral-300 dark:border-gray-700/50 items-center select-none text-sm grow-0">
<div class="vuefinder__breadcrumb__container">
<span :title="t('Toggle Tree View')">
<ListTreeSVG
@click="toggleTreeView"
class="h-6 w-6 p-0.5 rounded cursor-pointer text-slate-700 "
:class="app.showTreeView ? 'bg-gray-300 dark:bg-gray-700' : ''"
class="vuefinder__breadcrumb__toggle-tree"
:class="app.showTreeView ? 'vuefinder__breadcrumb__toggle-tree--active' : ''"
/>
</span>

Expand All @@ -15,7 +14,7 @@
@dragleave="handleDragLeave($event)"
@drop="handleDropZone($event)"
@click="handleGoUp"
:class="app.fs.isGoUpAvailable() ? 'text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer' : 'text-gray-400 dark:text-neutral-500'"
:class="app.fs.isGoUpAvailable() ? 'vuefinder__breadcrumb__go-up--active' : 'vuefinder__breadcrumb__go-up--inactive'"
/>
</span>

Expand All @@ -26,7 +25,7 @@
<CloseSVG @click="app.emitter.emit('vf-fetch-abort')"/>
</span>

<div v-show="!app.fs.searchMode" @click.self="enterSearchMode" class="group flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full overflow-hidden">
<div v-show="!app.fs.searchMode" @click.self="enterSearchMode" class="group vuefinder__breadcrumb__search-container">
<div>
<HomeSVG
@dragover="handleDragOver($event)"
Expand All @@ -35,38 +34,36 @@
@click="app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.fs.adapter}})"/>
</div>

<div class="flex leading-6">
<div v-if="app.fs.hiddenBreadcrumbs.length" class="flex" v-click-outside="handleClickOutside">
<div class="text-neutral-300 dark:text-gray-600 mx-0.5">/</div>
<div class="vuefinder__breadcrumb__list">
<div v-if="app.fs.hiddenBreadcrumbs.length" class="vuefinder__breadcrumb__hidden-list" v-click-outside="handleClickOutside">
<div class="vuefinder__breadcrumb__separator">/</div>
<div class="relative">
<span
@dragenter="app.fs.toggleHiddenBreadcrumbs(true)"
@click="app.fs.toggleHiddenBreadcrumbs()"
class="text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer">
<DotsSVG class="px-1 pointer-events-none" />
class="vuefinder__breadcrumb__hidden-toggle">
<DotsSVG class="vuefinder__breadcrumb__hidden-toggle-icon" />
</span>
</div>
</div>
</div>

<div ref="breadcrumbContainer" class="flex leading-6 w-full overflow-hidden" @click.self="enterSearchMode">
<div ref="breadcrumbContainer" class="vuefinder__breadcrumb__visible-list" @click.self="enterSearchMode">
<div v-for="(item, index) in app.fs.breadcrumbs" :key="index">
<span class="text-neutral-300 dark:text-gray-600 mx-0.5">/</span>
<span class="vuefinder__breadcrumb__separator">/</span>
<span
@dragover="(index === app.fs.breadcrumbs.length - 1) || handleDragOver($event)"
@dragleave="(index === app.fs.breadcrumbs.length - 1) || handleDragLeave($event)"
@drop="(index === app.fs.breadcrumbs.length - 1) || handleDropZone($event, index)"
class="px-1.5 py-1 text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer whitespace-nowrap"
class="vuefinder__breadcrumb__item"
:title="item.basename"
@click="app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.fs.adapter, path:item.path}})">{{
item.name
}}</span>
@click="app.emitter.emit('vf-fetch', {params:{q: 'index', adapter: app.fs.adapter, path:item.path}})">{{ item.name }}</span>
</div>
</div>

<LoadingSVG v-if="app.fs.loading"/>
</div>
<div v-show="app.fs.searchMode" class="relative flex bg-white dark:bg-gray-700 justify-between items-center rounded p-1 ml-2 w-full">
<div v-show="app.fs.searchMode" class="vuefinder__breadcrumb__search-mode">
<div>
<SearchSVG />
</div>
Expand All @@ -76,28 +73,110 @@
@blur="handleBlur"
v-model="query"
:placeholder="t('Search anything..')"
class="w-full pb-0 px-1 border-0 text-base ring-0 outline-0 text-gray-600 focus:ring-transparent focus:border-transparent dark:focus:ring-transparent dark:focus:border-transparent dark:text-gray-300 bg-transparent"
class="vuefinder__breadcrumb__search-input"
type="text">
<ExitSVG @click="exitSearchMode"/>
</div>

<div v-show="app.fs.showHiddenBreadcrumbs"
class="z-30 absolute top-[65px] md:top-[75px] left-[90px] rounded -mx-1.5 mt-1 bg-neutral-50 dark:bg-gray-800 max-w-80 max-h-50 shadow overflow-y-auto text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600">
class="vuefinder__breadcrumb__hidden-dropdown">
<div
v-for="(item, index) in app.fs.hiddenBreadcrumbs" :key="index"
@dragover="handleDragOver($event)"
@dragleave="handleDragLeave($event)"
@drop="handleHiddenBreadcrumbDropZone($event, index)"
@click="handleHiddenBreadcrumbsClick(item)"
class="px-2 py-0.5 hover:bg-gray-400/20 cursor-pointer items-center whitespace-nowrap" >
<div class="flex pointer-events-none">
<span><FolderSVG class="h-5 w-5" /></span> <span class="inline-block w-full text-ellipsis overflow-hidden">{{ item.name}}</span>
class="vuefinder__breadcrumb__hidden-item">
<div class="vuefinder__breadcrumb__hidden-item-content">
<span><FolderSVG class="vuefinder__breadcrumb__hidden-item-icon" /></span> <span class="vuefinder__breadcrumb__hidden-item-text">{{ item.name}}</span>
</div>
</div>
</div>
</div>
</template>

<style>
.vuefinder__breadcrumb__container {
@apply space-x-0.5 flex p-1.5 bg-neutral-100 dark:bg-gray-800 border-t border-b border-neutral-300 dark:border-gray-700/50 items-center select-none text-sm grow-0;
}
.vuefinder__breadcrumb__toggle-tree {
@apply h-6 w-6 p-0.5 rounded cursor-pointer text-slate-700;
}
.vuefinder__breadcrumb__toggle-tree--active {
@apply bg-gray-300 dark:bg-gray-700;
}
.vuefinder__breadcrumb__go-up--active {
@apply text-slate-700 hover:bg-neutral-300 dark:text-neutral-200 dark:hover:bg-gray-700 cursor-pointer;
}
.vuefinder__breadcrumb__go-up--inactive {
@apply text-gray-400 dark:text-neutral-500;
}
.vuefinder__breadcrumb__search-container {
@apply flex bg-white dark:bg-gray-700 items-center rounded p-1 ml-2 w-full overflow-hidden;
}
.vuefinder__breadcrumb__list {
@apply flex leading-6;
}
.vuefinder__breadcrumb__hidden-list {
@apply flex;
}
.vuefinder__breadcrumb__separator {
@apply text-neutral-300 dark:text-gray-600 mx-0.5;
}
.vuefinder__breadcrumb__hidden-toggle {
@apply text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer;
}
.vuefinder__breadcrumb__hidden-toggle-icon {
@apply px-1 pointer-events-none;
}
.vuefinder__breadcrumb__visible-list {
@apply flex leading-6 w-full overflow-hidden;
}
.vuefinder__breadcrumb__item {
@apply px-1.5 py-1 text-slate-700 dark:text-slate-200 hover:bg-neutral-100 dark:hover:bg-gray-800 rounded cursor-pointer whitespace-nowrap;
}
.vuefinder__breadcrumb__search-mode {
@apply relative flex bg-white dark:bg-gray-700 justify-between items-center rounded p-1 ml-2 w-full;
}
.vuefinder__breadcrumb__search-input {
@apply w-full pb-0 px-1 border-0 text-base ring-0 outline-0 text-gray-600 focus:ring-transparent focus:border-transparent dark:focus:ring-transparent dark:focus:border-transparent dark:text-gray-300 bg-transparent;
}
.vuefinder__breadcrumb__hidden-dropdown {
@apply z-30 absolute top-[65px] md:top-[75px] left-[90px] rounded -mx-1.5 mt-1 bg-neutral-50 dark:bg-gray-800 max-w-80 shadow overflow-y-auto text-gray-700 dark:text-gray-200 border border-neutral-300 dark:border-gray-600;
}
.vuefinder__breadcrumb__hidden-item {
@apply px-2 py-0.5 hover:bg-gray-400/20 cursor-pointer items-center whitespace-nowrap;
}
.vuefinder__breadcrumb__hidden-item-content {
@apply flex pointer-events-none;
}
.vuefinder .vuefinder__breadcrumb__hidden-item-icon {
@apply h-5 w-5;
}
.vuefinder .vuefinder__breadcrumb__hidden-item-text {
@apply inline-block w-full text-ellipsis overflow-hidden;
}
</style>

<script setup>
import {inject, nextTick, onMounted, ref, watch} from 'vue';
import useDebouncedRef from '../composables/useDebouncedRef.js';
Expand Down

0 comments on commit a663216

Please sign in to comment.