Peaceultime/obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Graph + Private indicator for navigation + ProseA search improvement

Browse Source
This commit is contained in:
Peaceultime
2024-09-04 17:50:03 +02:00
parent 6d3efea784
commit 85c8fbae0f
6 changed files with 32 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/explorer/NavigationLink.vue
View File

@@ -19,22 +19,27 @@ const emit = defineEmits(['navigate']);
<template>
<div class="py-1" v-if="project && !isNaN(project)">
<template v-if="hasChildren">
<div class="flex gap-2 items-center cursor-pointer hover:text-opacity-75 text-light-100 dark:text-dark-100" @click="collapsed = hasChildren && !collapsed" :data-type="link.private ? 'privé' : undefined">
<div class="flex gap-2 items-center cursor-pointer hover:text-opacity-75 text-light-100 dark:text-dark-100
data-[type]:after:content-[attr(data-type)] data-[type]:after:border data-[type]:after:border-light-35 data-[type]:dark:after:border-dark-35
data-[type]:after:text-sm data-[type]:after:px-1 data-[type]:after:bg-light-20 data-[type]:dark:after:bg-dark-20 data-[type]:after:[font-variant:all-petite-caps]"
@click="collapsed = hasChildren && !collapsed" :data-type="link.private ? 'privé' : undefined">
<div v-if="hasChildren" class="w-4 h-4 transition-transform" :class="{'-rotate-90': collapsed}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 8L12 17L21 8"></path>
</svg>
</div>
<div class="font-semibold xl:text-base text-sm">{{ link.title }}</div>
<div class="font-semibold xl:text-base text-sm flex-1">{{ link.title }}</div>
</div>
<div v-if="!collapsed">
<NavigationLink @navigate="e => emit('navigate')" class="border-light-40 dark:border-dark-40 ms-2 ps-4 border-l" v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
</div>
</template>
<NuxtLink v-else @click="e => emit('navigate')" class="text-light-100 dark:text-dark-100 cursor-pointer hover:text-opacity-75 xl:text-base text-sm" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
<NuxtLink v-else @click="e => emit('navigate')" class="text-light-100 dark:text-dark-100 cursor-pointer hover:text-opacity-75 xl:text-base text-sm flex justify-between items-center
data-[type]:after:content-[attr(data-type)] data-[type]:after:border data-[type]:after:border-light-35 data-[type]:dark:after:border-dark-35
data-[type]:after:text-sm data-[type]:after:px-1 data-[type]:after:bg-light-20 data-[type]:dark:after:bg-dark-20 data-[type]:after:[font-variant:all-petite-caps]" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
active-class="!text-accent-blue relative before:border-l-2 before:border-accent-blue before:absolute before:-top-1 before:-bottom-1 before:-left-4 before:-mx-px" :data-type="(link.type === 'Canvas' ? 'graph' : (link.private ? 'privé' : undefined))">
<div class="">{{ link.title }}</div>
<div>{{ link.title }}</div>
</NuxtLink>
</div>
</template>