julian/chrono-snap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

expandable tags

Browse Source
This commit is contained in:
Julian Freeman
2026-03-22 22:41:38 -04:00
parent 8f4dfcebe3
commit 928589f749
1 changed files with 20 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/App.vue
View File

@@ -27,6 +27,12 @@ const previewSrc = ref("");
const isFullscreen = ref(false);
const isSettingsOpen = ref(false);
const isTagManagerOpen = ref(false);
const expandedMainTags = ref<number[]>([]);
const toggleMainTag = (id: number) => {
const index = expandedMainTags.value.indexOf(id);
if (index > -1) expandedMainTags.value.splice(index, 1);
else expandedMainTags.value.push(id);
};
const isEventModalOpen = ref(false);
const toast = ref({ message: "", type: "success", visible: false });
@@ -623,8 +629,20 @@ const handleExport = async () => {
<div class="flex-1 overflow-hidden p-10 flex gap-10">
<div class="flex-1 overflow-y-auto space-y-2 pr-4 no-scrollbar">
<div v-for="mt in mainTags" :key="mt.id" class="space-y-2">
<div class="flex items-center justify-between group p-2 hover:bg-[#F2F2F7] rounded-xl"><div class="flex items-center gap-3"><div class="w-4 h-4 rounded-full" :style="{ backgroundColor: mt.color }"></div><span class="font-bold">{{ mt.name }}</span></div><button @click="handleDeleteTag(mt.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="16" /></button></div>
<div class="ml-7 space-y-1"><div v-for="st in getSubTags(mt.id)" :key="st.id" class="flex items-center justify-between group p-1.5 hover:bg-[#F2F2F7] rounded-lg"><span class="text-sm">{{ st.name }}</span><button @click="handleDeleteTag(st.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="14" /></button></div></div>
<div @click="toggleMainTag(mt.id)" class="flex items-center justify-between group p-2 hover:bg-[#F2F2F7] rounded-xl cursor-pointer">
<div class="flex items-center gap-3">
<ChevronRight :size="14" class="text-[#86868B] transition-transform" :class="{ 'rotate-90': expandedMainTags.includes(mt.id) }" />
<div class="w-4 h-4 rounded-full" :style="{ backgroundColor: mt.color }"></div>
<span class="font-bold">{{ mt.name }}</span>
</div>
<button @click.stop="handleDeleteTag(mt.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="16" /></button>
</div>
<div v-if="expandedMainTags.includes(mt.id)" class="ml-7 space-y-1 animate-in fade-in slide-in-from-top-1 duration-200">
<div v-for="st in getSubTags(mt.id)" :key="st.id" class="flex items-center justify-between group p-1.5 hover:bg-[#F2F2F7] rounded-lg">
<span class="text-sm">{{ st.name }}</span>
<button @click="handleDeleteTag(st.id)" class="text-[#FF3B30] opacity-0 group-hover:opacity-100"><Trash2 :size="14" /></button>
</div>
</div>
</div>
</div>
<div class="w-64 bg-[#F2F2F7] p-6 rounded-3xl space-y-4 h-fit">