imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test: Enter Compare & Anchor done.

Browse Source
This commit is contained in:
chiayin
2024-02-22 16:51:49 +08:00
parent f7c76fd1f7
commit b6bd1e878e
6 changed files with 103 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/Files/index.vue
View File

@@ -7,7 +7,7 @@
<h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">Performance Comparison</h2>
<div class="flex justify-start items-center gap-4 w-full h-[184px] scrollbar pb-4">
<!-- primaryDrag -->
<div class="relative w-[216px] min-w-[216px] h-full">
<div class="relative w-[216px] min-w-[216px] h-full" id="primaryDragCard">
<div v-if="primaryDragData.length === 0" class="w-full h-full p-4 border rounded border-neutral-300 duration-300 text-neutral-500 absolute">
<div class="h-full flex flex-col justify-center items-center gap-4">
<p class="text-4xl font-black">1</p>
@@ -38,8 +38,8 @@
<!-- delete icon -->
<span v-show="primaryDragData.length > 0" class="material-symbols-outlined material-fill text-neutral-500 bg-neutral-10 block rounded-full absolute -top-[5%] -right-[5%] z-50 cursor-pointer hover:text-danger" @click="primaryDragDelete">do_not_disturb_on</span>
</div>
<!-- secondaryData -->
<div class="relative w-[216px] min-w-[216px] h-full">
<!-- secondaryDrag -->
<div class="relative w-[216px] min-w-[216px] h-full" id="secondaryDragCard">
<div v-show="secondaryDragData.length === 0" class="w-full h-full p-4 border rounded border-neutral-300 duration-300 text-neutral-500 absolute">
<div class="h-full flex flex-col justify-center items-center gap-4">
<p class="text-4xl font-black">2</p>
@@ -117,8 +117,8 @@
</div>
<!-- All Files type of grid -->
<draggable tag="ul" :list="compareData" :group="{ name: 'files' }" itemKey="name" class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_440px)] scrollbar">
<template #item="{ element }">
<li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" :title="element.name" >
<template #item="{ element, index }">
<li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" :title="element.name" :id="'compareFile' + index">
<div>
<span class="material-symbols-outlined mb-2 !text-[32px] block">
{{ element.icon }}
@@ -556,6 +556,10 @@
if(!clickedLi || !clickedLi.id.startsWith('li')) this.isActive = null;
})
this.isLoading = false;
// document.onmousemove = (e) => {
// console.log('x:', e.pageX);
// console.log('y:', e.pageY);
// }
},
}
</script>