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

Navbar rework, several CSS fixes, Markdown preferences

Browse Source
This commit is contained in:
Peaceultime
2025-02-01 10:58:52 +01:00
parent 8fc1855ae6
commit af317cb0e3
15 changed files with 240 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/base/Avatar.vue
View File

@@ -1,5 +1,5 @@
<template>
<AvatarRoot class="inline-flex h-12 w-12 select-none items-center justify-center overflow-hidden align-middle">
<AvatarRoot class="inline-flex select-none items-center justify-center overflow-hidden align-middle" :class="SIZES[size]">
<AvatarImage class="h-full w-full object-cover" :src="src" asChild @loading-status-change="(status) => loading = status === 'loading'">
<img :src="src" />
</AvatarImage>
@@ -13,10 +13,18 @@
<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
const { src, icon, text } = defineProps<{
const { src, icon, text, size = 'medium' } = defineProps<{
src: string
icon?: string
text?: string
size?: keyof typeof SIZES
}>();
const loading = ref(true);
</script>
<script lang="ts">
const SIZES = {
'small': 'h-6',
'medium': 'h-10',
'large': 'h-16',
};
</script>

2
components/base/DraggableTree.vue
View File

@@ -1,6 +1,6 @@
<template>
<TreeRoot v-bind="forward" v-slot="{ flattenItems }" class="list-none select-none text-light-100 dark:text-dark-100 overflow-auto max-h-full">
<DraggableTreeItem v-for="item in flattenItems" :key="item._id" v-bind="item" class="flex items-center outline-none relative cursor-pointer hover:bg-light-20 dark:hover:bg-dark-20 data-[selected]:bg-light-35 dark:data-[selected]:bg-dark-35" @select.prevent @toggle.prevent>
<DraggableTreeItem v-for="item in flattenItems" :key="item._id" v-bind="item" class="group flex items-center outline-none relative cursor-pointer max-w-full" @select.prevent @toggle.prevent>
<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, isDraggedOver }">
<slot :handleToggle="handleToggle"
:handleSelect="handleSelect"

13
components/base/HoverCard.vue
View File

@@ -4,7 +4,7 @@
<slot></slot>
</HoverCardTrigger>
<HoverCardPortal v-if="!disabled">
<HoverCardContent :class="$attrs.class" :side="side" :align="align" class="max-h-[var(--radix-hover-card-content-available-height)] data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 p-5 data-[state=open]:transition-all text-light-100 dark:text-dark-100" >
<HoverCardContent :class="$attrs.class" :side="side" :align="align" avoidCollisions :collisionPadding="20" class="max-h-[var(--radix-hover-card-content-available-height)] data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 p-5 data-[state=open]:transition-all text-light-100 dark:text-dark-100" >
<slot name="content"></slot>
<HoverCardArrow class="fill-light-35 dark:fill-dark-35" />
</HoverCardContent>
@@ -22,4 +22,15 @@ const { delay = 500, disabled = false, side = 'bottom', align = 'center', trigge
}>();
const emits = defineEmits(['open']);
const canOpen = ref(true);
if(triggerKey)
{
const magicKeys = useMagicKeys();
const keys = magicKeys[triggerKey];
watch(keys, (v) => {
canOpen.value = v;
}, { immediate: true, });
}
</script>

2
components/base/Select.vue
View File

@@ -12,7 +12,7 @@
<SelectPortal :disabled="disabled">
<SelectContent :position="position"
class="min-w-[160px] bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] z-40">
class="min-w-[160px] bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] z-50">
<SelectScrollUpButton>
<Icon icon="radix-icons:chevron-up" />
</SelectScrollUpButton>

4
components/base/Tree.vue
View File

@@ -1,6 +1,6 @@
<template>
<TreeRoot v-slot="{ flattenItems }" class="list-none select-none text-light-100 dark:text-dark-100 p-2 xl:text-base text-sm" :items="model" :get-key="getKey" :defaultExpanded="flatten(model)">
<TreeItem v-for="item in flattenItems" v-slot="{ isExpanded }" :key="item._id" :style="{ 'padding-left': `${item.level - 0.5}em` }" v-bind="item.bind" class="flex items-center px-2 outline-none relative cursor-pointer">
<TreeRoot v-slot="{ flattenItems }" class="list-none select-none text-light-100 dark:text-dark-100 text-sm" :items="model" :get-key="getKey" :defaultExpanded="flatten(model)">
<TreeItem v-for="item in flattenItems" v-slot="{ isExpanded }" :key="item._id" :style="{ 'padding-left': `${item.level / 2 - 0.5}em` }" v-bind="item.bind" class="flex items-center ps-2 outline-none relative cursor-pointer">
<slot :isExpanded="isExpanded" :item="item" />
</TreeItem>
</TreeRoot>