You've already forked obsidian-visualiser
Progressing on the CSS rework
This commit is contained in:
@@ -12,9 +12,9 @@ if(!isNaN(project.value))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tree-item">
|
||||
<div class="tree-item-children">
|
||||
<NavigationLink v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
|
||||
<div class="relative flex-auto">
|
||||
<div class="absolute top-0 bottom-0 left-0 right-0 overflow-auto px-4">
|
||||
<NavigationLink class="ps-2" v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -15,28 +15,24 @@ const collapsed = ref(!unifySlug(useRoute().params.slug).startsWith(props.link.p
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tree-item" v-if="project && !isNaN(project)">
|
||||
<div class="py-1" v-if="project && !isNaN(project)">
|
||||
<template v-if="hasChildren">
|
||||
<div class="tree-item-self"
|
||||
:class="{ 'is-collapsed': collapsed, 'mod-collapsible is-clickable': hasChildren }"
|
||||
data-path="{{ props.link.title }}" @click="collapsed = hasChildren && !collapsed"
|
||||
:data-type="link.private ? 'privé' : undefined">
|
||||
<div v-if="hasChildren" class="tree-item-icon collapse-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="svg-icon right-triangle">
|
||||
<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 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="tree-item-inner">{{ link.title }}</div>
|
||||
<div class="font-semibold">{{ link.title }}</div>
|
||||
</div>
|
||||
<div v-if="!collapsed" class="tree-item-children">
|
||||
<NavigationLink v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
|
||||
<div v-if="!collapsed">
|
||||
<NavigationLink 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 class="tree-item-self" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
|
||||
:active-class="'mod-active'" :data-type="(link.type === 'Canvas' ? 'graph' : (link.private ? 'privé' : undefined))">
|
||||
<div class="tree-item-inner">{{ link.title }}</div>
|
||||
<NuxtLink v-else class="text-light-100 dark:text-dark-100 cursor-pointer hover:text-opacity-75" :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>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,32 +1,24 @@
|
||||
<template>
|
||||
<Teleport to="#teleports" v-if="display && (!fetched || loaded)">
|
||||
<div class="popover hover-popover" :class="{'is-loaded': fetched}" :style="pos"
|
||||
<div class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] overflow-auto bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100" :class="{'is-loaded': fetched}" :style="pos"
|
||||
@mouseenter="debounce(show, 250)" @mouseleave="debounce(() => display = false, 250)">
|
||||
<div v-if="pending" class="loading"></div>
|
||||
<template v-else-if="content !==''">
|
||||
<div v-if="type === 'Markdown'" class=" markdown-embed">
|
||||
<div class="markdown-embed-content">
|
||||
<div class="markdown-preview-view markdown-rendered node-insert-event hide-title">
|
||||
<div class="markdown-preview-sizer markdown-preview-section">
|
||||
<h1>{{ title }}</h1>
|
||||
<Markdown v-model="content"></Markdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type === 'Markdown'" class="p-6">
|
||||
<ProseH1>{{ title }}</ProseH1>
|
||||
<Markdown v-model="content"></Markdown>
|
||||
</div>
|
||||
<div v-else-if="type === 'Canvas'" class="canvas-embed is-loaded">
|
||||
<div v-else-if="type === 'Canvas'" class="">
|
||||
<CanvasRenderer :canvas="JSON.parse(content) " />
|
||||
</div>
|
||||
<div class="not-found-container" v-else>
|
||||
<div class="not-found-image"></div>
|
||||
<div class="not-found-title">Fichier vide</div>
|
||||
<div class="not-found-description">Cette page est vide</div>
|
||||
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
|
||||
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Fichier vide</div>
|
||||
<div class="text-lg text-light-60 dark:text-dark-60">Cette page est vide</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="not-found-container" v-else>
|
||||
<div class="not-found-image"></div>
|
||||
<div class="not-found-title">Impossible d'afficher</div>
|
||||
<div class="not-found-description">Cette page est impossible à traiter</div>
|
||||
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
|
||||
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher</div>
|
||||
<div class="text-lg text-light-60 dark:text-dark-60">Cette page est impossible à traiter</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
Reference in New Issue
Block a user