feat: File list hover layout done.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "frontend",
-  "version": "0.99.6",
+  "version": "0.99.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "frontend",
-      "version": "0.99.6",
+      "version": "0.99.7",
       "dependencies": {
         "autoprefixer": "^10.4.13",
         "axios": "^1.2.2",

src/views/Files/index.vue

@@ -2,11 +2,11 @@
   <div class="container pt-4 2xl:max-w-none">
     <!-- Recently Used -->
     <section class="mb-4">
-      <h2 class="font-bold py-4 mb-4 border-b border-neutral-500">Recently Used</h2>
+      <h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">Recently Used</h2>
       <!-- card group 最多六個-->
       <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[192px] scrollbar pb-4">
         <!-- card item v-for -->
-        <li class="w-[216px] min-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" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)">
+        <li class="w-[216px] min-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" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" >
           <div>
             <span class="material-symbols-outlined mb-2 text-[32px] block">
               {{ file.icon }}
@@ -25,10 +25,17 @@
       </ul>
     </section>
     <section>
-      <div class="py-4 mb-4 border-b flex justify-between items-center border-neutral-500">
+      <div class="h-12 mb-4 border-b flex justify-between items-center border-neutral-500">
         <h2 class="font-bold">All Files</h2>
-        <ul class="flex items-center">
+        <ul class="flex items-center gap-x-4">
-          <li class="mr-4 cursor-pointer" @click="switchListOrGrid = false">
+          <li v-show="isActive !== null" class="animate-fadein">
+            <ul class="flex justify-center items-center gap-x-4 px-4 py-1 rounded-full bg-neutral-200 text-neutral-700">
+              <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename">edit_square</span></li>
+              <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary">download</span></li>
+              <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary">delete</span></li>
+            </ul>
+          </li>
+          <li class="cursor-pointer" @click="switchListOrGrid = false">
             <IconList class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconList>
           </li>
           <li class="cursor-pointer" @click="switchListOrGrid = true">
@@ -38,18 +45,26 @@
       </div>
       <!-- All Files type of List -->
       <div class="overflow-y-scroll overflow-x-hidden scrollbar -mx-2 max-h-[calc(100vh_-_480px)]" v-if="!switchListOrGrid">
-        <DataTable :value="allFiles" dataKey="id" tableClass="w-full !border-separate !border-spacing-x-2 text-sm cursor-pointer" breakpoint="0" @row-dblclick="enterDiscover($event.data)">
+        <DataTable :value="allFiles" dataKey="id" tableClass="w-full !border-separate !border-spacing-x-2 text-sm cursor-pointer" :rowClass="setRowClass" breakpoint="0" @row-dblclick="enterDiscover($event.data)" contextmenu v-model:contextMenuSelection="selectedTableFile" @row-contextmenu="onRightClickTable">
           <Column field="name" header="Name" bodyClass="font-medium fileName"  sortable></Column>
           <Column field="parentLog" header="Dependency" bodyClass="text-neutral-500" sortable></Column>
           <Column field="fileType" header="File Type" bodyClass="text-neutral-500 fileType" sortable></Column>
           <Column field="owner.name" header="Owner" bodyClass="text-neutral-500" sortable></Column>
           <Column field="updated_at" header="Last Update" bodyClass="text-neutral-500" sortable></Column>
+          <Column bodyClass="text-neutral-500">
+            <template #body="slotProps">
+              <ul class="opacity-0 group-hover:opacity-100  flex justify-end items-center gap-x-2 text-neutral-700">
+                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename">edit_square</span></li>
+                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary">download</span></li>
+                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary">delete</span></li>
+              </ul>
+            </template>
+          </Column>
         </DataTable>
       </div>
       <!-- All Files type of grid -->
       <ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] scrollbar" v-else>
-      <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"
+      <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" v-for="(file, index) in allFiles" :key="file.id" :class="{ 'bg-primary/10 border-primary': isActive === index}" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" @click="onGridCardClick(file, index)" :id="'li' + index">
-        v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)">
           <div>
             <span class="material-symbols-outlined mb-2 text-[32px] block">
               {{ file.icon }}
@@ -68,7 +83,7 @@
       </ul>
     </section>
     <!-- ContextMenu -->
-    <ContextMenu ref="menu" :model="items" @hide="selectedFile = null">
+    <ContextMenu ref="fileRightMenu" :model="items" @hide="selectedFile = null" class="cursor-pointer">
       <template #item="{ item }">
         <a class="flex align-items-center px-4 py-2 duration-300 hover:bg-primary/20">
           <span class="material-symbols-outlined">{{ item.icon }}</span>
@@ -97,8 +112,11 @@
   export default {
     data() {
       return {
+        isActive: null,
+        isHover: null,
         switchListOrGrid: false,
-        selectedFile: null,
+        selectedTableFile: null, // table 右鍵選單 item
+        selectedFile: null, // 右鍵選單 item
         selectedType: null,
         selectedId: null,
         items: [
@@ -150,6 +168,12 @@
           sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base));
           return sortFiles;
         }
+        // let data = [ { "type": "log-check", "id": 315460235, "name": "改名 - log-check 2", "parent": { "type": "log", "id": 306508330, "name": "改名 - log 5" }, "owner": { "username": "dsp", "name": "DSP, Inc" }, "updated_at": "2024-01-11 16:35", "accessed_at": "2024-01-12 11:02", "is_deleted": false, "icon": "local_police", "parentLog": "改名 - log 5", "fileType": "Rule", "ownerName": "DSP, Inc", "updated_base": "2024-01-11T16:35:55.922892+08:00", "accessed_base": "2024-01-12T11:02:46.979212+08:00" }, { "type": "filter-check", "id": 428974306, "name": "改名 - filter-check 2", "parent": { "type": "filter", "id": 308980935, "name": "改名 - filter 2" }, "owner": { "username": "dsp", "name": "DSP, Inc" }, "updated_at": "2024-01-11 16:35", "accessed_at": "2024-01-11 12:25", "is_deleted": false, "icon": "local_police", "parentLog": "改名 - filter 2", "fileType": "Rule", "ownerName": "DSP, Inc", "updated_base": "2024-01-11T16:35:40.524919+08:00", "accessed_base": "2024-01-11T12:25:37.345564+08:00" }, ]
+        // if(data.length !== 0){
+        //   let sortFiles = Array.from(data);
+        //   sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base));
+        //   return sortFiles;
+        // }
       },
       /**
        * 時間排序，如果沒有 accessed_at 就不加入 data
@@ -162,8 +186,11 @@
       },
     },
     methods: {
-      rename() {
+      /**
-        renameModal(this.store.rename, this.selectedType, this.selectedId);
+       * Set Row Style
+       */
+      setRowClass() {
+        return ['group']
       },
       /**
        * 選擇該 files 進入 Discover/Compare/Design 頁面
@@ -210,12 +237,29 @@
       onRightClick(event, file) {
         this.selectedType = file.type;
         this.selectedId = file.id;
-        this.$refs.menu.show(event)
+        this.$refs.fileRightMenu.show(event)
+      },
+      onRightClickTable(event) {
+        this.selectedType = event.data.type;
+        this.selectedId = event.data.id;
+        this.$refs.fileRightMenu.show(event.originalEvent)
+      },
+      onGridCardClick(file, index) {
+        this.selectedType = file.type;
+        this.selectedId = file.id;
+        this.isActive = index;
+      },
+      rename() {
+        renameModal(this.store.rename, this.selectedType, this.selectedId);
       },
     },
     mounted() {
       this.isLoading = true;
       this.store.fetchAllFiles();
+      window.addEventListener('click', (e) => {
+        const clickedLi = e.target.closest('li');
+        if(!clickedLi || !clickedLi.id.startsWith('li')) this.isActive = null;
+      })
       this.isLoading = false;
     },
   }
@@ -226,10 +270,10 @@
   @apply sticky top-0 bg-neutral-10
 }
 :deep(table th) {
-  @apply border-b !border-neutral-500 p-3 text-left font-black !bg-neutral-10 whitespace-nowrap break-keep overflow-hidden text-ellipsis
+  @apply border-b !border-neutral-500 !p-2 text-left font-black !bg-neutral-10 whitespace-nowrap break-keep overflow-hidden text-ellipsis
 }
 :deep(table td) {
-  @apply border-b border-neutral-300 p-3 whitespace-nowrap break-keep overflow-hidden text-ellipsis
+  @apply border-b border-neutral-300 !p-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis
 }
 :deep(tbody > tr) {
   @apply duration-300 cursor-pointer hover:bg-primary/10 focus:!outline-none

tailwind.config.js

@@ -57,6 +57,11 @@ module.exports = {
           '50%': { opacity: '0.5' },
           '100%': { opacity: '1' },
         },
+        'fadeout': {
+          '0%': { opacity: '1' },
+          '0%': { opacity: '0.5' },
+          '0%': { opacity: '0' },
+        },
         'edit': {
           '0%, 100%': { transform: 'rotate(0deg)' },
           '25%': { transform: 'rotate(9deg)' },
@@ -65,6 +70,7 @@ module.exports = {
       },
       animation: {
         'fadein': 'fadein 1s ease-in-out',
+        'fadeout': 'fadeout 1s ease-in-out',
         'edit': 'edit 0.6s ease'
       },
     },